update

Mhyar-nsi · Feb 11, 2024 · 00624c5 · 00624c5
1 parent fced627
commit 00624c5
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 6 deletions.
diff --git a/assets/css/responsive.css b/assets/css/responsive.css
@@ -2,7 +2,9 @@
     body,
     .boost, 
     .guid,
-    .frens {
+    .frens,
+    .earn,
+    .login-page {
         max-width: 450px;
         margin: 0 auto;
         background-color: #191919!important;

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -708,4 +708,106 @@ body {
 }
 .frens-data-count span{
     margin-right: 0.25rem;
+}
+
+
+
+
+
+/* earn styles */
+.earn {
+    overflow-y: scroll!important;
+    background: linear-gradient(0deg, rgba(241,158,54,1) 2%, rgb(0, 0, 0) 45%);
+    background: linear-gradient(0deg, rgba(157,101,30,1) 5%, rgba(0,0,0,1) 45%);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    color: #ffffff;
+    padding-bottom: 4rem;
+}
+
+.earn-more {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+}
+
+.earn-more img {
+    margin-bottom: 1.5rem;
+}
+
+.earn-more h3 {
+    font-size: 1.5rem;
+}
+
+
+
+
+
+
+
+
+
+/* login styles */
+
+.login-page {
+    overflow-y: scroll!important;
+    background: linear-gradient(0deg, rgba(241,158,54,1) 2%, rgb(0, 0, 0) 45%);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    color: #ffffff;
+    padding-bottom: 4rem;
+}
+
+.login-coins,
+.login-page-detail {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login-page-detail  {
+    margin-top: 1rem;
+    font-size: 1rem;
+    color: #c1c1c1;
+}
+.login-coins-count {
+    font-size: 2rem;
+    margin-left: 1rem;
+}
+
+.login-form {
+    margin-top: 3rem;
+    padding: 0 2rem;
+}
+.login-form form {
+    padding: 2rem;
+    border-radius: 15px;
+    background-color: rgba(218, 218, 218, 0.2);
+    border: 2px solid rgba(218, 218, 218, 0.02);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* align-items: center; */
+}
+
+.login-form form label {
+    margin-bottom: 0.25rem;
+}
+.login-form form input {
+    outline: none;
+    background-color: rgba(218, 218, 218, 0.2);
+    border: 2px solid rgba(218, 218, 218, 0.02);
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    color: #ffffff;
+    border-radius: 10px;
+}
+
+.submit-button {
+    border: none;
+    outline: none;
+    margin-top: 0.75rem;
+    background: linear-gradient(83deg, rgba(255,184,95,1) 3%, rgba(241,158,54,1) 28%, rgba(255,142,2,1) 91%);
 }
diff --git a/earn.html b/earn.html
@@ -23,7 +23,7 @@
     </div>
 
     <div class="earn-more">
-        <img src="./assets/images/golden.png" width="60px">
+        <img src="./assets/images/golden.png" width="80px">
         <h3>Earn more coins</h3>
     </div>
 

diff --git a/index.html b/index.html
@@ -28,10 +28,12 @@
             </div>
 
             <div>
-                <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path opacity="0.8" d="M2.00098 11.999L16.001 11.999M16.001 11.999L12.501 8.99902M16.001 11.999L12.501 14.999" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path opacity="0.5" d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.2429 22 18.8286 22 16.0002 22H15.0002C12.1718 22 10.7576 22 9.87889 21.1213C9.11051 20.3529 9.01406 19.175 9.00195 17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
-                </svg>
+                <a href="/login.html">
+                    <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path opacity="0.8" d="M2.00098 11.999L16.001 11.999M16.001 11.999L12.501 8.99902M16.001 11.999L12.501 14.999" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path opacity="0.5" d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.2429 22 18.8286 22 16.0002 22H15.0002C12.1718 22 10.7576 22 9.87889 21.1213C9.11051 20.3529 9.01406 19.175 9.00195 17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                </a>
             </div>
         </div>
     </div>

diff --git a/login.html b/login.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./assets/css/style.css">
+    <link rel="stylesheet" href="./assets/css/responsive.css">
+    <meta name="theme-color" content="#f19e36" />
+
+    <link rel="icon" type="image/x-icon" href="./assets/favicon/favicon.ico">
+</head>
+<body class="login-page">
+
+    <div class="haeder">
+        <a href="/">
+            <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M22 11.9299H2" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M8.00009 19L2.84009 14C2.5677 13.7429 2.35071 13.433 2.20239 13.0891C2.05407 12.7452 1.97754 12.3745 1.97754 12C1.97754 11.6255 2.05407 11.2548 2.20239 10.9109C2.35071 10.567 2.5677 10.2571 2.84009 10L8.00009 5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </a>
+        <!-- <h1>Notcoin</h1> -->
+    </div>
+
+    <div class="login-coins">
+        <img src="./assets/images/coin.png" width="50px">
+        <span class="login-coins-count"></span>
+    </div>
+
+    <div class="login-page-detail">
+        <span>Sign up to save your rank and coins.</span>
+    </div>
+
+    <div class="login-form">
+        <form action="#">
+            <label for="name">name</label>
+            <input type="text" name="name" id="name">
+
+            <label for="email">email</label>
+            <input type="email" name="email" id="email">
+
+            <label for="password">password</label>
+            <input type="password" name="password" id="password">
+
+            <label for="confrim">confirm password</label>
+            <input type="password" name="confirm" id="confirm">    
+
+            <input class="submit-button" type="button" value="submit">
+        </form>
+    </div>
+
+    <script>
+        let coins = localStorage.getItem('coins')
+        document.querySelector('.login-coins-count').textContent = coins;
+    </script>
+
+    <script src="./assets/js/charge.js"></script>
+</body>
+</html>