Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Discover AI Apps</title> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <style> | |
| :root { | |
| --bg-color: #f0f4f8; | |
| --card-bg: #ffffff; | |
| --text-color: #2d3748; | |
| --text-secondary: #718096; | |
| --accent-color: #3f72af; | |
| --accent-hover: #3182ce; | |
| } | |
| /* Dark mode colors */ | |
| .dark-mode { | |
| --bg-color: #1a202c; | |
| --card-bg: #2d3748; | |
| --text-color: #e2e8f0; | |
| --text-secondary: #a0aec0; | |
| --accent-color: #4299e1; | |
| --accent-hover: #63b3ed; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M24 0v16l-8 8-16-16v64l16-16 8 8v16l24-24V32l-8-8 8-8V0L24 0zm0 24l-8 8-8-8 8-8 8 8z'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| body { | |
| background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40h5v5h-5v-5z'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .dark-mode body { | |
| background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .background-elements { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| opacity: 0.3; | |
| } | |
| .background-elements::before, | |
| .background-elements::after { | |
| content: ''; | |
| position: absolute; | |
| width: 400px; | |
| height: 400px; | |
| border-radius: 50%; | |
| background-color: var(--accent-color); | |
| filter: blur(150px); | |
| } | |
| .background-elements::before { | |
| top: -200px; | |
| left: -200px; | |
| } | |
| .background-elements::after { | |
| bottom: -200px; | |
| right: -200px; | |
| } | |
| .title-bar { | |
| background-color: var(--accent-color); | |
| color: white; | |
| padding: 4rem 0; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); | |
| } | |
| .title { | |
| font-size: 4.5rem; | |
| font-weight: 800; | |
| margin-bottom: 0.5rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| position: relative; | |
| z-index: 1; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .subtitle { | |
| font-size: 1.4rem; | |
| font-weight: 300; | |
| position: relative; | |
| z-index: 1; | |
| max-width: 600px; | |
| margin: 1rem auto 0; | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) translateX(0); } | |
| 25% { transform: translateY(10px) translateX(-10px); } | |
| 50% { transform: translateY(-10px) translateX(-10px); } | |
| 75% { transform: translateY(-30px) translateX(5px); } | |
| } | |
| .discover-ai-apps { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 4rem 2rem; | |
| } | |
| .app-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2.5rem; | |
| margin-top: 2rem; | |
| } | |
| .app-card { | |
| background-color: var(--card-bg); | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| padding: 2rem; | |
| cursor: pointer; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .app-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .app-icon { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .app-card:hover .app-icon { | |
| transform: scale(1.1); | |
| } | |
| .app-icon i { | |
| font-size: 2.5rem; | |
| color: #fff; | |
| } | |
| .app-name { | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| color: var(--accent-color); | |
| text-align: center; | |
| } | |
| .app-description { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| flex-grow: 1; | |
| } | |
| .app-details { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| .app-details-content { | |
| background-color: var(--card-bg); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| max-width: 600px; | |
| width: 90%; | |
| position: relative; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .app-details-icon { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| } | |
| .app-details-icon i { | |
| font-size: 3rem; | |
| color: #fff; | |
| } | |
| .app-details h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--accent-color); | |
| text-align: center; | |
| } | |
| .app-details p { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| } | |
| .close-button { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| font-size: 2rem; | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: transform 0.3s ease, color 0.3s ease; | |
| } | |
| .close-button:hover { | |
| transform: scale(1.1); | |
| color: var(--accent-color); | |
| } | |
| .try-button { | |
| display: inline-block; | |
| background-color: var(--accent-color); | |
| color: #ffffff; | |
| padding: 1rem 2rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| transition: background-color 0.3s ease, transform 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: bold; | |
| } | |
| .try-button:hover { | |
| background-color: var(--accent-hover); | |
| transform: translateY(-3px); | |
| } | |
| .fade-enter-active, .fade-leave-active { | |
| transition: opacity 0.3s, transform 0.3s; | |
| } | |
| .fade-enter, .fade-leave-to { | |
| opacity: 0; | |
| transform: scale(0.95); | |
| } | |
| .fade-enter-to, .fade-leave { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 12px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-color); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background-color: var(--accent-color); | |
| border-radius: 6px; | |
| border: 3px solid var(--bg-color); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--accent-hover); | |
| } | |
| /* Dark mode toggle */ | |
| .dark-mode-toggle { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background-color: var(--accent-color); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .dark-mode-toggle:hover { | |
| background-color: var(--accent-hover); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .title { | |
| font-size: 3rem; | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| } | |
| .app-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .app-card { | |
| padding: 1.5rem; | |
| } | |
| .app-name { | |
| font-size: 1.5rem; | |
| } | |
| .app-description { | |
| font-size: 0.9rem; | |
| } | |
| .app-details-content { | |
| padding: 2rem; | |
| max-width: 90%; | |
| } | |
| .app-details h2 { | |
| font-size: 2rem; | |
| } | |
| } | |
| /* More styles*/ | |
| .title-bar { | |
| background-color: var(--accent-color); | |
| color: white; | |
| padding: 6rem 0 8rem; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); | |
| } | |
| .title { | |
| font-size: 4.5rem; | |
| font-weight: 800; | |
| margin-bottom: 0.5rem; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| position: relative; | |
| z-index: 1; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | |
| background: linear-gradient(45deg, #ffffff, #e0e0e0); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: inline-block; | |
| } | |
| .subtitle { | |
| font-size: 1.6rem; | |
| font-weight: 300; | |
| position: relative; | |
| z-index: 1; | |
| max-width: 600px; | |
| margin: 1.5rem auto 0; | |
| opacity: 0.9; | |
| line-height: 1.4; | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) translateX(0); } | |
| 25% { transform: translateY(-20px) translateX(-10px); } | |
| 50% { transform: translateY(-10px) translateX(-10px); } | |
| 75% { transform: translateY(-30px) translateX(5px); } | |
| } | |
| body { | |
| background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40h5v5h-5v-5z'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| body { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M50 0l12.5 37.5H100L62.5 62.5 75 100l-25-25-25 25 12.5-37.5L0 37.5h37.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| body { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpolygon points='100 0 110 30 135 15 115 40 145 50 115 60 135 85 110 70 100 100 90 70 65 85 85 60 55 50 85 40 65 15 90 30'/%3E%3Cpolygon points='0 0 10 30 35 15 15 40 45 50 15 60 35 85 10 70 0 100'/%3E%3Cpolygon points='200 0 190 30 165 15 185 40 155 50 185 60 165 85 190 70 200 100'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| body { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3Ccircle cx='150' cy='100' r='3'/%3E%3Ccircle cx='250' cy='50' r='2'/%3E%3Ccircle cx='350' cy='150' r='3'/%3E%3Ccircle cx='300' cy='250' r='2'/%3E%3Ccircle cx='200' cy='300' r='3'/%3E%3Ccircle cx='100' cy='250' r='2'/%3E%3Cpath d='M50 50L150 100L250 50L350 150L300 250L200 300L100 250Z' stroke='%239C92AC' stroke-opacity='0.05' fill='none'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .title-bar { | |
| padding: 4rem 0 6rem; | |
| } | |
| .title { | |
| font-size: 3rem; | |
| letter-spacing: 2px; | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| } | |
| } | |
| /* ##"Particles new##" */ | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: rgba(255, 255, 255, 0.7); | |
| border-radius: 50%; | |
| animation: orbit 20s linear infinite; | |
| } | |
| @keyframes orbit { | |
| 0% { | |
| transform: translate(-50%, -50%) rotate(0deg) translateX(-100px) translateY(200px) rotate(0deg); | |
| } | |
| 25% { | |
| transform: translate(-50%, -50%) translateX(100px) rotate(5deg); | |
| } | |
| 50% { | |
| transform: translate(-50%, -50%) translateX(200px); | |
| } | |
| 75% { | |
| transform: translate(-50%, -50%) translateX(600px); | |
| } | |
| 100% { | |
| transform: translate(-50%, -50%) translateX(1000px); | |
| } | |
| } | |
| /* Adjust the orbit sizes and speeds for different particles */ | |
| .particle:nth-child(1) { animation-duration: 15s; } | |
| .particle:nth-child(2) { animation-duration: 25s; } | |
| .particle:nth-child(3) { animation-duration: 20s; } | |
| .particle:nth-child(4) { animation-duration: 30s; } | |
| .particle:nth-child(5) { animation-duration: 18s; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="background-elements"></div> | |
| <button class="dark-mode-toggle" onclick="toggleDarkMode()"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <div id="app"> | |
| <div class="title-bar"> | |
| <h1 class="title">DISCOVER AI•APPS</h1> | |
| <p class="subtitle">Explore the future of artificial intelligence with our curated collection of cutting-edge AI applications</p> | |
| <div class="particles"> | |
| <div class="particle" style="width: 12px; height: 12px; left: 20%; top: 20%;"></div> | |
| <div class="particle" style="width: 18px; height: 18px; left: 40%; top: 30%;"></div> | |
| <div class="particle" style="width: 10px; height: 10px; left: 60%; top: 40%;"></div> | |
| <div class="particle" style="width: 15px; height: 15px; left: 80%; top: 50%;"></div> | |
| <div class="particle" style="width: 8px; height: 8px; left: 30%; top: 60%;"></div> | |
| </div> | |
| </div> | |
| <div class="discover-ai-apps"> | |
| <div class="app-grid"> | |
| <div v-for="app in aiApps" :key="app.id" class="app-card" @click="selectApp(app)"> | |
| <div class="app-icon" :style="{ backgroundColor: app.color }"> | |
| <i :class="app.icon"></i> | |
| </div> | |
| <h2 class="app-name">{{ app.name }}</h2> | |
| <p class="app-description">{{ app.shortDescription }}</p> | |
| </div> | |
| </div> | |
| <transition name="fade"> | |
| <div v-if="selectedApp" class="app-details"> | |
| <div class="app-details-content"> | |
| <button class="close-button" @click="closeDetails">×</button> | |
| <div class="app-details-icon" :style="{ backgroundColor: selectedApp.color }"> | |
| <i :class="selectedApp.icon"></i> | |
| </div> | |
| <h2>{{ selectedApp.name }}</h2> | |
| <p>{{ selectedApp.longDescription }}</p> | |
| <a :href="selectedApp.link" class="try-button">Try Now</a> | |
| </div> | |
| </div> | |
| </transition> | |
| </div> | |
| <script> | |
| function toggleDarkMode() { | |
| document.body.classList.toggle('dark-mode'); | |
| } | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| selectedApp: null, | |
| aiApps: [ | |
| { | |
| id: 1, | |
| name: 'MindScribe', | |
| shortDescription: 'AI-powered journal and mood tracker', | |
| longDescription: 'MindScribe is your personal AI therapist and journal. It analyzes your daily entries to provide insights into your emotional well-being and offers personalized suggestions for improving your mental health.', | |
| icon: 'fas fa-brain', | |
| color: '#FF6B6B', | |
| link: '#' | |
| }, | |
| { | |
| id: 2, | |
| name: 'EcoSense', | |
| shortDescription: 'Smart home energy optimization', | |
| longDescription: 'EcoSense uses advanced AI algorithms to optimize your homes energy usage. It learns your habits and adjusts your smart home devices to maximize efficiency without sacrificing comfort.', | |
| icon: 'fas fa-leaf', | |
| color: '#4ECDC4', | |
| link: '#' | |
| }, | |
| { | |
| id: 3, | |
| name: 'LinguaGenius', | |
| shortDescription: 'AI language learning assistant', | |
| longDescription: 'LinguaGenius revolutionizes language learning by adapting to your personal learning style. It creates custom lesson plans, provides real-time pronunciation feedback, and engages you in AI-powered conversations.', | |
| icon: 'fas fa-language', | |
| color: '#45B7D1', | |
| link: '#' | |
| }, | |
| { | |
| id: 4, | |
| name: 'NutriAI', | |
| shortDescription: 'Personalized nutrition and meal planning', | |
| longDescription: 'NutriAI is your personal nutritionist powered by artificial intelligence. It analyzes your dietary preferences, health goals, and biometrics to create tailored meal plans and provide real-time nutritional advice.', | |
| icon: 'fas fa-utensils', | |
| color: '#FF9FF3', | |
| link: '#' | |
| }, | |
| { | |
| id: 5, | |
| name: 'CreativeForge', | |
| shortDescription: 'AI-assisted creative content generator', | |
| longDescription: 'CreativeForge is an AI-powered tool for artists, writers, and musicians. It provides inspiration, generates ideas, and even collaborates with you to create unique pieces of art, stories, or musical compositions.', | |
| icon: 'fas fa-paint-brush', | |
| color: '#FFC75F', | |
| link: '#' | |
| }, | |
| { | |
| id: 6, | |
| name: 'SafeGuardAI', | |
| shortDescription: 'Intelligent home and personal security', | |
| longDescription: 'SafeGuardAI uses advanced computer vision and anomaly detection to keep your home and loved ones safe. It integrates with your existing security systems and provides real-time alerts and recommendations.', | |
| icon: 'fas fa-shield-alt', | |
| color: '#6A5ACD', | |
| link: '#' | |
| } | |
| ] | |
| }, | |
| methods: { | |
| selectApp(app) { | |
| this.selectedApp = app; | |
| }, | |
| closeDetails() { | |
| this.selectedApp = null; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |