Update hero section tools and add PLAY NOW banner to README

2025-12-25 18:51:18 +04:00
parent 56d2d2d818
commit b1b8d5a472
3 changed files with 106 additions and 7 deletions
--- a/README.md
+++ b/README.md
@@ -1,8 +1,16 @@
 # 🎄 TRAE AURORA: Crystalline Christmas Experience

-[![TRAE](https://img.shields.io/badge/Powered%20By-TRAE.AI-00ff66?style=for-the-badge)](https://trae.ai)
-[![GLM 4.7](https://img.shields.io/badge/Model-GLM%204.7-blue?style=for-the-badge)](https://z.ai/subscribe?ic=R0K78RJKNW)
-[![Gemini 3 Flash](https://img.shields.io/badge/Model-Gemini%203%20Flash-orange?style=for-the-badge)](https://deepmind.google/technologies/gemini/)
+<div align="center">
+  <a href="https://trae9nt2qbd3.vercel.app" target="_blank">
+    <img src="https://img.shields.io/badge/PLAY%20NOW-TRAE%20AURORA-00ff66?style=for-the-badge&logo=vercel&logoColor=white" height="60">
+  </a>
+  <br>
+  <p><i>Experience the high-performance HTML5 Christmas adventure live on Vercel!</i></p>
+</div>
+
+[![TRAE](https://img.shields.io/badge/IDE-TRAE.AI-00ff66?style=flat-square)](https://trae.ai)
+[![GLM 4.7](https://img.shields.io/badge/Model-GLM%204.7-blue?style=flat-square)](https://z.ai/subscribe?ic=R0K78RJKNW)
+[![Gemini 3 Flash](https://img.shields.io/badge/Model-Gemini%203%20Flash-orange?style=flat-square)](https://deepmind.google/technologies/gemini/)

 An elite, high-performance HTML5 Christmas experience built with crystalline precision. This project showcases advanced canvas animations, procedural generation, and dynamic game mechanics.

@@ -19,10 +27,12 @@ An elite, high-performance HTML5 Christmas experience built with crystalline pre

 ## 🛠️ Technical Stack

+- **IDE**: [TRAE.AI](https://trae.ai)
+- **AI Models**: 
+  - [GLM 4.7](https://z.ai/subscribe?ic=R0K78RJKNW) (Affiliate Link)
+  - Google Gemini 3 Flash
 - **Frontend**: Pure HTML5, CSS3 (Advanced Grid/Flex), Vanilla JavaScript (ES6+).
 - **Graphics**: 2D Canvas API with 3D geometry simulation.
- **Architecture**: Object-Oriented Design (Class-based game entities).
- **AI-Powered**: Co-authored by **GLM 4.7** and **Gemini 3 Flash** within the **TRAE IDE**.

 ## 🎨 Visuals

@@ -30,7 +40,7 @@ The project features a deep-space aesthetic with neon green accents (`#00ff66`),

 ## 🔗 Credits

-Developed by **[Roman | RyzenAdvanced](https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders)**.
+Developed by **[Roman | RyzenAdvanced](https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders)** using **TRAE.AI IDE**, **GLM 4.7**, and **Google Gemini 3 Flash**.

 ---
 *&copy; 2025 Coded with Crystalline Precision.*
--- a/index.html
+++ b/index.html
@@ -28,7 +28,16 @@
        <section id="hero" class="hero">
            <div class="hero-content">
                <h1 class="glitch-text" data-text="TRAE CHRISTMAS">TRAE CHRISTMAS</h1>
-                <p class="subtitle">Elevating the holiday spirit through crystalline logic.</p>
+                <p class="subtitle">Built using <strong>TRAE.AI IDE</strong>, <a href="https://z.ai/subscribe?ic=R0K78RJKNW" target="_blank" class="glm-link">GLM 4.7</a>, and <strong>Google Gemini 3 Flash</strong>.</p>
+                
+                <a href="https://trae9nt2qbd3.vercel.app" target="_blank" class="play-banner">
+                    <div class="banner-inner">
+                        <span class="banner-tag">LIVE NOW</span>
+                        <h2 class="banner-title">PLAY TRAE AURORA</h2>
+                        <p class="banner-subtitle">Experience the full crystalline adventure on Vercel</p>
+                        <div class="banner-glow"></div>
+                    </div>
+                </a>

                <div id="countdown" class="countdown-container">
                    <div class="time-block">
--- a/style.css
+++ b/style.css
@@ -94,6 +94,86 @@ body {
    color: var(--trae-green);
 }

+/* Play Banner */
+.play-banner {
+    display: block;
+    margin: 40px auto;
+    max-width: 800px;
+    text-decoration: none;
+    position: relative;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    z-index: 10;
+}
+
+.banner-inner {
+    background: rgba(0, 255, 102, 0.05);
+    backdrop-filter: blur(15px);
+    border: 2px solid rgba(0, 255, 102, 0.3);
+    border-radius: 24px;
+    padding: 40px 60px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
+                inset 0 0 30px rgba(0, 255, 102, 0.1);
+}
+
+.play-banner:hover {
+    transform: scale(1.02) translateY(-5px);
+}
+
+.banner-tag {
+    background: var(--trae-green);
+    color: var(--bg-dark);
+    font-family: var(--font-accent);
+    font-weight: 700;
+    font-size: 0.8rem;
+    padding: 6px 16px;
+    border-radius: 50px;
+    display: inline-block;
+    margin-bottom: 20px;
+    letter-spacing: 2px;
+    box-shadow: 0 0 20px var(--trae-green);
+}
+
+.banner-title {
+    font-family: var(--font-accent);
+    font-size: 3rem;
+    color: white;
+    margin-bottom: 10px;
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+}
+
+.banner-subtitle {
+    color: var(--trae-green);
+    font-size: 1.2rem;
+    font-weight: 500;
+    opacity: 0.9;
+}
+
+.banner-glow {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(0, 255, 102, 0.1) 0%, transparent 70%);
+    pointer-events: none;
+    animation: rotateGlow 10s linear infinite;
+}
+
+@keyframes rotateGlow {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.play-banner:hover .banner-inner {
+    border-color: var(--trae-green);
+    background: rgba(0, 255, 102, 0.1);
+    box-shadow: 0 30px 60px rgba(0, 255, 102, 0.2),
+                inset 0 0 40px rgba(0, 255, 102, 0.2);
+}
+
 /* Hero Section */
 .hero {
    height: 100vh;