From 2259efb048cc8757da55f3566a7a2f3577330856 Mon Sep 17 00:00:00 2001
From: gdamms <damguillotin@gmail.com>
Date: Sat, 23 Apr 2022 20:46:51 +0200
Subject: [PATCH] feat: generation auto de pixels randoms

---
 .../pix.scssc                                 | Bin 0 -> 3013 bytes
 .../pixels.cssc                               | Bin 0 -> 6499 bytes
 src/front/index.html                          | 205 ++++++------
 src/front/pix.css                             | 301 ++++++++++++++++++
 src/front/pix.css.map                         |   7 +
 src/front/pix.scss                            |   7 +
 src/front/pixels.css                          |   2 +-
 7 files changed, 419 insertions(+), 103 deletions(-)
 create mode 100644 .sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc
 create mode 100644 .sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc
 create mode 100644 src/front/pix.css
 create mode 100644 src/front/pix.css.map
 create mode 100644 src/front/pix.scss

diff --git a/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc b/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc
new file mode 100644
index 0000000000000000000000000000000000000000..93f9f881131cb82bb36f8debc532f530e37883ab
GIT binary patch
literal 3013
zcmcImU2_^Y6vZ<gK5ek^7l~UJ<21EX$1FBZjFh&T>0}e8Z6;H@=>rctVi6!`S?x$m
zY}dnk`%C&W+p7f@7DFa|2s6M+E1i4Kz4u({^!WL4HGNXCX|q<TwyV`vt@^xuUaMA&
z^V4>%QmHm;C+$kbII$~dM*54SKo2gcQV3m2#t`~V2>*>}v1ODcc9%OX$=pU<pu+Sb
zQ%Joghf?GNmGx4b$5H&{B}$XF6g`28!^Ic2<eoo9{)PKYQYVEnu*vDOd&}PGS%lv7
zdrc<Oc$vr03K5>qg{$sjXp^}89w7KaT78%Msu4rmq{Up(<8EX&ON8Vdm~_B3BaTxh
zc;;}Iftz`vL|@v>lGN>h4<lX|!6eYvvniA#%BRw|JfQ^I8L=5Hc`FpxJ|%D-@Ro^a
zw-xjGIylSRR<H$c1uyY7-_SAP4y%{8m9)zc9@j5>{N`BMN(G)}3GaDALTti-)JGGL
z6chHUTjjG}5|AV$r(XJ|+!Z}mZqXiRZuu4WU-z5kw^Cd&{}0xLC<E>#P>_r|*8ka3
zAd2>w<?5enDqZe&fPV6V`EfAbrK&rKnNSy+kX}UcC`o)Fa3+P91zyoP%i=7_;9Mhy
zSIG)qg9OwxO&u$|F7QSQZ;DBHzQTp6(Jp>K^7tWH$9n*sBkaa@`ig&GCXPc5;zSN7
z0q{!m!|90G*gdmB-ob2Q#%uzzvK^Y$qr$XVT#Dc>rZW$BFM?Z&;O-Ae%&4vJu%VJ5
zx$xXb*Gq|gsR;`7c%F*tE>wyq9I8uj4a%>{+Cnk|q}byvf%fKYdPgOvO^0P5jXH6G
zVs(*hk-pnvQrQ5}3KBnl1(8e6L@o)j%7+Z~Xd}W95)ay@ZE(;4WnOoo6qQFoYeOGR
zFgG<BEHpvZW3f87md|c{6KxP(eHQStY~cur)@R0RAbU?TI|u?wxx!^Z{^$F=8u58^
z+Gk*E2f@aV*YLLnJ`ngYgP(*&_FeciAG#2MemD&sICNy-rzSo&aoNNMuHX}V`VmLB
zB4|6)X!TM|`w8vKqf$YxbhRi0?GVKrX6v39>1%jOXgX8b2=td@Xs8FDHWiNr0*lrr
zbQDk5<|=;Dh}TQGCbi#pq=146^tY@}g}II1?7KE~oSZ&E;9nP>p<|kqon}BHO{nas
zMpEGO9IgfLGSH4&q8A_|t@Wvvvh?q)xRWPmXRuUvmDEg;rhx2WNLG)I#$<!8k|poi
z?X{3C=xn<~t^DqD2aX*fd(`27vevKEOQ1Eq&QiYAO%P5WkQepfKSPuU;xqIDsLGBt
z94_#r6!GNgv?rR==L*2Hh}l}iEEf1h0)KxO!#}|HM*|aMf%D}E3W}h7M(2Num^CA2
zKi&Bk5tLUE6n#Q{I?`?g>GeINXK+thBOa*5Qn#*8Z&1=@*C41E-ZMsOpI4=mR;sHs
z#D&fo9KiSGOqTwNxH3_3VR)lj+yb-(;6axDp142uEo}4T=MY}Ej0t>RpZ(VOHh4Lq
zHSY{ehamcF-4E@(oZ2_<Di9C%#bMvq_xC|NfoqT!ADmxH{}4DHijR0v-#Cj#(eFZQ
z>U4{>;$6B3pW*APMX&XeeYt=4h!1S|y&8<R>3RK`G&@v;wskOUPY2L<4v&h928TE>
Xt@jUtr$KrUbhP=GpD5$_6yyH@YmE4d

literal 0
HcmV?d00001

diff --git a/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc b/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc
new file mode 100644
index 0000000000000000000000000000000000000000..065b81b20086e0a2033f3f0415dd247a89639e52
GIT binary patch
literal 6499
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
QD!x;g0?0?It2w^>AGhMvuK)l5

literal 0
HcmV?d00001

diff --git a/src/front/index.html b/src/front/index.html
index fba7c86..c0f5818 100644
--- a/src/front/index.html
+++ b/src/front/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="title-bar.css">
     <link rel="stylesheet" href="login-signup.css">
     <link rel="stylesheet" href="pixels.css">
+    <link rel="stylesheet" href="pix.css">
     <script>
         function toggleLoginSignup(l, s) {
             document.getElementById("show-login").checked = l;
@@ -20,7 +21,8 @@
 
     <div class="title-bar">
         <div class="title">
-            <img src="logo.png" /> Pixels </div>
+            <img src="logo.png" /> Pixels
+        </div>
         <div class="profil">
             <input type="checkbox" id="show-login" class="show">
             <label for="show-login" class="login-btn">Login</label>
@@ -80,128 +82,127 @@
             </div>
         </div>
     </div>
-
     <div class="pixel-container">
         <table>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r0c0"></td>
+                <td class="pixel" id="r0c1"></td>
+                <td class="pixel" id="r0c2"></td>
+                <td class="pixel" id="r0c3"></td>
+                <td class="pixel" id="r0c4"></td>
+                <td class="pixel" id="r0c5"></td>
+                <td class="pixel" id="r0c6"></td>
+                <td class="pixel" id="r0c7"></td>
+                <td class="pixel" id="r0c8"></td>
+                <td class="pixel" id="r0c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r1c0"></td>
+                <td class="pixel" id="r1c1"></td>
+                <td class="pixel" id="r1c2"></td>
+                <td class="pixel" id="r1c3"></td>
+                <td class="pixel" id="r1c4"></td>
+                <td class="pixel" id="r1c5"></td>
+                <td class="pixel" id="r1c6"></td>
+                <td class="pixel" id="r1c7"></td>
+                <td class="pixel" id="r1c8"></td>
+                <td class="pixel" id="r1c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r2c0"></td>
+                <td class="pixel" id="r2c1"></td>
+                <td class="pixel" id="r2c2"></td>
+                <td class="pixel" id="r2c3"></td>
+                <td class="pixel" id="r2c4"></td>
+                <td class="pixel" id="r2c5"></td>
+                <td class="pixel" id="r2c6"></td>
+                <td class="pixel" id="r2c7"></td>
+                <td class="pixel" id="r2c8"></td>
+                <td class="pixel" id="r2c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r3c0"></td>
+                <td class="pixel" id="r3c1"></td>
+                <td class="pixel" id="r3c2"></td>
+                <td class="pixel" id="r3c3"></td>
+                <td class="pixel" id="r3c4"></td>
+                <td class="pixel" id="r3c5"></td>
+                <td class="pixel" id="r3c6"></td>
+                <td class="pixel" id="r3c7"></td>
+                <td class="pixel" id="r3c8"></td>
+                <td class="pixel" id="r3c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r4c0"></td>
+                <td class="pixel" id="r4c1"></td>
+                <td class="pixel" id="r4c2"></td>
+                <td class="pixel" id="r4c3"></td>
+                <td class="pixel" id="r4c4"></td>
+                <td class="pixel" id="r4c5"></td>
+                <td class="pixel" id="r4c6"></td>
+                <td class="pixel" id="r4c7"></td>
+                <td class="pixel" id="r4c8"></td>
+                <td class="pixel" id="r4c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r5c0"></td>
+                <td class="pixel" id="r5c1"></td>
+                <td class="pixel" id="r5c2"></td>
+                <td class="pixel" id="r5c3"></td>
+                <td class="pixel" id="r5c4"></td>
+                <td class="pixel" id="r5c5"></td>
+                <td class="pixel" id="r5c6"></td>
+                <td class="pixel" id="r5c7"></td>
+                <td class="pixel" id="r5c8"></td>
+                <td class="pixel" id="r5c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r6c0"></td>
+                <td class="pixel" id="r6c1"></td>
+                <td class="pixel" id="r6c2"></td>
+                <td class="pixel" id="r6c3"></td>
+                <td class="pixel" id="r6c4"></td>
+                <td class="pixel" id="r6c5"></td>
+                <td class="pixel" id="r6c6"></td>
+                <td class="pixel" id="r6c7"></td>
+                <td class="pixel" id="r6c8"></td>
+                <td class="pixel" id="r6c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r7c0"></td>
+                <td class="pixel" id="r7c1"></td>
+                <td class="pixel" id="r7c2"></td>
+                <td class="pixel" id="r7c3"></td>
+                <td class="pixel" id="r7c4"></td>
+                <td class="pixel" id="r7c5"></td>
+                <td class="pixel" id="r7c6"></td>
+                <td class="pixel" id="r7c7"></td>
+                <td class="pixel" id="r7c8"></td>
+                <td class="pixel" id="r7c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r8c0"></td>
+                <td class="pixel" id="r8c1"></td>
+                <td class="pixel" id="r8c2"></td>
+                <td class="pixel" id="r8c3"></td>
+                <td class="pixel" id="r8c4"></td>
+                <td class="pixel" id="r8c5"></td>
+                <td class="pixel" id="r8c6"></td>
+                <td class="pixel" id="r8c7"></td>
+                <td class="pixel" id="r8c8"></td>
+                <td class="pixel" id="r8c9"></td>
             </tr>
             <tr>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
-                <td class="pixel"></td>
+                <td class="pixel" id="r9c0"></td>
+                <td class="pixel" id="r9c1"></td>
+                <td class="pixel" id="r9c2"></td>
+                <td class="pixel" id="r9c3"></td>
+                <td class="pixel" id="r9c4"></td>
+                <td class="pixel" id="r9c5"></td>
+                <td class="pixel" id="r9c6"></td>
+                <td class="pixel" id="r9c7"></td>
+                <td class="pixel" id="r9c8"></td>
+                <td class="pixel" id="r9c9"></td>
             </tr>
         </table>
         <div class="pixel-description">
diff --git a/src/front/pix.css b/src/front/pix.css
new file mode 100644
index 0000000..badb65f
--- /dev/null
+++ b/src/front/pix.css
@@ -0,0 +1,301 @@
+#r0c0 {
+  background: #bd8226; }
+
+#r0c1 {
+  background: #6ad2bb; }
+
+#r0c2 {
+  background: #ac6816; }
+
+#r0c3 {
+  background: #f0e5ad; }
+
+#r0c4 {
+  background: #9b7ae2; }
+
+#r0c5 {
+  background: #fc4b16; }
+
+#r0c6 {
+  background: #493562; }
+
+#r0c7 {
+  background: #597b58; }
+
+#r0c8 {
+  background: #f68af4; }
+
+#r0c9 {
+  background: #29d291; }
+
+#r1c0 {
+  background: #a9da86; }
+
+#r1c1 {
+  background: #ee5ccc; }
+
+#r1c2 {
+  background: #c2170c; }
+
+#r1c3 {
+  background: #38cd2b; }
+
+#r1c4 {
+  background: #7c2adf; }
+
+#r1c5 {
+  background: #fcbc48; }
+
+#r1c6 {
+  background: #31aa29; }
+
+#r1c7 {
+  background: #b65dd9; }
+
+#r1c8 {
+  background: #cab125; }
+
+#r1c9 {
+  background: #b41569; }
+
+#r2c0 {
+  background: #308164; }
+
+#r2c1 {
+  background: #5fe6c4; }
+
+#r2c2 {
+  background: #740cd8; }
+
+#r2c3 {
+  background: #16340a; }
+
+#r2c4 {
+  background: #0f48dc; }
+
+#r2c5 {
+  background: #047373; }
+
+#r2c6 {
+  background: #a683c6; }
+
+#r2c7 {
+  background: #acf056; }
+
+#r2c8 {
+  background: #5261ea; }
+
+#r2c9 {
+  background: #1dc6ce; }
+
+#r3c0 {
+  background: #05f60b; }
+
+#r3c1 {
+  background: #a7e815; }
+
+#r3c2 {
+  background: #1ed985; }
+
+#r3c3 {
+  background: #7154e4; }
+
+#r3c4 {
+  background: #fbd471; }
+
+#r3c5 {
+  background: #3dccb7; }
+
+#r3c6 {
+  background: #b021a9; }
+
+#r3c7 {
+  background: #b2f2fc; }
+
+#r3c8 {
+  background: #2b21a2; }
+
+#r3c9 {
+  background: #65f83b; }
+
+#r4c0 {
+  background: #dfbfad; }
+
+#r4c1 {
+  background: #e99270; }
+
+#r4c2 {
+  background: #b36216; }
+
+#r4c3 {
+  background: #5d531b; }
+
+#r4c4 {
+  background: #76da95; }
+
+#r4c5 {
+  background: #79884f; }
+
+#r4c6 {
+  background: #e8dfc5; }
+
+#r4c7 {
+  background: #8971f4; }
+
+#r4c8 {
+  background: #1ceb1f; }
+
+#r4c9 {
+  background: #a15e02; }
+
+#r5c0 {
+  background: #604930; }
+
+#r5c1 {
+  background: #65274c; }
+
+#r5c2 {
+  background: #61bd26; }
+
+#r5c3 {
+  background: #5759a2; }
+
+#r5c4 {
+  background: #b9cda2; }
+
+#r5c5 {
+  background: #961983; }
+
+#r5c6 {
+  background: #a3cc2b; }
+
+#r5c7 {
+  background: #7e8361; }
+
+#r5c8 {
+  background: #50f4f9; }
+
+#r5c9 {
+  background: #b14f97; }
+
+#r6c0 {
+  background: #1e8113; }
+
+#r6c1 {
+  background: #e004b9; }
+
+#r6c2 {
+  background: #7ed1ec; }
+
+#r6c3 {
+  background: #26c544; }
+
+#r6c4 {
+  background: #426012; }
+
+#r6c5 {
+  background: #ef7356; }
+
+#r6c6 {
+  background: #4399f5; }
+
+#r6c7 {
+  background: #89d054; }
+
+#r6c8 {
+  background: #746b0f; }
+
+#r6c9 {
+  background: #b616f7; }
+
+#r7c0 {
+  background: #27ed47; }
+
+#r7c1 {
+  background: #c570e7; }
+
+#r7c2 {
+  background: #379b0a; }
+
+#r7c3 {
+  background: #d0dcf9; }
+
+#r7c4 {
+  background: #b6ba04; }
+
+#r7c5 {
+  background: #0f563d; }
+
+#r7c6 {
+  background: #4e34b0; }
+
+#r7c7 {
+  background: #e3c32d; }
+
+#r7c8 {
+  background: #f39d9e; }
+
+#r7c9 {
+  background: #e9f9e0; }
+
+#r8c0 {
+  background: #1a4571; }
+
+#r8c1 {
+  background: #5ad67d; }
+
+#r8c2 {
+  background: #e6a830; }
+
+#r8c3 {
+  background: #3b089a; }
+
+#r8c4 {
+  background: #033b9c; }
+
+#r8c5 {
+  background: #9e0d6e; }
+
+#r8c6 {
+  background: #b29f25; }
+
+#r8c7 {
+  background: #1d33d8; }
+
+#r8c8 {
+  background: #053658; }
+
+#r8c9 {
+  background: #23b71d; }
+
+#r9c0 {
+  background: #5c32c5; }
+
+#r9c1 {
+  background: #9d7d3e; }
+
+#r9c2 {
+  background: #172f58; }
+
+#r9c3 {
+  background: #850343; }
+
+#r9c4 {
+  background: #79eac9; }
+
+#r9c5 {
+  background: #ff9abd; }
+
+#r9c6 {
+  background: #4ca78c; }
+
+#r9c7 {
+  background: #d25aae; }
+
+#r9c8 {
+  background: #9130d0; }
+
+#r9c9 {
+  background: #7529f8; }
+
+/*# sourceMappingURL=pix.css.map */
diff --git a/src/front/pix.css.map b/src/front/pix.css.map
new file mode 100644
index 0000000..0f485e5
--- /dev/null
+++ b/src/front/pix.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEQ,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C",
+"sources": ["pix.scss"],
+"names": [],
+"file": "pix.css"
+}
diff --git a/src/front/pix.scss b/src/front/pix.scss
new file mode 100644
index 0000000..be12397
--- /dev/null
+++ b/src/front/pix.scss
@@ -0,0 +1,7 @@
+@for $i from 0 through 9 {
+    @for $j from 0 through 9 {
+        #r#{$i}c#{$j} {
+            background: rgb(random(255), random(255), random(255));
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/front/pixels.css b/src/front/pixels.css
index 5740757..21559d1 100644
--- a/src/front/pixels.css
+++ b/src/front/pixels.css
@@ -8,7 +8,7 @@
 
 
 .pixel {
-  background: #0f0;
+  background: #fff;
   width: 80px;
   height: 80px;
 }