-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmisGuifos.html
142 lines (123 loc) · 6.12 KB
/
misGuifos.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
<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mis Guifos</title>
<link rel="icon" href="./assets/logoWeb.ico">
<link rel="stylesheet" href="./styles/theme1.css">
<link rel="stylesheet" href="./styles/theme2.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/misGuifos.css">
</head>
<body>
<header>
<p>¡Bienvenidos/as a Guifos.com! ——————Donde los gifs están.////// Número de visitas: 12.765.803</p>
</header>
<!-- nav-->
<nav>
<div class="container">
<div id="fechaYlogo">
<a href="./index.html">
<img class="hidden" id="flechaLogo" src="./assets/arrow.svg" alt="flecha apuntando a la izquierda">
<div class="logo"> </div>
</a>
</div>
<div class="agruparBotonesNav">
<button id="buttonCrear">Crear Guifos</button>
<button id="buttonTema"><span>Elegir Tema</span><span id="dropdown"><img src="./assets/dropdown.svg" alt="dropdown"></span>
<!-- buttons elegir tema -->
<span class="container-elegirTema">
<span class="tema" id="temaDay">
<u>S</u>ailor Day
</span>
<span class="tema" id="temaNight">
Sailor Night
</span>
</span>
</button>
<!-- link a pagina mis guifos -->
<a id="aMisGuifos" href="./misGuifos.html"> <u>M</u>is Guifos </a>
</div>
</div>
</nav>
<!--section creando -->
<section id="creando">
<div id="container-etapasCrearGuifo" class="hidden">
<!-- comenzar a crear guifos - primer box-->
<div id="box-crearGuifo" class="hidden">
<div class="título-box">
<p>Crear Guifos</p>
</div>
<img src="./assets/window.png" alt="ilustración de una ventana de una computadora">
<div class="container-texto-crearGuifos">
<h5>Aquí podrás crear tus propios guifos</h5>
<p>Crear tu <strong>guifo</strong> es muy fácil, graba cualquier imagen con tu cámara y obtén guifos personalizados. Los pasos para crear tu guifo son: <br>
<strong> 1) </strong> Dar permisos de acceso a la cámara (sólo por el tiempo de uso) <br>
<strong> 2) </strong> Capturar tu momento guifo <br>
<strong> 3) </strong> Revisar el momento <br>
<strong> 4) </strong> Listo para subir y compartir! <br> ¿Quieres comenzar a crear tu <strong>guifo</strong> ahora?
</p>
</div>
<div class="container-buttonsEtapa">
<button class="buttonCancelar" id="buttonCancelarCreación">Cancelar</button>
<button id="buttonComenzar">Comenzar</button>
</div>
</div>
<!-- box etapas capturando guifo -->
<!-- contenido del primer paso y después varía desde js -->
<div id="box-etapasCapturarGuifo" class="hidden">
<div class="título-box" id="título-boxEtapasCapturar">
<p class="pTítulo-box">Un Chequeo Antes De Empezar</p> <img id="cruzCerrarEtapa" src="./assets/cruz-cerrar.svg" alt="símpolo cruz">
</div>
<div class="container-videoYboton">
<div class="container-videoEtapaCaptura">
<video id="videoCaptura" src="#"></video>
<img id="videoFinished" class="hidden" src="#" alt="video grabado">
<div id="progressSubiendo" class="hidden">
<img src="./assets/globe_img.png" alt="imagen de un globo terráqueo">
<h4>Estamos subiendo tu guifo…</h4>
<div id="progressBar"> </div>
<p id="textProgressBar"> Tiempo restante: <s>38 años</s> algunos minutos </p>
</div>
</div>
<div class="container-buttonsEtapa" id="container-buttonsEtapaVideo">
<button id="buttonCapturar"> <span class="simboloCamara"> <img src="./assets/camera.svg" alt="símbolo cámara"></span> <span>Capturar </span></button>
<div id="boxTimer" class="hidden"> <p id="timer"> </p> </div>
<button class="buttonListo"> <span class="simboloListo"><img src="./assets/recording.svg" alt=""> </span> <span>Listo</span> </button>
<button class="buttonRepetirCaptura"> Repetir Captura</button>
<button class="buttonSubirGuifo">Subir Guifo</button>
<button class="buttonCancelar" id="buttonCancelarSubida">Cancelar</button>
</div>
</div>
</div>
<!-- box gif creado con exito -->
<div id="box-subidoExito" class="hidden">
<div class="título-box">
<p>Guifo Subido Con Éxito</p> <img src="./assets/cruz-cerrar.svg" alt="cruz salida" id="cruzCerrarFinal">
</div>
<div class="container-guifoSubido">
<img class="guifoSubido" src="#" alt="">
<div class="container-textoExito">
<h5>Guifo creado con éxito</h5>
<button class="buttonCopiarEnlaceGuifo">Copiar Enlace Guifo</button>
<button class="buttonDescargarGuifo">Descargar Guifo</button>
</div>
</div>
<button id="buttonListoFinal">Listo</button>
</div>
</div>
</section>
<!-- section mis guifos guardados -->
<section id="SectionMisGuifos">
<div class="container">
<h4 class="sectionTitle">Mis guifos:</h4>
<div id="container-misGuifos"></div>
</div>
</section>
<script src="./scripts/app.js"></script>
<script src="./scripts/misGuifos.js"></script>
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
</body>
</html>