Update app.py from anycoder

app.py

@@ -0,0 +1,386 @@
+import gradio as gr
+
+# HTML content for the landing page (body content only)
+html_content = """
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --primary: #ff6b6b;
+      --secondary: #4ecdc4;
+      --accent: #ffe66d;
+      --dark: #2d3436;
+      --light: #f8f9fa;
+    }
+
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      max-width: 1200px;
+      padding: 2rem;
+    }
+
+    .hero {
+      text-align: center;
+      color: white;
+      position: relative;
+      z-index: 2;
+    }
+
+    .greeting {
+      font-size: clamp(4rem, 15vw, 10rem);
+      font-weight: 900;
+      letter-spacing: -0.05em;
+      text-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+      animation: float 3s ease-in-out infinite;
+      background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    @keyframes float {
+
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+
+      50% {
+        transform: translateY(-20px);
+      }
+    }
+
+    .subtitle {
+      font-size: clamp(1rem, 3vw, 1.5rem);
+      font-weight: 300;
+      margin-top: 1rem;
+      opacity: 0.9;
+      animation: fadeInUp 1s ease-out 0.3s both;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .buttons {
+      margin-top: 3rem;
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      flex-wrap: wrap;
+      animation: fadeInUp 1s ease-out 0.6s both;
+    }
+
+    .btn {
+      padding: 1rem 2.5rem;
+      border: none;
+      border-radius: 50px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .btn-primary {
+      background: white;
+      color: #667eea;
+    }
+
+    .btn-primary:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+    }
+
+    .btn-secondary {
+      background: transparent;
+      color: white;
+      border: 2px solid white;
+    }
+
+    .btn-secondary:hover {
+      background: white;
+      color: #667eea;
+      transform: translateY(-3px);
+    }
+
+    /* Floating shapes */
+    .shape {
+      position: absolute;
+      border-radius: 50%;
+      animation: floatShape 6s ease-in-out infinite;
+    }
+
+    .shape-1 {
+      width: 300px;
+      height: 300px;
+      background: rgba(255, 255, 255, 0.1);
+      top: -100px;
+      left: -100px;
+      animation-delay: 0s;
+    }
+
+    .shape-2 {
+      width: 200px;
+      height: 200px;
+      background: rgba(255, 230, 109, 0.2);
+      bottom: 10%;
+      right: 5%;
+      animation-delay: -2s;
+    }
+
+    .shape-3 {
+      width: 150px;
+      height: 150px;
+      background: rgba(78, 205, 196, 0.2);
+      top: 30%;
+      right: -50px;
+      animation-delay: -4s;
+    }
+
+    @keyframes floatShape {
+
+      0%,
+      100% {
+        transform: translate(0, 0) rotate(0deg);
+      }
+
+      33% {
+        transform: translate(30px, -30px) rotate(120deg);
+      }
+
+      66% {
+        transform: translate(-20px, 20px) rotate(240deg);
+      }
+    }
+
+    /* Card Section */
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 2rem;
+      margin-top: 4rem;
+      animation: fadeInUp 1s ease-out 0.9s both;
+    }
+
+    .card {
+      background: rgba(255, 255, 255, 0.15);
+      backdrop-filter: blur(10px);
+      border-radius: 20px;
+      padding: 2rem;
+      text-align: center;
+      transition: all 0.3s ease;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .card:hover {
+      transform: translateY(-10px);
+      background: rgba(255, 255, 255, 0.25);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+    }
+
+    .card-icon {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+    }
+
+    .card h3 {
+      font-size: 1.2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .card p {
+      font-size: 0.9rem;
+      opacity: 0.8;
+    }
+
+    /* Footer */
+    .footer {
+      position: fixed;
+      bottom: 1rem;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    .footer a {
+      color: white;
+      text-decoration: none;
+      font-weight: 600;
+    }
+
+    .footer a:hover {
+      text-decoration: underline;
+    }
+
+    /* Interactive greeting */
+    .interactive-area {
+      margin-top: 2rem;
+      animation: fadeInUp 1s ease-out 1.2s both;
+    }
+
+    .name-input {
+      padding: 1rem 2rem;
+      border: none;
+      border-radius: 50px;
+      font-size: 1rem;
+      font-family: inherit;
+      width: 100%;
+      max-width: 300px;
+      outline: none;
+      transition: all 0.3s ease;
+    }
+
+    .name-input:focus {
+      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
+    }
+
+    .personalized-greeting {
+      margin-top: 1.5rem;
+      font-size: 1.5rem;
+      font-weight: 600;
+      min-height: 2rem;
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .greeting {
+        font-size: 4rem;
+      }
+
+      .cards {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+
+  <div class="container">
+    <div class="shape shape-1"></div>
+    <div class="shape shape-2"></div>
+    <div class="shape shape-3"></div>
+
+    <div class="hero">
+      <h1 class="greeting">Olá!</h1>
+      <p class="subtitle">Bem-vindo a uma experiência incrível</p>
+
+      <div class="buttons">
+        <button class="btn btn-primary" onclick="explore()">
+          <span>🚀</span> Explorar
+        </button>
+        <button class="btn btn-secondary" onclick="learnMore()">
+          <span>ℹ️</span> Saber Mais
+        </button>
+      </div>
+
+      <div class="interactive-area">
+        <input type="text" class="name-input" placeholder="Digite seu nome..." id="nameInput" oninput="updateGreeting()">
+        <div class="personalized-greeting" id="personalizedGreeting"></div>
+      </div>
+
+      <div class="cards">
+        <div class="card">
+          <div class="card-icon">🎨</div>
+          <h3>Design Moderno</h3>
+          <p>Interface belamente projetada com as últimas tendências</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">⚡</div>
+          <h3>Super Rápido</h3>
+          <p>Performance otimizada para a melhor experiência</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">🎯</div>
+          <h3>Focado em Você</h3>
+          <p>Construído com atenção aos mínimos detalhes</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+  </div>
+
+  <script>
+    function updateGreeting() {
+      const name = document.getElementById('nameInput').value;
+      const greeting = document.getElementById('personalizedGreeting');
+      
+      if (name.trim()) {
+        const names = name.trim().split(' ');
+        const firstName = names[0];
+        greeting.textContent = `É um prazer conhecê-lo, ${firstName}! 👋`;
+        greeting.style.animation = 'none';
+        greeting.offsetHeight; /* trigger reflow */
+        greeting.style.animation = 'fadeInUp 0.5s ease-out';
+      } else {
+        greeting.textContent = '';
+      }
+    }
+
+    function explore() {
+      alert('🚀 Vamos explorar o mundo juntos!');
+    }
+
+    function learnMore() {
+      alert('ℹ️ Em breve mais informações sobre este projeto!');
+    }
+
+    // Add some interactivity with mouse movement
+    document.addEventListener('mousemove', (e) => {
+      const shapes = document.querySelectorAll('.shape');
+      const x = e.clientX / window.innerWidth;
+      const y = e.clientY / window.innerHeight;
+
+      shapes.forEach((shape, index) => {
+        const speed = (index + 1) * 20;
+        shape.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
+      });
+    });
+  </script>
+"""
+
+# JavaScript to inject fonts
+head_content = """
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap" rel="stylesheet">
+"""
+
+# Create the Gradio app
+with gr.Blocks() as demo:
+    gr.HTML(html_content)
+
+# Launch with theme and custom head
+demo.launch(
+    theme=gr.themes.Soft(),
+    head=head_content,
+    footer_links=[
+        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
+    ]
+)