Spaces:

yoon2566
/

25codingchallenge2

Running

App Files Files Community

25codingchallenge2 / index.html

yoon2566

Update index.html

2ae61cc verified 5 months ago

raw

history blame contribute delete

14.2 kB

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