HTML 디자인 부분 복구

SnowFlakeOS · Jul 12, 2018 · af504d0 · af504d0
1 parent 7b7854b
commit af504d0
Show file tree

Hide file tree

Showing 7 changed files with 343 additions and 0 deletions.
diff --git a/res/ui_front/bg.jpg b/res/ui_front/bg.jpg
diff --git a/res/ui_front/css/background.css b/res/ui_front/css/background.css
@@ -0,0 +1,14 @@
+html { 
+	background: url(/fakepath/path_to_default_background_image) no-repeat center center fixed;
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+
+	color: #FFFFFF;
+}
+
+#status_bar {
+	background-color: #000000;
+	background-color: rgba( 0, 0, 0, 0.4 );
+}
diff --git a/res/ui_front/css/fixed_status_bar.css b/res/ui_front/css/fixed_status_bar.css
@@ -0,0 +1,20 @@
+/* This CSS Style Sheet is made for fixed status bar on desktop */
+html, body {
+	height: 100%;
+}
+body {
+	margin: 0;
+}
+#desktop {
+	min-height: 100%;
+}
+#applist {
+	padding-bottom: 1.9em;
+}
+#status_bar {
+	margin-top: -2.7em;
+	height: 2.7em;
+}
+#clock, #date {
+	padding-right: 20px;
+}
diff --git a/res/ui_front/css/login.css b/res/ui_front/css/login.css
@@ -0,0 +1,77 @@
+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: 40vh;
+    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 {
+    padding: 1vh 2vh;
+    box-shadow: 0 10px 15px 0 rgba(0,0,0,.1);
+    outline: none;
+    border-radius: 30px;
+    border: 1px solid #cdcdcd;
+    border-color: rgba(0,0,0,.15);
+    background-color: rgba(255,255,255,.5);
+    font-size: 2vh;
+    letter-spacing: 1vh;
+    color: rgba(0,0,0,.5);
+}
+
+#password-textbox:focus {
+    background-color: rgba(255,255,255,.75);
+    color: black;
+}
diff --git a/res/ui_front/desktop.html b/res/ui_front/desktop.html
@@ -0,0 +1,22 @@
+<!-- SnowFlake OS main desktop ui -->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="stylesheet" href="./css/fixed_status_bar.css" />
+		<link rel="stylesheet" href="./css/background.css" />
+	</head>
+	<body onload="startTime()">
+		<div id="desktop">
+			<div id="applist">
+				App List
+			</div>
+		</div>
+		<div id="status_bar">
+			<div id="clock" style="float: right;"></div><br />
+			<div id="date" style="float: right;"></div>
+		</div>
+
+		<script type="text/javascript" src="./js/clock.js"></script>
+	</body>
+</html>
diff --git a/res/ui_front/js/clock.js b/res/ui_front/js/clock.js
@@ -0,0 +1,38 @@
+function startTime () {
+	var today = new Date();
+	var AMPM = null;
+	var year = today.getFullYear();
+	var month = today.getMonth() + 1;
+	var date = today.getDate();
+	var hour = today.getHours();
+	var minute = today.getMinutes();
+	var second = today.getSeconds();
+
+	if (hour > 12) {
+		AMPM = "오후";
+		hour = hour - 12;
+	}
+
+	else if (hour == 12) {
+		AMPM = "오후";
+	}
+
+	else {
+		AMPM = "오전";
+	}
+
+	minute = checkTime(minute);
+	second = checkTime(second);
+
+	document.getElementById('clock').innerHTML = AMPM + " " + hour + ":" + minute;
+	document.getElementById('date').innerHTML = year + "-" + month + "-" + date;
+	var t = setTimeout(startTime, 500);
+}
+
+function checkTime (i) {
+	if (i < 10) {
+		// 숫자가 0보다 작으면 앞에 0을 붙여준다
+		i = "0" + i;
+	}
+	return i;
+}
diff --git a/res/ui_front/login.html b/res/ui_front/login.html
@@ -0,0 +1,172 @@
+<!-- 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">
+                <input id="password-textbox" type="password" onkeypress="if(event.keyCode == 13) { sendPwd(encryptPwd(document.getElementById('password-textbox').value)); return false; }">
+            </div>
+        </div>
+
+        <!-- Send password to SnowFlake Login Manager -->
+        <script type="text/javascript">
+        	/**
+		    *
+		    *  Secure Hash Algorithm (SHA256)
+		    *  http://www.webtoolkit.info/
+		    *
+		    *  Original code by Angel Marin, Paul Johnston.
+		    *
+		    **/
+
+		    function encryptPwd(s){
+
+		        var chrsz   = 8;
+		        var hexcase = 0;
+
+		        function safe_add (x, y) {
+		            var lsw = (x & 0xFFFF) + (y & 0xFFFF);
+		            var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+		            return (msw << 16) | (lsw & 0xFFFF);
+		        }
+
+		        function S (X, n) { return ( X >>> n ) | (X << (32 - n)); }
+		        function R (X, n) { return ( X >>> n ); }
+		        function Ch(x, y, z) { return ((x & y) ^ ((~x) & z)); }
+		        function Maj(x, y, z) { return ((x & y) ^ (x & z) ^ (y & z)); }
+		        function Sigma0256(x) { return (S(x, 2) ^ S(x, 13) ^ S(x, 22)); }
+		        function Sigma1256(x) { return (S(x, 6) ^ S(x, 11) ^ S(x, 25)); }
+		        function Gamma0256(x) { return (S(x, 7) ^ S(x, 18) ^ R(x, 3)); }
+		        function Gamma1256(x) { return (S(x, 17) ^ S(x, 19) ^ R(x, 10)); }
+
+		        function core_sha256 (m, l) {
+
+		            var K = new Array(0x428A2F98, 0x71374491, 0xB5C0FBCF, 0xE9B5DBA5, 0x3956C25B, 0x59F111F1, 
+		                0x923F82A4, 0xAB1C5ED5, 0xD807AA98, 0x12835B01, 0x243185BE, 0x550C7DC3, 
+		                0x72BE5D74, 0x80DEB1FE, 0x9BDC06A7, 0xC19BF174, 0xE49B69C1, 0xEFBE4786, 
+		                0xFC19DC6, 0x240CA1CC, 0x2DE92C6F, 0x4A7484AA, 0x5CB0A9DC, 0x76F988DA, 
+		                0x983E5152, 0xA831C66D, 0xB00327C8, 0xBF597FC7, 0xC6E00BF3, 0xD5A79147, 
+		                0x6CA6351, 0x14292967, 0x27B70A85, 0x2E1B2138, 0x4D2C6DFC, 0x53380D13, 
+		                0x650A7354, 0x766A0ABB, 0x81C2C92E, 0x92722C85, 0xA2BFE8A1, 0xA81A664B, 
+		                0xC24B8B70, 0xC76C51A3, 0xD192E819, 0xD6990624, 0xF40E3585, 0x106AA070, 
+		                0x19A4C116, 0x1E376C08, 0x2748774C, 0x34B0BCB5, 0x391C0CB3, 0x4ED8AA4A, 
+		                0x5B9CCA4F, 0x682E6FF3, 0x748F82EE, 0x78A5636F, 0x84C87814, 0x8CC70208, 
+		                0x90BEFFFA, 0xA4506CEB, 0xBEF9A3F7, 0xC67178F2);
+
+		            var HASH = new Array(0x6A09E667, 0xBB67AE85, 0x3C6EF372, 0xA54FF53A, 0x510E527F, 0x9B05688C, 0x1F83D9AB, 0x5BE0CD19);
+
+		            var W = new Array(64);
+		            var a, b, c, d, e, f, g, h, i, j;
+		            var T1, T2;
+
+		            m[l >> 5] |= 0x80 << (24 - l % 32);
+		            m[((l + 64 >> 9) << 4) + 15] = l;
+
+		            for ( var i = 0; i<m.length; i+=16 ) {
+		                a = HASH[0];
+		                b = HASH[1];
+		                c = HASH[2];
+		                d = HASH[3];
+		                e = HASH[4];
+		                f = HASH[5];
+		                g = HASH[6];
+		                h = HASH[7];
+
+		                for ( var j = 0; j<64; j++) {
+		                    if (j < 16) W[j] = m[j + i];
+		                    else W[j] = safe_add(safe_add(safe_add(Gamma1256(W[j - 2]), W[j - 7]), Gamma0256(W[j - 15])), W[j - 16]);
+
+		                    T1 = safe_add(safe_add(safe_add(safe_add(h, Sigma1256(e)), Ch(e, f, g)), K[j]), W[j]);
+		                    T2 = safe_add(Sigma0256(a), Maj(a, b, c));
+
+		                    h = g;
+		                    g = f;
+		                    f = e;
+		                    e = safe_add(d, T1);
+		                    d = c;
+		                    c = b;
+		                    b = a;
+		                    a = safe_add(T1, T2);
+		                }
+
+		                HASH[0] = safe_add(a, HASH[0]);
+		                HASH[1] = safe_add(b, HASH[1]);
+		                HASH[2] = safe_add(c, HASH[2]);
+		                HASH[3] = safe_add(d, HASH[3]);
+		                HASH[4] = safe_add(e, HASH[4]);
+		                HASH[5] = safe_add(f, HASH[5]);
+		                HASH[6] = safe_add(g, HASH[6]);
+		                HASH[7] = safe_add(h, HASH[7]);
+		            }
+		            return HASH;
+		        }
+
+		        function str2binb (str) {
+		            var bin = Array();
+		            var mask = (1 << chrsz) - 1;
+		            for(var i = 0; i < str.length * chrsz; i += chrsz) {
+		                bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - i%32);
+		            }
+		            return bin;
+		        }
+
+		        function Utf8Encode(string) {
+		            string = string.replace(/\r\n/g,"\n");
+		            var utftext = "";
+
+		            for (var n = 0; n < string.length; n++) {
+
+		                var c = string.charCodeAt(n);
+
+		                if (c < 128) {
+		                    utftext += String.fromCharCode(c);
+		                }
+		                else if((c > 127) && (c < 2048)) {
+		                    utftext += String.fromCharCode((c >> 6) | 192);
+		                    utftext += String.fromCharCode((c & 63) | 128);
+		                }
+		                else {
+		                    utftext += String.fromCharCode((c >> 12) | 224);
+		                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+		                    utftext += String.fromCharCode((c & 63) | 128);
+		                }
+
+		            }
+
+		            return utftext;
+		        }
+
+		        function binb2hex (binarray) {
+		            var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
+		            var str = "";
+		            for(var i = 0; i < binarray.length * 4; i++) {
+		                str += hex_tab.charAt((binarray[i>>2] >> ((3 - i%4)*8+4)) & 0xF) +
+		                hex_tab.charAt((binarray[i>>2] >> ((3 - i%4)*8  )) & 0xF);
+		            }
+		            return str;
+		        }
+
+		        s = Utf8Encode(s);
+		        return binb2hex(core_sha256(str2binb(s), s.length * chrsz));
+
+		    }
+
+		    // Send password
+		    function sendPwd(pwd) {
+		    	// Send password...
+		    	console.log(pwd);
+
+		    	return true;
+		    }
+        </script>
+    </body>
+</html>