Spaces:

eleasm
/

anycoder-4a8ef0ff

Running

App Files Files Community

eleasm commited on Apr 30

Commit

0145ceb

verified ·

1 Parent(s): 2b0e905

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +355 -19

index.html CHANGED Viewed

@@ -1,19 +1,355 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="pt">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ola - Welcome</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap" rel="stylesheet">
+    <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>
+</head>
+<body>
+    <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>
+</body>
+</html>