🛠️Login and register

VinStan1 · Dec 20, 2024 · d01138f · d01138f
1 parent 7e3153c
commit d01138f
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 174 deletions.
diff --git a/css/login.css b/css/login.css
@@ -1,19 +1,20 @@
-/* login.css */
-
 /* Login Container */
 .login-container {
     width: 100%;
-    max-width: 400px;
-    margin: 3rem auto;
+    max-width: 600px; /* Limite massimo della larghezza */
+    margin: 1rem auto;
     background-color: var(--background-color);
-    padding: 2.5rem;
+    padding: 1.5rem;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
     transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
+
+    /* Assicura che il background si adatti */
+    box-sizing: border-box;
+    overflow: hidden; /* Nascondi eventuali overflow */
 }
 
 .login-container:hover {
-    transform: translateY(-10px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
 }
 
@@ -24,31 +25,47 @@
     font-size: 2rem;
 }
 
-.form-group {
+/* Flexbox for two fields per row */
+.form-row {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap; /* Gestisce l'overflow */
+    gap: 1rem;
     margin-bottom: 1.5rem;
 }
 
+/* Ogni campo occupa il 50% della riga */
+.form-row .form-group {
+    flex: 1 1 calc(50% - 0.5rem); /* Calcolo per garantire il gap */
+    min-width: 150px; /* Previene campi troppo stretti */
+}
+
 .form-group label {
     margin-bottom: 0.5rem;
     font-weight: 500;
 }
 
-.login-container input {
+.login-container input,
+.login-container select {
     padding: 0.75rem;
     border: 1px solid #cccccc;
     border-radius: 0.25rem;
     font-size: 1rem;
     transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
+
+    /* Assicura che gli input rispettino il contenitore */
+    width: 100%;
+    box-sizing: border-box;
 }
 
-.login-container input:focus {
+/* Focus styles */
+.login-container input:focus,
+.login-container select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 5px rgba(0, 102, 204, 0.2);
     outline: none;
 }
 
+/* Button styling */
 .login-container button {
     width: 100%;
     padding: 0.75rem;
@@ -66,6 +83,7 @@
     background-color: var(--secondary-color);
 }
 
+/* Redirect text styles */
 .redirect-text {
     text-align: center;
     margin-top: 1rem;
@@ -80,4 +98,4 @@
 
 .redirect-text a:hover {
     color: var(--secondary-color);
-}
+}
diff --git a/css/register.css b/css/register.css
@@ -1,19 +1,20 @@
-/* register.css */
-
 /* Register Container */
 .register-container {
     width: 100%;
-    max-width: 400px;
-    margin: 3rem auto;
+    max-width: 600px; /* Limite massimo della larghezza */
+    margin: 1rem auto;
     background-color: var(--background-color);
-    padding: 2.5rem;
+    padding: 1.5rem;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
     transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
+
+    /* Assicura che il background si adatti */
+    box-sizing: border-box;
+    overflow: hidden; /* Nascondi eventuali overflow */
 }
 
 .register-container:hover {
-    transform: translateY(-10px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
 }
 
@@ -24,12 +25,20 @@
     font-size: 2rem;
 }
 
-.form-group {
+/* Flexbox for two fields per row */
+.form-row {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap; /* Gestisce l'overflow */
+    gap: 1rem;
     margin-bottom: 1.5rem;
 }
 
+/* Ogni campo occupa il 50% della riga */
+.form-row .form-group {
+    flex: 1 1 calc(50% - 0.5rem); /* Calcolo per garantire il gap */
+    min-width: 150px; /* Previene campi troppo stretti */
+}
+
 .form-group label {
     margin-bottom: 0.5rem;
     font-weight: 500;
@@ -42,15 +51,21 @@
     border-radius: 0.25rem;
     font-size: 1rem;
     transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
+
+    /* Assicura che gli input rispettino il contenitore */
+    width: 100%;
+    box-sizing: border-box;
 }
 
+/* Focus styles */
 .register-container input:focus,
 .register-container select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 5px rgba(0, 102, 204, 0.2);
     outline: none;
 }
 
+/* Button styling */
 .register-container button {
     width: 100%;
     padding: 0.75rem;
@@ -68,6 +83,7 @@
     background-color: var(--secondary-color);
 }
 
+/* Redirect text styles */
 .redirect-text {
     text-align: center;
     margin-top: 1rem;
@@ -82,4 +98,4 @@
 
 .redirect-text a:hover {
     color: var(--secondary-color);
-}
+}
diff --git a/login.html b/login.html
@@ -1,67 +1,46 @@
 <!DOCTYPE html>
-<html lang="it">
-<head>
-    <meta charset="UTF-8">
-    <title>Nome del Progetto - Login</title>
-    <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/login.css">
-    <link rel="stylesheet" href="css/footer.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Font Awesome for Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-</head>
-<body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>HomeXplore - Login</title>
+    <link rel="stylesheet" href="css/login.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
     <!-- Header -->
-    <header>
-        <div class="container">
-            <div class="logo">
-                <a href="index.html">Nome del Progetto</a>
-            </div>
-            <nav>
-                <input type="checkbox" id="nav-toggle" class="nav-toggle">
-                <label for="nav-toggle" class="nav-toggle-label">
-                    <span></span>
-                </label>
-                <ul>
-                    <li><a href="index.html">Home</a></li>
-                    <li><a href="about.html">Chi Siamo</a></li>
-                    <li><a href="services.html">Servizi</a></li>
-                    <li><a href="contact.html">Contatti</a></li>
-                    <li><a href="register.html">Registrati</a></li>
-                </ul>
-            </nav>
-        </div>
-    </header>
+    <header id="header"></header>
 
     <!-- Main Content -->
     <main>
-        <div class="login-container">
-            <h1>Accedi</h1>
-            <form action="#" method="post">
+      <div class="login-container">
+        <h1>Login</h1>
+        <form action="#" method="post">
+            <div class="form-row">
                 <div class="form-group">
-                    <label for="username"><i class="fas fa-user"></i> Nome Utente</label>
-                    <input type="text" id="username" name="username" placeholder="Inserisci il tuo nome utente" required>
+                    <label for="email"><i class="fas fa-envelope"></i> Email</label>
+                    <input type="email" id="email" name="email" placeholder="Enter your email" required>
                 </div>
+            </div>
+            <div class="form-row">
                 <div class="form-group">
                     <label for="password"><i class="fas fa-lock"></i> Password</label>
-                    <input type="password" id="password" name="password" placeholder="Inserisci la tua password" required>
+                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
                 </div>
-                <button type="submit">Accedi</button>
-            </form>
-            <p class="redirect-text">Non hai un account? <a href="register.html">Registrati qui</a></p>
-        </div>
+            </div>
+            <button type="submit">Login</button>
+        </form>
+
+        <p class="redirect-text">
+          You don't have an account? <a href="register.html">Register here</a>
+        </p>
+      </div>
     </main>
 
     <!-- Footer -->
-    <footer>
-        <div class="container">
-            <p>&copy; 2023 Nome del Progetto. Tutti i diritti riservati.</p>
-            <ul class="footer-links">
-                <li><a href="privacy.html">Privacy Policy</a></li>
-                <li><a href="terms.html">Termini di Servizio</a></li>
-            </ul>
-        </div>
-    </footer>
-</body>
-</html>
+    <footer id="footer"></footer>
+    <script src="components/headLinks.js"></script>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+  </body>
+</html>