-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
165 lines (154 loc) · 10.5 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="es">
<!--
v2.5
StartpagePlox by Alplox
https://github.com/Alplox/StartpagePlox
-->
<head>
<meta charset="UTF-8">
<meta name="title" content="/A\">
<meta name="author" content="Alplox (https://github.com/Alplox)">
<meta name="description" content="Startpage de Alplox">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>/A\</title>
<base target="_blank">
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="assets/css/modern-normalize.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://alplox.github.io/StartpagePlox/">
<meta property="og:title" content="/A\">
<meta property="og:description" content="Startpage de Alplox">
<meta property="og:image" content="assets/img/previews/pc.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://alplox.github.io/StartpagePlox/">
<meta property="twitter:title" content="/A\">
<meta property="twitter:description" content="Startpage de Alplox">
<meta property="twitter:image" content="assets/img/previews/pc.jpg">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<!-- Manifest -->
<link rel="manifest" href="site.webmanifest">
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
el.updatemessage = "Nueva versión disponible";
document.body.appendChild(el);
</script>
</head>
<body>
<noscript>
<p>⚠️ El sitio <b>no</b> funciona sin <b>JavaScript</b>.</p>
<p>Si lo has deshabilitado, por favor <b>vuelve a activarlo</b>.</p>
</noscript>
<main class="container">
<section class="image">
<div class="container-botones-imagen">
<div class="container-checkbox-tema">
<input type="checkbox" id="boton-alternar-tema" aria-labelledby="boton-alternar-tema" tabindex="0"/>
<label for="boton-alternar-tema">
<span class="ball"></span>
</label>
</div>
<button type="button" class="boton-open-modal" id="boton-open-modal" aria-labelledby="Boton que abre ventana modal" tabindex="0">
<svg xmlns='http://www.w3.org/2000/svg' class='skull' viewBox='0 0 512 512'><title>Skull</title><path d='M448 225.64v99a64 64 0 01-40.23 59.42l-23.68 9.47A32 32 0 00364.6 417l-10 50.14A16 16 0 01338.88 480H173.12a16 16 0 01-15.69-12.86L147.4 417a32 32 0 00-19.49-23.44l-23.68-9.47A64 64 0 0164 324.67V224c0-105.92 85.77-191.81 191.65-192S448 119.85 448 225.64z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/><circle cx='168' cy='280' r='40' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/><circle cx='344' cy='280' r='40' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 336l-16 48h32l-16-48zM256 448v32M208 448v32M304 448v32'/></svg>
</button>
</div>
<div class="tiempo-fondo">
<div class="tiempo">
<div class="reloj ">
<time id="hora" class="hora"></time>
<div id="am-pm" class="am-pm"></div>
</div>
<p id="fecha" class="fecha"></p>
</div>
</div>
<p class="mention-wallpaper">Imagen:
<a href="https://www.deviantart.com/teundenouden/art/Chemical-Convection-771768684" rel="nofollow noreferrer" tabindex="0">Chemical Convection</a>
por
<a href="https://www.deviantart.com/teundenouden/" rel="nofollow noreferrer" tabindex="0">teundenouden</a>
</p>
</section>
<section class="searchbar " aria-labelledby="barra de busqueda">
<input type="search" class="searchbox sombra-sm" name="q" title="barra de busqueda" placeholder="Buscar (Qwant por defecto)"
id="input-buscador" spellcheck="false" autocomplete="off" size="40" maxlength="255" tabindex="0"/>
<div class="container-search-engines"></div>
</section>
<div class="bm-container">
<div class="bm-container-tabs">
<div class="bm-container-tabs-titles">
<p class="bm-tab-title"></p>
<p class="bm-tab-title"></p>
<p class="bm-tab-title"></p>
<p class="bm-tab-title"></p>
<p class="bm-tab-title"></p>
</div>
<div class="bm-container-tabs-content">
<div class="bm-tab active">
<div class="bm-content active" data-tab="tab-1"></div>
</div>
<div class="bm-tab">
<div class="bm-content" data-tab="tab-2"></div>
</div>
<div class="bm-tab">
<div class="bm-content" data-tab="tab-3"></div>
</div>
<div class="bm-tab">
<div class="bm-content" data-tab="tab-4"></div>
</div>
<div class="bm-tab">
<div class="bm-content" data-tab="tab-5"></div>
</div>
</div>
</div>
</div>
<footer class="footer-message">
<a class="underline" href="https://github.com/Alplox/StartpagePlox" rel="nofollow noreferrer" tabindex="0">Desarrollado por Alplox</a>
</footer>
</main>
<!-- The Modal -->
<div id="modal" class="modal" tabindex="-1" aria-labelledby="Modal" aria-hidden="true">
<div class="modal-content sombra">
<div class="modal-body">
<button type="button" class="close" aria-label="Close">×</button>
<h2>Este es el primer proyecto que hice desde cero mientras aprendía HTML, CSS y JavaScript.</h2>
<h3>Aquí están algunos de los sitios de donde tomé inspiración para hacer esta página</h3>
<p>*Esta misma lista se puede encontrar en el archivo <a href="https://github.com/Alplox/StartpagePlox/blob/main/NOTICE.md" rel="nofollow noreferrer">NOTICE</a> en el <a href="https://github.com/Alplox/StartpagePlox" rel="nofollow noreferrer">repositorio</a>.
</p>
<br>
<h4>Menciones:</h4>
<li>Código para "reloj" basado en <a href="https://github.com/isai-ismael/reloj-digital" rel="nofollow noreferrer">https://github.com/isai-ismael/reloj-digital</a></li>
<li>
Código para "container-checkbox-tema" basado en
<a href="https://youtu.be/xodD0nw2veQ" rel="nofollow noreferrer">https://youtu.be/xodD0nw2veQ</a> -
<a href="https://daveyhert.hashnode.dev/how-to-create-animated-toggle-switches-with-just-css-and-implement-a-dark-mode-feature" rel="nofollow noreferrer">https://daveyhert.hashnode.dev/how-to-create-animated-toggle-switches-with-just-css-and-implement-a-dark-mode-feature</a> -
<a href="https://youtu.be/wodWDIdV9BY" rel="nofollow noreferrer">https://youtu.be/wodWDIdV9BY</a>
</li>
<li>Código y estilo para "searchbar" basado en <a href="https://github.com/TB-96/Evening-Startpage" rel="nofollow noreferrer">https://github.com/TB-96/Evening-Startpage</a></li>
<li>Favicon creado usando <a href="https://favicon.io/" rel="nofollow noreferrer">https://favicon.io/</a></li>
<br>
<h4>Trabajos bajo licencias:</h4>
<li>Fondo SVG <a href="https://www.heropatterns.com" rel="nofollow noreferrer">https://www.heropatterns.com</a></li>
<li>Chemical Convection por teundenouden <a href="https://www.deviantart.com/teundenouden/art/Chemical-Convection-771768684" rel="nofollow noreferrer">https://www.deviantart.com/teundenouden/art/Chemical-Convection-771768684</a></li>
<li>Iconos <a href="https://ionicons.com" rel="nofollow noreferrer">https://ionicons.com</a></li>
<li>Fuente Roboto Mono <a href="https://fonts.google.com/" rel="nofollow noreferrer">https://fonts.google.com/</a></li>
<li>Código y estilo para "container-bookmarks" basado en <a href="https://github.com/MrAlpha786/getstarted" rel="nofollow noreferrer">https://github.com/MrAlpha786/getstarted</a></li>
</div>
<footer class="modal-footer">
<a href="https://github.com/Alplox/StartpagePlox" rel="nofollow noreferrer">
<svg xmlns='http://www.w3.org/2000/svg' class="repo-github" viewBox='0 0 512 512'>
<path d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z'/>
</svg>
— StartpagePlox por Alplox
</a>
</footer>
</div>
</div>
<script src="assets/js/scripts.js"></script>
</body>
</html>