Hugging Face's logo

Spaces:
BOBOYEONG
/
anycoder-d37857b9
Running

App Files Community
anycoder-d37857b9 / index.html
BOBOYEONG's picture
BOBOYEONG
Upload folder using huggingface_hub
0b13a68 verified
Raw
History Blame Contribute Delete
12.2 kB
<!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>