Spaces:

duqing026
/

aura-ui-prototype

Sleeping

App Files Files Community

Trae Assistant commited on 12 days ago

Commit

9e61ba7

1 Parent(s): 7a8dae8

日常

Browse files

Files changed (1) hide show

templates/index.html +48 -28

templates/index.html CHANGED Viewed

@@ -58,27 +58,49 @@
     <style>
         @layer base {
             :root {
-                --background: 222 47% 11%; /* Dark Slate - more readable */
-                --foreground: 210 40% 98%;
-                --card: 222 47% 11%;
-                --card-foreground: 210 40% 98%;
-                --popover: 222 47% 11%;
-                --popover-foreground: 210 40% 98%;
-                --primary: 210 40% 98%;
-                --primary-foreground: 222 47% 11%;
-                --secondary: 217 32% 17%;
-                --secondary-foreground: 210 40% 98%;
-                --muted: 217 32% 17%;
-                --muted-foreground: 215 20% 65%;
-                --accent: 217 32% 17%;
-                --accent-foreground: 210 40% 98%;
-                --destructive: 0 62.8% 30.6%;
-                --destructive-foreground: 210 40% 98%;
-                --border: 217 32% 17%;
-                --input: 217 32% 17%;
-                --ring: 212 26% 83%;
                 --radius: 0.5rem;
             }
         }
         body {
@@ -103,9 +125,7 @@
         }
         .glass {
-            background: rgba(24, 24, 27, 0.6);
             backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.08);
         }
     </style>
     <!-- Phosphor Icons -->
@@ -114,7 +134,7 @@
 <body>
     <div id="app" class="flex flex-col h-screen overflow-hidden">
         <!-- Top Navigation -->
-        <header class="h-14 border-b border-border glass flex items-center px-6 sticky top-0 z-50">
             <div class="flex items-center gap-2 mr-8">
                 <div class="w-6 h-6 bg-primary rounded-md flex items-center justify-center text-primary-foreground font-bold text-xs">A</div>
                 <span class="font-bold text-lg tracking-tight">Aura UI</span>
@@ -145,7 +165,7 @@
         <div class="flex flex-1 overflow-hidden">
             <!-- Sidebar -->
-            <aside class="w-64 border-r border-border bg-background/50 overflow-y-auto hidden md:block">
                 <div class="p-6 space-y-8">
                     <div v-for="(group, groupName) in menuItems" :key="groupName">
                         <h4 class="mb-2 text-sm font-semibold tracking-tight text-foreground">${ groupName }</h4>
@@ -159,7 +179,7 @@
                                 :class="{ 'font-medium text-foreground bg-accent/50': currentComponent === item.id }"
                             >
                                 ${ item.name }
-                                <span v-if="item.new" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline font-bold">New</span>
                             </a>
                         </div>
                     </div>
@@ -206,7 +226,7 @@
                         </div>
                         <!-- Preview Tab -->
-                        <div v-if="activeTab === 'preview'" class="relative rounded-xl border border-border bg-background/50 shadow-sm min-h-[350px] flex items-center justify-center p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
                             <!-- Native Game Component Rendering -->
                             <div v-if="currentComponent === 'game'" class="w-full h-full flex flex-col min-h-[400px]">
                                 <div class="flex items-center justify-between mb-4">
@@ -272,7 +292,7 @@
                         </div>
                         <!-- Code Tab -->
-                        <div v-if="activeTab === 'code'" class="relative rounded-xl border border-border bg-[#09090b] shadow-sm overflow-hidden">
                             <div class="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/20">
                                 <span class="text-xs text-muted-foreground">index.html</span>
                                 <button class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1">
@@ -288,7 +308,7 @@
                     <!-- Installation -->
                     <div class="space-y-4 pt-8">
                         <h3 class="text-2xl font-semibold tracking-tight">安装</h3>
-                        <div class="rounded-lg border border-border bg-[#09090b] px-4 py-3 font-mono text-sm text-foreground">
                             <span class="text-muted-foreground">$</span> npm install @aura-ui/${ activeComponent.id }
                         </div>
                     </div>
@@ -582,7 +602,7 @@
                                 <div class="flex items-center space-x-2">
                                     <label class="relative inline-flex items-center cursor-pointer">
                                         <input type="checkbox" value="" class="sr-only peer">
-                                        <div class="w-11 h-6 bg-input peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-focus:ring-offset-background rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                         <span class="ml-3 text-sm font-medium text-foreground">飞行模式</span>
                                     </label>
                                 </div>

     <style>
         @layer base {
             :root {
+                --background: 0 0% 100%;
+                --foreground: 240 10% 3.9%;
+                --card: 0 0% 100%;
+                --card-foreground: 240 10% 3.9%;
+                --popover: 0 0% 100%;
+                --popover-foreground: 240 10% 3.9%;
+                --primary: 240 5.9% 10%;
+                --primary-foreground: 0 0% 98%;
+                --secondary: 240 4.8% 95.9%;
+                --secondary-foreground: 240 5.9% 10%;
+                --muted: 240 4.8% 95.9%;
+                --muted-foreground: 240 3.8% 46.1%;
+                --accent: 240 4.8% 95.9%;
+                --accent-foreground: 240 5.9% 10%;
+                --destructive: 0 84.2% 60.2%;
+                --destructive-foreground: 0 0% 98%;
+                --border: 240 5.9% 90%;
+                --input: 240 5.9% 90%;
+                --ring: 240 10% 3.9%;
                 --radius: 0.5rem;
             }
+            .dark {
+                --background: 240 10% 3.9%;
+                --foreground: 0 0% 98%;
+                --card: 240 10% 3.9%;
+                --card-foreground: 0 0% 98%;
+                --popover: 240 10% 3.9%;
+                --popover-foreground: 0 0% 98%;
+                --primary: 0 0% 98%;
+                --primary-foreground: 240 5.9% 10%;
+                --secondary: 240 3.7% 15.9%;
+                --secondary-foreground: 0 0% 98%;
+                --muted: 240 3.7% 15.9%;
+                --muted-foreground: 240 5% 64.9%;
+                --accent: 240 3.7% 15.9%;
+                --accent-foreground: 0 0% 98%;
+                --destructive: 0 62.8% 30.6%;
+                --destructive-foreground: 0 0% 98%;
+                --border: 240 3.7% 15.9%;
+                --input: 240 3.7% 15.9%;
+                --ring: 240 4.9% 83.9%;
+            }
         }
         body {
         }
         .glass {
             backdrop-filter: blur(12px);
         }
     </style>
     <!-- Phosphor Icons -->
 <body>
     <div id="app" class="flex flex-col h-screen overflow-hidden">
         <!-- Top Navigation -->
+        <header class="h-14 border-b border-border bg-background/80 glass flex items-center px-6 sticky top-0 z-50">
             <div class="flex items-center gap-2 mr-8">
                 <div class="w-6 h-6 bg-primary rounded-md flex items-center justify-center text-primary-foreground font-bold text-xs">A</div>
                 <span class="font-bold text-lg tracking-tight">Aura UI</span>
         <div class="flex flex-1 overflow-hidden">
             <!-- Sidebar -->
+            <aside class="w-64 border-r border-border bg-background overflow-y-auto hidden md:block">
                 <div class="p-6 space-y-8">
                     <div v-for="(group, groupName) in menuItems" :key="groupName">
                         <h4 class="mb-2 text-sm font-semibold tracking-tight text-foreground">${ groupName }</h4>
                                 :class="{ 'font-medium text-foreground bg-accent/50': currentComponent === item.id }"
                             >
                                 ${ item.name }
+                                <span v-if="item.new" class="ml-2 rounded-md bg-primary px-1.5 py-0.5 text-xs leading-none text-primary-foreground no-underline group-hover:no-underline font-bold">New</span>
                             </a>
                         </div>
                     </div>
                         </div>
                         <!-- Preview Tab -->
+                        <div v-if="activeTab === 'preview'" class="relative rounded-xl border border-border bg-background shadow-sm min-h-[350px] flex items-center justify-center p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
                             <!-- Native Game Component Rendering -->
                             <div v-if="currentComponent === 'game'" class="w-full h-full flex flex-col min-h-[400px]">
                                 <div class="flex items-center justify-between mb-4">
                         </div>
                         <!-- Code Tab -->
+                        <div v-if="activeTab === 'code'" class="relative rounded-xl border border-border bg-muted shadow-sm overflow-hidden">
                             <div class="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/20">
                                 <span class="text-xs text-muted-foreground">index.html</span>
                                 <button class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1">
                     <!-- Installation -->
                     <div class="space-y-4 pt-8">
                         <h3 class="text-2xl font-semibold tracking-tight">安装</h3>
+                        <div class="rounded-lg border border-border bg-muted px-4 py-3 font-mono text-sm text-foreground">
                             <span class="text-muted-foreground">$</span> npm install @aura-ui/${ activeComponent.id }
                         </div>
                     </div>
                                 <div class="flex items-center space-x-2">
                                     <label class="relative inline-flex items-center cursor-pointer">
                                         <input type="checkbox" value="" class="sr-only peer">
+                                        <div class="w-11 h-6 bg-input peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-focus:ring-offset-background rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-border after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                         <span class="ml-3 text-sm font-medium text-foreground">飞行模式</span>
                                     </label>
                                 </div>