Spaces:

imsathiya17
/

build-dash

Running

App Files Files Community

imsathiya17 commited on Sep 20, 2025

Commit

8433411

verified ·

1 Parent(s): bfb1d4c

add to the sign in page, login via third party apps like google, github, or twitter - Initial Deployment

Browse files

Files changed (6) hide show

README.md +7 -5
index.html +56 -18
prompts.txt +5 -0
signin.html +98 -0
signup.html +77 -0
waitlist.html +68 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Build Dash
-emoji: 📚
-colorFrom: purple
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: build-dash
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,57 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern UI with Button</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .btn-hover-effect {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .btn-hover-effect:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
+        }
+        .btn-active-effect:active {
+            transform: translateY(1px);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-50 to-blue-100 min-h-screen flex items-center justify-center">
+    <div class="max-w-md w-full mx-auto p-8 bg-white rounded-2xl shadow-xl" data-aos="fade-up">
+        <div class="text-center mb-8">
+            <i data-feather="zap" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i>
+            <h1 class="text-3xl font-bold text-gray-800 mb-2">Welcome to Our Platform</h1>
+            <p class="text-gray-600">Discover amazing features that will transform your workflow</p>
+        </div>
+        <button
+            class="btn-hover-effect btn-active-effect w-full py-3 px-6 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2"
+            onclick="alert('Button clicked!')"
+        >
+            <i data-feather="rocket" class="w-5 h-5"></i>
+            Get Started Now
+        </button>
+        <div class="mt-6 text-center text-sm text-gray-500">
+            <p>Already have an account? <a href="signin.html" class="text-blue-500 hover:underline">Sign in</a></p>
+        </div>
+    </div>
+    <script>
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        feather.replace();
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+add a button
+add a sign in page linked with sign in
+add a signup page and add a link to signup in the sign in page
+add a wait list page for those who can't signup and link into the signin and signup page
+add to the sign in page, login via third party apps like google, github, or twitter

signin.html ADDED Viewed

	@@ -0,0 +1,98 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign In</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .btn-hover-effect {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .btn-hover-effect:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
+        }
+        .btn-active-effect:active {
+            transform: translateY(1px);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-50 to-blue-100 min-h-screen flex items-center justify-center">
+    <div class="max-w-md w-full mx-auto p-8 bg-white rounded-2xl shadow-xl" data-aos="fade-up">
+        <div class="text-center mb-8">
+            <i data-feather="lock" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i>
+            <h1 class="text-3xl font-bold text-gray-800 mb-2">Sign In</h1>
+            <p class="text-gray-600">Welcome back! Please enter your details</p>
+        </div>
+        <form class="space-y-4">
+            <div>
+                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div>
+                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                    <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
+                </div>
+                <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
+            </div>
+            <button
+                type="submit"
+                class="btn-hover-effect btn-active-effect w-full py-3 px-6 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2"
+            >
+                <i data-feather="log-in" class="w-5 h-5"></i>
+                Sign In
+            </button>
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-300"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-white text-gray-500">Or continue with</span>
+                </div>
+            </div>
+            <div class="grid grid-cols-3 gap-3">
+                <button type="button" class="btn-hover-effect btn-active-effect py-2 px-4 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-50">
+                    <i data-feather="github" class="w-5 h-5"></i>
+                </button>
+                <button type="button" class="btn-hover-effect btn-active-effect py-2 px-4 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-50">
+                    <i data-feather="twitter" class="w-5 h-5 text-blue-400"></i>
+                </button>
+                <button type="button" class="btn-hover-effect btn-active-effect py-2 px-4 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-50">
+                    <i data-feather="google" class="w-5 h-5 text-red-500"></i>
+                </button>
+            </div>
+            <div class="mt-6 text-center text-sm text-gray-500">
+                <p>Don't have an account? <a href="signup.html" class="text-blue-500 hover:underline">Sign up</a></p>
+                <p class="mt-2">Signups closed? <a href="waitlist.html" class="text-blue-500 hover:underline">Join waitlist</a></p>
+            </div>
+        </form>
+    </div>
+    <script>
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        feather.replace();
+    </script>
+</body>
+</html>

signup.html ADDED Viewed

	@@ -0,0 +1,77 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .btn-hover-effect {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .btn-hover-effect:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
+        }
+        .btn-active-effect:active {
+            transform: translateY(1px);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-50 to-blue-100 min-h-screen flex items-center justify-center">
+    <div class="max-w-md w-full mx-auto p-8 bg-white rounded-2xl shadow-xl" data-aos="fade-up">
+        <div class="text-center mb-8">
+            <i data-feather="user-plus" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i>
+            <h1 class="text-3xl font-bold text-gray-800 mb-2">Create Account</h1>
+            <p class="text-gray-600">Join us today to get started</p>
+        </div>
+        <form class="space-y-4">
+            <div>
+                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div>
+                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div>
+                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div>
+                <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
+                <input type="password" id="confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <button
+                type="submit"
+                class="btn-hover-effect btn-active-effect w-full py-3 px-6 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2"
+            >
+                <i data-feather="user-plus" class="w-5 h-5"></i>
+                Sign Up
+            </button>
+            <div class="mt-6 text-center text-sm text-gray-500">
+                <p>Already have an account? <a href="signin.html" class="text-blue-500 hover:underline">Sign in</a></p>
+                <p class="mt-2">Signups closed? <a href="waitlist.html" class="text-blue-500 hover:underline">Join waitlist</a></p>
+            </div>
+        </form>
+    </div>
+    <script>
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        feather.replace();
+    </script>
+</body>
+</html>

waitlist.html ADDED Viewed

	@@ -0,0 +1,68 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Join Waitlist</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .btn-hover-effect {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .btn-hover-effect:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
+        }
+        .btn-active-effect:active {
+            transform: translateY(1px);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-50 to-blue-100 min-h-screen flex items-center justify-center">
+    <div class="max-w-md w-full mx-auto p-8 bg-white rounded-2xl shadow-xl" data-aos="fade-up">
+        <div class="text-center mb-8">
+            <i data-feather="clock" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i>
+            <h1 class="text-3xl font-bold text-gray-800 mb-2">Join Our Waitlist</h1>
+            <p class="text-gray-600">We'll notify you when signups are available</p>
+        </div>
+        <form class="space-y-4">
+            <div>
+                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div>
+                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <button
+                type="submit"
+                class="btn-hover-effect btn-active-effect w-full py-3 px-6 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2"
+            >
+                <i data-feather="send" class="w-5 h-5"></i>
+                Join Waitlist
+            </button>
+            <div class="mt-6 text-center text-sm text-gray-500">
+                <p>Signups available? <a href="signup.html" class="text-blue-500 hover:underline">Sign up now</a></p>
+            </div>
+        </form>
+    </div>
+    <script>
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        feather.replace();
+    </script>
+</body>
+</html>