Spaces:

whackthejacker
/

Vizzy

Running

App Files Files Community

whackthejacker commited on Mar 4

Commit

89c0408

verified ·

1 Parent(s): 26e64bb

Update index.html

Browse files

Files changed (1) hide show

index.html +146 -47

index.html CHANGED Viewed

@@ -1,57 +1,156 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI-Powered Chat-Driven Data Dashboards</title>
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 </head>
-<body>
-    <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <a class="navbar-brand" href="#">DataDash</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item active">
-                    <a class="nav-link" href="#">Home</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Features</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Contact</a>
-                </li>
-            </ul>
-        </div>
-    </nav>
-    <!-- Hero Section -->
-    <header class="hero bg-primary text-white text-center py-5">
-        <h1>AI-Powered Chat-Driven Data Dashboards</h1>
-        <p>Turn charts into conversations!</p>
-    </header>
-    <!-- Chat Section -->
-    <section id="chat" class="py-5">
-        <div class="container">
-            <h2 class="text-center">Chat with our AI</h2>
-            <div class="chat-box border rounded p-3">
-                <div id="messages" class="mb-3" style="height: 300px; overflow-y: auto;"></div>
-                <input type="text" id="userInput" class="form-control" placeholder="Ask me anything about data...">
-                <button id="sendBtn" class="btn btn-success mt-2">Send</button>
-            </div>
-            <canvas id="chart" class="mt-5" style="display:none;"></canvas>
         </div>
-    </section>
-    <!-- Bootstrap & jQuery JS -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI-Powered Chat-Driven Data Dashboards</title>
+  <!-- Tailwind CSS CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Optional: Tailwind config for extended colors (if needed) -->
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: "#4A90E2",
+            secondary: "#50E3C2",
+            feature1: "#F5A623",
+            feature2: "#D0021B",
+            feature3: "#9013FE",
+          },
+        },
+      },
+    };
+  </script>
+  <!-- Font Awesome for icons -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
 </head>
+<body class="font-sans antialiased">
+  <!-- Navigation -->
+  <nav class="bg-primary text-white">
+    <div class="container mx-auto flex items-center justify-between py-4 px-6">
+      <a class="text-2xl font-bold" href="#">DataDash</a>
+      <button id="menu-btn" class="md:hidden focus:outline-none">
+        <i class="fas fa-bars"></i>
+      </button>
+      <ul id="menu" class="hidden md:flex space-x-8">
+        <li><a href="#" class="hover:text-gray-200">Home</a></li>
+        <li><a href="#" class="hover:text-gray-200">Features</a></li>
+        <li><a href="#" class="hover:text-gray-200">Pricing</a></li>
+        <li><a href="#" class="hover:text-gray-200">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+  <!-- Hero Section -->
+  <header class="bg-secondary text-white text-center py-20">
+    <div class="container mx-auto px-4">
+      <h1 class="text-4xl md:text-6xl font-extrabold mb-4">
+        AI-Powered Chat-Driven Data Dashboards
+      </h1>
+      <p class="text-xl md:text-2xl mb-8">
+        Transform your data into actionable insights with our intelligent dashboards.
+      </p>
+      <a
+        href="#features"
+        class="bg-white text-secondary font-semibold py-3 px-6 rounded-full shadow-lg hover:bg-gray-200 transition duration-300"
+        >Explore Features</a
+      >
+    </div>
+  </header>
+  <!-- Features Section -->
+  <section id="features" class="py-16">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl font-bold text-center mb-12">Features</h2>
+      <div class="flex flex-wrap justify-center gap-8">
+        <div class="w-full md:w-1/3 p-4">
+          <div class="bg-feature1 p-8 rounded-xl text-center transform transition duration-300 hover:scale-105 shadow-lg">
+            <h3 class="text-xl font-bold mb-2">Real-Time Analytics</h3>
+            <p>Get instant insights and make data-driven decisions on the fly.</p>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-4">
+          <div class="bg-feature2 p-8 rounded-xl text-center transform transition duration-300 hover:scale-105 shadow-lg">
+            <h3 class="text-xl font-bold mb-2">Interactive Dashboards</h3>
+            <p>Engage with your data through customizable and interactive dashboards.</p>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-4">
+          <div class="bg-feature3 p-8 rounded-xl text-center transform transition duration-300 hover:scale-105 shadow-lg">
+            <h3 class="text-xl font-bold mb-2">AI Chat Integration</h3>
+            <p>Leverage AI chat to query your data and receive instant feedback.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Contact Form -->
+  <section id="contact" class="py-16 bg-gray-100">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl font-bold text-center mb-8">Get in Touch</h2>
+      <form id="contactForm" class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
+        <div class="mb-4">
+          <label for="name" class="block text-gray-700 font-semibold mb-2">Name:</label>
+          <input
+            type="text"
+            id="name"
+            class="w-full border border-gray-300 p-3 rounded focus:outline-none focus:border-primary"
+            placeholder="Enter your name"
+            required
+          />
+        </div>
+        <div class="mb-4">
+          <label for="email" class="block text-gray-700 font-semibold mb-2">Email:</label>
+          <input
+            type="email"
+            id="email"
+            class="w-full border border-gray-300 p-3 rounded focus:outline-none focus:border-primary"
+            placeholder="Enter your email"
+            required
+          />
+        </div>
+        <div class="mb-4">
+          <label for="message" class="block text-gray-700 font-semibold mb-2">Message:</label>
+          <textarea
+            id="message"
+            class="w-full border border-gray-300 p-3 rounded focus:outline-none focus:border-primary"
+            placeholder="Your message"
+            required
+          ></textarea>
         </div>
+        <button
+          type="submit"
+          class="w-full bg-primary text-white py-3 rounded hover:bg-blue-700 transition duration-300"
+        >
+          Send Message
+        </button>
+      </form>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="bg-primary text-white py-4">
+    <div class="container mx-auto text-center">
+      <p>&copy; 2023 DataDash. All rights reserved.</p>
+    </div>
+  </footer>
+  <!-- jQuery (Optional: if you prefer to use it for simple interactions) -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script>
+    $(document).ready(function () {
+      $("#contactForm").submit(function (e) {
+        e.preventDefault();
+        alert("Thank you for your message! We will get back to you shortly.");
+        $(this).trigger("reset"); // Reset the form after submission
+      });
+      // Toggle mobile menu
+      $("#menu-btn").click(function () {
+        $("#menu").toggleClass("hidden");
+      });
+    });
+  </script>
 </body>
 </html>