Jigerator frontend mostly working

1 files changed, 81 insertions, 6 deletions

diff --git a/webapp/templates/jigerator.html b/webapp/templates/jigerator.html
index 5ad949b..9ee9b84 100644
--- a/webapp/templates/jigerator.html
+++ b/webapp/templates/jigerator.html
@@ -31,17 +31,84 @@
         </form>
         <div class="form-controls">
           <div class="upload-label">Upload completed SVG file:</div>
-          <input class='upload-button' form="gerber-upload-form" name="upload_file" size="20" type="file">
-        </div>
-        <div class="submit-buttons">
+          <input class='upload-button' form="svg-upload-form" name="upload_file" size="20" type="file">
           <input class='reset-button' form="reset-form" type="submit" value="Start over">
           <input class='submit-button' form="svg-upload-form" type="submit" value="Submit">
         </div>
       </div>
 
-      {% if 'render_job' in session or has_renders %}
+      <svg id="brace1" class="brace" viewBox="0 0 153.99388 15.712677">
+        <g transform="translate(3.2941455e-8,-281.28732)" id="layer1">
+          <path id="path815"
+             d="m 0.14168396,281.28734 -0.12608983,0.002 c 1.058e-5,7.1e-4 0.0098822,0.0227 0.0025823,0.0651 -0.03416829,0.19915 -0.03783806,0.84615 0.15037859,1.73633 0.22755489,1.07622 0.74089947,2.52905 1.84278328,3.96255 1.1057254,1.43851 2.7983999,2.84844 5.350576,3.81786 2.5483502,0.96798 5.9180417,1.48313 10.3476897,1.17667 1.417535,-0.0987 2.85341,-0.20657 4.301546,-0.3204 8.724045,-0.68573 17.88101,-1.54185 26.353947,-1.79834 4.937257,-0.14945 9.628528,-0.0947 13.849799,0.31471 4.222819,0.4095 7.961077,1.17267 11.001912,2.43241 0.803262,0.29984 1.423408,0.58707 1.905828,0.88005 0.48068,0.29193 0.828228,0.59172 1.080038,0.91829 0.1417,0.18378 0.254725,0.3783 0.344164,0.58756 0.0702,0.16428 0.121047,0.33857 0.157097,0.52297 0.0823,0.42091 0.08785,0.88621 0.08785,1.4149 h 0.410311 c 0,-0.52869 0.0056,-0.99399 0.08785,-1.4149 0.03605,-0.1844 0.0869,-0.35869 0.157097,-0.52297 0.08944,-0.20926 0.202467,-0.40378 0.344167,-0.58756 0.251809,-0.32657 0.598839,-0.62636 1.079519,-0.91829 0.48242,-0.29298 1.103085,-0.58021 1.906344,-0.88005 3.040837,-1.25974 6.779093,-2.02291 11.001912,-2.43241 4.221271,-0.40938 8.912025,-0.46416 13.849285,-0.31471 8.47293,0.25649 17.63042,1.11261 26.35446,1.79834 1.44814,0.11383 2.88401,0.2217 4.30155,0.3204 4.42964,0.30646 7.79933,-0.20869 10.34768,-1.17667 2.55218,-0.96942 4.24486,-2.37935 5.35058,-3.81786 1.10188,-1.4335 1.61523,-2.88633 1.84278,-3.96255 0.18822,-0.89018 0.18455,-1.53718 0.15038,-1.73633 -0.007,-0.0424 0.003,-0.0644 0.003,-0.0651 l -0.12661,-0.002 c 0,-7e-4 0.01,0.0206 -0.002,0.0605 -0.0548,0.18822 -0.15924,0.80325 -0.44907,1.6247 -0.35304,1.00063 -0.97308,2.28804 -2.09341,3.5171 -1.11523,1.22346 -2.73041,2.39512 -5.10305,3.18327 -2.37558,0.78911 -5.54867,1.20666 -9.80973,0.8754 -1.41271,-0.10897 -2.84457,-0.22324 -4.2907,-0.33952 -8.69688,-0.69925 -17.91446,-1.5072 -26.44076,-1.67276 -4.97393,-0.0966 -9.723774,0.0251 -14.009995,0.51573 -4.284742,0.49051 -8.120018,1.35147 -11.25461,2.74092 -0.81188,0.39299 -1.447835,0.78087 -1.941484,1.1777 -0.495149,0.39804 -0.844428,0.803 -1.086239,1.22783 -0.135149,0.23743 -0.23514,0.47848 -0.309541,0.72554 -0.02341,0.0778 -0.04406,0.15628 -0.06408,0.23513 -0.02002,-0.0789 -0.04067,-0.15732 -0.06408,-0.23513 -0.0744,-0.24706 -0.174389,-0.48811 -0.309541,-0.72554 -0.241811,-0.42483 -0.591087,-0.82979 -1.086239,-1.22783 -0.493649,-0.39683 -1.129602,-0.78471 -1.941484,-1.1777 -3.134592,-1.38945 -6.969865,-2.25041 -11.25461,-2.74092 -4.286221,-0.49068 -9.036587,-0.61231 -14.010513,-0.51573 -8.526303,0.16556 -17.74336,0.97351 -26.440246,1.67276 -1.446128,0.11628 -2.877986,0.23055 -4.290695,0.33952 -4.261064,0.33126 -7.434154,-0.0863 -9.8097362,-0.8754 -2.3726351,-0.78815 -3.9878184,-1.95981 -5.1030477,-3.18327 -1.1203332,-1.22906 -1.74037366,-2.51647 -2.09341249,-3.5171 -0.28982193,-0.82145 -0.39425032,-1.43648 -0.44906934,-1.6247 -0.0116179,-0.0399 -0.002582,-0.0612 -0.002582,-0.0605 z" />
+        </g>
+      </svg>
+
+      <svg id="svg-spinner" viewBox="2 0 77 68" width="15em">
+        <defs>
+          <filter id="filter5780">
+            <feGaussianBlur stdDeviation="0.95" />
+          </filter>
+          <filter id="filter7730">
+            <feColorMatrix type="hueRotate" values="180" result="color1" />
+            <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 -0.21 -0.72 -0.07 2 0 " result="color2" />
+          </filter>
+          <mask maskUnits="userSpaceOnUse" id="mask14163">
+            <path id="path14165" style="fill:#ffffff;stroke:none;filter:url(#filter5780)"
+              d="m 32,1.5 c -11.97869,1.26337 -23.237221,11.89727 -25.299541,25.54516 -1.32945,8.79794 3.14945,18.54017
+              9.211001,25.05391 6.64033,7.13568 17.00391,10.63738 26.6505,12.0357 6.53153,0.94678 13.34527,2.29845
+              19.65012,-4.54409 5.842739,-6.34102 8.886339,-15.82728 8.474109,-24.43984 -0.38738,-8.09332
+              -4.44975,-14.68941 -11.421629,-22.59765 -6.2531,-7.09292 -17.46996,-12.08621 -27.26456,-11.05319 z" />
+          </mask>
+        </defs>
+        <g>
+          <image id="background" xlink:href="static/bg-gears.jpg" x="0" y="0" width="75.5" height="68"
+                  mask="url(#mask14163)" style="filter: brightness({{0.5 if 'render_job' in session else 1}}"/>
+          <image id="circle" xlink:href="static/circle.png" x="2" y="0" width="75" height="67" inkscape:label="#image5763" />
+          {% if 'render_job' in session %}
+          <g>
+            <image id="spinner-arrows" xlink:href="static/arrows.png" x="30" y="25" width="73" height="60" transform="scale(0.6,0.6)" style="filter:url(#filter7730)" />
+            <animateTransform id="spinner-ani" begin="0s" dur="4s" type="rotate" from="0 39 34" to="360 39 34" repeatCount="indefinite" fill="freeze" attributeName="transform" />
+          </g>
+          {% endif %}
+        </g>
+      </svg>
+
+      <svg id="arrow" class="down-arrow" viewBox="0 0 15.447801 21.903627">
+        <g transform="translate(-3.0689279e-7,-275.09637)">
+          <g id="g943" transform="matrix(2.8524019,0,0,0.65311746,-198.42817,103.66414)">
+            <path id="path912" transform="translate(1.1263482)"
+                  d="m 70.722524,262.483 c 0,0.15591 0.0013,0.31182 0,0.46772 -0.02654,3.1829 -0.07931,6.36565
+                  -0.08352,9.54865 -0.0041,3.12809 0.04021,6.25606 0.05847,9.3841 0.0012,0.21075 0,0.42151 0,0.63227 h
+                  0.147652 c 0,-0.21076 -0.0012,-0.42152 0,-0.63227 0.01826,-3.12804 0.06261,-6.25601 0.05847,-9.3841
+                  -0.0042,-3.183 -0.05698,-6.36575 -0.08352,-9.54865 -0.0013,-0.1559 0,-0.31181 0,-0.46772 z" />
+            <path transform="translate(-0.66145832)" id="path912-6"
+                  d="m 73.228177,262.483 c 0.04266,3.33901 -0.05208,6.67754 -0.05011,10.01637 0.06288,8.7819
+                  0.05847,5.44305 0.05847,10.01637 h 0.147652 c 0,-4.57332 -0.0044,-1.23447 0.05847,-10.01637
+                  0.002,-3.33883 -0.09278,-6.67736 -0.05011,-10.01637 z">
+          </g>
+          <g id="g947" transform="translate(-64.037969,5.609877)">
+            <path id="path929" d="m 63.97531,279.65709 c 0.11947,0.034 0.24279,0.066 0.360307,0.11973 0.742062,0.33927
+                  1.444348,0.93467 2.127306,1.64644 0.33522,0.34936 0.669079,0.73006 1.005503,1.12823 0.458817,0.54302
+                  0.902565,1.13876 1.318225,1.77085 1.419044,2.15794 2.504261,4.73341 2.701676,6.96813 0.0032,0.0364
+                  0.004,0.0729 0.0057,0.10919 a 0.26814441,0.26814441 90 0 0 0.535722,-0.0246 c -0.0018,-0.0384
+                  -0.0049,-0.0769 -0.006,-0.1156 -0.06938,-2.35647 -0.96499,-5.14142 -2.375538,-7.4793 -0.4134,-0.68518
+                  -0.871472,-1.33234 -1.365631,-1.91677 -0.363144,-0.42948 -0.756424,-0.81414 -1.165765,-1.15025
+                  -0.837893,-0.68799 -1.730798,-1.16385 -2.592914,-1.43288 -0.136782,-0.0427 -0.268315,-0.0955
+                  -0.403075,-0.13391 a 0.26554239,0.26554239 90 0 0 -0.145482,0.51078 z" />
+            <use height="100%" width="100%" transform="matrix(-1,0,0,1,143.52374,0)" id="use931" xlink:href="#path929" y="0" x="0" />
+          </g>
+        </g>
+      </svg>
+
       <div class="render_output">
-        {% if 'render_job' in session %}
+        {% if 'render_job' not in session and not has_renders %}
+          <div class="loading-message">
+            <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+            <div><strong>Nothing uploaded yet</strong></div>
+            <div>Upload your SVG file above</div>
+          </div>
+        {% elif 'render_job' in session %}
         <div class="loading-message">
           <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
           <div><strong>Processing...</strong></div>
@@ -55,7 +122,15 @@
         </div>
         {% endif %}
       </div>
-      {% endif %} {# render job #}
+
+      <div class="footer">
+          <img class="title" alt="Made with love in Berlin" src="static/footer_love.svg">
+
+          <a href="https://github.com/jaseg/pogojig">i can haz sources</a>
+          <a href="https://blog.jaseg.net/imprint">imprint</a>
+
+          <div class="copyright">&#169; 2019 jaseg</div>
+      </div>
     </div>
   </body>
 </html>