This is an automated email from the ASF dual-hosted git repository. smarru pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/airavata-sandbox.git
commit 4c550149add1057f4c15b28135df2891bdde5b6a Author: Bhavesh Asanabada <asanabhav...@gmail.com> AuthorDate: Thu Jul 14 22:25:25 2022 +0530 created login page --- .../smiles_dashboard/src/assets/molecule_bg1.jpeg | Bin 0 -> 852281 bytes .../smiles_dashboard/src/components/LoginPage.vue | 115 +++++++++++++++++++++ 2 files changed, 115 insertions(+) diff --git a/gsoc2022/smilesdb/smiles_dashboard/src/assets/molecule_bg1.jpeg b/gsoc2022/smilesdb/smiles_dashboard/src/assets/molecule_bg1.jpeg new file mode 100644 index 00000000..b4aecb92 Binary files /dev/null and b/gsoc2022/smilesdb/smiles_dashboard/src/assets/molecule_bg1.jpeg differ diff --git a/gsoc2022/smilesdb/smiles_dashboard/src/components/LoginPage.vue b/gsoc2022/smilesdb/smiles_dashboard/src/components/LoginPage.vue new file mode 100644 index 00000000..e96306c0 --- /dev/null +++ b/gsoc2022/smilesdb/smiles_dashboard/src/components/LoginPage.vue @@ -0,0 +1,115 @@ +<template> + <head> + <title>Login Page</title> + </head> + + <body> + <form> + <h1>SIGN IN</h1> + <label>Username</label> + <input type="text" placeholder="Enter User ID or Email ID"> + <label>Password</label> + <input type="text" placeholder="Enter password"> + <button>Sign in</button> + <a>Forgot Password?</a> + <button>Login with CILogon</button> + </form> + </body> + + +</template> + +<script> +export default { + name: "LoginPage" +} +</script> + +<style scoped> +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + cursor: pointer; +} + +/*@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap);*/ + +body { + height: 100vh; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + /*background: linear-gradient(to right, #2C2C2C, #2c3e50);*/ + background-image: url("../assets/molecule_bg1.jpeg"); +} + +form { + width: 25rem; + height: 28rem; + margin-right: 50rem; + display: flex; + flex-direction: column; + background: rgba(255, 255, 255, 0.04); + box-shadow: 0 8px 32px 0 rgba(52, 52, 52, 0.52); + border-radius: 30px; + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); +} + +h1 { + font-size: 50px; + color: #edf0f1; + text-align: center; + text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3); + letter-spacing: 3px; + margin-top: 20px; + margin-bottom: 5%; + opacity: 0.7; +} + +label { + font-size: 20px; + color: #edf0f1; + display: flex; + text-align: left; + margin-left: 10%; + margin-bottom:1px; + opacity: 0.8; + text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3); +} + +input { + width: 80%; + height: 20px; + font-size: 18px; + margin: 5% auto 8%; + border: none; + outline: none; + background: transparent; + color: white; + border-bottom: 1px solid rgba(255, 255, 255, 0.6); +} + +button { + width: 50%; + margin: 3% auto; + color: white; + font-size: 15px; + opacity: 0.7; + background: rgba(255, 255, 255, 0.06); + padding: 10px 30px; + border: none; + outline: none; + border-radius: 20px; + text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3); + box-shadow: 3px 3px 5px rgba(255, 255, 255, 0.32); + border-left: 2px solid rgba(255, 255, 255, 0.3); + border-right: 2px solid rgba(255, 255, 255, 0.3); + border-top: 2px solid rgba(255, 255, 255, 0.3); +} +</style> \ No newline at end of file