feature: add about icon and popup for project information

Author: sunrayyourdev

index.html

@@ -14,8 +14,12 @@
         <div class="settings-icon">
             <i class="fas fa-cog"></i>
         </div>
+        <!-- Added about icon next to settings icon -->
+        <div class="about-icon">
+            <i class="fas fa-info-circle"></i>
+        </div>
         <div class="config">
-            <span class="page-title">WishSim</span>
+            <span class="page-title">WishSim<sup>v4</sup></span>
             <div class="banners">
                 <button id="venti-button">Venti</button>
                 <button id="standard-button">Standard</button>
@@ -37,12 +41,17 @@
                 <option value="custom">Custom</option>
             </select>
         </div>
-        <!-- New custom URL input container -->
         <div id="custom-url-container" class="input-container" style="display: none;">
             <input type="text" id="custom-url-input" placeholder="Enter image URL">
             <button id="save-custom-url">Save</button>
         </div>
     </div>
+    
+    <div id="about-popup" class="popup" style="display: none;">
+        <span class="close-button">&times;</span>
+        <h2>About This Project</h2>
+        <p>Yes this is the FOURTH time I've built this project. Each time I've learnt something new, which is probably normal and good :D <br/><br/>Anyway, here's the <a href="https://github.com/sunrayyourdev/wish-simulator" target="_blank">repo</a>. Ingat!</p>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -25,6 +25,16 @@ document.querySelector('.popup .close-button').addEventListener('click', functio
     document.getElementById('settings-popup').style.display = 'none';
 });
 
+document.querySelector('.about-icon').addEventListener('click', function(event) {
+    event.stopPropagation();
+    const aboutPopup = document.getElementById('about-popup');
+    aboutPopup.style.display = aboutPopup.style.display === 'none' || aboutPopup.style.display === '' ? 'flex' : 'none';
+});
+
+document.querySelector('#about-popup .close-button').addEventListener('click', function() {
+    document.getElementById('about-popup').style.display = 'none';
+});
+
 window.addEventListener('click', function(event) {
     const popup = document.getElementById('settings-popup');
     if (!popup.contains(event.target)) {

style.css

@@ -29,6 +29,10 @@ body {
     font-size: 2em;
 }
 
+.page-title sup {
+    font-size: 0.5em; /* reduces sup size to 50% of parent */
+}
+
 .page-subtitle {
     font-size: 1.8em;
 }
@@ -82,6 +86,16 @@ button {
     cursor: pointer;
 }
 
+/* New styling for the about icon */
+.about-icon {
+    position: absolute;
+    top: 10px;
+    left: 3rem; /* positioned next to settings icon */
+    font-size: 1.5em;
+    cursor: pointer;
+    color: white;
+}
+
 .popup {
     display: none;
     flex-direction: column;