forked from twilio-labs/open-pixel-art
-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.njk
179 lines (176 loc) · 10.8 KB
/
index.njk
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
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<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"/>
<meta name="description" content="The Open Pixel Art project is a collaborative art project designed to teach you how to contribute to open-source.">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twilio" />
<meta name="twitter:title" content="Open Pixel Art by Twilio" />
<meta name="twitter:description" content="A collaborative art project designed to teach you how to contribute to open-source." />
<meta name="twitter:image" content="https://open-pixel-art.com/assets/open-graph-image.png" />
<meta name="twitter:image:alt" content="Text saying Open Pixel Art in a pixelated font with colorful pixels spread around." />
<meta property="og:url" content="https://contribu-art.vercel.app" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Contribu-Art" />
<meta property="og:description" content="Un proyecto de arte colaborativo que te enseña a colaborar al open-source." />
<meta property="og:image" content="https://contribu-art.com/assets/open-graph-image.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="400" />
<title>Contribu Art</title>
<link rel="shortcut icon" href="https://www.twilio.com/marketing/bundles/marketing/img/favicons/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Press+Start+2P&display=swap" rel="stylesheet">
<link href="/assets/nes.css/nes.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="styles/main.css"/>
<script src="/assets/javascript/name-hover.js"></script>
</head>
<body>
<header>
<hgroup>
<h1><img class="logo" src="/assets/open-pixel-art-logo.svg" alt="Open Pixel Art by Twilio"/></h1>
</hgroup>
<nav>
<ul class="nav-list">
<li class="screenreader-only">
<a href="#canvas">Ir al Pixel Art Canvas</a>
</li>
<li class="nav-item">
<a class="nes-btn" href="#about">Acerca del Proyecto</a>
</li>
<li class="nav-item">
<a class="nes-btn" href="#contributing">Contribuye al Canvas</a>
</li>
<li class="nav-item">
<a class="nes-btn external-link" href="https://github.com/jesuslerma/open-pixel-art" target="_blank" rel="noreferrer" aria-label="Check on Github">Ver en GitHub</a>
</li>
</ul>
</nav>
</header>
<main role="main">
<div>
<button class="nes-btn" onClick="random()">Random (r)</button>
<button class="nes-btn" onClick="order()">Order (o)</button>
<button class="nes-btn" onClick="twist()">Twist (t)</button>
<button class="nes-btn" onClick="flip()">Flip (f)</button>
<button class="nes-btn" onClick="vert()">V-Flip (v)</button>
<button class="nes-btn" onClick="walk()">Walk (w)</button>
<button class="nes-btn" onClick="gravity()">Gravity (g)</button>
</div>
<div>
<button class="nes-btn" onClick="loop()">Loop (l)</button>
<button class="nes-btn" onClick="reset()">Reset (Esc)</button>
<button class="nes-btn" onClick="toggleImages()">Avatars (a)</button>
<button class="nes-btn" onClick="runAll()">Run All (p)</button>
</div>
<section id="canvas" class="nes-container with-title" aria-label="You are in the Pixel Art Canvas. Hover over a pixel to hear the github username who contributed it.">
<div role="heading" aria-level="2" class="screenreader-only">Pixel Art Canvas</div>
<svg id="pixel-canvas" viewbox="0 0 {{defaults.image.width * defaults.image.scale}} {{defaults.image.height * defaults.image.scale}}">
<rect x="0" y="0" width="100%" height="100%" style="fill: {{defaults.image.background}}"/>
{% for pixel in pixels.data %}
{% if pixel.color %}
<rect
class="pixel-rect pixel"
x="{{pixel.x * defaults.image.scale}}"
y="{{(defaults.image.height - pixel.y - 1) * defaults.image.scale}}"
width="{{defaults.image.scale}}"
height="{{defaults.image.scale}}"
style="fill: {{pixel.color}}"
name="{% if pixel.username %}{{pixel.username}} {% endif %}"
data-pixel-x="{% if pixel.x %}{{pixel.x}} {% endif %}"
data-pixel-y="{% if pixel.x %}{{pixel.y}} {% endif %}"
/>
<image
class="pixel-image pixel hidden"
x="{{pixel.x * defaults.image.scale}}"
y="{{(defaults.image.height - pixel.y - 1) * defaults.image.scale}}"
width="{{defaults.image.scale}}"
height="{{defaults.image.scale}}"
xlink:href="#"
color="{{pixel.color}}"
name="{% if pixel.username %}{{pixel.username}}{% endif %}"
data-pixel-x="{% if pixel.x %}{{pixel.x}} {% endif %}"
data-pixel-y="{% if pixel.x %}{{pixel.y}} {% endif %}"
/>
{% elif pixel.tileName %}
<image xlink:href="assets/tiles/{{pixel.tileName}}.png"
width="{{defaults.image.scale * 5}}"
height="{{defaults.image.scale * 5}}"
x="{{pixel.x * defaults.image.scale}}"
y="{{(defaults.image.height - pixel.y - 5) * defaults.image.scale }}"
name="{% if pixel.username %}{{pixel.username}}{% endif %}
data-pixel-x="{% if pixel.x %}{{pixel.x}} {% endif %}"
data-pixel-y="{% if pixel.x %}{{pixel.y}} {% endif %}""/>
{% endif %}
{% endfor %}
{% if env.isLocal %}
<!-- Lines for debug purposes -->
{% for horizontal in range(0, defaults.image.width) %}
<line y1="{{horizontal * defaults.image.scale}}" y2="{{horizontal * defaults.image.scale}}" x1="0" x2="{{defaults.image.height * defaults.image.scale}}" stroke-width="1" stroke="#aaa"/>
{% endfor %}
<line x1="{{defaults.image.width * defaults.image.scale}}" x2="{{defaults.image.width * defaults.image.scale}}" y1="0" y2="{{defaults.image.height * defaults.image.scale}}" stroke-width="1" stroke="#aaa"/>
{% for vertical in range(0, defaults.image.height) %}
<line x1="{{vertical * defaults.image.scale}}" x2="{{vertical * defaults.image.scale}}" y1="0" y2="{{defaults.image.width * defaults.image.scale}}" stroke-width="1" stroke="#aaa"/>
{% endfor %}
<line y1="{{defaults.image.height * defaults.image.scale}}" y2="{{defaults.image.height * defaults.image.scale}}" x1="0" x2="{{defaults.image.width * defaults.image.scale}}" stroke-width="1" stroke="#aaa"/>
{% endif %}
</svg>
</section>
<section class="nes-container with-title">
<h2 class="title" id="contributor">Contribuidor/a</h2>
<p aria-label="Hover over any pixel to hear the github username who contributed it.">Coloca el mouse sobre cualquier pixel para ver el nombre de la persona que hizo la contribución.</p>
<p>Ese pixel fue contribuido por: <span id="contributor-name" aria-live="polite">no se seleccionó pixel</span></p>
</section>
<section class="nes-container with-title">
<h2 class="title" id="about">Acerca del Proyecto</h2>
<p>Bienvenidas/os al proyecto Contribu-Art inspirado por Open Pixel Art project by <a class="external-link" href="https://www.twilio.com/" target="_blank" rel="noreferrer" >Twilio</a>.</p>
<p>
Este proyecto fue creado (o forkeado) con la intención de enseñarte a crear una pull request.
</p>
<p>
Cualquier persona que desea conocer cómo crear un pull request para contribuir a un proyecto en Github puede utilizar este proyecto para contribuir un pixel en el canvas. Te será permitido solo crear un pixel pero tu puedes elegir cualquier color que prefieres siempre y cuando sea un código HEX válido. Por ejemplo:
<code>#F22F46</code>
</p>
</section>
<section class="nes-container with-title">
<h2 id="contributing" class="title">Contribuye al Canvas</h2>
<p>
Para poder contribuir un pixen en el canvas, necesitarás crear un
<a class="external-link" href="https://opensource.guide/es/how-to-contribute/#abriendo-un-pull-request" target="_blank" rel="noreferrer" >pull request</a>
al proyecto
<a class="external-link" href="https://github.com/jesuslerma/open-pixel-art" target="_blank" rel="noreferrer" >Open Pixel Art en GitHub</a>.
</p>
<p>
Si ya te es familiar git y sabes cómo crear un pull request en GitHub, puedes saltarte el recurso anterior y revisar la
<a class="external-link" href="https://github.com/jesuslerma/open-pixel-art/blob/main/docs/es/CONTRIBUTING.md" target="_blank" rel="noreferrer" >guía de contribución</a>.
</p>
<p class="text-center">
<i class="nes-octocat" aria-hidden="true"></i>
</p>
</section>
</main>
<footer class="text-center">
<p class="footer-icons">
<a class="external-link" href="https://github.com/jesuslerma/open-pixel-art" target="_blank" rel="noreferrer" aria-label="Ver proyecto en Github">
<i class="nes-icon github" aria-hidden="true"></i>
</a>
<a class="external-link" href="https://www.twilio.com/labs?utm_source=hacktoberfest19&utm_campaign=hacktoberfest19" target="_blank" rel="noreferrer" aria-label="Check Twilio's Featured Projects for Contribution">
<img src="/assets/twilioBug.svg" alt="pixelated Twilio logo" class="twilio-pixel"/>
</a>
<a class="external-link" href="https://www.facebook.com/TeamTwilio/" target="_blank" rel="noreferrer" aria-label="Check twilio facebook account">
<i class="nes-icon facebook" aria-hidden="true"></i>
</a>
<a class="external-link" href="https://twitter.com/twilio" target="_blank" rel="noreferrer" aria-label="Check twilio twitter account">
<i class="nes-icon twitter" aria-hidden="true"></i>
</a>
<a class="external-link" href="https://www.linkedin.com/company/twilio-inc-" target="_blank" rel="noreferrer" aria-label="Check twilio LinkedIn account">
<i class="nes-icon linkedin" aria-hidden="true"></i>
</a>
</p>
<p>Created by
<a href="https://www.twilio.com/" class="twilio-link external-link" target="_blank" rel="noreferrer" >Twilio</a>
with and for the community.</a>
<p></footer>
<script src="/assets/javascript/party-mode.js"></script>
</body>
</html>