Spaces:

BOBOYEONG
/

anycoder-d37857b9

Running

App Files Files Community

BOBOYEONG commited on Dec 12, 2025

Commit

0b13a68

verified ·

1 Parent(s): ef8c30d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +407 -19

index.html CHANGED Viewed

@@ -1,19 +1,407 @@
-<!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="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>안녕하세요 - Modern Greeting App</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #6c5ce7;
+            --secondary-color: #a29bfe;
+            --accent-color: #fd79a8;
+            --dark-color: #2d3436;
+            --light-color: #f5f6fa;
+            --shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Noto Sans KR', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: var(--dark-color);
+            line-height: 1.6;
+        }
+        header {
+            width: 100%;
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            box-shadow: var(--shadow);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .logo i {
+            animation: pulse 2s infinite;
+        }
+        .anycoder-link {
+            color: var(--dark-color);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: var(--transition);
+        }
+        .anycoder-link:hover {
+            color: var(--primary-color);
+        }
+        main {
+            flex: 1;
+            width: 90%;
+            max-width: 800px;
+            margin: 2rem auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+        .greeting-container {
+            background-color: white;
+            border-radius: 20px;
+            padding: 3rem 2rem;
+            box-shadow: var(--shadow);
+            margin-bottom: 2rem;
+            width: 100%;
+            transform: translateY(0);
+            opacity: 0;
+            animation: fadeInUp 0.8s ease forwards;
+        }
+        .greeting-text {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 2px 10px rgba(108, 92, 231, 0.2);
+        }
+        .sub-text {
+            font-size: 1.2rem;
+            color: var(--dark-color);
+            margin-bottom: 2rem;
+        }
+        .korean-flag {
+            width: 100px;
+            height: 60px;
+            background: linear-gradient(to right, white 50%, #cd2e3a 50%);
+            position: relative;
+            margin: 1rem auto;
+            border-radius: 5px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .korean-flag::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 30px;
+            height: 30px;
+            background: radial-gradient(circle, #002b8f 30%, #cd2e3a 30%, #cd2e3a 40%, white 40%);
+            border-radius: 50%;
+        }
+        .features {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 1.5rem;
+            width: 100%;
+            margin-top: 2rem;
+        }
+        .feature-card {
+            background-color: white;
+            border-radius: 15px;
+            padding: 1.5rem;
+            width: 200px;
+            box-shadow: var(--shadow);
+            transition: var(--transition);
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.8s ease forwards;
+        }
+        .feature-card:nth-child(1) { animation-delay: 0.2s; }
+        .feature-card:nth-child(2) { animation-delay: 0.4s; }
+        .feature-card:nth-child(3) { animation-delay: 0.6s; }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+        }
+        .feature-icon {
+            font-size: 2.5rem;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+        .feature-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--dark-color);
+        }
+        .feature-desc {
+            font-size: 0.9rem;
+            color: #636e72;
+        }
+        .time-greeting {
+            margin-top: 2rem;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            padding: 1rem 2rem;
+            background-color: rgba(108, 92, 231, 0.1);
+            border-radius: 10px;
+            animation: pulse 2s infinite;
+        }
+        footer {
+            width: 100%;
+            padding: 1.5rem;
+            text-align: center;
+            background-color: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05);
+        }
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .social-link {
+            color: var(--dark-color);
+            font-size: 1.5rem;
+            transition: var(--transition);
+        }
+        .social-link:hover {
+            color: var(--primary-color);
+            transform: translateY(-3px);
+        }
+        .copyright {
+            color: #636e72;
+            font-size: 0.9rem;
+        }
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.8;
+            }
+        }
+        @media (max-width: 768px) {
+            .greeting-text {
+                font-size: 2.5rem;
+            }
+            .features {
+                flex-direction: column;
+                align-items: center;
+            }
+            .feature-card {
+                width: 100%;
+                max-width: 300px;
+            }
+        }
+        @media (max-width: 480px) {
+            .greeting-text {
+                font-size: 2rem;
+            }
+            header {
+                flex-direction: column;
+                gap: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a href="#" class="logo">
+            <i class="fas fa-hand-paper"></i>
+            <span>한국어 인사</span>
+        </a>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
+            <i class="fas fa-code"></i> Built with anycoder
+        </a>
+    </header>
+    <main>
+        <div class="greeting-container">
+            <h1 class="greeting-text">안녕하세요!</h1>
+            <p class="sub-text">환영합니다! 한국어 인사 앱에 오신 것을 환영합니다.</p>
+            <div class="korean-flag"></div>
+            <div class="time-greeting" id="timeGreeting">
+                <!-- Will be updated by JavaScript -->
+            </div>
+        </div>
+        <div class="features">
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-language"></i>
+                </div>
+                <h3 class="feature-title">다국어 지원</h3>
+                <p class="feature-desc">여러 언어를 지원하는 인사 메시지를 제공합니다.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-clock"></i>
+                </div>
+                <h3 class="feature-title">시간 기반 인사</h3>
+                <p class="feature-desc">시간에 따라 다른 인사를 표시합니다.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-mobile-alt"></i>
+                </div>
+                <h3 class="feature-title">반응형 디자인</h3>
+                <p class="feature-desc">모든 기기에서 완벽하게 작동합니다.</p>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <div class="social-links">
+            <a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
+            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
+            <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
+            <a href="#" class="social-link"><i class="fab fa-github"></i></a>
+        </div>
+        <p class="copyright">© 2023 한국어 인사 앱. 모든 권리 보유.</p>
+    </footer>
+    <script>
+        // Update time-based greeting
+        function updateTimeGreeting() {
+            const now = new Date();
+            const hour = now.getHours();
+            let greeting;
+            if (hour < 12) {
+                greeting = "좋은 아침입니다! 🌞";
+            } else if (hour < 18) {
+                greeting = "좋은 오후입니다! ☀️";
+            } else {
+                greeting = "좋은 저녁입니다! 🌙";
+            }
+            document.getElementById('timeGreeting').textContent = greeting;
+        }
+        // Update greeting immediately and then every minute
+        updateTimeGreeting();
+        setInterval(updateTimeGreeting, 60000);
+        // Add some interactive animations
+        document.querySelectorAll('.feature-card').forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                card.style.transform = 'translateY(-5px) scale(1.02)';
+            });
+            card.addEventListener('mouseleave', () => {
+                card.style.transform = 'translateY(0) scale(1)';
+            });
+        });
+        // Add confetti animation on click
+        document.querySelector('.greeting-container').addEventListener('click', () => {
+            createConfetti();
+        });
+        function createConfetti() {
+            const colors = ['#6c5ce7', '#a29bfe', '#fd79a8', '#fdcb6e', '#00b894'];
+            const confettiCount = 50;
+            for (let i = 0; i < confettiCount; i++) {
+                const confetti = document.createElement('div');
+                confetti.style.position = 'absolute';
+                confetti.style.width = '10px';
+                confetti.style.height = '10px';
+                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                confetti.style.borderRadius = '50%';
+                confetti.style.left = Math.random() * 100 + '%';
+                confetti.style.top = '0';
+                confetti.style.zIndex = '1000';
+                confetti.style.animation = 'fall 3s linear forwards';
+                document.body.appendChild(confetti);
+                setTimeout(() => {
+                    confetti.remove();
+                }, 3000);
+            }
+        }
+        // Add fall animation for confetti
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fall {
+                to {
+                    transform: translateY(100vh) rotate(${Math.random() * 360}deg);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>