Spaces:

ChetanSaifsAi
/

ai-text-to-video-template

Running

App Files Files Community

ChetanSaifsAi commited on Jan 9

Commit

6800c48

verified ·

1 Parent(s): a36ff11

updated

Browse files

Files changed (2) hide show

index.html +28 -1
styles.css +124 -0

index.html CHANGED Viewed

@@ -5,13 +5,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Transform text into engaging videos with AI - Try our powerful text-to-video conversion tool">
     <meta name="keywords" content="AI text to video, video generation, content creation, artificial intelligence">
-    <title>AI Text to Video Converter | Transform Text to Engaging Videos</title>
     <link rel="stylesheet" href="styles.css">
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
     <div id="app">
         <main class="main-container">
             <h1 class="main-title">Text to Video Generator</h1>
             <p class="subtitle">Create stunning videos from your descriptions in seconds</p>
@@ -84,6 +99,18 @@
                 </button>
             </div>
         </div>
     </div>
     <script src="app.js"></script>
 </body>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Transform text into engaging videos with AI - Try our powerful text-to-video conversion tool">
     <meta name="keywords" content="AI text to video, video generation, content creation, artificial intelligence">
+    <title>SAIFS AI - Text to Video Converter</title>
     <link rel="stylesheet" href="styles.css">
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
     <div id="app">
+        <header class="site-header">
+            <a href="https://saifs.ai/text-to-video" class="logo-link">
+                <div class="logo-icon">
+                    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect width="40" height="40" rx="8" fill="#6366f1"/>
+                        <path d="M12 14.5C12 13.1193 13.1193 12 14.5 12H25.5C26.8807 12 28 13.1193 28 14.5V25.5C28 26.8807 26.8807 28 25.5 28H14.5C13.1193 28 12 26.8807 12 25.5V14.5Z" fill="white"/>
+                        <path d="M20 16L16 18.5L20 21L24 18.5L20 16Z" fill="#6366f1"/>
+                        <path d="M16 22.5L20 25L24 22.5V18.5L20 21L16 18.5V22.5Z" fill="#6366f1"/>
+                    </svg>
+                </div>
+                <span class="logo-text">SAIFS AI</span>
+            </a>
+            <a href="https://saifs.ai/text-to-video" class="website-link">Visit Our Website</a>
+        </header>
         <main class="main-container">
             <h1 class="main-title">Text to Video Generator</h1>
             <p class="subtitle">Create stunning videos from your descriptions in seconds</p>
                 </button>
             </div>
         </div>
+        <!-- Footer -->
+        <footer class="site-footer">
+            <div class="footer-content">
+                Created with <i class="fas fa-heart"></i> by
+                <a href="https://saifs.ai/text-to-video" class="footer-link">SAIFS AI</a>
+            </div>
+            <div class="footer-subtext">
+                Experience more AI solutions at
+                <a href="https://saifs.ai/text-to-video" class="footer-link">saifs.ai/text-to-video</a>
+            </div>
+        </footer>
     </div>
     <script src="app.js"></script>
 </body>

styles.css CHANGED Viewed

@@ -32,6 +32,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 .main-title {
@@ -303,4 +304,127 @@ body {
     .modal-buttons {
         flex-direction: column;
     }
 }

     display: flex;
     flex-direction: column;
     justify-content: center;
+    padding-top: 5rem;
 }
 .main-title {
     .modal-buttons {
         flex-direction: column;
     }
+}
+.site-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+}
+.logo-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: var(--text-color);
+    padding: 0.25rem;
+}
+.logo-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.logo-icon svg {
+    width: 100%;
+    height: 100%;
+}
+.logo-link:hover .logo-icon svg rect {
+    fill: var(--hover-color);
+    transition: fill 0.3s ease;
+}
+.logo-text {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-color);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+.website-link {
+    padding: 0.5rem 1rem;
+    background-color: var(--primary-color);
+    color: white;
+    text-decoration: none;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    transition: background-color 0.3s ease;
+}
+.website-link:hover {
+    background-color: var(--hover-color);
+}
+.site-footer {
+    text-align: center;
+    padding: 2rem 1rem;
+    color: #6b7280;
+    font-size: 0.9rem;
+    background-color: white;
+    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
+    position: relative;
+    margin-top: 2rem;
+    border-top: 1px solid var(--border-color);
+}
+.footer-content {
+    max-width: 1400px;
+    margin: 0 auto;
+    margin-bottom: 0.5rem;
+}
+.footer-content .fa-heart {
+    color: #ef4444;
+    margin: 0 0.25rem;
+    animation: heartbeat 1.5s ease infinite;
+}
+.footer-link {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+.footer-link:hover {
+    color: var(--hover-color);
+}
+.footer-subtext {
+    color: #9ca3af;
+    font-size: 0.85rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+@keyframes heartbeat {
+    0% {
+        transform: scale(1);
+    }
+    14% {
+        transform: scale(1.3);
+    }
+    28% {
+        transform: scale(1);
+    }
+    42% {
+        transform: scale(1.3);
+    }
+    70% {
+        transform: scale(1);
+    }
 }