Update static/v0/app-selector.html

static/v0/app-selector.html

@@ -546,12 +546,81 @@ body {
             </transition>
 
         </div>
-    </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>
-     <script src="app.js"></script>
 </body>
 </html>