Spaces:

yoon2566
/

25codingchallenge2

Running

App Files Files Community

yoon2566 commited on Jul 29

Commit

2ae61cc

verified ·

1 Parent(s): 3731ab9

Update index.html

Browse files

Files changed (1) hide show

index.html +333 -19

index.html CHANGED Viewed

@@ -1,19 +1,333 @@
-<!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>애니메이션 명언 모음집</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #333;
+            padding: 20px;
+        }
+        .container {
+            max-width: 800px;
+            width: 100%;
+            text-align: center;
+        }
+        .quote-display {
+            background: rgba(255,255,255,0.95);
+            border-radius: 20px;
+            padding: 50px 40px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+            backdrop-filter: blur(10px);
+            margin-bottom: 40px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        .quote-display::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 6px;
+            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
+        }
+        .quote-display:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 25px 80px rgba(0,0,0,0.3);
+        }
+        .quote-text {
+            font-size: 1.8rem;
+            line-height: 1.6;
+            margin-bottom: 30px;
+            color: #2c3e50;
+            font-style: italic;
+            position: relative;
+            font-weight: 300;
+        }
+        .quote-text::before {
+            content: '"';
+            font-size: 4rem;
+            color: #3498db;
+            position: absolute;
+            left: -30px;
+            top: -20px;
+            opacity: 0.3;
+            font-family: serif;
+        }
+        .quote-text::after {
+            content: '"';
+            font-size: 4rem;
+            color: #3498db;
+            position: absolute;
+            right: -30px;
+            bottom: -40px;
+            opacity: 0.3;
+            font-family: serif;
+        }
+        .quote-meta {
+            border-top: 2px solid #eee;
+            padding-top: 25px;
+            margin-top: 25px;
+        }
+        .character {
+            font-weight: bold;
+            color: #e74c3c;
+            font-size: 1.3rem;
+            margin-bottom: 8px;
+        }
+        .anime {
+            color: #3498db;
+            font-size: 1.1rem;
+            font-weight: 500;
+        }
+        .random-btn {
+            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+            color: white;
+            border: none;
+            padding: 18px 40px;
+            border-radius: 50px;
+            cursor: pointer;
+            font-size: 1.2rem;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .random-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 35px rgba(0,0,0,0.3);
+            background: linear-gradient(45deg, #ff5252, #26c6da);
+        }
+        .random-btn:active {
+            transform: translateY(0);
+        }
+        @media (max-width: 768px) {
+            .quote-display {
+                padding: 30px 25px;
+                margin-bottom: 30px;
+            }
+            .quote-text {
+                font-size: 1.4rem;
+            }
+            .quote-text::before,
+            .quote-text::after {
+                font-size: 3rem;
+            }
+            .quote-text::before {
+                left: -15px;
+                top: -15px;
+            }
+            .quote-text::after {
+                right: -15px;
+                bottom: -30px;
+            }
+            .character {
+                font-size: 1.1rem;
+            }
+            .anime {
+                font-size: 1rem;
+            }
+            .random-btn {
+                padding: 15px 30px;
+                font-size: 1rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .container {
+                padding: 0 10px;
+            }
+            .quote-display {
+                padding: 25px 20px;
+            }
+            .quote-text {
+                font-size: 1.2rem;
+            }
+        }
+        /* 애니메이션 효과 */
+        .fade-in {
+            animation: fadeIn 0.6s ease-in;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .pulse {
+            animation: pulse 0.3s ease-in-out;
+        }
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="quote-display fade-in" id="quoteDisplay">
+            <div class="quote-text" id="quoteText"></div>
+            <div class="quote-meta">
+                <div class="character" id="characterName"></div>
+                <div class="anime" id="animeName"></div>
+            </div>
+        </div>
+        <button class="random-btn" onclick="showRandomQuote()" id="randomBtn">
+            새로운 명언 보기
+        </button>
+    </div>
+    <script>
+        // 명언 데이터
+        const quotes = [
+            // 일본 애니메이션 명언
+            { text: "대장부, 나는 최강이니까.", character: "고죠 사토루", anime: "주술회전" },
+            { text: "내가 죽을 때 무슨 일이 생길지는 모르겠지만, 살아가는 방식 때문에 후회는 하고 싶지 않아.", character: "이타도리 유지", anime: "주술회전" },
+            { text: "평범하게 살다 평범하게 죽고 싶어. 내 꿈을 이루어줘.", character: "덴지", anime: "체인소 맨" },
+            { text: "이건 계약이야. 내 심장을 줄게. 대신… 덴지의 꿈을 나에게 보여줘.", character: "포치타", anime: "체인소 맨" },
+            { text: "이 세상은 잔혹하지만, 그래도 아름다워.", character: "미카사 아커만", anime: "진격의 거인" },
+            { text: "목숨을 불태워라, 내일을 바꾸기 위해.", character: "렌고쿠 쿄쥬로", anime: "귀멸의 칼날" },
+            { text: "노력은 반드시 보답받는다.", character: "록 리", anime: "나루토" },
+            { text: "온 힘을 다해 살아라! 단 한 번뿐인 인생이니까.", character: "몽키 D. 루피", anime: "원피스" },
+            { text: "포기하면 그 순간이 바로 시합 종료야.", character: "안노 코치", anime: "슬램덩크" },
+            { text: "기적은 일어나는 게 아니야, 일으키는 거야.", character: "사쿠라기 하나미치", anime: "슬램덩크" },
+            { text: "힘내! 사람은 마음이 원동력이니까, 마음은 어디까지고 강해질 수 있어!", character: "카마도 탄지로", anime: "귀멸의 칼날" },
+            { text: "나는 절대 무너지지 않을 거야!", character: "카마도 탄지로", anime: "귀멸의 칼날" },
+            { text: "키부츠지 무잔!! 난 네놈을 절대 놓치지 않아! 어디에 간다 해도!", character: "카마도 탄지로", anime: "귀멸의 칼날" },
+            { text: "나와 네즈코의 유대는 누구도 갈라놓지 못해!!", character: "카마도 탄지로", anime: "귀멸의 칼날" },
+            { text: "마음속의 불이 꺼질 일은 없다!", character: "렌고쿠", anime: "귀멸의 칼날" },
+            { text: "노력은 배신하지 않아.", character: "우즈마키 나루토", anime: "나루토" },
+            { text: "자신을 믿지않는 녀석따위는 노력할 가치도 없다!", character: "마이트 가이", anime: "나루토" },
+            { text: "인생은 한 방이야!", character: "사카모토 료마", anime: "원피스" },
+            { text: "용기는 공포를 극복하는 힘이야.", character: "포트거스 D. 에이스", anime: "원피스" },
+            { text: "사람이 언제 죽는다고 생각하나?… 아니 사람들에게서 잊혀졌을때다", character: "닥터 히루루크", anime: "원피스" },
+            { text: "최고의 순간은 아직 오지 않았어.", character: "루피", anime: "원피스" },
+            { text: "약한 녀석이 나쁜 게 아니라, 약함을 인정하지 않는 것이 나쁜 거야.", character: "에드워드 엘릭", anime: "강철의 연금술사" },
+            { text: "고통 없이는 아무것도 얻을 수 없어.", character: "에드워드 엘릭", anime: "강철의 연금술사" },
+            { text: "날개가 없기에 인간은 날아오를 방법을 찾는다", character: "우카이 케이신", anime: "하이큐!!" },
+            { text: "하고 싶은 게 있으면 지금 당장 해!", character: "히나타 쇼요", anime: "하이큐!!" },
+            { text: "우리들은 혼자가 아니야", character: "나츠 드래그닐", anime: "페어리테일" },
+            { text: "강함이 전부가 아니야. 가장 중요한 것은 함께하는 사람이야.", character: "나츠", anime: "페어리테일" },
+            { text: "꿈은 도망가지 않아 도망가는 것은 언제나 나 자신이지", character: "신형만", anime: "짱구는 못말려" },
+            { text: "맑은물에서 살든 시궁창에서 살든 앞으로 헤엄치는 물고기는 아름답게 자라는 법입니다", character: "코로센세", anime: "암살교실" },
+            { text: "도망치면 안 돼. 도망치면 안 돼. 도망치면 안 돼.", character: "이카리 신지", anime: "신세기 에반게리온" },
+            { text: "죽어서 이긴다와 죽더라도 이긴다는 건 전혀 달라.", character: "이타도리 유지", anime: "주술회전" },
+            // 서양 애니메이션 명언 (디즈니, 픽사)
+            { text: "생각은 마법의 열쇠예요.", character: "피터 팬", anime: "피터 팬" },
+            { text: "그냥 수영을 계속해.", character: "도리", anime: "니모를 찾아서" },
+            { text: "가장 어두운 밤도 끝나고 해가 떠요.", character: "빅터 휴고", anime: "노트르담의 꼽추" },
+            { text: "마음이 얼마나 슬퍼도, 계속 믿는다면 원하는 꿈은 이뤄질 거예요.", character: "신데렐라", anime: "신데렐라" },
+            { text: "당신이 운명을 통제해요 — 마법이 필요하지 않아요.", character: "메리다", anime: "메리다와 마법의 숲" },
+            { text: "역경에서 피어나는 꽃은 가장 희귀하고 아름다워요.", character: "무랏", anime: "뮬란" },
+            { text: "하쿠나마타타! (걱정하지 마!)", character: "품바", anime: "라이온 킹" },
+            { text: "당신은 믿는 것보다 용감하고, 보이는 것보다 강하며, 생각하는 것보다 똑똑해.", character: "크리스토퍼 로빈", anime: "곰돌이 푸" },
+            { text: "과거는 아프게 할 수 있어. 하지만 내가 보기에는, 피할 수도 있고, 배울 수도 있어.", character: "라피키", anime: "라이온 킹" },
+            { text: "무한대로, 그리고 저 너머로!", character: "버즈 라이트이어", anime: "토이 스토리" },
+            { text: "기적도 조금의 시간이 필요해요.", character: "요코", anime: "신데렐라" },
+            { text: "나를 다르게 하는 것들이 나를 만드는 것이에요.", character: "피글렛", anime: "곰돌이 푸" },
+            { text: "앞으로 나아가세요.", character: "루이스", anime: "미래를 바꾸다" },
+            { text: "가장 절망적인 순간일수록 가장 큰 변화를 받아들일 준비가 된다.", character: "Aang", anime: "Avatar: The Legend of Korra" }
+        ];
+        let currentQuoteIndex = 0;
+        // 초기화
+        document.addEventListener('DOMContentLoaded', function() {
+            showRandomQuote();
+        });
+        function showRandomQuote() {
+            // 버튼 애니메이션
+            const btn = document.getElementById('randomBtn');
+            btn.classList.add('pulse');
+            setTimeout(() => btn.classList.remove('pulse'), 300);
+            // 랜덤 명언 선택 (현재 명언과 다른 것으로)
+            let newIndex;
+            do {
+                newIndex = Math.floor(Math.random() * quotes.length);
+            } while (newIndex === currentQuoteIndex && quotes.length > 1);
+            currentQuoteIndex = newIndex;
+            const quote = quotes[currentQuoteIndex];
+            // 명언 표시 영역에 fade-in 효과 적용
+            const display = document.getElementById('quoteDisplay');
+            display.classList.remove('fade-in');
+            // 잠시 후 새로운 내용으로 업데이트
+            setTimeout(() => {
+                document.getElementById('quoteText').textContent = quote.text;
+                document.getElementById('characterName').textContent = quote.character;
+                document.getElementById('animeName').textContent = quote.anime;
+                display.classList.add('fade-in');
+            }, 150);
+        }
+        // 키보드 이벤트 (스페이스바로 새 명언 보기)
+        document.addEventListener('keydown', function(e) {
+            if (e.code === 'Space') {
+                e.preventDefault();
+                showRandomQuote();
+            }
+        });
+    </script>
+</body>
+</html>