offtopic/open-pod
4
0
Fork 0
Code Issues 3 Pull requests Releases Wiki Activity

feat: added ui for home and howto pages

Browse source
This commit is contained in:
danilo silva 2020-07-31 13:16:58 +00:00
parent a1df57dbbe
commit bb079a2f2a
19 changed files with 564 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/_variables.scss Normal file
View file

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

126
assets/css/app.scss
View file

@ -1,31 +1,109 @@
/* This file is for your main application css. */
@import "./phoenix.css";
@import "variables";
@import "~bootstrap/scss/bootstrap";
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@515&family=Fira+Code:wght@515&display=swap");
/* Alerts and form errors */
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
:root {
--openpod-red: #f24400;
--openpod-grey: #ccc;
--openpod-red-dark: #732100;
--border: 2px;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
body,
html {
font-family: "Fira Code", monospace;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Comfortaa", cursive;
font-variation-settings: "wght" 700;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
.homeBodyHtml {
height: unset;
overflow: auto;
}
.alert p {
margin-bottom: 0;
.wrapper {
height: 100%;
background: var(--openpod-grey);
// border: var(--border) solid var(--openpod-red);
}
.alert:empty {
display: none;
.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;
}
}

31
assets/package-lock.json generated
View file

@ -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",

6
assets/package.json
View file

@ -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"
}
}

BIN
assets/static/images/additional.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 854 KiB

BIN
assets/static/images/correggi.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 954 KiB

BIN
assets/static/images/cover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 813 KiB

BIN
assets/static/images/create.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 762 KiB

BIN
assets/static/images/edit.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
assets/static/images/final.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 860 KiB

91
assets/static/images/logo.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
assets/static/images/metadata.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 827 KiB

BIN
assets/static/images/nuovo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 919 KiB

BIN
assets/static/images/upload.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 704 KiB

4
lib/openpod_web/controllers/page_controller.ex
View file

@ -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

7
lib/openpod_web/router.ex
View file

@ -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

33
lib/openpod_web/templates/layout/app.html.eex
View file

@ -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>

221
lib/openpod_web/templates/page/howto.html.eex Normal file
View file

@ -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>

143
lib/openpod_web/templates/page/index.html.eex
View file

@ -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>