-
Notifications
You must be signed in to change notification settings - Fork 372
/
index.astro
171 lines (159 loc) · 7.72 KB
/
index.astro
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
166
167
168
169
170
171
---
import Participants from '@components/Participants.astro'
import Layout from '@layout'
---
<Layout title='midudev <> Hacktoberfest 2022 - Participa en el código abierto'>
<style>
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/Orbitron-ExtraBold.woff2') format('woff2');
}
@font-face {
font-family: 'Jet Brains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Jet Brains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/JetBrainsMono-Bold.woff2') format('woff2');
}
@keyframes binary {
25% {
content: '01100110 01101111 01110010 00100000 01100001 00100000 01110011 01110101 01110010 01110000 01110010 01101001 01110011 01100101 00100001 00100001 01100110 01101111 01110010 00100000 01100001 00100000 01110011 01110101 01110010 01110000 01110010 01101001 01110011 01100101 00100001 00100001 01100110 01101111 01110010 00100000 01100001 00100000 01110011 01110101 01110010 01110000 01110010 01101001 01110011 01100101 00100001 00100001';
}
50% {
content: '01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100';
}
75% {
content: '01100110 01101111 01110010 00100000 01100001 00100000 01110011 01110101 01110010 01110000 01110010 01101001 01110011 01100101 00100001 00100001 01100110 01101111 01110010 00100000 01100001 00100000 01110011 01110101 01110010 01110000 01110010 01101001 01110011 01100101 00100001 00100001 01100110 01101111 01110010 00100000 01100001 00100000 01110011 01110101 01110010 01110000 01110010 01101001 01110011 01100101 00100001 00100001';
}
100% {
content: '01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100';
}
}
main::before {
animation: 1s linear 1s infinite normal none running binary;
content: '01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100';
top: 0px;
left: 0px;
color: rgb(229, 225, 230);
font-size: 12px;
pointer-events: none;
position: absolute;
text-align: center;
width: 100%;
opacity: 0.3;
-webkit-mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 5%,
rgb(0, 0, 0) 20%,
rgb(0, 0, 0) 80%,
rgba(0, 0, 0, 0) 95%
);
white-space: nowrap;
overflow: hidden;
z-index: 200;
}
main {
height: 100%;
background: url('/grain-dark.png');
}
</style>
<main class='grid xl:grid-cols-3 items-start pt-20 gap-10 p-10'>
<div class='prose prose-invert h-full'>
<img class='w-72 h-auto' src='/logo.svg' alt='Hacktoberfest logo' />
<a
href='https://twitch.tv/midudev'
target='_blank'
rel='noopener noreferrer'
class='inline-flex items-center justify-center px-4 py-2 gap-x-2 text-xs leading-6 whitespace-no-wrap transition font-bold duration-150 ease-in-out rounded-full lg:text-base xl:text-lg text-white bg-purple-700 hover:bg-purple-500 focus:border-purple-800 active:bg-purple-800'
><svg class='w-6 h-6 fill-current' viewBox='0 0 24 24'
><path
d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z'
></path>
</svg>Sigue el evento en Twitch</a
>
<h2 class='text-white font-bold font-special uppercase text-3xl mt-8 mb-2'>OBJETIVO</h2>
<p class='text-2xl'>Crea una app que genera passwords al usuario de forma aleatoria.</p>
<h2 class='text-spark font-bold font-special uppercase text-3xl mt-8 mb-2'>
Cómo participar
</h2>
<ol class='list-decimal'>
<li>
Regístrate en la <a
target='_blank'
rel='noopener noreferrer'
href='https://hacktoberfest.com'>Hacktoberfest</a
>
</li>
<li>
Crear un fork de <a
href='https://github.com/midudev/hacktoberfest-2022'
target='_blank'
rel='noopener noreferrer'>este repositorio</a
>
</li>
<li>
Crea una página en <code
>/pages/entry/<tu-nombre-de-usuario-en-github>/index.astro</code
>
</li>
<li>Implementa la solución del reto siguiendo todos los requerimientos</li>
</ol>
<h2 class='text-yellow-400 font-bold font-special uppercase text-3xl mt-8 mb-2'>PREMIOS</h2>
<p>
Además de poder conseguir la camiseta de la Hacktoberfest, haremos una votación para elegir
las mejores soluciones. Los premios son:
</p>
<ul>
<li>
🥇 Teclado mecánico <a href='https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?variant=32220198633561' target='_blank' rel='noopener'>Keychrone K3 v2 RGB Backlight</a>.
</li>
<li>🥈 <a href='https://www.redbubble.com/es/' target='_blank' rel='noopener noreferrer'>Cheque regalo para Red Bubble</a> por valor de 30€.</li>
<li>
🥉 <a href='https://leanpub.com/aprendiendo-git' target='_blank' rel='noopener noreferrer'>Libro de Aprendiendo Git</a>) + <a href='https://leanpub.com/descubre-svelte' target='_blank' rel='noopener noreferrer'>Descubre
Svelte</a>
</li>
</ul>
</div>
<section class='prose prose-invert'>
<h2 class='text-psybeam font-special uppercase text-3xl mb-2'>Requerimientos</h2>
<ul class='list-disc'>
<li>Muestra un botón que al hacer click, se le genera un password aleatorio al usuario.</li>
<li>
Muestra un slider para que el usuario pueda determinar la longitud del password que se
genera.
</li>
<li>Añade un icono al lado del password generado, para que pueda copiar el password</li>
<li>
<span class='italic'>El próximo requerimiento se desbloquea el 4 de octubre</span>
</li>
</ul>
<h2 class="text-surf font-special uppercase text-3xl mt-8 mb-2">Reglas</h2>
<ul class="list-disc">
<li>Puedes usar cualquier framework dentro de esta lista: React, Vue, Svelte, Solid, Angular, Preact y Lit. También puedes usar Vanilla Javascript.</li>
<li>NO puedes usar dependencias de terceros. Nada de <code>npm install</code>, ni <code>yarn add</code> ni similares.</li>
<li>Se puede utilizar CSS y Tailwind pero NO se puede utilizar otro framework CSS como Bootstrap, Bulma, NextUI, Material UI, etc... ni tampoco SASS, Stylus o similares.</li>
<li>No copies soluciones de otros participantes o soluciones de fuera.</li>
<li>Crea tus PRs del 1 al 31 de octubre.</li>
<li>No uses ni modifiques código o componentes de otros participantes.</li>
<li>
Si necesitas crear componentes auxiliares para tu solución, crea una carpeta en <code
>components/<nombre-de-usuario-en-github>/*</code
>
</li>
</ul>
</section>
<aside class='text-center'>
<Participants />
</aside>
</main>
</Layout>