fix issues

frontend-park-mail-ru · Oct 7, 2024 · b024550 · b024550
1 parent efaa865
commit b024550
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 37 deletions.
diff --git a/public/images/icons/logo.svg b/public/images/icons/logo.svg
diff --git a/public/images/icons/logoLight.svg b/public/images/icons/logoLight.svg
diff --git a/public/index.html b/public/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>NovaMusic</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="index.css">
+    <link rel="icon" href="images/icons/logo.svg"
 </head>
 <body>
     <header id="header" class="header"></header>

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -7,21 +7,27 @@
   width: 100%;
   position: sticky;
   top: 0;
-  background-color: black;
+  background-color: #1f1f1f;
 }
 
 .header__row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 224px 14px 192px;
+  padding: 0px 224px 0px 192px;
+}
+
+.header__img_logo {
+  width: auto;
+  height: 41px;
+  vertical-align: text-bottom;
 }
 
 .header__btn_logo {
   color: #f1f1f1;
-  font-size: 25px;
+  font-size: 41px;
   font-weight: 400;
-  background-color: black;
+  background-color: #1f1f1f;
   border: none;
 }
 
@@ -33,9 +39,10 @@
   color: #f1f1f1;
   font-size: 25px;
   font-weight: 400;
-  background-color: black;
+  background-color: #1f1f1f;
   border: none;
   margin-left: 45px;
+  padding: 16px 16px;
 }
 
 .header__btn_signup:hover {
@@ -46,10 +53,15 @@
   color: #f1f1f1;
   font-size: 25px;
   font-weight: 400;
-  background-color: black;
+  background-color: #1f1f1f;
   border: none;
+  padding: 16px 16px;
 }
 
 .header__btn_login:hover {
   opacity: 0.5;
 }
+
+.active {
+  border-bottom: 3px solid #f1f1f1;
+}
diff --git a/src/components/header/header.hbs b/src/components/header/header.hbs
@@ -1,6 +1,7 @@
 <div class="header__container">
   <div class="header__row">
     <div class="header__left-block">
+      <img class="header__img_logo" src="/images/icons/logoLight.svg">
       <button class="header__btn_logo" id="header_logo_button">NovaMusic</button>
     </div>
     <div class="header__right-block" id="header_login_menu">

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -88,6 +88,8 @@ export class HeaderView extends View {
   loginHandler(event) {
     event.preventDefault();
     this.router.goTo("/login");
+    document.getElementById("header_login_button").classList.add("active");
+    document.getElementById("header_signup_button").classList.remove("active");
   }
 
   /**
@@ -98,6 +100,8 @@ export class HeaderView extends View {
   signupHandler(event) {
     event.preventDefault();
     this.router.goTo("/signup");
+    document.getElementById("header_signup_button").classList.add("active");
+    document.getElementById("header_login_button").classList.remove("active");
   }
 
   /**

diff --git a/src/index.css b/src/index.css
@@ -48,10 +48,11 @@ body {
   margin: 0;
   padding: 0;
   background: linear-gradient(
-    90deg,
+    180deg,
     rgba(168, 72, 10, 1) 0%,
     rgba(44, 25, 17, 1) 100%
   );
+  background-attachment: fixed;
 }
 
 .message-success {

diff --git a/src/pages/login/login.css b/src/pages/login/login.css
@@ -17,25 +17,25 @@
 }
 
 .login__title {
-	padding-top: 41px;
+	padding-top: 10px;
 	color: #f1f1f1;
-	font-size: 25px;
+	font-size: 41px;
 	font-weight: 400;
 	text-align: center;
 }
 
 .login__subtitle {
-	margin-top: 5px;
+	margin-bottom: 10px;
 	color: #f1f1f1;
-	font-size: 16px;
+	font-size: 25px;
 	font-weight: 400;
 	text-align: center;
 }
 
 .login__info {
 	margin-bottom: 35px;
 	color: #f1f1f1;
-	font-size: 10px;
+	font-size: 16px;
 	font-weight: 400;
 	text-align: center;
 }
@@ -92,23 +92,38 @@
 }
 
 .login__additional {
-	margin-top: 14px;
+	margin-top: 10px;
+	color: #f1f1f1;
+	font-size: 16px;
+	font-weight: 400;
 	padding: 0 30px 0 30px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
 
-.login__remember {
-	color: #f1f1f1;
-	font-size: 16px;
-	font-weight: 400;
-}
-
 .login__forget_password {
 	display: block;
 	color: #f1f1f1;
 	font-size: 16px;
-	font-weight: 400;
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.login__forget_password:hover {
+	text-decoration: underline;
+}
+
+.login__register_site {
 	text-decoration: none;
-}
+	font-weight: 700;
+}
+
+.login__register_site:visited {
+	color: #f1f1f1;
+}
+
+.login__register_site:hover {
+	text-decoration: underline;
+}
+
diff --git a/src/pages/login/login.hbs b/src/pages/login/login.hbs
@@ -2,7 +2,7 @@
   <div class="login__container">
     <div class="login__intro">
       <h1 class="login__title">NovaMusic</h1>
-      <h2 class="login__subtitle">Добро пожаловать!</h2>
+      <h2 class="login__subtitle">Музыкальный стриминговый сервис</h2>
       <div class="login__info">Переходите к прослушиванию любимой музыки</div>
     </div>
 
@@ -15,9 +15,12 @@
             <input class="login__checkbox" type="checkbox" id="login_remember">
             <label class="login__remember" for="login_remember">Запомнить меня</label> 
           </div>
-          <a class="login__forget_password" href="#">Забыли пароль</a>
+          <a class="login__forget_password" href="#">Забыли пароль?</a>
         </div>
         <button class="login__submit_btn" type="submit">Войти</button>
+        <div class="login__additional">
+          Нет аккаунта? <a class="login__register_site" href="/signup">Регистрация в NovaMusic</a></span>
+        </div>
         <div id="message-box"></div>
       </form>
     </div>

diff --git a/src/pages/signup/signup.css b/src/pages/signup/signup.css
@@ -17,25 +17,25 @@
 }
 
 .register__title {
-  padding-top: 41px;
+  padding-top: 10px;
   color: #f1f1f1;
-  font-size: 25px;
+  font-size: 41px;
   font-weight: 400;
   text-align: center;
 }
 
 .register__subtitle {
-  margin-top: 5px;
+  margin-bottom: 10px;
   color: #f1f1f1;
-  font-size: 16px;
+  font-size: 25px;
   font-weight: 400;
   text-align: center;
 }
 
 .register__info {
   margin-bottom: 35px;
   color: #f1f1f1;
-  font-size: 10px;
+  font-size: 16px;
   font-weight: 400;
   text-align: center;
 }
@@ -79,19 +79,25 @@
 }
 
 .register__additional {
-  margin-left: 77px;
-  margin-top: 13px;
-  color: #f1f1f1;
-  font-size: 16px;
-  font-weight: 400;
+	margin-top: 10px;
+	color: #f1f1f1;
+	font-size: 16px;
+	font-weight: 400;
+	padding: 0 30px 0 30px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .register__enter_account {
-  margin-left: 23px;
   text-decoration: none;
   font-weight: 700;
 }
 
 .register__enter_account:visited {
   color: #f1f1f1;
+}
+
+.register__enter_account:hover {
+  text-decoration: underline;
 }
diff --git a/src/pages/signup/signup.hbs b/src/pages/signup/signup.hbs
@@ -2,8 +2,8 @@
   <div class="register__container">
     <div class="register__intro">
       <h1 class="register__title">NovaMusic</h1>
-      <h2 class="register__subtitle">Музакальный стриминговый</h2>
-      <div class="register__info">Слушайте музыку, создавайте плейлисты с друзьями, узнавайте первыми о новинках</div>
+      <h2 class="register__subtitle">Музакальный стриминговый сервис</h2>
+      <div class="register__info">Слушайте музыку, создавайте плейлисты с друзьями,  <br />узнавайте первыми о новинках</div>
     </div>
     </div>