<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>π¬ TMDB μν κ²μ</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- ν€λ -->
<header class="header">
<div class="container">
<div class="header-content">
<h1 class="logo">
<i class="fas fa-film"></i>
TMDB μν κ²μ
</h1>
<nav class="nav-menu">
<button class="nav-btn active" data-section="search">
<i class="fas fa-search"></i>
κ²μ
</button>
<button class="nav-btn" data-section="popular">
<i class="fas fa-fire"></i>
μΈκΈ° μν
</button>
<button class="nav-btn" data-section="now-playing">
<i class="fas fa-play"></i>
νμ¬ μμ
</button>
<button class="nav-btn" data-section="top-rated">
<i class="fas fa-star"></i>
νμ λμ μν
</button>
<button class="nav-btn" data-section="favorites">
<i class="fas fa-heart"></i>
μ° λͺ©λ‘
</button>
</nav>
</div>
</div>
</header>
<!-- λ©μΈ 컨ν
μΈ -->
<main class="main">
<div class="container">
<!-- κ²μ μΉμ
-->
<section id="search-section" class="section active">
<div class="search-container">
<h2>π μμ°μ΄ μν κ²μ</h2>
<p class="search-description">
"μ’λΉ μν μΆμ²ν΄μ€", "2023λ
μ‘μ
μν", "νμ λμ λ‘λ§¨μ€ μν" λ± μμ°μ€λ½κ² κ²μν΄λ³΄μΈμ!
</p>
<!-- κ²μ νΌ -->
<form class="search-form" id="search-form">
<div class="search-input-container">
<input
type="text"
id="search-input"
class="search-input"
placeholder="μ: μ’λΉ μν μΆμ²ν΄μ€, ν° ν¬λ£¨μ¦ μν, 2023λ
μ‘μ
μν"
autocomplete="off"
>
<button type="submit" class="search-btn" id="search-btn">
<i class="fas fa-search"></i>
κ²μ
</button>
</div>
</form>
<!-- κ²μ κΈ°λ‘ -->
<div class="search-history" id="search-history">
<h3>π μ΅κ·Ό κ²μ</h3>
<div class="history-tags" id="history-tags">
<!-- κ²μ κΈ°λ‘μ΄ μ¬κΈ°μ λμ μΌλ‘ μΆκ°λ©λλ€ -->
</div>
</div>
<!-- μΆμ² κ²μμ΄ -->
<div class="suggested-searches">
<h3>π‘ μΆμ² κ²μμ΄</h3>
<div class="suggestion-tags">
<span class="suggestion-tag" data-query="μ’λΉ μν μΆμ²ν΄μ€">μ’λΉ μν</span>
<span class="suggestion-tag" data-query="2023λ
μ‘μ
μν">2023λ
μ‘μ
</span>
<span class="suggestion-tag" data-query="νμ λμ λ‘λ§¨μ€ μν">νμ λμ λ‘맨μ€</span>
<span class="suggestion-tag" data-query="λ§λΈ μν">λ§λΈ μν</span>
<span class="suggestion-tag" data-query="νκ΅ μν">νκ΅ μν</span>
<span class="suggestion-tag" data-query="μ λλ©μ΄μ
μν">μ λλ©μ΄μ
</span>
</div>
</div>
</div>
<!-- κ²μ κ²°κ³Ό -->
<div class="search-results" id="search-results">
<!-- κ²μ κ²°κ³Όκ° μ¬κΈ°μ λμ μΌλ‘ μΆκ°λ©λλ€ -->
</div>
</section>
<!-- λ€λ₯Έ μΉμ
λ€ -->
<section id="popular-section" class="section">
<h2>π₯ μΈκΈ° μν</h2>
<div class="movies-grid" id="popular-movies">
<!-- μΈκΈ° μνκ° μ¬κΈ°μ λμ μΌλ‘ μΆκ°λ©λλ€ -->
</div>
</section>
<section id="now-playing-section" class="section">
<h2>π₯ νμ¬ μμ μ€μΈ μν</h2>
<div class="movies-grid" id="now-playing-movies">
<!-- νμ¬ μμ μνκ° μ¬κΈ°μ λμ μΌλ‘ μΆκ°λ©λλ€ -->
</div>
</section>
<section id="top-rated-section" class="section">
<h2>β νμ λμ μν</h2>
<div class="movies-grid" id="top-rated-movies">
<!-- νμ λμ μνκ° μ¬κΈ°μ λμ μΌλ‘ μΆκ°λ©λλ€ -->
</div>
</section>
<section id="favorites-section" class="section">
<h2>β€οΈ μ° λͺ©λ‘</h2>
<div class="favorites-container">
<p class="empty-message" id="empty-favorites">
μμ§ μ°ν μνκ° μμ΅λλ€. λ§μμ λλ μνμ β€οΈλ₯Ό λλ¬λ³΄μΈμ!
</p>
<div class="movies-grid" id="favorites-movies">
<!-- μ°ν μνκ° μ¬κΈ°μ λμ μΌλ‘ μΆκ°λ©λλ€ -->
</div>
</div>
</section>
</div>
</main>
<!-- μν μμΈ λͺ¨λ¬ -->
<div class="modal" id="movie-modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal-title">μν μ λͺ©</h2>
<button class="modal-close" id="modal-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body" id="modal-body">
<!-- μν μμΈ μ λ³΄κ° μ¬κΈ°μ λμ μΌλ‘ μΆκ°λ©λλ€ -->
</div>
</div>
</div>
<!-- λ‘λ© μ€νΌλ -->
<div class="loading" id="loading">
<div class="spinner"></div>
<p>μν μ 보λ₯Ό λΆλ¬μ€λ μ€...</p>
</div>
<!-- ν μ€νΈ μλ¦Ό -->
<div class="toast" id="toast">
<i class="fas fa-check-circle"></i>
<span id="toast-message">λ©μμ§</span>
</div>
<!-- JavaScript -->
<script src="script.js"></script>
</body>
</html>
