diff options
| -rw-r--r-- | index.html | 20 | ||||
| -rw-r--r-- | signup/index.html | 60 |
2 files changed, 70 insertions, 10 deletions
@@ -43,15 +43,25 @@ from {opacity: 1;} to {opacity: 0;} } + .middle { + margin: 0 auto; + width: 50%; + justify-content: center; + justify-items: center; + align-content: center; + align-items: center; + } </style> </head> <body> <div id="snackbar">Some text some message..</div> - <h1>ECommerce Login</h1> - Email: <input type="email" id="email" placeholder="email"><br><br> - Password: <input type="password" placeholder="password" id="password"><br><br> - <button id="login">Login</button><br><br> - <a href="signup">Not a user? Signup Now!</a> + <div class="middle"> + <h1>ECommerce Login</h1> + Email: <input type="email" id="email" placeholder="email"><br><br> + Password: <input type="password" placeholder="password" id="password"><br><br> + <button id="login">Login</button><br><br> + <a href="signup">Not a user? Signup Now!</a> + </div> <script src="shared/jquery.js"></script> <script src="https://www.gstatic.com/firebasejs/6.1.0/firebase.js"></script> <script src="shared/firebaseConfig.js"></script> diff --git a/signup/index.html b/signup/index.html index bbce52e..a21b598 100644 --- a/signup/index.html +++ b/signup/index.html @@ -5,13 +5,63 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Firebase ECommerce Solution</title> + <style> + #snackbar { + visibility: hidden; + min-width: 250px; + background-color: rgb(231, 81, 81); + color: #fff; + text-align: center; + border-radius: 2px; + padding: 16px; + position: fixed; + z-index: 1; + top: 30px; + right:30px; + } + #snackbar.show { + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; + } + @-webkit-keyframes fadein { + from {opacity: 0;} + to { opacity: 1;} + } + + @keyframes fadein { + from { opacity: 0;} + to { opacity: 1;} + } + + @-webkit-keyframes fadeout { + from {opacity: 1;} + to {opacity: 0;} + } + + @keyframes fadeout { + from {opacity: 1;} + to {opacity: 0;} + } + .middle { + margin: 0 auto; + width: 50%; + justify-content: center; + justify-items: center; + align-content: center; + align-items: center; + } + </style> </head> <body> - <h1>ECommerce Signup</h1> - Email: <input type="email" id="email" placeholder="email"><br><br> - Password: <input type="password" placeholder="password" id="password"><br><br> - <button id="signup">Signup</button><br><br> - <a href="../">Already a user? Login Now!</a> + <div id="snackbar">Some text some message..</div> + <div class="middle"> + <h1>ECommerce Signup</h1> + Email: <input type="email" id="email" placeholder="email"><br><br> + Password: <input type="password" placeholder="password" id="password"><br><br> + <button id="signup">Signup</button><br><br> + <a href="../">Already a user? Login Now!</a> + </div> <script src="../shared/jquery.js"></script> <script src="https://www.gstatic.com/firebasejs/6.1.0/firebase.js"></script> <script src="../shared/firebaseConfig.js"></script> |