-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·148 lines (108 loc) · 5.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Twittor</title>
<link href='https://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="shortcut icon" type="image/ico" href="img/favicon.ico"/>
<link rel="manifest" href="manifest.json">
<!-- Android -->
<meta name="theme-color" content="#3498db">
<!-- IOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="img/icons/icon-192x192.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icons/icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icons/icon-192x192.png">
<link rel="apple-touch-icon" sizes="167x167" href="img/icons/icon-152x152.png">
<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="img/icons-ios/apple-launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="img/icons-ios/apple-launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="img/icons-ios/apple-launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="img/icons-ios/apple-launch-640x1136.png">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Twittor!">
</head>
<body>
<!-- Titulo -->
<span class="first">
<span id="salir-btn" class="fa fa-sign-out-alt out oculto animated fadeIn"></span>
<span id="titulo">
<i class="fa fa-user"></i>
Seleccione Personaje
</span>
<span id="nuevo-btn" class="fa fa-pen-square new oculto animated fadeIn fast"></span>
</span>
<!-- Fin Titulo -->
<!-- Modal -->
<div id="modal" class="oculto">
<img id="modal-avatar" src="img/avatars/spiderman.jpg">
<span class="first">
<span id="titulo-modal">Nuevo mensaje</span>
<span id="cancel-btn" class="fa fa-times"></span>
</span>
<div class="nuevo-mensaje">
<textarea id="txtMensaje" placeholder="Nuevo mensaje..." rows="5"></textarea>
</div>
<!-- boton de enviar -->
<div id="post-btn" class="fab">
<i class="fa fa-paper-plane"></i>
</div>
<div id="post-btn" class="fab-marker">
<i class="fa fa-map-marker-alt"></i>
</div>
<div id="post-btn" class="fab-photo">
<i class="fa fa-image"></i>
</div>
</div>
<!-- Fin Modal -->
<!-- Seleccion de personaje -->
<div id="seleccion" class="seleccion animated fadeIn fast" align="center">
<div>
<img data-user="spiderman" src="img/avatars/spiderman.jpg" alt="spiderman" class="seleccion-avatar">
</div>
<div>
<img data-user="ironman" src="img/avatars/ironman.jpg" alt="ironman" class="seleccion-avatar">
</div>
<div>
<img data-user="wolverine" src="img/avatars/wolverine.jpg" alt="wolverine" class="seleccion-avatar">
</div>
<div>
<img data-user="thor" src="img/avatars/thor.jpg" alt="thor" class="seleccion-avatar">
</div>
<div>
<img data-user="hulk" src="img/avatars/hulk.jpg" alt="hulk" class="seleccion-avatar">
</div>
</div>
<!-- FIN Seleccion de personaje -->
<!-- Lista de mensajes -->
<ul id="timeline" class="timeline oculto">
<!-- Mensaje -->
<li class="animated fadeIn fast">
<div class="avatar">
<img src="img/avatars/spiderman.jpg">
</div>
<div class="bubble-container">
<div class="bubble">
<h3>@spiderman</h3>
<br/>
La tía May, hizo unos panqueques en forma de ironman!
</div>
<div class="arrow"></div>
</div>
</li>
<!-- Fin del mensaje -->
</ul>
<!-- Fin Lista de mensajes -->
<script src="js/libs/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>