chore: update footer for light and dark mode (#7099)

Co-authored-by: Prasoon Patel <prasoonpatel@Prasoons-MacBook-Air.local>

sandbox/client.html

@@ -4,6 +4,64 @@
   <title>AXIOS | Sandbox</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
   <style type="text/css">
+    :root {
+      --bg-color: #fff;
+      --text-color: #212529;
+      --border-color: #dee2e6;
+      --well-bg: #f8f9fa;
+      --input-bg: #fff;
+      --footer-text-color: #6c757d;
+      --footer-heading-color: #212529;
+      --footer-link-color: #007bff;
+      --footer-link-hover-color: #0056b3;
+      --shadow-color: rgba(0, 0, 0, 0.1);
+      --axios-purple: #6a1b9a;
+      --sandbox-color: #212529;
+    }
+
+    body.dark-mode {
+      --bg-color: #121212;
+      --text-color: #e9ecef;
+      --border-color: #495057;
+      --well-bg: #1c1c1c;
+      --input-bg: #212121;
+      --footer-text-color: #adb5bd;
+      --footer-heading-color: #f8f9fa;
+      --footer-link-color: #61dafb;
+      --footer-link-hover-color: #fff;
+      --shadow-color: rgba(0, 0, 0, 0.4);
+      --axios-purple: #a78bfa;
+      --sandbox-color: #e9ecef;
+    }
+    
+    * {
+        transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-color);
+    }
+
+    .well, .form-control {
+      background-color: var(--well-bg);
+      color: var(--text-color);
+      border: 1px solid var(--border-color);
+    }
+    
+    .form-control {
+        background-color: var(--input-bg);
+    }
+    
+    .form-control::placeholder {
+        color: #6c757d;
+    }
+    
+    /* --- UI Improvement: Added spacing to form groups --- */
+    .form-group {
+        margin-bottom: 1.25rem; /* Adds space between each form field */
+    }
+
     pre {
       min-height: 39px;
       overflow: auto;
@@ -11,26 +69,102 @@
     .header{
       display: flex;
       flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2rem; /* Added space below the header */
     }
     .box{
       display: grid;
       grid-template-columns: 1fr 1fr;
-      grid-gap: 25px;
+      grid-gap: 40px; /* Increased gap between input and response columns */
     }
-    .well {
+
-      max-width: 400px;
+    #theme-toggle {
+        padding: 5px 10px;
+        border-radius: 5px;
+        cursor: pointer;
+        border: 1px solid var(--border-color);
+        background-color: var(--well-bg);
+        color: var(--text-color);
     }
+
+    .footer {
+        max-width: 900px;
+        margin: 60px auto 40px auto;
+        padding: 2rem 3rem;
+        border: 1px solid var(--border-color);
+        background-color: var(--well-bg);
+        /* border-radius: 30px; */
+        box-shadow: 0 10px 30px -10px var(--shadow-color);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 30px;
+    }
+
+    .footer-left .footer-brand-axios {
+        font-size: 1.1em;
+        font-weight: bold;
+        color: var(--axios-purple);
+        margin: 0;
+        display: inline;
+    }
+    .footer-left .footer-brand-sandbox {
+        font-size: 1.1em;
+        font-weight: bold;
+        color: var(--sandbox-color);
+        margin: 0;
+        display: inline;
+    }
+    
+    .footer-left .footer-copyright {
+        font-size: 0.9em;
+        color: var(--footer-text-color);
+        margin: 5px 0 0 0;
+    }
+
+    .footer-nav ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        gap: 25px;
+    }
+
+    .footer-nav a {
+        color: var(--footer-link-color);
+        text-decoration: none;
+        font-weight: 500;
+    }
+    .footer-nav a:hover {
+        color: var(--footer-link-hover-color);
+        text-decoration: underline;
+    }
+
     @media screen and (max-width: 1000px) {
       .box {
         grid-template-columns: 1fr;
       }
     }
+    @media screen and (max-width: 768px) {
+        .footer {
+            flex-direction: column;
+            text-align: center;
+            border-radius: 25px;
+            padding: 2rem;
+            max-width: 90%;
+        }
+    }
   </style>
 </head>
 <body class="container">
 <div class="header">
-  <img src="https://axios-http.com/assets/logo.svg" alt="axios" width="100" height="60">
+  <div style="display: flex; align-items: center;">
-  <h1> &nbsp;| Sandbox</h1>
+    <img src="https://axios-http.com/assets/logo.svg" alt="axios" width="100" height="60">
+    <h1> &nbsp;| Sandbox</h1>
+  </div>
+  <button id="theme-toggle">Toggle Theme</button>
 </div>
 
 <div class="box">
@@ -86,8 +220,23 @@
   </div>
 </div>
 
+<footer class="footer">
+    <div class="footer-left">
+        <p class="footer-brand-axios">AXIOS</p><p class="footer-brand-sandbox"> | Sandbox</p>
+        <p class="footer-copyright">© <span id="year">2025</span> Axios. All rights reserved.</p>
+    </div>
+    <nav class="footer-nav">
+        <ul>
+            <li><a href="https://axios-http.com/docs/intro" target="_blank" rel="noopener noreferrer">Docs</a></li>
+            <li><a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+            <li><a href="https://axios-http.com/" target="_blank" rel="noopener noreferrer">Website</a></li>
+        </ul>
+    </nav>
+</footer>
+
 <script src="/axios.js"></script>
 <script>
+  // Original sandbox script (untouched)
   (function () {
     var url = document.getElementById('url');
     var method = document.getElementById('method');
@@ -215,6 +364,18 @@
     syncWithLocalStorage();
     syncParamsAndData();
   })();
+
+  // New script for theme toggle and footer year
+  (function() {
+    const themeToggle = document.getElementById('theme-toggle');
+    const yearSpan = document.getElementById('year');
+
+    themeToggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+    });
+
+    yearSpan.textContent = new Date().getFullYear();
+  })();
 </script>
 </body>
-</html>
+</html>