diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/login.css | 41 | ||||
| -rw-r--r-- | public/css/main.css | 126 | ||||
| -rwxr-xr-x | public/fonts/facebook.otf | bin | 0 -> 25740 bytes | |||
| -rw-r--r-- | public/fonts/sfpro.otf | bin | 0 -> 298944 bytes | |||
| -rw-r--r-- | public/js/main.js | 0 | ||||
| -rw-r--r-- | public/login.html | 28 |
6 files changed, 195 insertions, 0 deletions
diff --git a/public/css/login.css b/public/css/login.css new file mode 100644 index 0000000..6a08c8f --- /dev/null +++ b/public/css/login.css @@ -0,0 +1,41 @@ +.login { + background-color: #f0f2f5; + display: flex; + justify-content: center; + align-content: center; + flex-direction: row; + padding: 8em 0em; +} + +.prompt { + display: flex; + flex-direction: column; + background-color: white; + box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); + border-radius: 8px; + width: 396px; +} + +.show { + display: flex; + flex-direction: column; + justify-content: center; +} + +.login-button { + margin-bottom: 10px; + font-size: 20px; + font-weight: 10000; +} + +.newacc { + margin: 10px 70px; + margin-bottom: 20px; +} + +@media (max-aspect-ratio: 2/3) { + .login { + flex-direction: column; + align-items: center; + } +}
\ No newline at end of file diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..c8fb85e --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,126 @@ +body { + background-color: white; + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; +} + +@font-face { + font-family: facebook; + src: url("../fonts/facebook.otf") format("opentype"); +} + +@font-face { + font-family: sfpro; + src: url("../fonts/sfpro.otf") format("opentype"); +} + +.logo { + color: #1778f2; + font-size: 3.5em; + font-family: facebook; +} + +.text { + font-family: sfpro; + font-size: 28px; + font-weight: normal; + line-height: 32px; + width: 500px; +} + +.btext { + font-family: sfpro; + color: #1778f2 +} + +.ctext { + font-family: sfpro; + text-align: center; +} + +a { + text-decoration: none; + cursor: pointer; +} + +p { + padding: 0; + margin: 0; +} + +span { + padding: 0; + margin: 0; +} + +footer { + bottom: 0; + height: 400px; + background-color: white; +} + +input { + all: unset; + font-family: sfpro; + background-color: white; + padding: 10px; + margin: 20px; + margin-bottom: 0; + border-radius: 5px; + border: 1px solid #dddfe2; + color: #1d2129; + font-size: 18px; +} + +input:focus { + border: 1px solid #1778f2; +} + +.primary { + all: unset; + font-family: sfpro; + background-color: #1778f2; + color: white; + padding: 10px; + margin: 20px; + border-radius: 5px; + font-weight: 1000; + text-align: center; + cursor: pointer; +} + +.success { + all: unset; + font-family: sfpro; + background-color: #42b72a; + color: white; + padding: 10px; + margin-bottom: 10px; + margin-left: 10px; + margin-right: 10px; + border-radius: 5px; + text-align: center; + cursor: pointer; +} + +.line { + width: calc(100% - 40px); + margin-left: 20px; + margin-right: 20px; + border-bottom: 1px solid #dadde1; + margin-bottom: 10px; + margin-top: 10px; +} + +footer { + text-align: center; + font-family: sfpro; + padding-top: 30px; + padding-bottom: 30px; + font-size: 13px; + color: #737373; +} diff --git a/public/fonts/facebook.otf b/public/fonts/facebook.otf Binary files differnew file mode 100755 index 0000000..97d5c6f --- /dev/null +++ b/public/fonts/facebook.otf diff --git a/public/fonts/sfpro.otf b/public/fonts/sfpro.otf Binary files differnew file mode 100644 index 0000000..09aaca9 --- /dev/null +++ b/public/fonts/sfpro.otf diff --git a/public/js/main.js b/public/js/main.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/public/js/main.js diff --git a/public/login.html b/public/login.html new file mode 100644 index 0000000..9ce88ac --- /dev/null +++ b/public/login.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <link rel="stylesheet" href="css/main.css"> + <link rel="stylesheet" href="css/login.css"> + <title>XSSBook - Login</title> +</head> +<body> + <div class="login"> + <div class="show"> + <span class="logo">xssbook</span> + <p class="text">Connect with javascript and the world around you on XSSBook.</p> + </div> + <div class="prompt"> + <input type="text" name="email" id="email" placeholder="Email" autofocus="1"> + <input type="password" name="pass" id="pass" placeholder="Password"> + <button class="primary login-button" value="1" name="login" type="submit" id="login">Log In</button> + <a class="btext ctext">Forgot Password?</a> + <div class="line"></div> + <a class="success newacc">Create new account</a> + </div> + </div> + <footer> + Metashit © 2023 | This website does not care about you + </footer> +</body> +</html>
\ No newline at end of file |