Spaces:

chansung
/

anycoder-1ac74a10

Running

App Files Files Community

chansung commited on 15 days ago

Commit

f458870

verified ·

1 Parent(s): 50c6cea

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +737 -19

index.html CHANGED Viewed

@@ -1,19 +1,737 @@
-<!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="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hello World - Interactive Experience</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --primary-color: #667eea;
+      --secondary-color: #764ba2;
+      --text-color: #ffffff;
+      --bg-color: #0f0f23;
+      --card-bg: rgba(255, 255, 255, 0.05);
+      --border-color: rgba(255, 255, 255, 0.1);
+      --shadow-color: rgba(102, 126, 234, 0.5);
+    }
+    [data-theme="light"] {
+      --primary-color: #667eea;
+      --secondary-color: #764ba2;
+      --text-color: #1a202c;
+      --bg-color: #f7fafc;
+      --card-bg: rgba(255, 255, 255, 0.8);
+      --border-color: rgba(0, 0, 0, 0.1);
+      --shadow-color: rgba(102, 126, 234, 0.3);
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: var(--bg-color);
+      color: var(--text-color);
+      min-height: 100vh;
+      overflow-x: hidden;
+      transition: all 0.3s ease;
+    }
+    /* Animated Background */
+    .bg-animation {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 0;
+      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+      opacity: 0.1;
+    }
+    .bg-animation::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
+      animation: rotate 20s linear infinite;
+    }
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    /* Header */
+    header {
+      position: relative;
+      z-index: 100;
+      padding: 20px;
+      background: var(--card-bg);
+      backdrop-filter: blur(10px);
+      border-bottom: 1px solid var(--border-color);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 15px;
+    }
+    .logo {
+      font-size: 1.5rem;
+      font-weight: bold;
+      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .header-controls {
+      display: flex;
+      gap: 15px;
+      align-items: center;
+    }
+    .theme-toggle {
+      width: 50px;
+      height: 25px;
+      background: var(--border-color);
+      border-radius: 25px;
+      position: relative;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .theme-toggle::after {
+      content: '🌙';
+      position: absolute;
+      width: 21px;
+      height: 21px;
+      background: white;
+      border-radius: 50%;
+      top: 2px;
+      left: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      transition: all 0.3s ease;
+    }
+    [data-theme="light"] .theme-toggle::after {
+      content: '☀️';
+      left: calc(100% - 23px);
+    }
+    .language-selector {
+      padding: 8px 15px;
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 20px;
+      color: var(--text-color);
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .language-selector:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 15px var(--shadow-color);
+    }
+    /* Main Content */
+    .container {
+      position: relative;
+      z-index: 10;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 40px 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: calc(100vh - 85px);
+      justify-content: center;
+    }
+    .hello-world {
+      font-size: clamp(3rem, 10vw, 8rem);
+      font-weight: 900;
+      text-align: center;
+      margin-bottom: 30px;
+      position: relative;
+      letter-spacing: -2px;
+      animation: fadeInUp 1s ease-out;
+    }
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .gradient-text {
+      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), #f093fb, #f5576c);
+      background-size: 300% 300%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradientShift 5s ease infinite;
+    }
+    @keyframes gradientShift {
+      0%,
+      100% {
+        background-position: 0% 50%;
+      }
+      50% {
+        background-position: 100% 50%;
+      }
+    }
+    .subtitle {
+      font-size: 1.5rem;
+      opacity: 0.8;
+      margin-bottom: 40px;
+      animation: fadeInUp 1s ease-out 0.2s both;
+    }
+    /* Interactive Cards */
+    .cards-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 25px;
+      width: 100%;
+      max-width: 900px;
+      margin-bottom: 40px;
+    }
+    .card {
+      background: var(--card-bg);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--border-color);
+      border-radius: 20px;
+      padding: 30px;
+      text-align: center;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      animation: fadeInUp 1s ease-out calc(0.4s + var(--index)) both;
+    }
+    .card:hover {
+      transform: translateY(-10px) scale(1.05);
+      box-shadow: 0 20px 40px var(--shadow-color);
+      border-color: var(--primary-color);
+    }
+    .card-icon {
+      font-size: 3rem;
+      margin-bottom: 15px;
+    }
+    .card-title {
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-bottom: 10px;
+      color: var(--primary-color);
+    }
+    .card-description {
+      opacity: 0.7;
+      line-height: 1.6;
+    }
+    /* Interactive Button */
+    .cta-button {
+      padding: 18px 50px;
+      font-size: 1.2rem;
+      font-weight: 600;
+      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+      color: white;
+      border: none;
+      border-radius: 50px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+      animation: fadeInUp 1s ease-out 0.6s both;
+    }
+    .cta-button::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      transform: translate(-50%, -50%);
+      transition: width 0.6s, height 0.6s;
+    }
+    .cta-button:hover::before {
+      width: 300px;
+      height: 300px;
+    }
+    .cta-button:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 15px 30px var(--shadow-color);
+    }
+    /* Particle Canvas */
+    #particleCanvas {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
+    }
+    /* Floating Animation */
+    .floating {
+      animation: floating 3s ease-in-out infinite;
+    }
+    @keyframes floating {
+      0%,
+      100% {
+        transform: translateY(0px);
+      }
+      50% {
+        transform: translateY(-20px);
+      }
+    }
+    /* Typing Animation */
+    .typing-container {
+      min-height: 40px;
+      margin-bottom: 30px;
+      font-size: 1.2rem;
+      font-family: 'Courier New', monospace;
+    }
+    .typing-text {
+      border-right: 3px solid var(--primary-color);
+      animation: blink 0.7s infinite;
+    }
+    @keyframes blink {
+      0%,
+      50% {
+        border-color: var(--primary-color);
+      }
+      51%,
+      100% {
+        border-color: transparent;
+      }
+    }
+    /* Footer */
+    footer {
+      position: relative;
+      z-index: 100;
+      padding: 20px;
+      text-align: center;
+      background: var(--card-bg);
+      backdrop-filter: blur(10px);
+      border-top: 1px solid var(--border-color);
+      margin-top: auto;
+    }
+    .footer-link {
+      color: var(--primary-color);
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+    .footer-link:hover {
+      text-decoration: underline;
+      transform: scale(1.05);
+      display: inline-block;
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .hello-world {
+        font-size: clamp(2.5rem, 12vw, 5rem);
+      }
+      .subtitle {
+        font-size: 1.2rem;
+      }
+      .cards-container {
+        grid-template-columns: 1fr;
+        max-width: 400px;
+      }
+    }
+    /* Toast Notification */
+    .toast {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+      color: white;
+      padding: 15px 25px;
+      border-radius: 10px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+      transform: translateX(400px);
+      transition: transform 0.3s ease;
+      z-index: 1000;
+    }
+    .toast.show {
+      transform: translateX(0);
+    }
+  </style>
+</head>
+<body data-theme="dark">
+  <div class="bg-animation"></div>
+  <canvas id="particleCanvas"></canvas>
+  <header>
+    <div class="logo">Hello World</div>
+    <div class="header-controls">
+      <select class="language-selector" id="languageSelector">
+                <option value="en">English</option>
+                <option value="es">Español</option>
+                <option value="fr">Français</option>
+                <option value="de">Deutsch</option>
+                <option value="ja">日本語</option>
+                <option value="zh">中文</option>
+            </select>
+      <div class="theme-toggle" id="themeToggle"></div>
+    </div>
+  </header>
+  <main class="container">
+    <div class="typing-container">
+      <span class="typing-text" id="typingText"></span>
+    </div>
+    <h1 class="hello-world gradient-text floating">
+      <span id="helloText">Hello</span> <span id="worldText">World</span>
+    </h1>
+    <p class="subtitle" id="subtitle">Welcome to the future of web experiences</p>
+    <div class="cards-container">
+      <div class="card" style="--index: 0s" onclick="handleCardClick('design')">
+        <div class="card-icon">🎨</div>
+        <h3 class="card-title">Modern Design</h3>
+        <p class="card-description">Beautiful gradients and animations that captivate</p>
+      </div>
+      <div class="card" style="--index: 0.1s" onclick="handleCardClick('interactive')">
+        <div class="card-icon">⚡</div>
+        <h3 class="card-title">Interactive</h3>
+        <p class="card-description">Click, hover, and explore dynamic elements</p>
+      </div>
+      <div class="card" style="--index: 0.2s" onclick="handleCardClick('responsive')">
+        <div class="card-icon">📱</div>
+        <h3 class="card-title">Responsive</h3>
+        <p class="card-description">Perfectly adapted for every screen size</p>
+      </div>
+    </div>
+    <button class="cta-button" onclick="handleCTAClick()">
+            Experience More
+        </button>
+  </main>
+  <footer>
+    <p>Created with ❤️ | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+        class="footer-link">Built with anycoder</a></p>
+  </footer>
+  <div class="toast" id="toast"></div>
+  <script>
+    // Translations
+        const translations = {
+            en: { hello: 'Hello', world: 'World', subtitle: 'Welcome to the future of web experiences' },
+            es: { hello: 'Hola', world: 'Mundo', subtitle: 'Bienvenido al futuro de las experiencias web' },
+            fr: { hello: 'Bonjour', world: 'Monde', subtitle: 'Bienvenue dans le futur des expériences web' },
+            de: { hello: 'Hallo', world: 'Welt', subtitle: 'Willkommen in der Zukunft des Web-Erlebnisses' },
+            ja: { hello: 'こんにちは', world: '世界', subtitle: 'ウェブ体験の未来へようこそ' },
+            zh: { hello: '你好', world: '世界', subtitle: '欢迎来到网络体验的未来' }
+        };
+        // Theme Toggle
+        const themeToggle = document.getElementById('themeToggle');
+        const body = document.body;
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = body.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            body.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+        });
+        // Load saved theme
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        body.setAttribute('data-theme', savedTheme);
+        // Language Selector
+        const languageSelector = document.getElementById('languageSelector');
+        const helloText = document.getElementById('helloText');
+        const worldText = document.getElementById('worldText');
+        const subtitle = document.getElementById('subtitle');
+        languageSelector.addEventListener('change', (e) => {
+            const lang = e.target.value;
+            const translation = translations[lang];
+            helloText.textContent = translation.hello;
+            worldText.textContent = translation.world;
+            subtitle.textContent = translation.subtitle;
+            showToast(`Language changed to ${e.target.options[e.target.selectedIndex].text}`);
+        });
+        // Typing Animation
+        const messages = [
+            'Initializing experience...',
+            'Loading modern UI...',
+            'Preparing interactions...',
+            'Welcome aboard!'
+        ];
+        let messageIndex = 0;
+        let charIndex = 0;
+        let isDeleting = false;
+        function typeMessage() {
+            const typingText = document.getElementById('typingText');
+            const currentMessage = messages[messageIndex];
+            if (isDeleting) {
+                typingText.textContent = currentMessage.substring(0, charIndex - 1);
+                charIndex--;
+            } else {
+                typingText.textContent = currentMessage.substring(0, charIndex + 1);
+                charIndex++;
+            }
+            let typeSpeed = isDeleting ? 50 : 100;
+            if (!isDeleting && charIndex === currentMessage.length) {
+                typeSpeed = 2000;
+                isDeleting = true;
+            } else if (isDeleting && charIndex === 0) {
+                isDeleting = false;
+                messageIndex = (messageIndex + 1) % messages.length;
+                typeSpeed = 500;
+            }
+            setTimeout(typeMessage, typeSpeed);
+        }
+        typeMessage();
+        // Particle Animation
+        const canvas = document.getElementById('particleCanvas');
+        const ctx = canvas.getContext('2d');
+        let particles = [];
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        class Particle {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.size = Math.random() * 3 + 1;
+                this.speedX = Math.random() * 2 - 1;
+                this.speedY = Math.random() * 2 - 1;
+                this.opacity = Math.random() * 0.5 + 0.2;
+            }
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                if (this.x > canvas.width) this.x = 0;
+                if (this.x < 0) this.x = canvas.width;
+                if (this.y > canvas.height) this.y = 0;
+                if (this.y < 0) this.y = canvas.height;
+            }
+            draw() {
+                ctx.fillStyle = `rgba(102, 126, 234, ${this.opacity})`;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        function initParticles() {
+            particles = [];
+            for (let i = 0; i < 50; i++) {
+                particles.push(new Particle());
+            }
+        }
+        function animateParticles() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            particles.forEach(particle => {
+                particle.update();
+                particle.draw();
+            });
+            // Draw connections
+            particles.forEach((particle, index) => {
+                for (let j = index + 1; j < particles.length; j++) {
+                    const dx = particles[j].x - particle.x;
+                    const dy = particles[j].y - particle.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < 150) {
+                        ctx.strokeStyle = `rgba(102, 126, 234, ${0.1 * (1 - distance / 150)})`;
+                        ctx.lineWidth = 1;
+                        ctx.beginPath();
+                        ctx.moveTo(particle.x, particle.y);
+                        ctx.lineTo(particles[j].x, particles[j].y);
+                        ctx.stroke();
+                    }
+                }
+            });
+            requestAnimationFrame(animateParticles);
+        }
+        window.addEventListener('resize', () => {
+            resizeCanvas();
+            initParticles();
+        });
+        resizeCanvas();
+        initParticles();
+        animateParticles();
+        // Card Click Handler
+        function handleCardClick(type) {
+            const messages = {
+                design: 'Design is not just what it looks like. Design is how it works!',
+                interactive: 'Interactivity makes the web come alive!',
+                responsive: 'Responsive design ensures everyone gets a great experience!'
+            };
+            showToast(messages[type]);
+        }
+        // CTA Button Handler
+        function handleCTAClick() {
+            const helloWorld = document.querySelector('.hello-world');
+            helloWorld.style.transform = 'scale(1.2) rotate(5deg)';
+            setTimeout(() => {
+                helloWorld.style.transform = 'scale(1) rotate(0deg)';
+            }, 300);
+            showToast('Amazing! You discovered the secret animation! 🎉');
+            // Create confetti effect
+            createConfetti();
+        }
+        // Toast Notification
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+        // Confetti Effect
+        function createConfetti() {
+            const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c'];
+            const confettiCount = 50;
+            for (let i = 0; i < confettiCount; i++) {
+                const confetti = document.createElement('div');
+                confetti.style.position = 'fixed';
+                confetti.style.width = '10px';
+                confetti.style.height = '10px';
+                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                confetti.style.left = Math.random() * 100 + '%';
+                confetti.style.top = '-10px';
+                confetti.style.opacity = '1';
+                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
+                confetti.style.transition = 'all 2s ease-out';
+                confetti.style.zIndex = '9999';
+                confetti.style.pointerEvents = 'none';
+                document.body.appendChild(confetti);
+                setTimeout(() => {
+                    confetti.style.top = '100%';
+                    confetti.style.opacity = '0';
+                    confetti.style.transform = `rotate(${Math.random() * 720}deg)`;
+                }, 10);
+                setTimeout(() => {
+                    confetti.remove();
+                }, 2000);
+            }
+        }
+        // Mouse interaction with particles
+        canvas.style.pointerEvents = 'auto';
+        canvas.addEventListener('mousemove', (e) => {
+            const mouseX = e.clientX;
+            const mouseY = e.clientY;
+            particles.forEach(particle => {
+                const dx = mouseX - particle.x;
+                const dy = mouseY - particle.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < 100) {
+                    const force = (100 - distance) / 100;
+                    particle.x -= (dx / distance) * force * 2;
+                    particle.y -= (dy / distance) * force * 2;
+                }
+            });
+        });
+        // Initial welcome message
+        setTimeout(() => {
+            showToast('Welcome! Explore the interactive features! 👋');
+        }, 2000);
+  </script>
+</body>
+</html>