-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
228 lines (209 loc) · 8.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FUENTES -->
<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=Roboto:ital,wght@0,300;0,400;0,500;1,700&display=swap" rel="stylesheet">
<!-- MATERIALIZE -->
<link rel="stylesheet" href="./css/materialize.min.css">
<!-- CSS MOBILE -->
<link rel="stylesheet" href="css/style.css">
<!-- CSS TABLET -->
<link rel="stylesheet" href="css/tablet.css" media="screen and (min-width: 600px)">
<!-- CSS DESKTOP -->
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 800px)">
<!-- TODO: Trabajar en el responsive -->
<!-- FAVICON -->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#6F4FE8">
<meta name="theme-color" content="#6F4FE8">
<title>Series & Movies Tracking</title>
</head>
<body>
<nav class="navbar">
<div class="nav-wrapper">
<a href="/" class="brand-logo left">
<img src="./img/logo.png" alt="Logo de la App">
</a>
<div class="app-name right">
<a id="nav-mobile" href="/">
Series & Movies Tracking
</a>
</div>
</div>
</nav>
<main class="page-wrapper">
<!-- MOSTRAR PELICULAS/SERIES GUARDADAS -->
<header class="page-title">
<h1 class="title center-align">Películas y Series guardadas</h1>
</header>
<!-- TODO: Crear un filtro para el estado de las películas/series -->
<!-- MOSTRAR DATOS -->
<section class="show-data">
<h2 class="subtitle">Películas guardadas</h2>
<div class="show-movies"></div>
<h2 class="subtitle">Series guardadas</h2>
<div class="show-series"></div>
</section>
</main>
<!-- MODAL PARA REGISTRAR PELICULA -->
<div id="register-movie-modal" class="modal card">
<!-- FORMULARIO PARA REGISTRAR PELICULA -->
<h1 class="title card-title center-align">Registrar Película</h1>
<form action="#" class="movie_form">
<!-- TITULO PELICULA -->
<label for="movie_name">
<p class="subtitle">Título:</p>
<input
type="text"
id="movie_name"
placeholder="¿Cómo se llama la película?"
/>
</label>
<!-- ESTADO PELICULA -->
<div class="status std-y-spacing">
<p class="subtitle">Elige un estado:</p>
<label for="seen_status_movie">
<input
type="radio"
name="movie_status"
id="seen_status_movie"
/>
<span>Película Vista</span>
</label>
<label for="pending_status_movie">
<input
type="radio"
name="movie_status"
id="pending_status_movie"
/>
<span>Película Pendiente</span>
</label>
</div>
<input
id="register-movie-btn"
class="btn modal-close"
type="submit"
value="Registrar"
/>
</form>
</div>
<!-- MODAL PARA REGISTRAR PELICULA -->
<div id="register-serie-modal" class="modal card">
<!-- FORMULARIO PARA REGISTRAR SERIE -->
<h1 class="title card-title center-align">Registrar Serie</h1>
<form action="#" class="serie_form">
<label for="series_title">
<p class="subtitle sm-top-spacing">Título:</p>
<input
type="text"
id="series_title"
class="serie_name"
placeholder="¿Cómo se llama la serie?"
/>
</label>
<label for="season">
<p class="subtitle sm-top-spacing">Temporada:</p>
<input
type="number"
id="season"
class="season"
name="season"
placeholder="¿Qué temporada te estás viendo?"
/>
</label>
<label for="episode">
<p class="subtitle sm-top-spacing">Episodio:</p>
<input
type="number"
id="episode"
class="episode"
name="episode"
placeholder="¿En qué episodio vas?"
/>
</label>
<!-- ESTADO SERIE -->
<div class="status std-y-spacing">
<p class="subtitle sm-top-spacing">Elige un estado:</p>
<label for="finished_status_serie">
<input
type="radio"
name="series_status"
id="finished_status_serie"
/>
<span>Serie Finalizada</span>
</label>
<label for="pending_status_series">
<input
type="radio"
name="series_status"
id="pending_status_series"
/>
<span>Serie Pendiente</span>
</label>
</div>
<input class="btn modal-close" id="register-serie-btn" type="submit" value="Registrar">
</form>
</div>
<!-- BOTON FLOTANTE -->
<div class="fixed-action-btn">
<a
class="
btn-floating
btn-large
waves-effect
waves-light
z-depth-3"
title="Crear un registro"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>
</a>
<ul>
<li>
<span class="z-depth-3">Registrar Película</span>
<a
href="#register-movie-modal"
class="btn-floating modal-trigger z-depth-3"
title="Registrar Película"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
</svg>
</a>
</li>
<li>
<span class="z-depth-3">Registrar Serie</span>
<a
href="#register-serie-modal"
class="btn-floating modal-trigger z-depth-3"
title="Registrar Serie"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
</svg>
</a>
</li>
</ul>
</div>
<!-- FOOTER -->
<footer class="footer">
<p>
Hecho con ❤️ por <a href="https://github.com/bl00p1ng" target="_blank" rel="noopener noreferrer">Andrés López</a>
</p>
</footer>
<!-- SCRIPTS -->
<script src="js/util/materialize.min.js" defer></script>
<script src="js/util/utilities.js" type="module" defer></script>
<script src="js/index.js" type="module" defer></script>
</body>
</html>