Spaces:

yoon2566
/

25codingchallenge2

Running

File size: 14,188 Bytes

2ae61cc

<!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>