Spaces:

jikoniji
/

yeayea

Running

App Files Files Community

jikoniji commited on May 26, 2025

Commit

58336ca

verified ·

1 Parent(s): 850c765

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +351 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Yeayea
-emoji: 📈
-colorFrom: red
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: yeayea
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 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,351 @@
-<!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>ConnectFast - Login</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .login-container {
+            background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .login-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+            overflow: hidden;
+            width: 100%;
+            max-width: 400px;
+            position: relative;
+            z-index: 1;
+        }
+        .login-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
+            transform: rotate(45deg);
+            z-index: -1;
+            animation: shine 3s infinite;
+        }
+        @keyframes shine {
+            0% { left: -100%; }
+            20% { left: 100%; }
+            100% { left: 100%; }
+        }
+        .form-input {
+            background: rgba(255, 255, 255, 0.9);
+            border: none;
+            border-radius: 30px;
+            padding: 12px 20px;
+            width: 100%;
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            background: white;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+        }
+        .social-btn {
+            border-radius: 30px;
+            padding: 10px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        .social-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        .circles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 0;
+        }
+        .circles li {
+            position: absolute;
+            display: block;
+            list-style: none;
+            width: 20px;
+            height: 20px;
+            background: rgba(255, 255, 255, 0.2);
+            animation: animate 25s linear infinite;
+            bottom: -150px;
+            border-radius: 50%;
+        }
+        .circles li:nth-child(1) {
+            left: 25%;
+            width: 80px;
+            height: 80px;
+            animation-delay: 0s;
+        }
+        .circles li:nth-child(2) {
+            left: 10%;
+            width: 20px;
+            height: 20px;
+            animation-delay: 2s;
+            animation-duration: 12s;
+        }
+        .circles li:nth-child(3) {
+            left: 70%;
+            width: 20px;
+            height: 20px;
+            animation-delay: 4s;
+        }
+        .circles li:nth-child(4) {
+            left: 40%;
+            width: 60px;
+            height: 60px;
+            animation-delay: 0s;
+            animation-duration: 18s;
+        }
+        .circles li:nth-child(5) {
+            left: 65%;
+            width: 20px;
+            height: 20px;
+            animation-delay: 0s;
+        }
+        .circles li:nth-child(6) {
+            left: 75%;
+            width: 110px;
+            height: 110px;
+            animation-delay: 3s;
+        }
+        .circles li:nth-child(7) {
+            left: 35%;
+            width: 150px;
+            height: 150px;
+            animation-delay: 7s;
+        }
+        .circles li:nth-child(8) {
+            left: 50%;
+            width: 25px;
+            height: 25px;
+            animation-delay: 15s;
+            animation-duration: 45s;
+        }
+        .circles li:nth-child(9) {
+            left: 20%;
+            width: 15px;
+            height: 15px;
+            animation-delay: 2s;
+            animation-duration: 35s;
+        }
+        .circles li:nth-child(10) {
+            left: 85%;
+            width: 150px;
+            height: 150px;
+            animation-delay: 0s;
+            animation-duration: 11s;
+        }
+        @keyframes animate {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 1;
+                border-radius: 0;
+            }
+            100% {
+                transform: translateY(-1000px) rotate(720deg);
+                opacity: 0;
+                border-radius: 50%;
+            }
+        }
+        .main-content {
+            display: none;
+        }
+        .forgot-password {
+            color: rgba(255, 255, 255, 0.7);
+            transition: all 0.3s ease;
+        }
+        .forgot-password:hover {
+            color: white;
+            text-decoration: underline;
+        }
+        .login-btn {
+            background: linear-gradient(to right, #3b82f6, #1e40af);
+            border: none;
+            color: white;
+            padding: 12px;
+            border-radius: 30px;
+            width: 100%;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+        }
+        .login-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 7px 20px rgba(59, 130, 246, 0.6);
+        }
+        .login-btn:active {
+            transform: translateY(0);
+        }
+    </style>
+</head>
+<body>
+    <!-- Login Overlay -->
+    <div class="login-container">
+        <div class="circles">
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+        </div>
+        <div class="login-card p-8 mx-4">
+            <div class="text-center mb-8">
+                <div class="flex justify-center mb-4">
+                    <div class="bg-white p-3 rounded-full shadow-lg">
+                        <i class="fas fa-wifi text-3xl text-blue-600"></i>
+                    </div>
+                </div>
+                <h1 class="text-3xl font-bold text-white mb-2">Welcome to ConnectFast</h1>
+                <p class="text-white opacity-80">Sign in to access your account</p>
+            </div>
+            <form id="loginForm" class="space-y-4">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-white mb-1">Email Address</label>
+                    <input type="email" id="email" class="form-input" placeholder="your@email.com" required>
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium text-white mb-1">Password</label>
+                    <input type="password" id="password" class="form-input" placeholder="••••••••" required>
+                    <div class="flex justify-end mt-1">
+                        <a href="#" class="text-sm forgot-password">Forgot password?</a>
+                    </div>
+                </div>
+                <div class="pt-2">
+                    <button type="submit" class="login-btn">
+                        Sign In
+                    </button>
+                </div>
+                <div class="relative my-6">
+                    <div class="absolute inset-0 flex items-center">
+                        <div class="w-full border-t border-white border-opacity-30"></div>
+                    </div>
+                    <div class="relative flex justify-center text-sm">
+                        <span class="px-2 bg-transparent text-white text-opacity-80">Or continue with</span>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <button type="button" class="social-btn bg-white text-gray-700">
+                        <i class="fab fa-google text-red-500 mr-2"></i> Google
+                    </button>
+                    <button type="button" class="social-btn bg-blue-600 text-white">
+                        <i class="fab fa-facebook-f mr-2"></i> Facebook
+                    </button>
+                </div>
+            </form>
+            <div class="mt-6 text-center">
+                <p class="text-white text-opacity-80 text-sm">
+                    Don't have an account?
+                    <a href="#" class="font-medium text-white hover:underline">Sign up</a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <!-- Main Website Content (Hidden until login) -->
+    <div class="main-content">
+        <!-- Your existing website content goes here -->
+        <!-- ... -->
+    </div>
+    <script>
+        // Handle login form submission
+        document.getElementById('loginForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            // Simple validation (in a real app, you would validate properly)
+            if (email && password) {
+                // Hide login and show main content
+                document.querySelector('.login-container').style.display = 'none';
+                document.querySelector('.main-content').style.display = 'block';
+                // In a real application, you would:
+                // 1. Send credentials to your authentication API
+                // 2. Handle the response (success/failure)
+                // 3. Store the authentication token
+                // 4. Redirect or show the main content
+                console.log('Login successful (simulated)');
+            } else {
+                alert('Please enter both email and password');
+            }
+        });
+        // Forgot password handler
+        document.querySelector('.forgot-password').addEventListener('click', function(e) {
+            e.preventDefault();
+            const email = prompt('Please enter your email to reset your password:');
+            if (email) {
+                // In a real app, you would send a reset password email
+                alert(`Password reset link sent to ${email} (simulated)`);
+            }
+        });
+        // Social login handlers
+        document.querySelectorAll('.social-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                // In a real app, you would implement proper social login
+                alert(`Redirecting to ${this.textContent.trim()} login (simulated)`);
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jikoniji/yeayea" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ create a wifi installation website with the following attributes; Service Availability Checker Users can enter their address or zip code to check if services are available in their area. Plan Comparison Tool Interactive comparison of internet plans (speed, data limit, price, contract length). Live Chat Support or AI Assistant Help with billing, technical support, outages, upgrades, etc. Customer Portal Login For managing plans, checking usage, paying bills, and viewing past invoices. Outage Map and Status Updates Real-time map of outages and maintenance schedules by area.Speed Test Tool Users can run a speed test directly from the site to check their connection. WiFi Device Management Dashboard See connected devices, pause internet, set parental controls. Router Settings Access (for compatible routers) Change WiFi name, password, and control guest networks.
2	+ ADD A LOGIN LAYOUT THE CLIENT SHOULD PROVIDE THEIR EMAIL AND PASSWORD BEFORE ACCESSING THE WEBSITE AND AND A FORGOT PASSWORD OPTION USE CSS TO MAKE THE LOGIN LAYOUT AWESOME BEFORE ACCESSING THE WEBSITE T