commit

CSS/home.css

@@ -0,0 +1,126 @@
+@charset "UTF-8";
+body,
+html {
+    text-align: right;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background-color: #fff;
+
+}
+
+#menuholder {
+    margin: 0% 2% 0% 0%;
+    text-align: center;
+}
+
+button {
+	border: none;
+	background: #fff;
+	color: #000000;
+	padding: 10px;
+	font-size: 18px;
+	border-radius: 5px;
+	position: relative;
+	box-sizing: border-box;
+	transition: all 200ms ease;
+}
+
+a {
+  border: none;
+	background: #3a7999;
+	color: #f2f2f2;
+	padding: 10px;
+	font-size: 18px;
+	border-radius: 5px;
+	position: relative;
+	box-sizing: border-box;
+	transition: all 200ms ease;
+}
+
+button:before {
+	content:'';
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 0px;
+	height: 22px;
+	background: rgba(7,0,0,0.3);
+	border-radius: 5px;
+	transition: all 0.3s ease;
+}
+
+a:before {
+	content:'';
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 0px;
+	height: 40px;
+	background: rgba(7,0,0,0.3);
+	border-radius: 5px;
+	transition: all 0.3s ease;
+}
+
+button:hover:before {
+	width: 96%;
+}
+
+a:hover:before {
+	width: 96%;
+}
+
+.menu {
+    margin: 17% 0% 0% 0%;
+    padding: 0% 0.3% 0% 0.3%;
+    font-family: 'Roboto', sans-serif;
+    text-decoration: none;
+    background-color: transparent;
+    border: none;
+    font-size: 1.5vw;
+    color: #000;
+    display: inline-block;
+    margin-left: 20px;
+}
+
+.menu:hover {
+    text-decoration: underline;
+}
+
+#srch {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 2vw;
+    width: 60vw;
+    background-color: #fff;
+    border: 4px #04CF5C solid;
+
+}
+
+#srch[type=text] {
+    color: #000;
+    padding: 1% 2%;
+    font-family: 'Roboto', sans-serif;
+    font-size: 3vw;
+}
+
+#srch::-webkit-input-placeholder {
+    text-align: right;
+    font-size: 20px;
+    color: #777777;
+    opacity: 1;
+}
+
+#srch::-moz-placeholder {
+    text-align: right;
+    color: #777777;
+    opacity: 1;
+}
+
+#srch:-ms-input-placeholder {
+    text-align: right;
+    color: #777777;
+    opacity: 1;
+}

JS/control.js

@@ -0,0 +1,68 @@
+class Mode {
+    constructor(type, placeholder, border, url) {
+        this.type = type;
+        this.placeholder = placeholder;
+        this.border = border;
+        this.url = url;
+    }
+
+    setup() {
+        srch.style.border = this.border;
+        document.title = this.placeholder;
+        menu = this.border;
+    }
+}
+
+const srch = document.querySelector('#srch');
+const menu = document.querySelector('.menu background-color');
+const ggurl = "https://www.google.com/search?q=";
+const imgurl = "https://www.google.com/search?tbm=isch&q=";
+const yturl = "https://www.youtube.com/results?search_query=";
+const fcurl = "https://www.facebook.com/search/top?q=";
+const durl = "https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&sq=&o=&q=";
+const nurl = "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=";
+const giturl = "https://github.com/search?q=";
+let modeObj;
+
+document.addEventListener('DOMContentLoaded',init);
+
+function init() {
+    modeObj = new Mode('web', 'Naver', '3px #04CF5C solid',nurl);
+    modeObj.setup();
+}
+
+function ytmode() {
+    modeObj = new Mode('yt', 'YouTube', '3px #ed4343 solid',yturl);
+    modeObj.setup();
+}
+
+function ggmode() {
+    modeObj = new Mode('gg', 'Google', '3px #6E6E6E solid',ggurl);
+    modeObj.setup();
+}
+
+function fcmode() {
+    modeObj = new Mode('fc', 'Facebook', '3px #1C5CAD solid',fcurl);
+    modeObj.setup();
+}
+
+function dmode() {
+    modeObj = new Mode('d', 'daum', '3px #87A1E6 solid',durl);
+    modeObj.setup();
+}
+
+function gitmode() {
+    modeObj = new Mode('git', 'Git', '3px #000 solid',giturl);
+    modeObj.setup();
+}
+
+
+
+function openurl(e) {
+    let url = modeObj.url
+    let input = srch.value.trim().replace("+", "%2B").replace("=", "%3D").replace("&", "%26").replace(" ", "+");
+    url = url.concat(input);
+    if (e.keyCode == 13 && input != "") {
+        window.location = url;
+    }
+}

home.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+	<head>
+		<meta charset="UTF-8">
+		<meta name="robots" content="index, follow">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+		<title>Google</title>
+		<meta name="description" content="Search on google with a brand new custom good looking page!"/>
+		<meta name="author" content="Sheyas Daniel <[email protected]>"/>
+		<link rel="shortcut icon" href="Images/search.ico" />
+		<link rel="stylesheet" type="text/css" href="CSS/home.css">
+	    <link rel="stylesheet" type="text/css" href="CSS/fontawesome.css">
+		<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
+	</head>
+
+	<body>
+		<div class="btn_wrap">
+			<button class="login_btn">login</button>
+		</div>
+	    <div id="webpage">
+	        <div id="menuholder">
+	            <a class="menu" href="#0" onclick="init();"><img src="Images/네이버.png"></a>
+				<a class="menu" href="#0" onclick="ggmode();"><img src="Images/구글.png"></a>
+				<a class="menu" href="#0" onclick="fcmode();"><img src="Images/페북.png"></a>
+				<a class="menu" href="#0" onclick="gitmode();"><img src="Images/깃.png"></a>
+				<a class="menu" href="#0" onclick="dmode();"><img src="Images/다음.png"></a>
+
+	        </div>
+	        <input id="srch" name="searchbox" type="text" autocomplete="off" maxlength="255" onkeydown="return openurl(event);"
+	            autofocus />
+	    </div>
+
+	    <script src="JS/control.js"></script>
+
+	</body>
+</html>