extra/logo.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="26cm" height="26cm" viewBox="92 135 503 502" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs/>
+  <g id="Background">
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="152" y="193" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.95" y="193.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.95" y="248.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.9" y="248.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.95" y="193.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.9" y="193.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.9" y="248.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.85" y="248.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.95" y="303.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.9" y="303.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.9" y="358.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.85" y="358.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.9" y="303.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.85" y="303.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.85" y="358.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.8" y="358.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.95" y="193.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.9" y="193.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.9" y="248.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.85" y="248.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.9" y="193.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.85" y="193.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.85" y="248.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.8" y="248.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.9" y="303.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.85" y="303.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.85" y="358.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.8" y="358.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.85" y="303.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.8" y="303.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.8" y="358.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.75" y="358.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.95" y="413.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.9" y="413.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.9" y="468.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.85" y="468.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.9" y="413.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.85" y="413.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.85" y="468.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.8" y="468.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.9" y="523.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.85" y="523.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.85" y="578.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.8" y="578.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.85" y="523.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.8" y="523.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.8" y="578.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.75" y="578.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.9" y="413.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.85" y="413.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.85" y="468.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.8" y="468.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.85" y="413.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.8" y="413.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.8" y="468.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.75" y="468.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.85" y="523.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.8" y="523.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.8" y="578.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.75" y="578.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.8" y="523.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.75" y="523.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.75" y="578.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.7" y="578.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.8" y="138.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.75" y="138.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.75" y="138.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.7" y="138.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.75" y="138.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.7" y="138.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.7" y="138.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.65" y="138.35" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.8" y="193.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.75" y="248.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.75" y="303.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.7" y="358.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.75" y="413.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.7" y="468.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.7" y="523.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.65" y="578.35" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.6" y="138.4" width="55" height="55" rx="0" ry="0"/>
+  </g>
+</svg>

frontend/resources/public/logo.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="26cm" height="26cm" viewBox="92 135 503 502" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs/>
+  <g id="Background">
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="152" y="193" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.95" y="193.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.95" y="248.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.9" y="248.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.95" y="193.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.9" y="193.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.9" y="248.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.85" y="248.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.95" y="303.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.9" y="303.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.9" y="358.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.85" y="358.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.9" y="303.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.85" y="303.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.85" y="358.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.8" y="358.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.95" y="193.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.9" y="193.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.9" y="248.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.85" y="248.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.9" y="193.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.85" y="193.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.85" y="248.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.8" y="248.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.9" y="303.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.85" y="303.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.85" y="358.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.8" y="358.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.85" y="303.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.8" y="303.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.8" y="358.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.75" y="358.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.95" y="413.05" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.9" y="413.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.9" y="468.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.85" y="468.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.9" y="413.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.85" y="413.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.85" y="468.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.8" y="468.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.9" y="523.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.85" y="523.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.85" y="578.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.8" y="578.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.85" y="523.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.8" y="523.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.8" y="578.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.75" y="578.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.9" y="413.1" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.85" y="413.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.85" y="468.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.8" y="468.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.85" y="413.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.8" y="413.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.8" y="468.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.75" y="468.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.85" y="523.15" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.8" y="523.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.8" y="578.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.75" y="578.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #00afff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.8" y="523.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.75" y="523.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.75" y="578.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.7" y="578.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="151.8" y="138.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="206.75" y="138.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="261.75" y="138.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="316.7" y="138.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="371.75" y="138.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="426.7" y="138.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="481.7" y="138.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="536.65" y="138.35" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.8" y="193.2" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.75" y="248.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.75" y="303.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.7" y="358.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.75" y="413.25" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.7" y="468.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.7" y="523.3" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.65" y="578.35" width="55" height="55" rx="0" ry="0"/>
+    <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 6; stroke: #999999" x="95.6" y="138.4" width="55" height="55" rx="0" ry="0"/>
+  </g>
+</svg>

frontend/resources/public/site.css

@@ -1,13 +1,11 @@
 body {
   font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
   max-width: 600px;
-  margin: 0 auto;
-  padding-top: 72px;
+  margin: 0;
   -webkit-font-smoothing: antialiased;
   font-size: 1.125em;
   color: #333;
   line-height: 1.5em;
-  overflow: hidden;
 }
 
 h1, h2, h3 {
@@ -35,9 +33,9 @@ a:hover {
 }
 
 #main-table {
-    position: fixed;
+    /*position: fixed;
     top: 0;
-    left: 0;
+    left: 0;*/
 }
 
 table {
@@ -94,17 +92,34 @@ td input:not(:focus) {
     font-size: xxx-large;
     font-weight: bold;
     text-align: center;
+    border: 1px solid black;
+}
+#main-logo > img {
+    width: 100%;
+    height:100%;
+}
+#left-controls-button, #bottom-controls-button {
+    border: 1px solid black;
+    border-radius: 2px;
+    text-align: center;
+    font-weight: bold;
+    font-size: xx-large;
+    background-color: white;
+    cursor: pointer;
+    user-select: none;
 }
 #left-controls-button {
     left: 0;
-    width: calc(var(--controls-width) + 2 * var(--controls-padding));
+    width: calc(var(--controls-width) + 2 * var(--controls-padding) - 2px);
     height: var(--controls-opener-width);
     z-index: 999;
     bottom: calc(var(--controls-width) + 2 * var(--controls-padding));
+    line-height: 3px;
+    text-align: right;
 }
 #bottom-controls-button {
     bottom: 0;
-    height: calc(var(--controls-width) + 2 * var(--controls-padding));
+    height: calc(var(--controls-width) + 2 * var(--controls-padding) - 2px);
     width: var(--controls-opener-width);
     z-index: 999;
     left: calc(var(--controls-width) + 2 * var(--controls-padding));
@@ -117,6 +132,7 @@ td input:not(:focus) {
     padding: 5px;
     height: calc(100vh - var(--controls-padding));
     width: var(--controls-width);
+    border-right: 1px solid black;
 }
 /*TODO: link left controls with position of the whole table*/
 #controls-left.open {
@@ -131,11 +147,23 @@ td input:not(:focus) {
     padding: var(--controls-padding);
     padding-left: calc(var(--controls-width) + 3 * var(--controls-padding) + var(--controls-opener-width));
     width: calc(100vw - var(--controls-width) - 4 * var(--controls-padding) - var(--controls-opener-width));
+    border-top: 1px solid black;
 }
 #controls-bottom.open {
     bottom: 0;
 }
 
+
+.control-group {
+    float: left;
+    margin: 5px;
+    background-color: lightgreen;
+}
+.control-label {
+    font-size: x-small;
+}
+
+
 .smartborder {
     width: calc(100% + 2px);
     height: calc(100% + 2px);

frontend/src/cljs/microtables_frontend/utils.cljs

@@ -47,19 +47,26 @@
 
 ; the order goes top to bottom, then left to right - that makes the most sense to me
 ; I don't know why a different order would be important, or even in what situation order is important at all
-(def parse-range
+(defn parse-range
+  "Converts a range in \"A1:B2\" notation to a comma-separated list of cells: \"A1,A2,B1,B2\"."
+  [range-string]
+  (let [col1 (second (re-find #"\(\s*([A-Z]+)" range-string))
+        col2 (second (re-find #":\s*([A-Z]+)" range-string))
+        row1 (.parseInt js/window (second (re-find #"([0-9]+)\s*:" range-string)))
+        row2 (.parseInt js/window (second (re-find #"([0-9]+)\s*\)" range-string)))
+        [start-col end-col] (order-two-cols col1 col2)
+        start-row (min row1 row2)
+        end-row (max row1 row2)]
+    (for [col (take-while #(not= (next-letter end-col) %) (iterate next-letter start-col))
+             row (range start-row (inc end-row))]
+         {:col col :row row})))
+
+(def range->commalist
   "Converts a range in \"A1:B2\" notation to a comma-separated list of cells: \"A1,A2,B1,B2\"."
   (memoize (fn [range-string]
-             (let [col1 (second (re-find #"\(\s*([A-Z]+)" range-string))
-                   col2 (second (re-find #":\s*([A-Z]+)" range-string))
-                   row1 (.parseInt js/window (second (re-find #"([0-9]+)\s*:" range-string)))
-                   row2 (.parseInt js/window (second (re-find #"([0-9]+)\s*\)" range-string)))
-                   [start-col end-col] (order-two-cols col1 col2)
-                   start-row (min row1 row2)
-                   end-row (max row1 row2)]
-               (str "(" (clojure.string/join "," (for [col (take-while #(not= (next-letter end-col) %) (iterate next-letter start-col))
-                                                       row (range start-row (inc end-row))]
-                                                  (str col row))) ")")))))
+            (let [cell-list (parse-range range-string)
+                  strings (map #(str (:col %) (:row %)) cell-list)]
+             (str "(" (clojure.string/join "," strings) ")")))))
 
 (def replace-ranges-in-expression
   "Receives an expression string, and replaces all ranges in colon notation (\"A1:B2\") into a comma-separated list of cells (\"A1,A2,B1,B2\")."
@@ -161,7 +168,7 @@
   "Assuming all references have been added, insert all back references."
   [data]
   (loop [data data
-         formulas (walk-get-refs data formula?)]
+         formulas (walk-get-refs data #(formula? (:value %3)))]
     (if (empty? formulas)
       data
       (let [origin (first formulas)
@@ -274,7 +281,7 @@
         cycle-refs (some #(= (:display %) :cycle-error) resolved-refs)
         disqualified? (or invalid-refs dirty-refs error-refs)]
     (cond
-      formula (assoc-in data [c r] datum)           ; if it's not a formula, then return as is (with the dirty flag removed)
+      (not formula) (assoc-in data [c r] datum)     ; if it's not a formula, then return as is (with the dirty flag removed)
       cycle-refs (-> data                           ; if one of its references has a reference cycle, then this one is "poisoned" as well
                      (assoc-in [c r] datum)
                      (assoc-in [c r :display] :cycle-error))

frontend/src/cljs/microtables_frontend/views.cljs

@@ -40,24 +40,39 @@
     ;TODO: figure out appropriate starting values for maxrow and maxcol (maybe keep them intentionally small)
     ;TODO: figure out movement (maybe allow scroll overflow)
     (let [maxrow 50;(utils/highest-row data)
-          maxcol "L";(utils/highest-col data)
+          maxcol "Z";(utils/highest-col data)
           cols (take-while (partial not= (utils/next-letter maxcol)) utils/col-letters)]
       (cons
         (header-row cols)
         (map #(row % cols data) (range 1 (inc maxrow)))))]])
 
+
+(defn extend-range
+  []
+  [:div {:class "control-group"}
+   [:div {:class "control-label"}
+    "Extend Range"]
+   [:button "-cols"]
+   [:input]
+   [:button]])
+
 (defn controls []
   [:div
-   [:button "one"]
+   ;[extend-range]
    ;extend range (number field, then shrink/left/up and expand/right/down buttons on either side)
    ;fill range (single tap, single column/row fill? number field and button?)
    ;move range (designate new "top-left corner" cell for range, figure out overwriting destination cells)
    ;empty range (delete contents, re-evaluate)
    ;delete range (figure out how to move cells over)
    ;copy range (figure out clipboard)
-   [:button "two"]])
+   [:div
+    {:class "control-group"}
+    [:a ;TODO: consider making the "About" info an overlay rather than a link
+     {:href "/about.html"
+      :target "_blank"}
+     "About"]]])
 
-(defn controls-group [state]
+(defn control-panel [state]
   [:div
    {:id "controls"}
    [:div
@@ -70,24 +85,24 @@
      :class (if (= state :bottom) "open" "")}
     [controls]]
    ;←↑→↓
-   [:button
+   [:div
     {:id "left-controls-button"
      :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :left) nil :left)])}
     (if (= state :left) "←" "→")]
-   [:button
+   [:div
     {:id "bottom-controls-button"
      :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :bottom) nil :bottom)])}
     (if (= state :bottom) "↓" "↑")]
    [:div
     {:id "main-logo"
      :title "Microtables"}
-    "M"]])
+    [:img {:src "logo.svg"}]]])
 
 (defn main-panel []
   (let [data (re-frame/subscribe [::subs/table-data])
         controls-state (re-frame/subscribe [::subs/controls-state])]
     [:div
      [sheet @data]
-     [controls-group @controls-state]]))
+     [control-panel @controls-state]]))