Skip to content

Commit 8430ceb

Browse files
ZetaXIIZetaXII
committed
sistemata la headbar (anche per MOBILE), pagina registrazione resa più conforme al progetto e sistemata la pagina di login
1 parent 0c9f57c commit 8430ceb

File tree

10 files changed

+268
-271
lines changed

10 files changed

+268
-271
lines changed

‎header.html

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,54 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Karantina:wght@400&display=swap">
78
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
89
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10+
11+
<!-- Stili nostri -->
912
<link rel="stylesheet" href="styles/general.css">
1013
<link rel="stylesheet" href="styles/header.css">
1114

15+
<!-- Scripts nostri -->
16+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
17+
<script src="scripts/userSession.js"></script>
18+
<script src="scripts/caricaJSON.js"></script>
19+
1220
</head>
21+
1322
<body>
14-
<header class="header d-flex justify-content-between align-items-center">
23+
24+
<!-- INIZIO HEADER PER DESKTOP -->
25+
<header class="header d-none d-md-flex justify-content-between align-items-center mb-5">
1526
<a href="dashboardUtente.html" class="d-flex align-items-center text-decoration-none">
1627
<div class="logo-container d-flex align-items-center">
1728
<img loading="lazy" src="res/imgs/logo/LIFElogo.png" class="logo-image" alt="L.I.F.E. logo" />
18-
<h1 style="color:white;" class="logo-text ms-2 mb-0">L.I.F.E.</h1>
29+
<h1 class="logo-text mb-0">L.I.F.E.</h1>
1930
</div>
2031
</a>
21-
<div class="user-info d-none d-md-block">
22-
<img loading="lazy" src="res/imgs/icons/user.png" class="user-avatar" alt="User avatar" />
32+
<div class="user-info mx-4">
33+
<a href="infoUtente.html"><i class="bi bi-person-circle fs-1 userInfoLogo"></i></a>
2334
</div>
2435
</header>
25-
<div class="user-info-mobile d-flex justify-content-center d-md-none mt-2">
26-
</div>
36+
<!-- FINE HEADER PER DESKTOP -->
37+
38+
<!-- INIZIO HEADER PER MOBILE -->
39+
<header class="headerMobile d-flex d-md-none justify-content-between align-items-center mb-5 mt-5">
40+
<a href="dashboardUtente.html" class="d-flex align-items-center text-decoration-none">
41+
<div class="logo-container d-flex align-items-center pe-4">
42+
<img loading="lazy" src="res/imgs/logo/LIFElogo.png" class="logo-image" alt="L.I.F.E. logo" />
43+
<h1 class="logo-text mb-0">L.I.F.E.</h1>
44+
</div>
45+
</a>
46+
<div class="user-info mx-4">
47+
<a href="infoUtente.html"><i class="bi bi-person-circle userInfoLogo fw-bold"></i></a>
48+
</div>
49+
</header>
50+
<!-- FINE HEADER PER MOBILE -->
2751

28-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
29-
<script src="scripts/userSession.js"></script>
30-
<script src="scripts/caricaJSON.js"></script>
3152
</body>
53+
3254
</html>

‎login.html

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,54 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Login Page</title>
7-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Karantina:wght@400&display=swap">
8-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap">
9-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inder&display=swap">
10-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
11-
12-
<link rel="stylesheet" href="styles/login.css">
13-
<link rel="stylesheet" href="styles/general.css">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>L.I.F.E | Area Login</title>
8+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
149

15-
<!-- import scripts -->
16-
<script src="scripts/importHeaderNavbar.js"></script>
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Karantina:wght@400&display=swap">
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap">
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inder&display=swap">
13+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
14+
<link rel="stylesheet" href="styles/loginRegistrazione.css">
15+
<link rel="stylesheet" href="styles/general.css">
1716

1817
</head>
18+
1919
<body>
20-
<!-- Importa l'header -->
21-
<div id="header-placeholder"></div>
2220

23-
<div class="container mt-5">
24-
<div class="row justify-content-center">
25-
<div class="col-md-6 text-center login-container">
26-
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/03628d78fc5e72fedd9c8471f1d3039ecff6cb30d5b6b9e5b951f05a07078103?apiKey=40a13daf02674cdaa0209479a7976f2a&" alt="Main Logo" class="logo mb-4">
27-
<p class="mb-4">
28-
<a href="#" class="login-text">LOGIN</a> / REGISTRATI
29-
</p>
30-
<div class="container">
31-
<div class="row justify-content-center">
32-
<div class="col-md-6">
33-
<form>
34-
<div class="mb-3">
35-
<label for="emailInput" class="visually-hidden">Email</label>
36-
<input type="email" class="form-control email-input" id="emailInput" placeholder="Email" aria-label="Email">
37-
</div>
38-
<div class="mb-3">
39-
<label for="passInput" class="visually-hidden">Password</label>
40-
<input type="password" class="form-control pass-input" id="passInput" placeholder="Password" aria-label="Password">
41-
</div>
42-
</form>
43-
</div>
44-
</div>
45-
<p class="forgot-password">Password Dimenticata?</p>
46-
<div class="row justify-content-center">
47-
<div class="col-auto">
48-
<button class="login-button btn btn-primary" tabindex="0">LOGIN</button>
49-
</div>
21+
<div class="container mt-5">
22+
<div class="row justify-content-center">
23+
<div class="col-md-6 text-center login-container">
24+
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/03628d78fc5e72fedd9c8471f1d3039ecff6cb30d5b6b9e5b951f05a07078103?apiKey=40a13daf02674cdaa0209479a7976f2a&"
25+
alt="Main Logo" class="logo mb-3">
26+
<p class="mb-4">
27+
<a href="login.html" class="login-text fs-3">LOGIN</a> / <a href="registrazione.html"
28+
class="registrazione-text fs-5">REGISTRATI</a>
29+
</p>
30+
<div class="container">
31+
<form>
32+
<div class="mb-3">
33+
<label for="emailInput" class="visually-hidden">Email</label>
34+
<input type="email" class="form-control formInput" id="emailInput" placeholder="Email"
35+
aria-label="Email">
36+
</div>
37+
<div class="mb-3">
38+
<label for="passInput" class="visually-hidden">Password</label>
39+
<input type="password" class="form-control formInput" id="pwdInput" placeholder="Password"
40+
aria-label="Password">
41+
</div>
42+
<div class="text-center">
43+
<button class="bottonePersonalizzato px-4 py-1 mb-1 text-center fw-bold fs-4 mt-3"
44+
tabindex="0">Accedi</button>
45+
</div>
46+
</form>
47+
<p class="forgot-password mt-4 text-center">Password Dimenticata?</p>
5048
</div>
5149
</div>
5250
</div>
5351
</div>
54-
</div>
55-
56-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
5752
</body>
58-
</html>
53+
54+
</html>

‎registrazione.html

Lines changed: 80 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,90 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Registrazione</title>
7-
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8-
<!-- Stili applicati -->
9-
<link href="styles/general.css" rel="stylesheet">
10-
<link href="styles/login_test.css" rel="stylesheet">
11-
<style>
12-
@import url('https://fonts.googleapis.com/css2?family=Karantina:wght@400&family=Inter:wght@400&family=Inder&display=swap');
13-
</style>
14-
<script>
15-
// Configurazione tailwind.config.js per colori e font
16-
tailwind.config = {
17-
darkMode: 'class',
18-
theme: {
19-
extend: {
20-
colors: {
21-
primary: {
22-
"50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd",
23-
"400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8",
24-
"800": "#1e40af", "900": "#1e3a8a", "950": "#172554"
25-
}
26-
},
27-
fontFamily: {
28-
'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif'],
29-
'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif']
30-
}
31-
}
32-
}
33-
}
34-
</script>
7+
<title>L.I.F.E | Area Registrazione</title>
8+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
9+
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Karantina:wght@400&display=swap">
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap">
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inder&display=swap">
13+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
14+
<link rel="stylesheet" href="styles/loginRegistrazione.css">
15+
<link rel="stylesheet" href="styles/general.css">
16+
3517
</head>
36-
<body class="bg-gray-50 dark:bg-gray-900">
3718

38-
<section class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
39-
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
40-
<img class="w-20 h-20 mr-2" src="https://cdn.builder.io/api/v1/image/assets/TEMP/03628d78fc5e72fedd9c8471f1d3039ecff6cb30d5b6b9e5b951f05a07078103?apiKey=40a13daf02674cdaa0209479a7976f2a&" alt="Main Logo">
41-
<span class="logo-text">L.I.F.E.</span>
42-
</a>
43-
<div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
44-
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
45-
<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
46-
Registrati
47-
</h1>
48-
<form class="space-y-4 md:space-y-6" action="#">
49-
<div>
50-
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nome</label>
51-
<input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Nome completo" required="">
52-
</div>
53-
<div>
54-
<label for="surname" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Cognome</label>
55-
<input type="text" name="surname" id="surname" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Cognome" required="">
56-
</div>
57-
<div>
58-
<label for="age" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Età</label>
59-
<input type="number" name="age" id="age" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Età" required="">
60-
</div>
61-
<div>
62-
<label for="weight" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Peso</label>
63-
<input type="number" name="weight" id="weight" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Peso in kg" required="">
64-
</div>
65-
<div>
66-
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">La tua email</label>
67-
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
68-
</div>
69-
<div>
70-
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
71-
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
72-
</div>
73-
<div>
74-
<label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Conferma Password</label>
75-
<input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
76-
</div>
77-
<div class="flex items-center justify-between">
78-
<div class="flex items-start">
79-
<div class="flex items-center h-5">
80-
<input id="terms" aria-describedby="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
19+
<body>
20+
21+
<div class="container mt-5">
22+
<div class="row justify-content-center">
23+
<div class="col-md-6 text-center login-container">
24+
<img
25+
src="https://cdn.builder.io/api/v1/image/assets/TEMP/03628d78fc5e72fedd9c8471f1d3039ecff6cb30d5b6b9e5b951f05a07078103?apiKey=40a13daf02674cdaa0209479a7976f2a&"
26+
alt="Main Logo" class="logo mb-4">
27+
<p class="mb-4">
28+
<a href="login.html" class="registrazione-text fs-5">LOGIN</a> / <a href="registrazione.html"
29+
class="login-text fs-3">REGISTRATI</a>
30+
</p>
31+
<div class="container">
32+
<form>
33+
<div class="mb-3">
34+
<label for="nomeInput" class="visually-hidden">Nome</label>
35+
<input type="text" class="form-control formInput" id="nomeInput" placeholder="Nome" aria-label="Nome">
36+
</div>
37+
<div class="mb-3">
38+
<label for="cognomeInput" class="visually-hidden">Cognome</label>
39+
<input type="text" class="form-control formInput" id="cognomeInput" placeholder="Cognome"
40+
aria-label="Cognome">
41+
</div>
42+
<div class="mb-3">
43+
<label for="etaInput" class="visually-hidden">Età</label>
44+
<input type="number" class="form-control formInput" id="etaInput" placeholder="Età" aria-label="Età">
45+
</div>
46+
<div class="mb-3">
47+
<label for="sessoInput" class="visually-hidden">Sesso</label>
48+
<select class="form-control formInput" id="sessoInput" aria-label="Sesso">
49+
<option value="" disabled selected>Seleziona il sesso</option>
50+
<option value="maschio">Maschio</option>
51+
<option value="femmina">Femmina</option>
52+
<option value="altro">Altro</option>
53+
</select>
54+
</div>
55+
<div class="mb-3">
56+
<label for="altezzaInput" class="visually-hidden">Altezza</label>
57+
<input type="number" class="form-control formInput" id="altezzaInput" placeholder="Altezza (cm)"
58+
aria-label="Altezza">
8159
</div>
82-
<div class="ml-3 text-sm">
83-
<label for="terms" class="text-gray-500 dark:text-gray-300">Accetto i Termini e Condizioni<a href="#" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Termini e Condizioni</a></label>
60+
<div class="mb-3">
61+
<label for="pesoInput" class="visually-hidden">Peso</label>
62+
<input type="number" class="form-control formInput" id="pesoInput" placeholder="Peso (kg)"
63+
aria-label="Peso">
8464
</div>
85-
</div>
65+
<div class="mb-3">
66+
<label for="emailInput" class="visually-hidden">Email</label>
67+
<input type="email" class="form-control formInput" id="emailInput" placeholder="Email" aria-label="Email">
68+
</div>
69+
<div class="mb-3">
70+
<label for="pwdInput" class="visually-hidden">Password</label>
71+
<input type="password" class="form-control formInput" id="pwdInput" placeholder="Password"
72+
aria-label="Password">
73+
</div>
74+
<div class="mb-3">
75+
<label for="confirmPwdInput" class="visually-hidden">Conferma Password</label>
76+
<input type="password" class="form-control formInput" id="confirmPwdInput" placeholder="Conferma Password"
77+
aria-label="Conferma Password">
78+
</div>
79+
<div class="text-center mb-3">
80+
<button class="bottonePersonalizzato px-4 py-1 mb-1 text-center fw-bold fs-4 mt-3"
81+
tabindex="0">Registrati</button>
82+
</div>
83+
</form>
8684
</div>
87-
<button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Registrati</button>
88-
<div class="flex items-center justify-between">
89-
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
90-
Hai già un account? Accedi
91-
</p>
92-
93-
94-
85+
</div>
86+
</div>
87+
</div>
88+
</body>
89+
90+
</html>

0 commit comments

Comments
 (0)