Spaces:
Running
Running
[8/1, 2:40 AM] Meta AI: Here's a design prompt for Deep Seek AI: *Design Prompt:* Create a login page design for a multi-platform app (iOS, Windows, Mac) with two distinct login paths based on secret passwords. *Login Path 1: Congrat Menu Page* - Login Password: 1444 - Redirects to: Congrat Menu Page - Features: - Submenu items with links to specific apps or features - App icons or buttons that launch specific apps - Customizable layout and design *Login Path 2: Social Apps, Weather, Date, Time* - Login Password: 44888 - Redirects to: Social Apps, Weather, Date, Time page - Features: - Social media app integrations (e.g., Facebook, Twitter, Instagram) - Weather forecast and current conditions - Date and time display - Customizable layout and design *Design Requirements:* 1. *Login Page:* - Design a simple and intuitive login page with a password input field and a login button. - Ensure the password input field masks the entered password for security purposes. [8/1, 2:40 AM] Meta AI: Here's a design prompt for Deep Seek AI: *Design Prompt:* Create a login page design for a multi-platform app (iOS, Windows, Mac) with two distinct login paths based on secret passwords. *Login Path 1: Congrat Menu Page* - Login Password: 1444 - Redirects to: Congrat Menu Page - Features: - Submenu items with links to specific apps or features - App icons or buttons that launch specific apps - Customizable layout and design *Login Path 2: Social Apps, Weather, Date, Time* - Login Password: 44888 - Redirects to: Social Apps, Weather, Date, Time page - Features: - Social media app integrations (e.g., Facebook, Twitter, Instagram) - Weather forecast and current conditions - Date and time display - Customizable layout and design *Design Requirements:* 1. *Login Page:* - Design a simple and intuitive login page with a password input field and a login button. - Ensure the password input field masks the entered password for security purposes. 2. *Congrat Menu Page:* - Design a menu page with submenu items and app icons/buttons. - Include features such as customizable layout and design. 3. *Social Apps, Weather, Date, Time Page:* - Design a page that integrates social media apps, weather forecast, and date/time display. - Include features such as customizable layout and design. 4. *Multi-Platform Compatibility:* - Ensure the design is compatible with iOS, Windows, and Mac platforms. - Consider platform-specific design guidelines and conventions. *Design Considerations:* 1. *Security:* - Implement password validation and authentication mechanisms to ensure secure access. - Consider using encryption or other security measures to protect user data. 2. *User Experience:* - Design an intuitive and user-friendly interface that minimizes confusion and errors. - Ensure clear and consistent labeling and navigation across all pages. 3. *Customization:* - Allow users to customize the layout and design of the pages to suit their preferences. *Deliverables:* 1. *Design Mockups:* - Provide design mockups for the login page, Congrat Menu Page, and Social Apps, Weather, Date, Time page. - Include screenshots or wireframes that demonstrate the layout, navigation, and features. 2. **Interaction [8/1, 2:40 AM] Meta AI: Here's a design prompt for Deep Seek AI: *Design Prompt:* Create a login page design for a multi-platform app (iOS, Windows, Mac) with two distinct login paths based on secret passwords. *Login Path 1: Congrat Menu Page* - Login Password: 1444 - Redirects to: Congrat Menu Page - Features: - Submenu items with links to specific apps or features - App icons or buttons that launch specific apps - Customizable layout and design *Login Path 2: Social Apps, Weather, Date, Time* - Login Password: 44888 - Redirects to: Social Apps, Weather, Date, Time page - Features: - Social media app integrations (e.g., Facebook, Twitter, Instagram) - Weather forecast and current conditions - Date and time display - Customizable layout and design *Design Requirements:* 1. *Login Page:* - Design a simple and intuitive login page with a password input field and a login button. - Ensure the password input field masks the entered password for security purposes. 2. *Congrat Menu Page:* - Design a menu page with submenu items and app icons/buttons. - Include features such as customizable layout and design. 3. *Social Apps, Weather, Date, Time Page:* - Design a page that integrates social media apps, weather forecast, and date/time display. - Include features such as customizable layout and design. 4. *Multi-Platform Compatibility:* - Ensure the design is compatible with iOS, Windows, and Mac platforms. - Consider platform-specific design guidelines and conventions. *Design Considerations:* 1. *Security:* - Implement password validation and authentication mechanisms to ensure secure access. - Consider using encryption or other security measures to protect user data. 2. *User Experience:* - Design an intuitive and user-friendly interface that minimizes confusion and errors. - Ensure clear and consistent labeling and navigation across all pages. 3. *Customization:* - Allow users to customize the layout and design of the pages to suit their preferences. *Deliverables:* 1. *Design Mockups:* - Provide design mockups for the login page, Congrat Menu Page, and Social Apps, Weather, Date, Time page. - Include screenshots or wireframes that demonstrate the layout, navigation, and features. 2. *Interaction Design:* - Describe the interaction design and user flow for each page. - Include details on how users will navigate between pages and access features. By following this prompt, you should be able to create a design that meets the requirements and provides a seamless user experience across different platforms. - Initial Deployment
83da001
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multi-Platform Login System</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .app-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .app-icon:hover { | |
| transform: translateY(-5px); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg flex items-center justify-center p-4"> | |
| <!-- Login Page --> | |
| <div id="login-page" class="w-full max-w-md bg-white rounded-xl p-8 card-shadow fade-in"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800">Welcome Back</h1> | |
| <p class="text-gray-600 mt-2">Enter your secret password to continue</p> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <div class="relative"> | |
| <input type="password" id="password" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Enter your password"> | |
| <button id="toggle-password" class="absolute right-3 top-3 text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button id="login-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> | |
| <span>Login</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <div class="text-center text-sm text-gray-500"> | |
| <p>Forgot your password? <span class="text-purple-600 cursor-pointer hover:underline">Contact support</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Congrat Menu Page --> | |
| <div id="congrat-page" class="hidden w-full max-w-4xl bg-white rounded-xl p-8 card-shadow"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-800">Congrat Menu</h1> | |
| <button id="logout-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-sign-out-alt"></i> Logout | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <div class="app-icon bg-purple-100 rounded-xl p-6 text-center cursor-pointer hover:bg-purple-200"> | |
| <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-calendar text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Calendar</h3> | |
| </div> | |
| <div class="app-icon bg-blue-100 rounded-xl p-6 text-center cursor-pointer hover:bg-blue-200"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-tasks text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Tasks</h3> | |
| </div> | |
| <div class="app-icon bg-green-100 rounded-xl p-6 text-center cursor-pointer hover:bg-green-200"> | |
| <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-envelope text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Mail</h3> | |
| </div> | |
| <div class="app-icon bg-yellow-100 rounded-xl p-6 text-center cursor-pointer hover:bg-yellow-200"> | |
| <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-music text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Music</h3> | |
| </div> | |
| <div class="app-icon bg-red-100 rounded-xl p-6 text-center cursor-pointer hover:bg-red-200"> | |
| <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-camera text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Photos</h3> | |
| </div> | |
| <div class="app-icon bg-indigo-100 rounded-xl p-6 text-center cursor-pointer hover:bg-indigo-200"> | |
| <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-map-marker-alt text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Maps</h3> | |
| </div> | |
| <div class="app-icon bg-pink-100 rounded-xl p-6 text-center cursor-pointer hover:bg-pink-200"> | |
| <div class="w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-cloud text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Cloud</h3> | |
| </div> | |
| <div class="app-icon bg-teal-100 rounded-xl p-6 text-center cursor-pointer hover:bg-teal-200"> | |
| <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-cog text-white text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Settings</h3> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-end"> | |
| <button class="px-4 py-2 bg-gray-100 rounded-lg text-gray-700 hover:bg-gray-200"> | |
| <i class="fas fa-sliders-h mr-2"></i> Customize Layout | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Social Apps Page --> | |
| <div id="social-page" class="hidden w-full max-w-4xl bg-white rounded-xl p-8 card-shadow"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Social Dashboard</h1> | |
| <p id="current-date" class="text-gray-600"></p> | |
| </div> | |
| <button id="logout-btn-2" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-sign-out-alt"></i> Logout | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Weather Widget --> | |
| <div class="bg-blue-50 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-800">Weather</h3> | |
| <i class="fas fa-cloud-sun text-blue-500 text-xl"></i> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-5xl font-bold text-gray-800 mr-4">72°</div> | |
| <div> | |
| <p class="text-gray-700">Sunny</p> | |
| <p class="text-sm text-gray-500">New York, NY</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mt-4 text-center"> | |
| <div class="bg-white p-2 rounded-lg"> | |
| <p class="text-xs text-gray-500">Mon</p> | |
| <i class="fas fa-sun text-yellow-400"></i> | |
| <p class="text-sm font-medium">75°</p> | |
| </div> | |
| <div class="bg-white p-2 rounded-lg"> | |
| <p class="text-xs text-gray-500">Tue</p> | |
| <i class="fas fa-cloud text-gray-400"></i> | |
| <p class="text-sm font-medium">68°</p> | |
| </div> | |
| <div class="bg-white p-2 rounded-lg"> | |
| <p class="text-xs text-gray-500">Wed</p> | |
| <i class="fas fa-cloud-rain text-blue-400"></i> | |
| <p class="text-sm font-medium">62°</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Time Widget --> | |
| <div class="bg-purple-50 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-800">World Clock</h3> | |
| <i class="fas fa-clock text-purple-500 text-xl"></i> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Local Time</p> | |
| <p id="current-time" class="text-2xl font-bold text-gray-800"></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">London</p> | |
| <p class="text-xl font-medium text-gray-700">5:42 PM</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Tokyo</p> | |
| <p class="text-xl font-medium text-gray-700">1:42 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Social Quick Links --> | |
| <div class="bg-pink-50 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-800">Social Networks</h3> | |
| <i class="fas fa-share-alt text-pink-500 text-xl"></i> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="#" class="social-icon bg-white rounded-lg p-3 text-center"> | |
| <i class="fab fa-facebook text-blue-600 text-2xl mb-1"></i> | |
| <p class="text-xs font-medium">Facebook</p> | |
| </a> | |
| <a href="#" class="social-icon bg-white rounded-lg p-3 text-center"> | |
| <i class="fab fa-twitter text-blue-400 text-2xl mb-1"></i> | |
| <p class="text-xs font-medium">Twitter</p> | |
| </a> | |
| <a href="#" class="social-icon bg-white rounded-lg p-3 text-center"> | |
| <i class="fab fa-instagram text-pink-600 text-2xl mb-1"></i> | |
| <p class="text-xs font-medium">Instagram</p> | |
| </a> | |
| <a href="#" class="social-icon bg-white rounded-lg p-3 text-center"> | |
| <i class="fab fa-linkedin text-blue-700 text-2xl mb-1"></i> | |
| <p class="text-xs font-medium">LinkedIn</p> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Social Feed --> | |
| <div class="bg-white rounded-xl border border-gray-200 overflow-hidden"> | |
| <div class="border-b border-gray-200 p-4 bg-gray-50"> | |
| <h3 class="font-medium text-gray-800">Social Feed</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-gray-800">Sarah Johnson</p> | |
| <p class="text-sm text-gray-500 mb-2">Just posted a new photo</p> | |
| <div class="bg-gray-100 rounded-lg p-3"> | |
| <p class="text-gray-700">Enjoying the beautiful weather today! #sunnyday</p> | |
| <img src="https://source.unsplash.com/random/300x200/?nature" class="w-full h-auto rounded mt-2"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-gray-800">Michael Chen</p> | |
| <p class="text-sm text-gray-500 mb-2">Shared an article</p> | |
| <div class="bg-gray-100 rounded-lg p-3"> | |
| <p class="text-gray-700">Check out this interesting read about the future of technology!</p> | |
| <a href="#" class="text-blue-500 text-sm hover:underline">Read more...</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| <span id="last-updated"></span> | |
| </div> | |
| <button class="px-4 py-2 bg-gray-100 rounded-lg text-gray-700 hover:bg-gray-200"> | |
| <i class="fas fa-sliders-h mr-2"></i> Customize Dashboard | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const loginPage = document.getElementById('login-page'); | |
| const congratPage = document.getElementById('congrat-page'); | |
| const socialPage = document.getElementById('social-page'); | |
| const passwordInput = document.getElementById('password'); | |
| const loginBtn = document.getElementById('login-btn'); | |
| const togglePasswordBtn = document.getElementById('toggle-password'); | |
| const logoutBtn = document.getElementById('logout-btn'); | |
| const logoutBtn2 = document.getElementById('logout-btn-2'); | |
| const currentDate = document.getElementById('current-date'); | |
| const currentTime = document.getElementById('current-time'); | |
| const lastUpdated = document.getElementById('last-updated'); | |
| // Toggle password visibility | |
| togglePasswordBtn.addEventListener('click', () => { | |
| if (passwordInput.type === 'password') { | |
| passwordInput.type = 'text'; | |
| togglePasswordBtn.innerHTML = '<i class="far fa-eye-slash"></i>'; | |
| } else { | |
| passwordInput.type = 'password'; | |
| togglePasswordBtn.innerHTML = '<i class="far fa-eye"></i>'; | |
| } | |
| }); | |
| // Login function | |
| loginBtn.addEventListener('click', () => { | |
| const password = passwordInput.value.trim(); | |
| if (password === '1444') { | |
| loginPage.classList.add('hidden'); | |
| congratPage.classList.remove('hidden'); | |
| congratPage.classList.add('fade-in'); | |
| } else if (password === '44888') { | |
| loginPage.classList.add('hidden'); | |
| socialPage.classList.remove('hidden'); | |
| socialPage.classList.add('fade-in'); | |
| updateDateTime(); | |
| // Update time every second | |
| setInterval(updateDateTime, 1000); | |
| } else { | |
| alert('Incorrect password. Please try again.'); | |
| passwordInput.value = ''; | |
| passwordInput.focus(); | |
| } | |
| }); | |
| // Logout function | |
| function logout() { | |
| congratPage.classList.add('hidden'); | |
| socialPage.classList.add('hidden'); | |
| loginPage.classList.remove('hidden'); | |
| loginPage.classList.add('fade-in'); | |
| passwordInput.value = ''; | |
| passwordInput.focus(); | |
| } | |
| logoutBtn.addEventListener('click', logout); | |
| logoutBtn2.addEventListener('click', logout); | |
| // Update date and time | |
| function updateDateTime() { | |
| const now = new Date(); | |
| // Format date | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| currentDate.textContent = now.toLocaleDateString('en-US', options); | |
| // Format time | |
| let hours = now.getHours(); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| const ampm = hours >= 12 ? 'PM' : 'AM'; | |
| hours = hours % 12; | |
| hours = hours ? hours : 12; // the hour '0' should be '12' | |
| currentTime.textContent = `${hours}:${minutes} ${ampm}`; | |
| // Last updated | |
| const timeString = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); | |
| lastUpdated.textContent = `Last updated: ${timeString}`; | |
| } | |
| // Allow login on Enter key | |
| passwordInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| loginBtn.click(); | |
| } | |
| }); | |
| </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=Mackin7/customize-login" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |