-
Notifications
You must be signed in to change notification settings - Fork 0
/
crearGif.html
141 lines (135 loc) · 4.89 KB
/
crearGif.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
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./estilos/styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Chakra+Petch&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Chakra+Petch:600&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body class="body ligth">
<header>
<div class="title-bar">
¡Bienvenidos/as a Guifos.com! ——————Donde los gifs están.////// Número
de visitas: 12.765.803
</div>
<nav>
<div>
<a href="/"><img id="arrow" src="./assets/arrow.svg" alt="" /></a>
<img src="./assets/gifOF_logo.png" alt="" id="mainLogo" />
</div>
</nav>
</header>
<div class="crear-gifos show">
<p class="titulo change">Crear gifos</p>
<div class="crear-gifos-contenido">
<div class="gifos-contenido-img">
<img src="./assets/window_img.png" alt="" />
</div>
<div class="gifos-contenido-texto">
<p>Aqui podes crear tus propios Gifos</p>
<p>
Crear tu guifo 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>
<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>
<p>¿Quieres comenzar a crear tu <span>guifo</span> ahora?</p>
</div>
</div>
<div class="gifos-panel-boton">
<button id="cancel">Cancelar</button>
<button id="prepRecording">Comenzar</button>
</div>
</div>
<div class="panel-video-gifos">
<div class="titulo">
<p>Un chequeo antes de empezar</p>
<img id="imgClose" src="./assets/button_close.svg" alt="" />
</div>
<video autoplay id="gifosVideo"></video>
<div class="panel-video-botones">
<div class="panel-video-grabar show-flex">
<img src="./assets/camera.svg" alt="" />
<button class="show" id="startRecording">Capturar</button>
</div>
<div class="panel-video-listo">
<img src="./assets/recording.svg" alt="" />
<button id="stopRecording" disabled>Listo</button>
</div>
</div>
</div>
<div class="panel-video-preview">
<p class="titulo">Vista previa</p>
<video autoplay id="videoPreview"></video>
<div class="panel-preview-botones">
<p class="time-duration" id="videoTime"></p>
<div class="video-control">
<img src="./assets/forward.svg" alt="" />
</div>
<div id="progressBar"><span id="progress"></span></div>
<button id="repeatGif">Repetir Captura</button>
<button id="uploadGif">Subir Guifo</button>
</div>
</div>
<div class="panel-mis-gifos show">
<h2>Mis Gifos</h2>
<div class="panel-grid" id="gridMyGif"></div>
</div>
<div class="panel-cargando-subida">
<div class="titulo">
<p>Subiendo Gifo</p>
<img id="imgCloseUpload" src="./assets/button_close.svg" alt="" />
</div>
<div class="panel-carga-img">
<img src="./assets/globe_img.png" alt="carga de gifo" />
<p>Estamos subiendo tu guifo…</p>
</div>
<div class="panel-subida-botones">
<button id="cancelUpload">Cancelar Subida</button>
</div>
</div>
<div class="panel-subida-exito">
<div class="titulo">
<p>Guifo subido con exito</p>
<img id="imgCloseExit" src="./assets/button_close.svg" alt="" />
</div>
<div class="panel-exito-datos">
<div class="panel-exito-img">
<img
src="https://media3.giphy.com/media/XBQQzibje2KHfRIfIt/giphy.gif?cid=dc877b2ae772737212971e34f38213998816ff4e81d3da88&rid=giphy.gif"
alt=""
id="imgExito"
/>
</div>
<div class="panel-exito-botones">
<p>Guifo creado con exito</p>
<button id="copiarGif">Copiar Enlace Guifo</button>
<button id="descargarGif">Descargar Gifo</button>
</div>
</div>
<button id="finGif">Listo</button>
</div>
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="./js/const.js"></script>
<script src="./js/gifos/changeTheme.js"></script>
<script src="./js/index/domGifs.js"></script>
<script src="./js/index/changeTheams.js"></script>
<script src="./js/gifos/var.js"></script>
<script src="./js/gifos/function.js"></script>
<script src="./js/gifos/main.js"></script>
</body>
</html>