Merge pull request #63 from some1galaxy/develop

static/app.css

@@ -28,9 +28,20 @@ footer{display:none!important}
     padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
 }
 .app-header-left{display:flex;align-items:center;gap:12px}
-.app-header-right{display:flex;align-items:center}
-.app-header-link{color:#ff80c0;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;opacity:.85;transition:opacity .15s}
-.app-header-link:hover{opacity:1;text-decoration:underline}
+.promo-banner{
+    display:flex;align-items:center;justify-content:center;gap:14px;
+    padding:12px 24px;text-decoration:none;cursor:pointer;
+    background:linear-gradient(135deg,#ff0080,#ff4da6);
+    border-bottom:1px solid #4d0030;transition:opacity .15s;
+}
+.promo-banner:hover{opacity:.92}
+.promo-banner-icon{font-size:18px;line-height:1}
+.promo-banner-text{color:#fff;font-size:13px;font-weight:500}
+.promo-banner-text strong{font-weight:800}
+.promo-banner-cta{
+    color:#280018;background:#fff;font-size:12px;font-weight:700;
+    padding:4px 12px;border-radius:20px;white-space:nowrap;flex-shrink:0;
+}
 .app-logo{
     width:36px;height:36px;background:linear-gradient(135deg,#ff0080,#ff4da6,#ff80c0);
     border-radius:10px;display:flex;align-items:center;justify-content:center;
@@ -389,8 +400,8 @@ body:not(.dark) #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-colo
     .app-shell{margin:0;border-radius:0;border-left:none;border-right:none}
     .app-header{padding:12px 14px;gap:8px}
     .app-title{font-size:15px}
-    .app-header-right{width:100%}
-    .app-header-link{font-size:12px;white-space:normal}
+    .promo-banner{flex-direction:column;gap:6px;padding:10px 14px;text-align:center}
+    .promo-banner-text{font-size:12px}
     .app-notice{padding:10px 14px}
     .app-toolbar{padding:8px 12px;gap:6px}
     .modern-tb-btn{min-height:40px;padding:0 12px}

templates/app.html

@@ -7,11 +7,14 @@
             <span class="app-badge">v1.1</span>
             <span class="app-badge fast">4-Step Fast</span>
         </div>
-        <div class="app-header-right">
-            <a href="https://huggingface.co/spaces/someone-in-the-world/HighQualityVideoGeneration" target="_blank" class="app-header-link">Also try: High Quality Video Generation &#8594;</a>
-        </div>
     </div>
 
+    <a href="https://huggingface.co/spaces/someone-in-the-world/HighQualityVideoGeneration" target="_blank" class="promo-banner">
+        <span class="promo-banner-icon">🎬</span>
+        <span class="promo-banner-text"><strong>New:</strong> Bring your images to life &mdash; try <strong>High Quality Video Generation</strong></span>
+        <span class="promo-banner-cta">Try it now &#8594;</span>
+    </a>
+
     <div class="app-notice">
         <ul class="notice-list">
             <li>Aims to produce high-resolution 2K output images while keeping the generating speed, based on <a href="https://github.com/PRITHIVSAKTHIUR/FireRed-Image-Edit-1.0-Fast" target="_blank">FireRed-Image-Edit-1.0-Fast</a>.</li>