-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathupload.html
More file actions
151 lines (126 loc) · 7.15 KB
/
upload.html
File metadata and controls
151 lines (126 loc) · 7.15 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crear gifOS</title>
<link rel="icon" type="image/svg" href="./assets/favicon_day.svg">
<link rel="stylesheet" type="text/css" href="./styles/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap" rel="stylesheet">
</head>
<body>
<div class="full bienvenida">
¡Bienvenidos/as a Guifos.com! ——————Donde los gifs están.////// Número de visitas: 12.765.803
</div>
<header class="container logoconflecha">
<img src="./assets/arrow.svg" class="arrow" alt="arrow back" id="arrow">
<a href="./index.html"><img src="./assets/gifOF_logo.png" class="logo" alt="logo"></a>
</header>
<section class="container creacion-gif">
<div class="ventana permiso-comenzar" id="ventana-crearguifos">
<div class="permiso-comenzar" id="pre-upload-text">
<div class="ventana-title">Crear Guifos</div>
<div class="imagencontexto-permiso">
<img src="./assets/window_img.png" alt="window-image" class="window-img">
<div class="permiso-text-container">
<p class="texttitle">Aquí podrás crear tus propios guifos</p>
<p>Crear tu <span>guifo</span> es muy fácil, graba cualquier imagen con tu cámara y obtén guifos personzalizados. Los pasos para crear tu guifo son:
</p>
<div class="list-pasos">
<p><span>1)</span>Dar permisos de acceso a la cámara (sólo por el tiempo de uso)</p>
<p><span>2)</span>Capturar tu momento guifo</p>
<p><span>3)</span>Revisar el momento</p>
<p><span>4)</span>Listo para subir y compartir!</p>
</div>
<p>¿Quieres comenzar a crear tu <span>guifo</span> ahora?</p>
</div>
</div>
<div class="btn-permiso-container">
<button class="btn secondary" id="permiso-cancelar">Cancelar</button>
<button class="btn primary" id="permiso-comenzar">Comenzar</button>
</div>
</div>
<div class="captura-container hidden" id="pre-upload-video">
<div class="ventana-title">
<p>Un Chequeo Antes de Empezar</p>
<img src="./assets/button3.svg" alt="icon" class="imgbtncerrar">
</div>
<div class="video-stream">
<video></video>
<img class="video-preview hidden" src="#" id="preview" alt="preview">
<div class="video-upload-message hidden" id="upload-msg">
<img src="./assets/globe_img.png" alt="globe_img" class="globeimg">
<p>Estamos subiendo tu guifo...<p>
<div class="progress-bar">
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
</div>
<span>Tiempo restante: <span class="line-through">38 años</span> algunos minutos</span>
</div>
</div>
<div class="record-container">
<div id="timer" class="timer-container"></div>
<div class="record-button-container" id="video-record-buttons">
<div class="btn primary btn-img" id="stop">
<img src="./assets/camera.svg" id="camera-button" alt="camera-icon">
</div>
<div class="btn primary btn-text" id="record">Capturar</div>
</div>
<div class="record-button-container video-uploadbtn hidden" id="video-upload-buttons">
<div class="btn secondary" id="restart">Repetir Captura</div>
<div class="btn primary" id="upload">Subir guifo</div>
</div>
</div>
</div>
</div>
<div class="ventana share-container hidden" id="share-modal-wrapper">
<div class="ventana-title">
<span>Guifo subido con éxito</span>
<img src="./assets/button3.svg" class="imgbtncerrar" id="finish" alt="btncerrar">
</div>
<div class="share-modal" id="share-modal">
<div class="share-img">
<img id="share-modal-preview" src="#" alt="share-preview">
</div>
<div class="share-btns">
<p class="text-bold">Guifo creado con éxito</p>
<div class="btn secondary share-button" id="copy">Copiar enlace Guifo</div>
<span id="link-success" class="hidden">Enlace copiado!</span>
<div class="btn secondary share-button"><a id="download" href="#" target="_blank" download="mi-guifo.gif">Descargar Guifo</a></div>
</div>
</div>
<div class="share-done">
<div class="btn primary" id="share-done">Listo</div>
</div>
<div id="copy-success" class="copy-success hidden"></div>
</div>
</section>
<section class="container mis-guifos" id="misguifos">
<h2 class="separador">Mis guifos:</h2>
<div class="gifs-container" id="results"></div>
</section>
<script src="./scripts/creargif.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.5.8/RecordRTC.js" type="text/javascript"></script>
</body>
</html>