שינויים ב-index.html והוספת index.css

[DinaHK2806]

הוספתי בדף הHTML את התכונות והפקודות הרצויות והוספתי דף עיצוב CSS שבו מעוצב כל דף הHTML. בנוסף הוספתי תגית script שמפעילה את כפתור ההתחברות, בודקת האם המייל שהוכנס תקין, אם כן, היא מעבירה את המשתמש לדף הבא שבו הודעת ההתחברות עברה בהצלחה. אם לא, מעלה תגית שיש צורך במייל תקין.

[GilHeller]

Great work. I left you some comments.

[GilHeller]

Avoid repeating font-family.

You're defining font-family: Roboto many times across the stylesheet. Instead, consider setting a global default using:

:root {
  font-family: "Roboto", sans-serif;
  ....
}

[GilHeller]

Consider renaming the class name to something more meaningful.

[GilHeller]

You used the class only once. Consider convert it into id instead.

[GilHeller]

Use CSS variables instead of repeating colors.

:root {
  --neutral-gray: hsl(0, 0%, 70%);
}

....

border-color: var(--neutral-gray);
color: var(--neutral-gray);

[GilHeller]

Move inline JavaScript to a separate file.

Attach it in your HTML using:

<script src="index.js"></script>

[GilHeller]

Declare constants and cache DOM elements outside the function

[GilHeller]

Apply Single Responsibility to your functions

Right now login() handles multiple concerns:
(1) email validation, and (2) resetting input styles/UI state.

Consider extracting those concerns into separate helper functions: isValidEmail() and resetInputState(). Then call them inside login()

function login() {
  resetInputState();

  const email = emailInput.value.trim();

  if (isValidEmail(email)) {
    formBox.style.display = "none";
    successBox.style.display = "block";
  } else {
    emailInput.classList.add("input-error");
    errorText.style.display = "block";
  }
}

[GilHeller]

Avoid setting styles directly in JavaScript.
you can add a class and add/remove it when needed:

emailInput.classList.add("input-error");
emailInput.classList.remove("input-error");

[GilHeller]

Consider to use id instead.