From c79aa5d864585076b79fabfbe3ce999a97616393 Mon Sep 17 00:00:00 2001
From: Aryan Jain <117700812+gitsofaryan@users.noreply.github.com>
Date: Mon, 24 Feb 2025 21:23:47 +0530
Subject: [PATCH] Disclaimer + Styled

---
 frontend/templates/frontend/index.ejs | 67 ++++++++++++++++++---------
 1 file changed, 44 insertions(+), 23 deletions(-)
diff --git a/frontend/templates/frontend/index.ejs b/frontend/templates/frontend/index.ejs
index 65eadca7..1ae6d640 100644
--- a/frontend/templates/frontend/index.ejs
+++ b/frontend/templates/frontend/index.ejs
@@ -6,42 +6,62 @@
     <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.basePath %>static/assets/images/favicon-32x32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.basePath %>static/assets/images/favicon-96x96.png" sizes="96x96">
     <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.basePath %>static/assets/images/favicon-192x192.png" sizes="192x192">
-
+    
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="A simple and private way to exchange bitcoin for national currencies. Robosats simplifies the peer-to-peer user experience and uses lightning hold invoices to minimize custody and trust requirements. No user registration required.">
+    
     <% if (pro) { %>
-    <title>RoboSats PRO - Simple and Private Bitcoin Exchange</title>
-
-    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.basePath %>static/css_pro/fonts.css"/>
-    <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.basePath %>static/css_pro/react-grid-layout.css"/>
-    <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.basePath %>static/css_pro/react-resizable.css"/>
+      <title>RoboSats PRO - Simple and Private Bitcoin Exchange</title>
+      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.basePath %>static/css_pro/fonts.css"/>
+      <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.basePath %>static/css_pro/react-grid-layout.css"/>
+      <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.basePath %>static/css_pro/react-resizable.css"/>
     <% } else { %>
-    <title>RoboSats - Simple and Private Bitcoin Exchange</title>
-
-    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.basePath %>static/css/fonts.css"/>
+      <title>RoboSats - Simple and Private Bitcoin Exchange</title>
+      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.basePath %>static/css/fonts.css"/>
     <% } %>
 
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.basePath %>static/css/loader.css"/>
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.basePath %>static/css/index.css"/>
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.basePath %>static/css/leaflet.css"/>
+    
+    <style>
+      /* Styles for the JavaScript-disabled disclaimer */
+      .noscript-container {
+        max-width: 600px;
+        margin: 40px auto;
+        padding: 20px;
+        border: 2px solid #e74c3c;
+        background-color: #fdecea;
+        color: #c0392b;
+        text-align: center;
+        font-family: Arial, sans-serif;
+      }
+      .noscript-container h2 {
+        margin-top: 0;
+        font-size: 1.8em;
+      }
+      .noscript-container p {
+        font-size: 1.1em;
+        line-height: 1.4;
+      }
+      .noscript-container a {
+        color: #c0392b;
+        text-decoration: underline;
+      }
+    </style>
   </head>
   <body>
-
+    <!-- This block is only rendered if JavaScript is disabled -->
     <noscript>
-      <div>
-        This site requires JavaScript to function properly. <br/><br/>
-        If you're using the Tor Browser, please follow these steps to enable JavaScript:
-        <ul>
-          <li>Click the onion icon in the top left corner of your browser.</li>
-          <li>Navigate to "Security Settings" (the "shield" icon).</li>
-          <li>Set the "Security Level" to "Standard" (not "Safer" or "Safest").</li>
-        </ul>
-        <br/>
-        If you're still encountering issues, try clearing your cache and storage by going to your Tor Browser settings, then retry loading the page.<br/><br/>
-        If you need further assistance, please ask for support in our <a href="https://t.me/robosats">RoboSats Telegram group</a> or visit our FAQ page.
+      <div class="noscript-container">
+        <h2>JavaScript is Disabled</h2>
+        <p>This website requires JavaScript for full functionality. Please enable JavaScript in your browser settings to proceed.</p>
+        <p>If you’re using Tor Browser, ensure your "Security Level" is set to "Standard". If the issue persists, try clearing your cache and storage.</p>
+        <p>Need more help? Visit our support channel on Telegram: <a href="https://t.me/robosats" target="_blank" rel="noopener">t.me/robosats</a>.</p>
       </div>
     </noscript>
+    
     <div id="main">
       <div id="app">
         <div class="loaderCenter">
@@ -68,12 +88,13 @@
                 </ul>
               </div>
             </div>
+          </div>
         </div>
       </div>
     </div>
-    </div>
+    
     <script>
-      window.RobosatsSettings = '<%= htmlWebpackPlugin.options.robosatsSettings %>'
+      window.RobosatsSettings = '<%= htmlWebpackPlugin.options.robosatsSettings %>';
     </script>
   </body>
 </html>
