app: render and serve proper web pages

1 files changed, 139 insertions, 0 deletions

diff --git a/static/stylesheets/laundry.css b/static/stylesheets/laundry.css
new file mode 100644
index 0000000..c89964e
--- /dev/null
+++ b/static/stylesheets/laundry.css
@@ -0,0 +1,139 @@
+/* from https://codepen.io/aitchiss/pen/GRpwOGK
+ * by Suzanne Aitchison (https://codepen.io/aitchiss)
+ */
+
+:root {
+  --background-color: #EE5B52;
+  --machine-white:      #F8F8F8;
+  --machine-feature-gray: #A3A1A1;
+  --accent-green: #5FBD9D;
+  --darkest-gray: #636161;
+}
+
+/* Main machine body */
+.machine {
+  position: relative;
+  margin: auto;
+  width: 300px;
+  height: 400px;
+  background: var(--machine-white);
+  border-radius: 2%;
+}
+
+/* Powder drawer */
+.drawer {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 100px;
+  height: 50px;
+  border: 2px solid var(--machine-feature-gray);
+  border-radius: 0 0 20% 0;
+}
+
+/* Drawer handle */
+.drawer::after {
+  content: '';
+  position: absolute;
+  width: 70px;
+  height: 15px;
+  background: var(--machine-feature-gray);
+  bottom: 5px;
+  right: 5px;
+  border-radius: 0 0 30% 0;
+}
+
+/* Small LED display */
+.panel {
+  position: absolute;
+  width: 40px;
+  height: 15px;
+  background: var(--darkest-gray);
+  left: 150px;
+  top: 30px;
+}
+
+/* Light indicator in panel */
+.panel::before {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 10px;
+  background: var(--accent-green);
+  right: 5px;
+  top: 2px;
+}
+
+/* Machine dial */
+.panel::after {
+  content: '';
+  position: absolute;
+  left: 80px;
+  top: -10px;
+  width: 35px;
+  height: 35px;
+  border: 2px solid var(--machine-feature-gray);
+  border-radius: 50%;
+}
+
+/* Center of washer door, width border forming the frame */
+.door {
+  position: absolute;
+  background: var(--machine-white);
+  left: 60px;
+  bottom: 90px;
+  width: 170px;
+  height: 170px;
+  border-radius: 50%;
+  border: 5px solid var(--machine-feature-gray);
+  overflow: hidden;
+}
+
+/* Reflection on door surface */
+.door::after {
+  content: '';
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  width: 160px;
+  height: 160px;
+  background: radial-gradient(transparent 30%, white);
+}
+
+/* Washing machine drum */
+.drum {
+  position: absolute;
+  left: 25px;
+  top: 25px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: var(--darkest-gray);
+  overflow: hidden;
+  animation: drumRotate 2s infinite;
+}
+
+/* Money (instead of clothes) inside machine */
+.drum::before {
+  content: '§';
+  text-align: right;
+  padding-right: 2px;
+
+
+  position: absolute;
+  width: 50px;
+  height: 30px;
+  background: var(--accent-green);
+  bottom: 0;
+}
+
+@keyframes drumRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+