added login screen

SnowFlakeOS · Apr 29, 2018 · 993200d · 993200d
1 parent 50931ce
commit 993200d
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 0 deletions.
diff --git a/res/ui_front/css/login.css b/res/ui_front/css/login.css
@@ -0,0 +1,75 @@
+html {
+    min-height: 100vh;
+}
+
+body {
+    height: 100vh;
+    margin: 0;
+
+    align-items: center;
+    justify-content: center;
+
+    background: url(/fakepath/path_to_default_background_image) no-repeat center center, linear-gradient(135deg, #dfaffd 0%,#4e6ffb 100%);
+    background-size: cover;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+}
+
+#container {
+    width: 25vh;
+    height: 35vh;
+
+    justify-content: space-between;
+}
+
+#user-container {
+    height: 28vh;
+    align-items: center;
+    justify-content: space-between;
+
+    cursor: pointer;
+}
+
+#user-pic {
+    width: 20vh;
+    height: 20vh;
+
+    box-shadow: 0 10px 20px 0 rgba(0,0,0,.2);
+    border-radius: 30px;
+
+    background: url("../bg.jpg") no-repeat center center;
+    background-size: cover;
+}
+#user-name {
+    text-align: center;
+    font-size: 4vh;
+    color: white;
+    text-shadow: 1px 2px 4px rgba(0,0,0,.5);
+}
+
+#password {
+    /* visibility: hidden; */
+}
+#password-textbox {
+    box-sizing: border-box;
+    width: 100%;
+
+    outline: none;
+    border: 1px solid #cdcdcd;
+    border-color: rgba(0,0,0,.15);
+    background-color: rgba(0,0,0,.15);
+    font-size: 2vh;
+    color: white;
+}
+
+#password-textbox:focus {
+    background-color: rgba(0,0,0,.3);
+}
diff --git a/res/ui_front/login.html b/res/ui_front/login.html
@@ -0,0 +1,22 @@
+<!-- SnowFlake OS login screen ui -->
+<!DOCTYPE html>
+<html>
+	<head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" href="./css/login.css" />
+    </head>
+    <body class="column">
+        <div id="container" class="column">
+            <div id="user-container" class="column">
+                <div id="user-pic"></div>
+                <div id="user-name">SnowFlake</div>
+            </div>
+            <div id="password" class="column">
+                <form>
+                    <input id="password-textbox" type="password">
+                </form>
+            </div>
+        </div>
+    </body>
+</html>