लोग इन वाला पन्ना

अनुशंसित

19 January 2024

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

14 October 2024

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Connexion Ultime</title>
</head>
<body>
  <div class="background-stars">
    <script>
      for (let i = 0; i < 150; i++) {
        const star = document.createElement('div');
        star.classList.add('star');
        star.style.top = Math.random() * 100 + '%';
        star.style.left = Math.random() * 100 + '%';
        star.style.animationDuration = (Math.random() * 5 + 2) + 's';
        document.body.querySelector('.background-stars').appendChild(star);
      }
    </script>
  </div>

<div class="background-shapes">
    <div id="shapes-container"></div>
    <script>
      const shapes = [
        { type: 'circle', color: 'rgba(255, 0, 150, 0.8)' },
        { type: 'square', color: 'rgba(0, 200, 255, 0.8)' },
        { type: 'triangle', color: 'rgba(0, 255, 150, 0.8)' }
      ];

const shapeElements = [];

for (let i = 0; i < 9; i++) {
        const type = shapes[i % 3].type;
        const el = document.createElement('div');
        el.classList.add('shape', type);
        el.style.top = Math.random() * 100 + 'vh';
        el.style.left = Math.random() * 100 + 'vw';
        document.getElementById('shapes-container').appendChild(el);

shapeElements.push({
          el,
          dx: Math.random() * 2 + 0.5,
          dy: Math.random() * 2 + 0.5
        });
      }

function animateShapes() {
        shapeElements.forEach(shape => {
          let rect = shape.el.getBoundingClientRect();
          let x = rect.left;
          let y = rect.top;

let newX = x + shape.dx;
          let newY = y + shape.dy;

if (newX <= 0 || newX + rect.width >= window.innerWidth) shape.dx *= -1;
          if (newY <= 0 || newY + rect.height >= window.innerHeight) shape.dy *= -1;

shape.el.style.left = (shape.el.offsetLeft + shape.dx) + 'px';
          shape.el.style.top = (shape.el.offsetTop + shape.dy) + 'px';
        });

requestAnimationFrame(animateShapes);
      }

animateShapes();
    </script>
  </div>

<div class="login-container">
    <h2>Bienvenue</h2>
    <form>
      <div class="form-group">
        <label for="username">Nom d'utilisateur</label>
        <input type="text" id="username" name="username" placeholder="Votre nom d'utilisateur" required />
      </div>
      <div class="form-group">
        <label for="password">Mot de passe</label>
        <input type="password" id="password" name="password" placeholder="Votre mot de passe" required />
      </div>
      <button type="submit">Se connecter</button>
    </form>
    <div class="footer">© 2025 Connexion Futuriste</div>
  </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

body {
      margin: 0;
      font-family: 'Orbitron', sans-serif;
      background: radial-gradient(#0a0a23, #000);
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }

.background-stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -3;
    }

.background-shapes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      pointer-events: none;
    }

.star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: white;
      border-radius: 50%;
      animation: twinkle 4s infinite ease-in-out;
    }

@keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

.shape {
      position: absolute;
      opacity: 0.7;
    }

.circle {
      width: 40px;
      height: 40px;
      background: rgba(255, 0, 150, 0.8);
      border-radius: 50%;
    }

.square {
      width: 40px;
      height: 40px;
      background: rgba(0, 200, 255, 0.8);
    }

.triangle {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 40px solid rgba(0, 255, 150, 0.8);
    }

.login-container {
      background: rgba(15, 15, 30, 0.95);
      padding: 3rem;
      border-radius: 20px;
      box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset;
      width: 100%;
      max-width: 420px;
      animation: pulse 5s infinite;
      z-index: 1;
    }

@keyframes pulse {
      0%, 100% { box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset; }
      50% { box-shadow: 0 0 60px #ff66ff, 0 0 100px #00ffe1 inset; }
    }

.login-container h2 {
      text-align: center;
      margin-bottom: 2rem;
      font-size: 2rem;
      color: #ff66ff;
      text-shadow: 0 0 15px #ff66ff, 0 0 25px #00ffe1;
    }

.form-group {
      margin-bottom: 1.5rem;
    }

.form-group label {
      display: block;
      margin-bottom: 0.5rem;
      color: #00ffe1;
      text-shadow: 0 0 10px #00ffe1;
    }

.form-group input {
      width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 12px;
      background-color: #111;
      color: #fff;
      box-shadow: 0 0 15px #ff00ff inset;
      font-size: 1rem;
    }

.form-group input:focus {
      outline: none;
      box-shadow: 0 0 20px #ff00ff inset, 0 0 10px #00ffe1;
    }

button {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #ff00ff, #00ffe1);
      color: #000;
      border: none;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 0 25px #ff00ff;
      transition: all 0.4s ease;
    }

button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 35px #ff00ff, 0 0 50px #00ffe1;
    }

.footer {
      margin-top: 2rem;
      text-align: center;
      font-size: 0.9rem;
      color: #ccc;
      text-shadow: 0 0 5px #00ffe1;
    }

लोग इन वाला पन्ना

अनुशंसित

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

साइन अप फॉर्म

एनिमेटेड HTML इनपुट

HTML

CSS

JS

अनुशंसित

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

साइन अप फॉर्म

एनिमेटेड HTML इनपुट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS