Update index.html

thingylabs · Dec 22, 2024 · 73da43e · 73da43e
1 parent e5d86ce
commit 73da43e
Showing 1 changed file with 72 additions and 52 deletions.
diff --git a/index.html b/index.html
@@ -13,9 +13,7 @@
             margin-top: 0px;
             line-height: 13px;
         }
-        pre {
-            font-family: monospace;
-        }
+        pre { font-family: monospace; }
         div {
             float: left;
             width: 255px;
@@ -28,7 +26,6 @@
         }
         ul {
             font-size: 12px;
-            margin-top: 20px;
             margin: 0;
         }
         ul > li {
@@ -40,17 +37,13 @@
             border-top: 1px black solid;
             margin: 15px 0;
         }
-        .red {
-            color: red;
-        }
+        .red { color: red; }
         a {
             font-weight: bold;
             text-decoration: none;
             margin: 0;
         }
-        a:hover {
-            color: red;
-        }
+        a:hover { color: red; }
         #foot {
             font-size: 9px;
             text-align: center;
@@ -66,76 +59,95 @@
             font-weight: normal;
         }
 
-        /* Modal styles */
+        /* Improved Modal styles */
         .modal {
-            display: none; /* Ensure modal is hidden by default */
+            visibility: hidden;
+            opacity: 0;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
+            background-color: rgba(0, 0, 0, 0.4);
             display: flex;
             justify-content: center;
             align-items: center;
             z-index: 1000;
+            transition: visibility 0s linear 0.2s, opacity 0.2s;
+        }
+
+        .modal.visible {
+            visibility: visible;
+            opacity: 1;
+            transition-delay: 0s;
         }
 
         .modal-content {
+            background-color: white;
+            border: 1px solid black;
+            padding: 15px;
+            width: 255px;  /* Match your site's width */
             position: relative;
-            background-color: #fff;
-            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
-            border-radius: 8px;
-            padding: 20px;
-            width: 350px;
-            text-align: center;
+            transform: translateY(-20px);
+            transition: transform 0.2s;
+        }
+
+        .modal.visible .modal-content {
+            transform: translateY(0);
+        }
+
+        .modal-header {
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid black;
+        }
+
+        .warning-icon {
+            font-weight: bold;
+            margin-right: 5px;
         }
 
         .close {
             position: absolute;
             right: 15px;
-            top: 10px;
-            font-size: 18px;
-            color: #999;
+            top: 12px;
             cursor: pointer;
-            transition: color 0.3s;
+            font-weight: bold;
         }
 
         .close:hover {
-            color: #333;
+            color: red;
         }
 
-        .modal-content p {
-            margin: 10px 0;
-            font-size: 14px;
-            color: #444;
+        .modal-body {
+            margin-bottom: 15px;
+            line-height: 1.4;
         }
 
         .modal-buttons {
-            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
         }
 
         .btn {
-            border: 1px solid #333;
-            background: #fff;
-            padding: 10px 20px;
-            border-radius: 5px;
-            font-size: 12px;
-            font-weight: bold;
-            color: #333;
+            width: 100%;
+            padding: 6px 12px;
+            background: white;
+            border: 1px solid black;
             cursor: pointer;
-            transition: background 0.3s, color 0.3s;
-            margin-top: 10px; /* Add spacing between buttons */
+            font-family: inherit;
+            font-size: 12px;
+            text-align: center;
         }
 
         .btn:hover {
-            background: #333;
-            color: #fff;
+            background-color: #f0f0f0;
         }
 
-        .warning-icon {
-            font-size: 16px;
-            margin-right: 5px;
+        .btn.danger:hover {
+            color: red;
+            border-color: red;
         }
     </style>
 </head>
@@ -169,25 +181,33 @@
 <!-- Warning Modal -->
 <div id="warningModal" class="modal">
     <div class="modal-content">
-        <span class="close" onclick="closeModal()">&times;</span>
-        <p><span class="warning-icon">⚠</span> Warning</p>
-        <p>You are about to leave the free internet and enter a network operating under EU jurisdiction.</p>
-        <p>For your security, it is recommended to use the Yggdrasil Network to establish a secure connection.</p>
+        <div class="modal-header">
+            <span class="warning-icon">!</span>
+            <strong>Warning</strong>
+            <span class="close" onclick="closeModal()">&times;</span>
+        </div>
+        <div class="modal-body">
+            You are about to leave the free internet and enter a network operating under EU jurisdiction.
+            <br><br>
+            For your security, it is recommended to use the Yggdrasil Network to establish a secure connection.
+        </div>
         <div class="modal-buttons">
-            <button class="btn" onclick="closeModal()">Stay Here</button>
-            <button class="btn" onclick="proceedToSite()">Continue to EU Network</button>
             <button class="btn" onclick="connectViaYgg()">Connect Securely via Ygg</button>
+            <button class="btn danger" onclick="proceedToSite()">Continue to EU Network</button>
+            <button class="btn" onclick="closeModal()">Stay Here</button>
         </div>
     </div>
 </div>
 
 <script>
     function showModal() {
-        document.getElementById('warningModal').style.display = 'flex';
+        const modal = document.getElementById('warningModal');
+        modal.classList.add('visible');
     }
 
     function closeModal() {
-        document.getElementById('warningModal').style.display = 'none';
+        const modal = document.getElementById('warningModal');
+        modal.classList.remove('visible');
     }
 
     function proceedToSite() {
@@ -198,7 +218,7 @@
         window.location.href = 'https://ygg-only.thingylabs.io/';
     }
 
-    // Close modal when clicking outside of it
+    // Close modal when clicking outside
     window.onclick = function(event) {
         const modal = document.getElementById('warningModal');
         if (event.target === modal) {