-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmygifos.html
198 lines (187 loc) · 8.02 KB
/
mygifos.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,700;1,700&display=swap"
rel="stylesheet"
/>
<!-- Favicon -->
<link rel="shortcut icon" href="./assets/img/favicon/sailor_day.ico" type="image/x-icon" id="favicon" />
<!-- Themes -->
<link rel="stylesheet" href="styles/style.css" />
<link id="cache" rel="stylesheet" href="styles/sailorNightTheme.css" />
<link id="theme" rel="stylesheet" href="styles/sailorDayTheme.css" />
<title>GifOS - mis Gifos</title>
</head>
<body>
<header class="main-title">
<h1 class="main-title__text">
¡Bienvenidos/as a Guifos.com! ——————Donde los gifs están.////// Número de visitas: 12.765.803
</h1>
</header>
<div class="container">
<nav class="nav">
<div class="nav__container">
<a class="nav__return" href="index.html"
><img src="assets/svg/arrow.svg" alt="Flecha hacia la izquierda"
/></a>
<a href="index.html"><img id="logo" class="nav__logo" src="assets/img/gifOF_logo.png" alt="gifOS Logo" /></a>
</div>
<ul class="nav__btns">
<li><a class="btn btn-default" href="mygifos.html">Crear Guifos</a></li>
<li>
<ul class="nav__secondary-btn">
<li class="btn btn-default">Elegir tema</li>
<li class="btn btn-default-small"><img src="assets/svg/dropdown.svg" alt="dropdown" /></li>
</ul>
<div class="nav__dropdown hidden">
<button id="day-theme-btn" class="btn btn-adaptable btn-theme" type="button">
<span class="underline">S</span>ailor Day
</button>
<button id="night-theme-btn" class="btn btn-adaptable btn-theme" type="button">Sailor Night</button>
</div>
</li>
<li class="nav__link">
<button id="myGifos_btn" class="btn-link" type="button"><span class="underline">M</span>is Guifos</button>
</li>
</ul>
</nav>
<section class="create-gifos">
<div id="create-window" class="create-window">
<div class="create-window__title">
<h2 class="create-window__header-text">Crear Guifos</h2>
</div>
<img class="create-window__icon" src="assets/img/window_img.png" alt="Window icon" />
<h3 class="create-window__header">Aquí podrás crear tus propios guifos</h3>
<p class="create-window__text">
Crear tu <span class="bold italic">guifo</span> es muy fácil, graba cualquier imagen con tu cámara y obtén
guifos personalizados. Los pasos para crear tu guifo son:
</p>
<p class="create-window__text">
<span class="bold">1)</span> Dar permisos de acceso a la cámara (sólo por el tiempo de uso)
</p>
<p class="create-window__text"><span class="bold">2)</span> Capturar tu momento guifo</p>
<p class="create-window__text"><span class="bold">3)</span> Revisar el momento</p>
<p class="create-window__text"><span class="bold">4)</span> Listo para subir y compartir!</p>
<p class="create-window__text">¿Quieres comenzar a crear tu <span class="bold italic">guifo</span> ahora?</p>
<div class="create-window__buttons">
<a href="index.html" class="btn btn-default">Cancelar</a>
<button id="streamBtn" class="btn btn-default margin-left" type="button">Comenzar</button>
</div>
</div>
<div id="stream-window" class="capture-window hidden">
<div class="capture-window__title">
<h2 class="create-window__header-text">Un Chequeo Antes de Empezar</h2>
<img src="assets/svg/button3.svg" alt="cross button" />
</div>
<div class="capture-window__display">
<video id="video-tag" class="video-container"></video>
</div>
<div class="capture-window__buttons">
<div class="counter">
<p id="timer">00:00:00:00</p>
</div>
<div class="action-buttons">
<div id="preview-container" class="preview-bar-container hidden">
<button class="btn btn-play" type="button">
<img src="assets/svg/forward.svg" alt="boton de reproduccion de vista previa" />
</button>
<div class="preview-bar">
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
<span class="preview-cell"></span>
</div>
</div>
<div id="startBtn" class="capture-btn hidden">
<div class="btn btn-default-small">
<img id="camera-icon" src="assets/svg/camera.svg" alt="camera icon" />
</div>
<button class="btn btn-default" type="button">Capturar</button>
</div>
<div id="stopBtn" class="stop-btn hidden">
<div class="btn-small btn btn-default-small btn-red">
<img src="assets/svg/recording.svg" alt="camera icon" />
</div>
<button class="btn btn-default btn-red" type="button">Listo</button>
</div>
<div id="repeat-upload-btns" class="repeat-upload-container hidden">
<button id="repeatBtn" class="btn btn-default btn-white" type="button">Repetir Captura</button>
<button id="uploadBtn" class="btn btn-default" type="button">Subir Guifo</button>
</div>
</div>
</div>
</div>
<div id="upload-window" class="capture-window hidden">
<div class="capture-window__title">
<h2 class="create-window__header-text">Subiendo Guifo</h2>
<img src="assets/svg/button3.svg" alt="cross button" />
</div>
<div class="capture-window__display">
<img src="assets/img/globe_img.png" alt="globo terraqueo" />
<h3>Estamos subiendo tu guifo...</h3>
<div></div>
<p>Tiempo restante <span class="line-through">38 años</span> algunos minutos</p>
</div>
<div class="capture-window__buttons justify-right">
<div class="action-buttons-secondary">
<div class="capture-btn">
<button class="btn btn-default btn-white" type="button">Cancelar</button>
</div>
</div>
</div>
</div>
<div id="success-window" class="success-window-container hidden">
<div class="success-window__title">
<h2 class="create-window__header-text">Guifo Subido Con Éxito</h2>
<img src="assets/svg/button3.svg" alt="cross button" />
</div>
<div class="success-window">
<div class="column-left">
<div class="success-gif-container">
<img id="uploaded-gif-container" src="https://via.placeholder.com/365x191" alt="placeholder" />
</div>
</div>
<div class="column-right">
<h3>Guifo creado con éxito</h3>
<button id="clipboard_btn" class="btn btn-adaptable btn-white" type="button">Copiar Enlace Guifo</button>
<button id="download_btn" class="btn btn-adaptable btn-white" type="button">Descargar Guifo</button>
</div>
<div class="success-window__buttons justify-right">
<div class="action-buttons-secondary">
<div class="capture-btn">
<button id="done_btn" class="btn btn-default" type="button">Listo</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="my-gifos">
<header class="my-gifos-title section-header">
<h2 class="section-header__title">Mis guifos</h2>
</header>
<div id="loaded-gifs" class="saved-container"></div>
</section>
</div>
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://www.webrtc-experiment.com/gif-recorder.js"></script>
<!-- <script src="main.js"></script> -->
<script src="mygifos.js"></script>
</body>
</html>