feat: added ui for home and howto pages

assets/css/_variables.scss

@@ -0,0 +1,5 @@
+$theme-colors: (
+  "danger": #f24400,
+);
+
+$link-color: map-get($theme-colors, "danger");

assets/css/app.scss

@@ -1,31 +1,109 @@
-/* This file is for your main application css. */
-@import "./phoenix.css";
-
-/* Alerts and form errors */
-.alert {
-  padding: 15px;
-  margin-bottom: 20px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.alert-info {
-  color: #31708f;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-}
-.alert-warning {
-  color: #8a6d3b;
-  background-color: #fcf8e3;
-  border-color: #faebcc;
-}
-.alert-danger {
-  color: #a94442;
-  background-color: #f2dede;
-  border-color: #ebccd1;
-}
-.alert p {
-  margin-bottom: 0;
-}
-.alert:empty {
-  display: none;
+@import "variables";
+@import "~bootstrap/scss/bootstrap";
+@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@515&family=Fira+Code:wght@515&display=swap");
+
+:root {
+  --openpod-red: #f24400;
+  --openpod-grey: #ccc;
+  --openpod-red-dark: #732100;
+  --border: 2px;
+}
+body,
+html {
+  font-family: "Fira Code", monospace;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Comfortaa", cursive;
+  font-variation-settings: "wght" 700;
+}
+
+.homeBodyHtml {
+  height: unset;
+  overflow: auto;
+}
+
+.wrapper {
+  height: 100%;
+  background: var(--openpod-grey);
+  // border: var(--border) solid var(--openpod-red);
+}
+
+.border-right-red {
+  border-right: none;
+}
+
+#desc {
+  height: 100%;
+}
+
+#desc p {
+  // color: transparent;
+  // background: linear-gradient(90deg, var(--openpod-red), black);
+  // -webkit-background-clip: text;
+  // background-clip: text;
+  text-align: left;
+}
+
+.row-central {
+  height: 100%;
+  flex: unset;
+  min-height: 0;
+}
+
+.row-border-red {
+  border-bottom: var(--border) solid var(--openpod-red);
+}
+
+.emoji {
+  font-size: 2rem;
+}
+
+@media (min-width: 576px) {
+}
+
+@media (min-width: 768px) {
+  .homeBodyHtml {
+    height: 100vh;
+    min-height: 100vh;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .emoji {
+    font-family: "Comfortaa", cursive;
+    font-size: 3rem;
+  }
+
+  .border-right-red {
+    border-right: var(--border) solid var(--openpod-red);
+  }
+
+  #desc {
+    column-count: 2;
+    column-fill: auto;
+    column-gap: 30px;
+  }
+
+  #desc p {
+    text-align: justify;
+    hyphens: auto;
+  }
+}
+
+@media (min-width: 992px) {
+}
+
+@media (min-width: 1200px) {
+}
+
+@media (min-width: 1400px) {
+  #desc {
+    column-count: 3;
+  }
 }

assets/package-lock.json

@@ -1192,7 +1192,6 @@
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
       "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1480,8 +1479,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
       "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "block-stream": {
       "version": "0.0.9",
@@ -1510,6 +1508,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1824,7 +1827,6 @@
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
       "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
       "dev": true,
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
@@ -1841,7 +1843,6 @@
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
           "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
           "dev": true,
-          "optional": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -1851,7 +1852,6 @@
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
           "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -1861,7 +1861,6 @@
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
           "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -1870,15 +1869,13 @@
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
           "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -3845,7 +3842,6 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -5261,8 +5257,7 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pify": {
       "version": "4.0.1",
@@ -6152,7 +6147,6 @@
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
       "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
       "dev": true,
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -6433,6 +6427,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.26.10",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz",
+      "integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-graph": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",

assets/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "phoenix": "file:../deps/phoenix",
-    "phoenix_html": "file:../deps/phoenix_html"
+    "phoenix_html": "file:../deps/phoenix_html",
+    "bootstrap": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -22,6 +23,7 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "terser-webpack-plugin": "^2.3.2",
     "webpack": "4.41.5",
-    "webpack-cli": "^3.3.2"
+    "webpack-cli": "^3.3.2",
+    "sass": "^1.26.9"
   }
 }

assets/static/images/logo.svg

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 608.3 180.9" style="enable-background:new 0 0 608.3 180.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#CCCCCC;}
+	.st1{fill:#F24400;}
+	.st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
+	.st3{fill:#D0D0D0;}
+	.st4{fill:url(#SVGID_1_);}
+	.st5{fill:url(#SVGID_2_);}
+	.st6{fill:#732100;}
+	.st7{fill:url(#SVGID_3_);}
+	.st8{fill:url(#SVGID_4_);}
+	.st9{fill:#ADADAD;}
+	.st10{fill:url(#SVGID_5_);}
+	.st11{fill:url(#SVGID_6_);}
+	.st12{fill:#353535;}
+	.st13{fill:#FFFFFF;}
+	.st14{fill:none;}
+	.st15{fill:#212529;}
+	.st16{fill:url(#SVGID_7_);}
+	.st17{fill:url(#SVGID_8_);}
+	.st18{fill:url(#SVGID_9_);}
+	.st19{fill:url(#SVGID_10_);}
+</style>
+<g>
+	<path class="st14" d="M494.7,47.5c-3.5-2.1-7.6-3.2-12.2-3.2c-4.6,0-8.7,1.1-12.2,3.2c-3.5,2.1-6.3,5.1-8.3,8.8
+		c-2,3.8-3,8.1-3,12.9c0,4.9,1,9.1,3,12.8c2,3.7,4.8,6.6,8.3,8.7c3.5,2.1,7.6,3.2,12.2,3.2c4.6,0,8.6-1.1,12.2-3.2
+		c3.5-2.1,6.3-5,8.3-8.7c2-3.7,3-8,3-12.8c0-4.9-1-9.2-3-12.9C501,52.6,498.3,49.7,494.7,47.5z"/>
+	<path class="st14" d="M229.4,45.9c-3.1-2-6.8-3-11.3-3c-5,0-9.3,1.1-12.9,3.3c-3.6,2.2-6.3,5.2-8.1,9.1c-1.1,2.2-1.8,4.6-2.3,7.1
+		H239c-0.4-2.9-1.2-5.7-2.4-8.1C234.9,50.7,232.5,47.9,229.4,45.9z"/>
+	<path class="st14" d="M48.7,46.5c-3.5-2.1-7.6-3.2-12.2-3.2c-4.6,0-8.7,1.1-12.2,3.2c-3.5,2.1-6.3,5.1-8.3,8.8c-2,3.8-3,8.1-3,12.9
+		c0,4.9,1,9.1,3,12.8c2,3.7,4.8,6.6,8.3,8.7C27.9,92,32,93,36.5,93c4.6,0,8.6-1.1,12.2-3.2c3.5-2.1,6.3-5,8.3-8.7c2-3.7,3-8,3-12.8
+		c0-4.9-1-9.2-3-12.9C55,51.6,52.3,48.7,48.7,46.5z"/>
+	<path class="st14" d="M584,45.6c-3.5-2.2-7.5-3.2-12-3.2c-4.4,0-8.4,1.1-12,3.2c-3.6,2.2-6.4,5.1-8.5,8.8
+		c-2.1,3.7-3.1,7.9-3.1,12.7c0,4.7,1,8.9,3.1,12.7c2.1,3.8,4.9,6.8,8.5,8.9c3.6,2.2,7.6,3.2,12,3.2c4.5,0,8.5-1.1,12-3.2
+		c3.5-2.2,6.3-5.1,8.3-8.9c2-3.8,3-8,3-12.7c0-4.8-1-9-3-12.7C590.3,50.7,587.5,47.8,584,45.6z"/>
+	<path class="st1" d="M55.3,36.2c-5.5-3.1-11.7-4.7-18.8-4.7c-7.1,0-13.5,1.6-18.9,4.7c-5.5,3.1-9.8,7.5-12.9,13
+		C1.6,54.6,0,61,0,68.3c0,7.1,1.6,13.5,4.7,19c3.1,5.5,7.4,9.8,12.9,13c5.5,3.1,11.8,4.7,18.9,4.7c7.1,0,13.5-1.6,18.9-4.7
+		c5.5-3.1,9.8-7.5,12.8-13c3.1-5.5,4.6-11.8,4.6-19c0-7.2-1.6-13.6-4.7-19.1C65.1,43.6,60.8,39.3,55.3,36.2z M57,81.1
+		c-2,3.7-4.7,6.6-8.3,8.7C45.2,92,41.1,93,36.5,93c-4.6,0-8.7-1.1-12.2-3.2c-3.5-2.1-6.3-5-8.3-8.7c-2-3.7-3-8-3-12.8
+		c0-4.9,1-9.2,3-12.9c2-3.8,4.8-6.7,8.3-8.8c3.5-2.1,7.6-3.2,12.2-3.2c4.6,0,8.6,1.1,12.2,3.2c3.5,2.1,6.3,5.1,8.3,8.8
+		c2,3.8,3,8.1,3,12.9C60,73.1,59,77.4,57,81.1z"/>
+	<path class="st1" d="M148.1,59.3c-5.5-3.2-11.7-4.8-18.7-4.8c-6.9,0-13.1,1.6-18.5,4.8c-5.5,3.2-9.8,7.6-13,13.2
+		c-3.2,5.6-4.8,11.8-4.9,18.8v60.4c0,1.9,0.6,3.6,1.9,4.8c1.3,1.3,2.9,1.9,4.8,1.9c2,0,3.7-0.6,4.9-1.9c1.2-1.3,1.9-2.9,1.9-4.8
+		v-35.7c3.1,3.7,6.8,6.6,11.2,8.8c4.4,2.2,9.2,3.2,14.4,3.2c6.4,0,12.2-1.6,17.3-4.8c5.1-3.2,9.2-7.6,12.1-13.1
+		c3-5.5,4.4-11.8,4.4-18.7c0-7-1.6-13.2-4.8-18.8C158,66.9,153.6,62.5,148.1,59.3z"/>
+	<path class="st1" d="M235.9,36c-4.9-3-10.9-4.6-17.7-4.6c-7,0-13.2,1.6-18.5,4.7c-5.4,3.1-9.6,7.5-12.6,13
+		c-3,5.5-4.6,11.9-4.6,19.1c0,7.1,1.6,13.5,4.8,19c3.2,5.5,7.7,9.8,13.4,13c5.7,3.1,12.2,4.7,19.5,4.7c4.1,0,8.3-0.7,12.8-2.2
+		c4.5-1.5,8.2-3.4,11.2-5.8c1.5-1.1,2.2-2.5,2.1-4.1c-0.1-1.6-0.9-3-2.4-4.4c-1.1-1-2.5-1.4-4-1.4c-1.5,0-3,0.6-4.3,1.5
+		c-1.8,1.3-4.1,2.5-7,3.5c-2.9,1-5.7,1.5-8.4,1.5c-5,0-9.5-1.1-13.4-3.3c-3.9-2.2-6.9-5.2-9.1-9c-1.5-2.5-2.4-5.3-2.9-8.3h50.3
+		c1.8,0,3.2-0.6,4.4-1.7c1.1-1.1,1.7-2.5,1.7-4.2c0-7-1.3-13.1-3.9-18.5C244.6,43.3,240.9,39.1,235.9,36z M194.9,62.3
+		c0.5-2.5,1.2-4.9,2.3-7.1c1.9-3.8,4.6-6.9,8.1-9.1c3.6-2.2,7.9-3.3,12.9-3.3c4.4,0,8.2,1,11.3,3c3.1,2,5.5,4.8,7.1,8.3
+		c1.2,2.5,2,5.2,2.4,8.1H194.9z"/>
+	<path class="st1" d="M320.7,35.2c-4.8-2.6-10.3-3.9-16.4-3.9c-5.8,0-11.1,1.3-15.8,3.8c-2.5,1.4-4.8,3.1-6.8,5v-1.4
+		c0-2-0.6-3.7-1.9-4.9c-1.2-1.2-2.9-1.9-4.9-1.9c-1.9,0-3.6,0.6-4.8,1.9c-1.3,1.2-1.9,2.9-1.9,4.9v59c0,1.9,0.6,3.6,1.9,4.8
+		c1.3,1.3,2.9,1.9,4.8,1.9c2,0,3.7-0.6,4.9-1.9c1.2-1.3,1.9-2.9,1.9-4.8V60.4c0-3.3,0.9-6.2,2.6-8.7c1.8-2.5,4.1-4.5,7.2-6
+		c3-1.5,6.4-2.3,10.1-2.3c4.1,0,7.7,0.8,10.8,2.3c3.1,1.5,5.6,3.9,7.5,7.1c1.9,3.2,2.8,7.3,2.8,12.3v32.6c0,1.9,0.6,3.6,1.9,4.8
+		c1.3,1.3,2.9,1.9,4.8,1.9c1.9,0,3.6-0.6,4.8-1.9c1.3-1.3,1.9-2.9,1.9-4.8V65.2c0-7.3-1.4-13.5-4.2-18.5
+		C329.3,41.6,325.5,37.8,320.7,35.2z"/>
+	<path class="st15" d="M411.7,39.3c-5.5-3.2-11.7-4.8-18.7-4.8c-6.9,0-13.1,1.6-18.5,4.8c-5.5,3.2-9.8,7.6-13,13.2
+		s-4.8,11.8-4.9,18.8v60.4c0,1.9,0.6,3.6,1.9,4.8c1.3,1.3,2.9,1.9,4.8,1.9c2,0,3.7-0.6,4.9-1.9c1.2-1.3,1.9-2.9,1.9-4.8V95.9
+		c3.1,3.7,6.8,6.6,11.2,8.8c4.4,2.2,9.2,3.2,14.4,3.2c6.4,0,12.2-1.6,17.3-4.8c5.1-3.2,9.2-7.6,12.1-13.1c3-5.5,4.4-11.8,4.4-18.7
+		c0-7-1.6-13.2-4.8-18.8C421.5,46.9,417.2,42.5,411.7,39.3z"/>
+	<path class="st15" d="M501.4,37.2c-5.5-3.1-11.7-4.7-18.8-4.7c-7.1,0-13.5,1.6-18.9,4.7c-5.5,3.1-9.8,7.5-12.9,13
+		c-3.1,5.5-4.7,11.9-4.7,19.1c0,7.1,1.6,13.5,4.7,19c3.1,5.5,7.4,9.8,12.9,13c5.5,3.1,11.8,4.7,18.9,4.7s13.5-1.6,18.9-4.7
+		c5.5-3.1,9.8-7.5,12.8-13c3.1-5.5,4.6-11.8,4.6-19c0-7.2-1.6-13.6-4.7-19.1C511.1,44.6,506.8,40.3,501.4,37.2z M503,82.1
+		c-2,3.7-4.7,6.6-8.3,8.7c-3.5,2.1-7.6,3.2-12.2,3.2c-4.6,0-8.7-1.1-12.2-3.2c-3.5-2.1-6.3-5-8.3-8.7c-2-3.7-3-8-3-12.8
+		c0-4.9,1-9.2,3-12.9c2-3.8,4.8-6.7,8.3-8.8c3.5-2.1,7.6-3.2,12.2-3.2c4.6,0,8.6,1.1,12.2,3.2c3.5,2.1,6.3,5.1,8.3,8.8
+		c2,3.8,3,8.1,3,12.9C506,74.1,505,78.4,503,82.1z"/>
+	<path class="st15" d="M606.5,1.9c-1.2-1.2-2.9-1.9-4.9-1.9c-1.9,0-3.6,0.6-4.8,1.9c-1.3,1.2-1.9,2.9-1.9,4.9v35.7
+		c-3-3.7-6.7-6.6-11.1-8.8c-4.4-2.2-9.2-3.2-14.4-3.2c-6.4,0-12.2,1.6-17.3,4.8c-5.1,3.2-9.2,7.6-12.1,13.1
+		c-3,5.5-4.4,11.8-4.4,18.7c0,7,1.6,13.2,4.8,18.8c3.2,5.6,7.6,10,13.1,13.2c5.5,3.2,11.7,4.8,18.6,4.8s13.1-1.6,18.5-4.8
+		c5.5-3.2,9.8-7.6,13-13.2c3.2-5.6,4.8-11.8,4.8-18.8V6.8C608.3,4.7,607.7,3.1,606.5,1.9z M592.3,79.8c-2,3.8-4.8,6.8-8.3,8.9
+		c-3.5,2.2-7.5,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.6-2.2-6.4-5.1-8.5-8.9c-2.1-3.8-3.1-8-3.1-12.7c0-4.8,1-9,3.1-12.7
+		c2.1-3.7,4.9-6.6,8.5-8.8c3.6-2.2,7.6-3.2,12-3.2c4.5,0,8.5,1.1,12,3.2c3.5,2.2,6.3,5.1,8.3,8.8c2,3.7,3,7.9,3,12.7
+		C595.4,71.8,594.3,76,592.3,79.8z"/>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="93.3071" y1="164.854" x2="369.3071" y2="164.854">
+		<stop  offset="2.689063e-02" style="stop-color:#F24400"/>
+		<stop  offset="0.9755" style="stop-color:#212529"/>
+	</linearGradient>
+	<path class="st4" d="M93.3,174.4L93.3,174.4c0-3.4,2.7-6.2,6.2-6.5l262.6-19c3.9-0.3,7.2,2.7,7.2,6.5l0,0c0,3.4-2.7,6.2-6.2,6.5
+		l-262.6,19C96.6,181.1,93.3,178.1,93.3,174.4z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="99.5068" y1="142.1286" x2="363.4058" y2="142.1286">
+		<stop  offset="2.689063e-02" style="stop-color:#F24400"/>
+		<stop  offset="0.9755" style="stop-color:#212529"/>
+	</linearGradient>
+	<polygon class="st5" points="99.5,145.9 362.1,125.9 363.4,138.4 99.8,158.4 	"/>
+</g>
+</svg>

lib/openpod_web/controllers/page_controller.ex

@@ -4,4 +4,8 @@ defmodule OpenpodWeb.PageController do
   def index(conn, _params) do
     render(conn, "index.html")
   end
+
+  def howto(conn, _params) do
+    render(conn, "howto.html")
+  end
 end

lib/openpod_web/router.ex

@@ -13,6 +13,13 @@ defmodule OpenpodWeb.Router do
     plug :accepts, ["json"]
   end
 
+  scope "/", OpenpodWeb do
+    pipe_through :browser
+
+    get "/", PageController, :index
+    get "/howto", PageController, :howto
+  end
+
   scope "/podcast", OpenpodWeb do
     pipe_through :browser
 

lib/openpod_web/templates/layout/app.html.eex

@@ -1,33 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Openpod · Phoenix Framework</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title></title>
+    <title>OpenPod</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width" />
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
     <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
-  <body>
-    <header>
-      <section class="container">
-        <nav role="navigation">
-          <ul>
-            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
-            <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
-              <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
-            <% end %>
-          </ul>
-        </nav>
-        <a href="https://phoenixframework.org/" class="phx-logo">
-          <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
-        </a>
-      </section>
-    </header>
-    <main role="main" class="container">
-      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-      <%= @inner_content %>
-    </main>
-  </body>
+  <%= @inner_content %>
 </html>

lib/openpod_web/templates/page/howto.html.eex

@@ -0,0 +1,221 @@
+<body>
+    <div class="wrapper"><div class="container-fluid">
+      <div class="row row-border-red">
+        <div class="col-12 col-md-2 border-right-red py-3 px-4">
+          <div class="d-flex align-item-center h-100">
+            <a href="/">
+              <img src="<%= Routes.static_path(@conn, "/images/logo.svg") %>" width="100%" height="auto" alt="OpenPod" />
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="row row-border-red row-central">
+        <div class="col-12 col-md-2 border-right-red d-flex justify-content-center"></div>
+        <div class="col-12 col-md-8">
+          <h3 class="my-md-3 my-0 py-3 py-md-0">
+            Come caricare correttamente il tuo podcast su archive.org?
+          </h3>
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div class="col-12 col-md-2 border-right-red d-flex justify-content-center">
+          <h4 class="m-0 pt-3">01.</h4>
+        </div>
+        <div class="col-12 col-md-8 pt-3">
+          <p>
+            Esportare la/le traccia/tracce in formato .mp3 dal tuo editor
+            audio preferito (es:
+            <a href="https://www.audacityteam.org/download/">Audacity</a>)
+            aggiungendo i seguenti tag iD3:
+          </p>
+          <ul>
+            <li><i>title</i> -> il titolo dell'episodio</li>
+            <li><i>creator</i> -> l'autore dell'episodio/podcast</li>
+            <li><i>album</i> -> il nome del podcast</li>
+            <li><i>track</i> -> il numero di puntata nome del file</li>
+          </ul>
+          <p>
+            Un consiglio su come nominare i files:
+            titolo_podcast-##-titolo_puntata.mp3 (es:
+            fuori_fase-01-diritto_alla_città.mp3)
+          </p>
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div class="col-md-2 col-12 border-right-red d-flex justify-content-center">
+          <h4 class="m-0 pt-3">02.</h4>
+        </div>
+        <div class="col-md-8 col-12 pt-3">
+          <p>
+            Crea un account su
+            <a href="https://archive.org/account/signup">archive.org</a>, è
+            gratuito e non sfruttano commercialmente i tuoi dati
+            <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/create.png") %>" />
+          </p>
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div class="col-md-2 col-12 border-right-red d-flex justify-content-center">
+          <h4 class="m-0 pt-3">03.</h4>
+        </div>
+        <div class="col-md-8 col-12 pt-3">
+          <p>
+            Crea un nuovo
+            <a href="https://archive.org/create/"><i>item</i></a> e carica una
+            o più tracce audio
+            <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/upload.png") %>" />
+            Una volta terminato l'upload ti verrà chiesto di inserire i
+            metadati che OpenPod interpretà nel sequente modo
+          </p>
+          <ul>
+            <li>Page title -> titolo del podcast</li>
+            <li>
+              Page url -> i link al tuo podcast (quello da dare in pasto ad
+              OpenpPod), possibilemente senza spazi e/o caratteri speciali
+              (accenti, simboli, etc). <b>NON</b> si può modificare in seguito
+            </li>
+            <li>Description -> una descrizione del podcast</li>
+            <li>
+              Subject tags -> delle parole chiave che identificano il
+              contenuto del podcast
+            </li>
+            <li>Creator -> l'autore del podcast</li>
+            <li>Collection -> community audio (default)</li>
+            <li>Language -> la lingua del podcast</li>
+            <li>License -> la licenza del podcast</li>
+          </ul>
+          <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/metadata.png") %>" />
+          <p>
+            Successivamente clicca su <i>Add Additional Meta</i> e aggiungi le
+            seguenti <i>key:value</i>:
+          </p>
+          <ul>
+            <li>op_link -> il sito di riferimento del podcast (opzionale)</li>
+            <li>
+              op_category -> massimo 3 categorie (vedi elenco in fondo alla
+              pagina) separate da punto e virgola
+            </li>
+            <li>
+              op_explicit -> nel caso tu voglia esplicitare che il contenuto
+              del tuo podcast tratta contenuti sensibili inserire
+              <i>yes</i> contrariamente inserire <i>no</i>
+            </li>
+          </ul>
+          <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/additional.png") %>" />
+          <p>
+            A questo punto carica l'immagine di copertina podcast: l'immagine
+            deve essere del formato .jpg o .png. La dimensione consigliata è
+            3000x3000 pixels, minimo 1300x1300 pixels. Per terminare cliccate
+            sul pulsante <i>Upload and create your item</i>
+          </p>
+          <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/final.png") %>" />
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div class="col-12 col-md-2 border-right-red d-flex justify-content-center">
+          <h4 class="m-0 pt-3">04.</h4>
+        </div>
+        <div class="col-12 col-md-8 pt-3">
+          <p class="text-danger">
+            Tutti i passaggi e le informazioni richieste fino ad ora sono
+            obbligatorie, se ci sono delle mancanze il tuo feed RSS potrebbe
+            non risulatare valido per alcune piattaforme di distribuzione
+          </p>
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div class="col-12 col-md-2 border-right-red d-flex justify-content-center">
+          <h4 class="m-0 pt-3">05.</h4>
+        </div>
+        <div class="col-12 col-md-8 pt-3">
+          <p>
+            Per modificare e aggiornare il tuo podcast clicca su edit nella
+            pagina dell'item:
+          </p>
+          <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/edit.png") %>" />
+          <p>
+            se vuoi aggiungere un nuovo episodio al podcast:
+          </p>
+          <ul>
+            <li>cliccare su <i>edit</i> nella pagina dell'<i>item</i></li>
+            <li>cliccare su <i>change the files</i></li>
+            <li>cliccare su <i>add a file</i></li>
+            <li>
+              aggiungere uno o più file e cliccare su
+              <i>add files to existing item</i>
+            </li>
+          </ul>
+          <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/nuovo.png") %>" />
+          <p>
+            se non viene riconusciuta l'immagine come copertina:
+          </p>
+          <ul>
+            <li>cliccare <i>edit</i> nella pagina dell'<i>item</i></li>
+            <li>
+              cliccare su <i>change the information</i> scorrere verso il
+              basso fino ad individuare il file dell'immagine
+            </li>
+            <li>in <i>format</i> selezionare <i>Item image</i>></li>
+            <li>cliccare su <i>submit</i> in fondo alla pagina</li>
+          </ul>
+          <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/cover.png") %>" />
+          <p>
+            se vuoi cambiare le infomazioni precedentemente inserite:
+          </p>
+          <ul>
+            <li>cliccare su <i>edit</i> nella pagina dell'item</li>
+            <li>cliccare su <i>change the information</i></li>
+            <li>
+              fare le modifiche desiderate e cliccare su <i>submit</i> in
+              fondo alla pagina
+            </li>
+          </ul>
+          <img class="img-fluid" src="<%= Routes.static_path(@conn, "/images/correggi.png") %>" />
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div class="col-12 col-md-2 border-right-red d-flex justify-content-center">
+          <h4 class="m-0 pt-3">06.</h4>
+        </div>
+        <div class="col-12 col-md-8 pt-3">
+          <p>
+            Elenco delle categorie. Devono essere solo ed esclusivamente
+            queste elencate. Devono essere mantenute anche le maiuscole.
+          </p>
+          <ul>
+            <li>Arts</li>
+            <li>Business</li>
+            <li>Comedy</li>
+            <li>Education</li>
+            <li>Fiction</li>
+            <li>Government</li>
+            <li>History</li>
+            <li>Health & Fitness</li>
+            <li>Kids & Family</li>
+            <li>Leisure</li>
+            <li>Music</li>
+            <li>News</li>
+            <li>Religion & Spirituality</li>
+            <li>Science</li>
+            <li>Society & Culture</li>
+            <li>Sports</li>
+            <li>Technology</li>
+            <li>True Crime</li>
+            <li>TV & Film</li>
+          </ul>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 d-flex align-items-center">
+          <p class="my-2">
+            Una produzione dalla galassia
+            <a href="https://offtopiclab.org">Off Topica</a> / ospitati dal
+            <a href="https://unit.abbiamoundominio.org/">Collettivo Unit</a> /
+            codice sorgente su
+            <a href="https://git.lattuga.net/offtopic/open-pod">git.lattuga.net/offtopic/open-pod</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>

lib/openpod_web/templates/page/index.html.eex

@@ -1,38 +1,107 @@
-<section class="phx-hero">
-  <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
-  <p>Peace-of-mind from prototype to production</p>
-</section>
+<body class="homeBodyHtml">
+  <div class="wrapper">
+    <div class="container-fluid d-flex flex-column h-100">
+      <div class="row row-border-red">
+        <div class="col-12 col-md-4 border-right-red py-3 px-4">
+          <div class="d-flex align-item-center h-100">
+            <img src="<%= Routes.static_path(@conn, "/images/logo.svg") %>" width="100%" height="auto" alt="OpenPod" />
+          </div>
+        </div>
+      </div>
+      <div class="row row-border-red row-central">
+        <div class="col-12 col-md-4 border-right-red d-flex align-items-center justify-content-center">
+          <span class="emoji">🤓</span>
+        </div>
+        <div class="col-12 col-md-8 h-100 overflow-auto">
+          <div id="desc" class="pt-md-3 pt-0">
+            <p class="m-0 pb-3 pb-md-0" lang="it">
+              <span class="text-danger">OpenPod</span> è il tentativo di
+              restituire al podcasting la dimensione libera e conviviale che
+              lo caratterizza sin dai suoi esordi. Siamo un gruppo di persone
+              che registrano, ascoltano, producono contenuti audio. Ci
+              piacerebbe condividere soluzioni per farlo con hosting gratuito,
+              banda illimitata e software libero, senza far ricorso ad
+              account, profilazione, abbonamenti, pubblicità e
+              monetizzazione.<br />
+              <span class="text-danger">Com'è possibile?</span> Combinando
+              l'hosting di archive.org, alcune buone pratiche per la
+              produzione dei vostri contenuti e un pizzico di codice.<br />
+              <span class="text-danger">Perché?</span> Per liberarci dalla
+              logica prestazione e commerciale che caratterizza il business
+              model dominante, anche nelle nuove forme di fruizione sonora ma
+              specialmente per generare comunità. Un progetto aperto e
+              abilitante, che punta a mettere a fattor comune saperi
+              comunitari.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div
+          class="col-12 col-md-4 border-right-red d-flex align-items-center justify-content-center"
+        >
+          <span class="emoji">🤔</span>
+        </div>
+        <div class="col-12 col-md-8 d-flex align-items-center">
+          <h3 class="my-md-3 my-0 pb-3 pb-md-0 text-center">
+            <a href="/howto">Come caricare correttamente il tuo podcast su archive.org?</a>
+          </h3>
+        </div>
+      </div>
+      <div class="row row-border-red">
+        <div
+          class="col-md-4 col-12 border-right-red d-flex align-items-center justify-content-center"
+        >
+          <span class="emoji">🥳</span>
+        </div>
+        <div class="col-md-8 col-12 py-3">
+          <form>
+            <div class="form-group m-0">
+              <label for="exampleInputEmail1">
+                <span class="text-danger"
+                  >Genera il feed RSS del tuo podcast</span
+                >
+                pronto per la distribuzione su tutti i servizi e app di
+                podcasting! Incolla qui sotto il link al tuo <i>item</i> su
+                <a href="https://archive.org" target="_blank">archive.org</a>
+              </label>
+              <input
+                class="form-control mb-3"
+                id="exampleInputEmail1"
+                placeholder="es: https://archive.org/details/il-mio-podcast"
+              />
 
-<section class="row">
-  <article class="column">
-    <h2>Resources</h2>
-    <ul>
-      <li>
-        <a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
-      </li>
-      <li>
-        <a href="https://github.com/phoenixframework/phoenix">Source</a>
-      </li>
-      <li>
-        <a href="https://github.com/phoenixframework/phoenix/blob/v1.5/CHANGELOG.md">v1.5 Changelog</a>
-      </li>
-    </ul>
-  </article>
-  <article class="column">
-    <h2>Help</h2>
-    <ul>
-      <li>
-        <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
-      </li>
-      <li>
-        <a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
-      </li>
-      <li>
-        <a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
-      </li>
-      <li>
-        <a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
-      </li>
-    </ul>
-  </article>
-</section>
+              <div class="input-group">
+                <div class="input-group-prepend">
+                  <button
+                    class="btn btn-danger btn-rss text-uppercase"
+                    type="button"
+                  >
+                    copia rss
+                  </button>
+                </div>
+                <input
+                  type="text"
+                  class="form-control"
+                  disabled
+                  value="https://openpod.abbiamoundominio.org/podcast/il-mio-podcast"
+                />
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 d-flex align-items-center">
+          <p class="my-2">
+            Una produzione dalla galassia
+            <a href="https://offtopiclab.org">Off Topica</a> / ospitati dal
+            <a href="https://unit.abbiamoundominio.org/">Collettivo Unit</a> /
+            codice sorgente su
+            <a href="https://git.lattuga.net/offtopic/open-pod">git.lattuga.net/offtopic/open-pod</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>