From cdb5d2ef07eec00f116a0c94a9f6f6ba943c28e4 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Thu, 2 Jun 2022 20:00:38 +0200
Subject: [PATCH] Scheletro per la pagina sulla storia del PHC

---
 main.go           |  7 +++--
 public/style.css  | 71 +++++++++++++++++++++++++++++++++++++++++++++++
 views/storia.html | 40 ++++++++++++++++++++++++++
 3 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 views/storia.html

diff --git a/main.go b/main.go
index f19c414..e6faeed 100644
--- a/main.go
+++ b/main.go
@@ -39,9 +39,10 @@ func main() {
 	// Routes
 
 	actuallyStaticRoutes := map[string]string{
-		"/":      "home.html",
-		"/link":  "link.html",
-		"/login": "login.html",
+		"/":       "home.html",
+		"/link":   "link.html",
+		"/login":  "login.html",
+		"/storia": "storia.html",
 	}
 
 	for route, view := range actuallyStaticRoutes {
diff --git a/public/style.css b/public/style.css
index 5eb942d..2ec9004 100644
--- a/public/style.css
+++ b/public/style.css
@@ -732,6 +732,77 @@ form .field-set input {
     animation: rotate 1s linear infinite;
 }
 
+.page-storia .history-container {
+    --bar-size: 6px;
+
+    display: flex;
+    flex-direction: row;
+
+    margin: 5rem 0;
+
+    position: relative;
+}
+
+.page-storia .history-container .timeline-bar {
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: -2rem;
+    width: var(--bar-size);
+
+    background: var(--bg-darker-4);
+}
+
+.page-storia .history-container .timeline-bar::before {
+    content: '';
+    position: absolute;
+
+    top: -3rem;
+    bottom: -3rem;
+    left: 0;
+    border-left: var(--bar-size) dashed var(--bg-darker-4);
+}
+
+.page-storia .history-container .events {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.page-storia .history-container .events .event::before {
+    --size: 1rem;
+
+    content: '';
+    position: absolute;
+    left: calc(-2rem + var(--bar-size) / 2 - var(--size) / 2);
+    transform: translate(0, 1rem);
+
+    width: var(--size);
+    height: var(--size);
+
+    border-radius: 100%;
+
+    background: var(--bg-darker-4);
+}
+
+.page-storia .history-container .events .event .title {
+    font-size: 22px;
+
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.page-storia .history-container .events .event .date {
+    color: var(--card-date);
+    font-size: 18px;
+}
+
+.page-storia .history-container .events .spacer {
+    height: 4rem;
+}
+
 @keyframes rotate {
     0% {
         transform: rotate(0deg);
diff --git a/views/storia.html b/views/storia.html
new file mode 100644
index 0000000..ed4832e
--- /dev/null
+++ b/views/storia.html
@@ -0,0 +1,40 @@
+{{template "base" .}}
+{{define "title"}}Utenti &bull; PHC{{end}}
+{{define "body"}}
+<section>
+    <h1>
+        <i class="fas fa-clock"></i>
+        Storia del PHC
+    </h1>
+    <p>
+        In questa pagina è raccontata la storia del PHC con alcuni degli eventi principali. Al momento è <i>work in progress</i> ma pianifichiamo di aggiungere almeno le date di ingresso di tutti i macchinisti.
+    </p>
+    <div class="history-container">
+        <div class="timeline-bar"></div>
+        <div class="events">
+            <div class="event">
+                <div class="title">Nuovo sito del PHC</div>
+                <div class="date">2022/??</div>
+            </div>
+            <div class="event">
+                <div class="title">Ingresso di <a href="#">Francesco Manicastri</a></div>
+                <div class="date">2022/05</div>
+            </div>
+            <div class="event">
+                <div class="title">Ingresso di <a href="#">Francesco Minnocci</a></div>
+                <div class="date">2022/02</div>
+            </div>
+            <div class="spacer"></div>
+            <div class="event">
+                <div class="title">Ingresso di <a href="#">Antonio De Lucreziis</a></div>
+                <div class="date">20??/??</div>
+            </div>
+            <div class="spacer"></div>
+            <div class="event">
+                <div class="title">Apertura del PHC</div>
+                <div class="date">1998/??/??</div>
+            </div>
+        </div>
+    </div>
+</section>
+{{end}}
\ No newline at end of file