Login verbessern mit AJAX/PHP?

Ich habe ein Login gebaut. Jenen sollen wir nun ausschließlich mit AJAX verbessern. (Wir dürfen dabei nicht sowas wie JQUERY verwenden. Das wissen fehlt uns aber dafür an meisten. Vielleicht kann jemand mir dabei helfen mein Login umzubauen und zu verstehen was ich mache.

Mein Login-Quelltext:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=phptest', 'root', '');

if(isset($_GET['login'])) {
  $email = $_POST['Email'];
  $passwort = $_POST['Passwort'];

  $statement = $pdo->prepare("SELECT * FROM login WHERE Email = :Email");
  $result = $statement->execute(array('Email' => $email));
  $user = $statement->fetch();

  //Überprüfung des Passworts
  if ($user !== false && password_verify($passwort, $user['Passwort'])) {
    $_SESSION['userid'] = $user['ID'];
    die('Login erfolgreich. Weiter zu <a href="index.php?site=Startseite">internen Bereich</a>');
  } else {
    $errorMessage = "E-Mail oder Passwort war ungültig<br>";
  }

}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>

<?php
if(isset($errorMessage)) {
  echo $errorMessage;
}
?>

<form action="Loginseite.php?login=1" method="post">
  E-Mail:<br>
  <input type="email" size="40" maxlength="250" name="Email" required><br><br>

  Dein Passwort:<br>
  <input type="password" size="40" maxlength="250" name="Passwort" required><br>

  <input type="submit" value="Login">
</form>
</body>
</html>
Computer, HTML, programmieren, JavaScript, AJAX, PHP, Webdesign
CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht:

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so:

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

PC, Computer, HTML, CSS, Webentwicklung, Keyframes
HTML Buttons alignment?

Moin, hier eine kleine Seite die Nur 3 Knöpfe ausgibt. Habe jetzt leider das Problem, dass die Knöpfe nicht auf gleicher höhe sind, trotz des "vertical-align:top" bin noch sehr neu in html, hoffe ihr könnt helfen. LG

Nachtrag: Habe es mit Padding gelöst, vielleicht geht es trotzdem besser anders?

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <body>
        <style>
          .subscribe-button
          {
            background-color: rgb(204, 0, 0);
            color:white;
            border:none;
            border-radius:2px;
            cursor:pointer;
            margin-right:12px;
            transition:opacity 0.2s;
            padding-top:10px;
            padding-bottom:10px;
            padding-left:16px;
            padding-right:16px;
            vertical-align:top;
          }
          .subscribe-button:hover
          {
            opacity: 0.7;
          }
          .subscribe-button:active
          {
            opacity: 0.4;
          }
          .join-button:hover
          {
            background-color:
            rgb(37, 25, 207);
            color: white;
          }
          .join-button:active
          {
            opacity:0.7;
          }
          .join-button
          {
            background-color:white;
            color:rgb(37, 25, 207);
            border-color:rgb(37, 25, 207);
            border-style:solid;
            border-width:1px;
            border-radius:2px;
            cursor:pointer;
            margin-right:8px;
            transition:background-color 0.2s, color 0.2s, opacity 0.2s;
            padding-left:5px;
            padding-right:5px;
            padding-top:4px;
            padding-bottom:4px;
            vertical-align:top;
          }
          .tweet-button
          {
            color:white;
            background-color:rgb(67, 145, 235);
            height:36px;
            width:75px;
            border:none;
            border-radius:20px;
            font-weight:bold;
            font-size:15px;
            cursor:pointer;
            transition:box-shadow 0.15s;
            transition:opacity 0.2s;
            vertical-align:top;
          }
          .tweet-button:hover
          {
            box-shadow: 0px 5px 5px rgba(0,0,0,0.15);
          }
          .tweet-button:active
          {
            opacity:0.6;
          }
        </style>
        <button class="subscribe-button">
          SUBSCRIBE
        </button>
        <button class="join-button">
          JOIN my channel
        </button>
        <button class="tweet-button">
          Tweet
        </button>
        <btton
      </body>
  </head>
</html>
HTML, programmieren, HTML5
HTML CSS Problem, Kann wer helfen?

Ich habe vor ein Spiel auf HTML responsiv zu machen. Ich würde es gerne so machen, dass der Button oben links neben dem Canvas angezeigt wird, doch erscheint der unten am Rand. Ich weiß nicht wie ich es ändern kann. Bei der Console habe ich geguckt und das Canvas (width: 320px) nimmt den ganzen Bereich im Feld ein (Im Bild der blaue Bereich). Kann mir wer von euch helfen? Danke im voraus.

Kann mir auch jmd sagen, ob es extra ein deutsches Forum gibt, wo ich fragen wie diese stellen kann?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris</title>
    <link rel="icon" href="css/img/galaxsite/galaxsiteIcon.png">
    <style>
        .gameField {
            max-width: 50%;
            margin: 25px auto;
            background-color: #151618;
            box-shadow: 20px 20px 15px black;
            padding-top: 2%;
            padding-bottom: 2%;
            padding-left: 2.5%;
            padding-right: auto;
        }

        canvas {
            background-color: #000000;
            border: 3px solid #a60cf0;
            width: clamp(50px, 50%, 320px);
        }


        .buttonStart {
            background-color: #a60cf0;
        }
    </style>
</head>
<body>
    <div class="gameField">
        <canvas class="canvas" width="320px"  height="640px    </canvas>
        <button class="buttonStart">Start</button>
    </div>
</body>
<script type="text/javascript" src="js/tetris.js" defer></script>
</html>

Bild zum Beitrag
HTML, CSS
dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}


Bild zum Beitrag
HTML, programmieren, CSS, Code

Meistgelesene Beiträge zum Thema HTML