Spaces:

smartestdaddy
/

generator-web

Running

App Files Files Community

smartestdaddy commited on Dec 19, 2025

Commit

f84df47

verified ·

1 Parent(s): cb3840c

remodernize this pleaseeeeeeeeeeeeeee

Browse files

Files changed (2) hide show

index.html +32 -34
style.css +116 -17

index.html CHANGED Viewed

@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ReelGen AI - Automatic Short Video Generator</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>
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
@@ -23,36 +23,36 @@
         }
     </style>
 </head>
-<body class="bg-gray-50 text-gray-800">
     <div class="min-h-screen flex flex-col">
         <!-- Header -->
-        <header class="bg-white shadow-sm">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
-                <div class="flex items-center space-x-2">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold">RG</div>
-                    <h1 class="text-xl font-bold">ReelGen AI</h1>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <button class="p-2 rounded-full hover:bg-gray-100">
-                        <i class="fas fa-bell text-gray-600"></i>
                     </button>
-                    <div class="w-8 h-8 rounded-full bg-gray-300"></div>
                 </div>
             </div>
         </header>
         <!-- Main Content -->
         <main class="flex-grow">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                 <!-- Dashboard Header -->
                 <div class="mb-8">
                     <h2 class="text-2xl font-bold mb-2">Daily Reel Generator</h2>
-                    <p class="text-gray-600">Automatically creates 3-15 second Instagram Reels by remixing existing content</p>
                 </div>
                 <!-- Generator Controls -->
-                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
-                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                         <div>
                             <h3 class="font-medium text-lg mb-1">Auto-Generation Settings</h3>
                             <p class="text-sm text-gray-500">Configure how your daily Reels are created</p>
@@ -144,18 +144,17 @@
                         </button>
                     </div>
                 </div>
                 <!-- Today's Generated Reel -->
                 <div class="mb-8">
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-medium">Today's Generated Reel</h3>
-                        <div class="text-sm text-gray-500">
-                            <i class="fas fa-circle text-green-500 mr-1 text-xs"></i> Ready to post
                         </div>
                     </div>
-                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
                             <!-- Video Preview -->
                             <div class="md:col-span-2 p-4">
                                 <div class="video-container bg-black rounded-lg overflow-hidden relative">
@@ -314,27 +313,26 @@
                 </div>
             </div>
         </main>
         <!-- Footer -->
-        <footer class="bg-white border-t py-6">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div class="flex flex-col md:flex-row justify-between items-center">
-                    <div class="flex items-center space-x-2 mb-4 md:mb-0">
-                        <div class="w-6 h-6 rounded-full bg-gradient-to-r from-purple-500 to-pink-500"></div>
                         <span class="font-medium">ReelGen AI</span>
                     </div>
-                    <div class="flex space-x-6">
-                        <a href="#" class="text-gray-500 hover:text-gray-700">Privacy</a>
-                        <a href="#" class="text-gray-500 hover:text-gray-700">Terms</a>
-                        <a href="#" class="text-gray-500 hover:text-gray-700">Help</a>
                     </div>
                 </div>
-                <div class="mt-4 text-center md:text-left text-sm text-gray-500">
                     © 2023 ReelGen AI. Automatically remixing your content for daily Reels.
                 </div>
             </div>
         </footer>
-    </div>
     <script>
         // Simple script to simulate generation process

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ReelGen AI - Automatic Short Video Generator</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
         }
     </style>
 </head>
+<body>
     <div class="min-h-screen flex flex-col">
         <!-- Header -->
+        <header class="glass-effect sticky top-0 z-10">
+            <div class="container flex justify-between items-center py-4">
+                <div class="flex items-center gap-3">
+                    <div class="w-9 h-9 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold text-sm">RG</div>
+                    <h1 class="text-xl font-semibold">ReelGen AI</h1>
                 </div>
+                <div class="flex items-center gap-3">
+                    <button class="p-2 rounded-full hover:bg-surface-2">
+                        <i class="fas fa-bell text-text-secondary"></i>
                     </button>
+                    <div class="w-8 h-8 rounded-full bg-surface-3 flex items-center justify-center">
+                        <i class="fas fa-user text-text-tertiary"></i>
+                    </div>
                 </div>
             </div>
         </header>
         <!-- Main Content -->
         <main class="flex-grow">
+            <div class="container py-8">
                 <!-- Dashboard Header -->
                 <div class="mb-8">
                     <h2 class="text-2xl font-bold mb-2">Daily Reel Generator</h2>
+                    <p class="text-text-secondary">Automatically creates 3-15 second Instagram Reels by remixing existing content</p>
                 </div>
                 <!-- Generator Controls -->
+                <div class="card mb-8">
+<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                         <div>
                             <h3 class="font-medium text-lg mb-1">Auto-Generation Settings</h3>
                             <p class="text-sm text-gray-500">Configure how your daily Reels are created</p>
                         </button>
                     </div>
                 </div>
                 <!-- Today's Generated Reel -->
                 <div class="mb-8">
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-medium">Today's Generated Reel</h3>
+                        <div class="text-sm text-text-secondary">
+                            <i class="fas fa-circle text-success mr-1 text-xs"></i> Ready to post
                         </div>
                     </div>
+                    <div class="card overflow-hidden p-0">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-0">
                             <!-- Video Preview -->
                             <div class="md:col-span-2 p-4">
                                 <div class="video-container bg-black rounded-lg overflow-hidden relative">
                 </div>
             </div>
         </main>
         <!-- Footer -->
+        <footer class="border-t border-surface-3 py-6">
+            <div class="container">
                 <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="flex items-center gap-2 mb-4 md:mb-0">
+                        <div class="w-5 h-5 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500"></div>
                         <span class="font-medium">ReelGen AI</span>
                     </div>
+                    <div class="flex gap-6">
+                        <a href="#" class="text-text-secondary hover:text-text-primary">Privacy</a>
+                        <a href="#" class="text-text-secondary hover:text-text-primary">Terms</a>
+                        <a href="#" class="text-text-secondary hover:text-text-primary">Help</a>
                     </div>
                 </div>
+                <div class="mt-4 text-center md:text-left text-sm text-text-tertiary">
                     © 2023 ReelGen AI. Automatically remixing your content for daily Reels.
                 </div>
             </div>
         </footer>
+</div>
     <script>
         // Simple script to simulate generation process

style.css CHANGED Viewed

@@ -1,28 +1,127 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+  --primary: #6366f1;
+  --primary-light: #818cf8;
+  --primary-dark: #4f46e5;
+  --surface: #ffffff;
+  --surface-1: #f8fafc;
+  --surface-2: #f1f5f9;
+  --surface-3: #e2e8f0;
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
+  --text-tertiary: #94a3b8;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
 body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  background-color: var(--surface-1);
+  color: var(--text-primary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+h1, h2, h3, h4 {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+a {
+  color: var(--primary);
+  text-decoration: none;
+  transition: var(--transition);
+}
+a:hover {
+  color: var(--primary-dark);
 }
+button {
+  transition: var(--transition);
 }
+.container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 .card {
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 1.5rem;
+  transition: var(--transition);
+}
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition);
+}
+.btn-primary {
+  background: var(--primary);
+  color: white;
+  border: none;
+}
+.btn-primary:hover {
+  background: var(--primary-dark);
+}
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--surface-3);
+  color: var(--text-secondary);
+}
+.btn-outline:hover {
+  background: var(--surface-2);
+  border-color: var(--surface-3);
+}
+.glass-effect {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #818cf8;
+    --primary-dark: #6366f1;
+    --surface: #1e293b;
+    --surface-1: #0f172a;
+    --surface-2: #1e293b;
+    --surface-3: #334155;
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --text-tertiary: #64748b;
+  }
+  .glass-effect {
+    background: rgba(30, 41, 59, 0.7);
+    border: 1px solid rgba(30, 41, 59, 0.2);
+  }
 }