Fix public/, campi di testo e bottoni

main-old
Antonio De Lucreziis 3 years ago
parent bdff6aadd0
commit 8bbfc57ea8

@ -19,8 +19,8 @@ func main() {
r.Use(middleware.Logger) r.Use(middleware.Logger)
r.Use(middleware.Recoverer) r.Use(middleware.Recoverer)
// Static assets // Static content
r.Handle("/assets/*", http.StripPrefix("/assets", http.FileServer(http.Dir("./assets")))) r.Handle("/public/*", http.StripPrefix("/public", http.FileServer(http.Dir("./public"))))
r.Handle("/blog/*", http.StripPrefix("/blog", http.FileServer(http.Dir("./blog/public")))) r.Handle("/blog/*", http.StripPrefix("/blog", http.FileServer(http.Dir("./blog/public"))))
// Templates & Renderer // Templates & Renderer

@ -1,4 +1,4 @@
/* TODO: Don't use CDN and serve as assets */ /* TODO: Don't use CDN and serve as static files */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
:root { :root {
@ -332,6 +332,8 @@ h1, h2, h3, h4 {
p { p {
margin: 0.5rem 0; margin: 0.5rem 0;
width: 70ch;
max-width: 100%;
} }
/* Controls */ /* Controls */
@ -347,8 +349,101 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Responsiveness */ /* Buttons */
@media screen and (max-width: 950px) { button, .button {
font-family: var(--font-sf);
font-weight: var(--font-weight-medium);
font-size: 17px;
background: #278542;
border: none;
height: 2rem;
padding: 0 1rem;
border-right: 5px solid #ecc333;
position: relative;
z-index: 2;
color: #111;
transition: all 100ms ease-in-out;
box-shadow: 0 0 0 0 transparent;
cursor: pointer;
}
button::before, .button::before {
position: absolute;
content: "";
top: -5px;
bottom: -5px;
background: #278542;
width: 100%;
left: 0;
z-index: -1;
border-radius: 2px;
transition: all 100ms ease-in-out;
-webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
-webkit-mask-position: top left, top right, bottom left, bottom right;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 50% 50%;
mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
mask-position: top left, top right, bottom left, bottom right;
mask-repeat: no-repeat;
mask-size: 50% 50%;
}
button:hover, input[type=submit]:hover, .button:hover {
color: #f22;
box-shadow: 0 4px 13px 0 #00000044;
}
/* Text Fields */
input[type=text], input[type=password] {
border: none;
background: none;
height: 2rem;
padding: 0 0.5rem;
font-size: 17px;
background: #fff;
border-radius: 4px;
border: 1px solid var(--bg-darker-2);
box-shadow: 0 0 8px 0 #00000020;
font-family: var(--font-sf);
font-size: 17px;
font-weight: var(--font-weight-normal);
}
input[type=password] {
font-family: caption;
}
/* Forms */
.field-set {
display: grid;
grid-template-columns: 1fr 2fr;
grid-auto-rows: auto;
gap: 0.5rem;
padding: 1rem;
}
.field-set label {
grid-column: 1 / 2;
}
.field-set input {
grid-column: 2 / 3;
}
.field-set .alone {
grid-column: 1 / 3;
place-self: center;
margin-top: 1rem;
} }

@ -57,8 +57,8 @@
}); });
</script> </script>
<link rel="stylesheet" href="/assets/style.css"> <link rel="stylesheet" href="/public/style.css">
<link rel="stylesheet" href="/assets/theme-dark.css"> <link rel="stylesheet" href="/public/theme-dark.css">
</head> </head>
<body> <body>
@ -66,7 +66,7 @@
<!-- Site --> <!-- Site -->
<div class="nav-logo"> <div class="nav-logo">
<a class="nav-element" href="/"> <a class="nav-element" href="/">
<img src="assets/images/logo-circuit-board.svg" alt="phc-logo"> <img src="/public/images/logo-circuit-board.svg" alt="phc-logo">
</a> </a>
</div> </div>
<div class="nav-main"> <div class="nav-main">

@ -3,31 +3,47 @@
{{define "title"}}PHC &bull; Accedi &bull; phc.dm.xxxxx.xx{{end}} {{define "title"}}PHC &bull; Accedi &bull; phc.dm.xxxxx.xx{{end}}
{{define "body"}} {{define "body"}}
<section>
<h2>Account di Poisson</h2>
<div class="card-list">
<form class="card" action="/login" method="POST">
<div class="title">
<i class="fas fa-sign-in-alt"></i>
Accedi
</div>
<p>
Inserisci le tue credenziali di Poisson per accedere.
</p>
<form action="/login" method="post"> <div class="field-set">
<h2> <label for="login-username">Username:</label>
<i class="fas fa-sign-in-alt"></i> <input type="text" name="username" id="login-username">
Accedi
</h2> <label for="login-password">Password:</label>
<input type="password" name="password" id="login-password">
<button class="alone">Accedi</button>
</div>
</form>
</div>
</section>
<section>
<h2>Ottenere un account</h2>
<p> <p>
Inserisci le tue credenziali di Poisson per accedere. Se vuoi ottenere un account compila* il <a href="#">modulo di richiesta</a> e portacelo in PHC o inviacelo via
email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>.
</p> </p>
<p> <p>
Per il recupero credenziali vieni direttamente al PHC a parlarne con calma con noi altrimenti puoi inviaci una email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>. * In realtà ancora non esiste il modulo
</p> </p>
<div class="row"> </section>
<label for="login-username">Username:</label>
<input type="text" name="username" id="login-username">
</div>
<div class="row">
<label for="login-password">Password:</label>
<input type="password" name="password" id="login-password">
</div>
<div class="row">
<div class="hfill"></div>
<input type="submit" value="Accedi">
<!-- <div class="hfill"></div> -->
</div>
</form>
<section>
<h2>Recupero credenziali</h2>
<p>
Per il recupero credenziali vieni direttamente al PHC a parlarne con calma con noi altrimenti puoi inviaci una
email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>.
</p>
</section>
{{end}} {{end}}

@ -5,19 +5,15 @@
{{define "body"}} {{define "body"}}
<section> <section>
<h2> <h2>
<i class="fas fa-users"></i> Lista degli Utenti
Utenti
</h2> </h2>
<!-- TODO: Codice temporaneo --> <p>
<p style="text-align: center;"> Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente per filtrare la lista in tempo reale. Altrimenti di base in cima compariranno gli utenti con più "follower".
Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente per filtrare la lista in tempo reale.
</p> </p>
<div class="search"> <div class="search">
<input type="text" id="search-field" placeholder="Cerca..."> <input type="text" id="search-field" placeholder="Cerca...">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</div> </div>
<div class="user-list"> <div class="user-list">
<!-- Dummy data --> <!-- Dummy data -->
</div> </div>

Loading…
Cancel
Save