kawa/startpage-onedark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

git init

Browse Source
This commit is contained in:
deepjyoti30
2020-05-12 19:21:50 +05:30
commit 2953006982
4 changed files with 131 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
css/main.css Normal file
View File

@@ -0,0 +1,33 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
.roboto, body {
font-family: 'Roboto', sans-serif; }
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #263238;
color: #fff; }
.main {
width: 100%; }
.main #search-bar {
width: 50%;
margin: 0 auto;
height: 45px; }
.main #search-bar input {
height: inherit;
width: 100%;
background: #304047;
box-shadow: none;
border: none;
text-align: center;
border-radius: 6px;
outline: none;
padding: 7px 14px;
font-size: 18px;
color: #fff; }
.main #search-bar input:focus {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

27
index.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>startpage</title>
<!--Bootsrap CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<!--Custom CSS-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="main" class="my-auto py-5 main">
<div id="search-bar">
<input id="search-bar-input" placeholder="Search something on Google"></input>
</div>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Bootstrap JS files-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
<!--Custom JS-->
<script src="js/main.js"></script>
</body>
</html>

24
js/main.js Normal file
View File

@@ -0,0 +1,24 @@
window.onload = function() {
this.initBody()
}
searchBarId = "search-bar-input"
function initBody() {
/**
* Function called when the body is loaded.
*
* Do everything like adding an event listener to
* other things.
*/
// Clear the search bar on load, just in case
$("#" + searchBarId).val("")
$("#" + searchBarId).on("keypress", (event) => {
if (event.which != 13) return
// Open google with the search results.
googleSearchUrl = "https://www.google.com/search?q="
query = document.getElementById(searchBarId).value.replace(/\ /g, "+")
document.location = googleSearchUrl + query
})
}

47
scss/main.scss Normal file
View File

@@ -0,0 +1,47 @@
$background: #263238;
$foreground: #fff;
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.roboto {
font-family: 'Roboto', sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: $background;
color: $foreground;
@extend .roboto;
}
.main {
width: 100%;
#search-bar {
width: 50%;
margin: 0 auto;
height: 45px;
input {
height: inherit;
width: 100%;
background: lighten($background, 5);
box-shadow: none;
border: none;
text-align: center;
border-radius: 6px;
outline: none;
padding: 7px 14px;
font-size: 18px;
color: $foreground;
&:focus {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
}
}
}