From 6fdff42ea1931bf3d3a13b93f3a8cb0bedc36f40 Mon Sep 17 00:00:00 2001 From: Kai Piper <kai9987kai@gmail.com> Date: Fri, 10 Nov 2023 13:18:11 +0000 Subject: [PATCH] Update index.html graphics settings --- index.html | 119 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 118 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3c8a342..d902739 100644 --- 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()">×</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