Update index.html

graphics settings
kai9987kai · Nov 10, 2023 · 6fdff42 · 6fdff42
1 parent 0938790
commit 6fdff42
Showing 1 changed file with 118 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -110,7 +110,124 @@
   // expected output: 1
 }
 </script>	
-
+    <style>
+        .popup {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+        }
+
+        .popup-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 30%;
+        }
+
+        .close-btn, .settings-btn {
+            color: #aaa;
+            font-size: 28px;
+            font-weight: bold;
+        }
+
+        .close-btn:hover,
+        .close-btn:focus,
+        .settings-btn:hover,
+        .settings-btn:focus {
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+        .settings-btn {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            z-index: 2;
+        }
+
+        /* Styles for low and high resolutions */
+        .low-res {
+            font-size: 12px;
+        }
+
+        .high-res {
+            font-size: 18px;
+        }
+
+        /* Styles for textures */
+        .low-texture img {
+            filter: blur(1px); /* Simulating lower quality */
+        }
+
+        .high-texture img {
+            filter: blur(0px); /* High quality */
+        }
+    </style>
+</head>
+<body>
+
+<button class="settings-btn" onclick="openPopup()">⚙️</button>
+
+<div id="graphicsSettingsPopup" class="popup">
+    <div class="popup-content">
+        <span class="close-btn" onclick="closePopup()">&times;</span>
+        <h2>Graphics Settings</h2>
+        <form id="graphicsSettingsForm">
+            <label for="resolution">Resolution:</label>
+            <select id="resolution" name="resolution">
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+            </select>
+
+            <label for="textures">Textures:</label>
+            <select id="textures" name="textures">
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+            </select>
+
+            <button type="button" onclick="applyGraphicsSettings()">Apply</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    function openPopup() {
+        document.getElementById("graphicsSettingsPopup").style.display = "block";
+    }
+
+    function closePopup() {
+        document.getElementById("graphicsSettingsPopup").style.display = "none";
+    }
+
+    function applyGraphicsSettings() {
+        var resolution = document.getElementById("resolution").value;
+        var textures = document.getElementById("textures").value;
+
+        // Apply resolution settings
+        if (!document.body.classList.contains(resolution + '-res')) {
+            document.body.classList.toggle('low-res', resolution === 'low');
+            document.body.classList.toggle('high-res', resolution === 'high');
+        }
+
+        // Apply texture settings
+        if (!document.body.classList.contains(textures + '-texture')) {
+            document.body.classList.toggle('low-texture', textures === 'low');
+            document.body.classList.toggle('high-texture', textures === 'high');
+        }
+
+        closePopup();
+    }
+</script>	   
 	<script>
 window.onload = function() {
   // Select all images