Add files via upload

This commit is contained in:
Kainoa Kanter 2020-11-09 21:24:16 -08:00 committed by GitHub
parent 06260ed120
commit 89506b4503
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 168 additions and 0 deletions

BIN
icon/buildings (1).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

43
index.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset ="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="shortcut icon" href="icon/buildings (1).png">
</head>
<body>
<div class="everything">
<div id="time" class="time"></div>
<input id="search-bar-input" placeholder="Search something on the Web">
<div class="box">
<div class="link">
<ul>
<li><a href="https://reddit.com">reddit</a></li>
<li><a href="https://twitter.com">twitter</a></li>
<li><a href="https://www.gmail.com/">gmail</a></li>
<li><a href="https://messages.google.com/web/">messages</a></li>
</ul>
</div>
<div class="link">
<ul>
<li><a href="https://youtube.com">youtube</a></li>
<li><a href="https://twitch.tv/">twitch</a></li>
<li><a href="https://4anime.to">4anime</a></li>
<li><a href="https://netflix.com/">netflix</a></li>
</ul>
</div>
<div class="link">
<ul>
<li><a href="https://github.com/">github</a></li>
<li><a href="https://discordpy.readthedocs.io/en/latest/">d.py docs</a></li>
<li><a href="https:/drive.google.com/">google drive</a></li>
<li><a href="https://www.w3schools.com/">w3schools</a></li>
</ul>
</div>
</div>
</div>
<script src="scr/script.js"></script>
<script src="scr/search.js"></script>
</body>
</html>

14
scr/script.js Normal file
View file

@ -0,0 +1,14 @@
function updateClock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var time = hours + ':' + minutes + ' ' + ampm;
document.getElementById('time').innerHTML = time;
setTimeout(updateClock, 1000);
}
updateClock();

17
scr/search.js Normal file
View file

@ -0,0 +1,17 @@
window.onload = function() {
this.initSearchBar()
}
function initSearchBar() {
document.getElementById("search-bar-input").value = ""
document.getElementById("search-bar-input").focus()
document.getElementById("search-bar-input").addEventListener("keypress", (event) => {
if (event.key != 'Enter') return
googleSearchUrl = "https://www.duckduckgo.com/?q="
otherThing = "&atb=v225-7&ia=web"
query = document.getElementById("search-bar-input").value.replace(/\ /g, "+")
document.location = googleSearchUrl + query + otherThing
})
}

94
style/style.css Normal file
View file

@ -0,0 +1,94 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');
@font-face {
font-family: 'Fira Code', monospace;
}
/*Change font and colors*/
:root {
--font: "Fira Code";
--bgcolor: #1F1D29;
--linkcolor: #FFFFFF;
}
/*-----------------------------------------------------------*/
input {
height: inherit;
width: 680px;
background: #1F1D29;
color: #EABBB9;
font: "Fira Code";
font-weight: mono;
line-height: 1.8em;
box-shadow: 1px 1px 3px #000000;
border: none;
text-align: center;
border-radius: 8px;
outline: none;
padding: 7px 14px;
font-size: 18;
grid-column: 1 / -1;
margin: 0px 0px 30px 0px;;
}
body {
/*
background-image: url('../background/bg.jpg');
background-repeat : no-repeat;
*/
background-color: #1F1D29;
background-size: cover;
}
.everything {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.link {
display: inline-block;
margin: 1%;
height: 185px;
width: 140px;
text-align: left;
padding-left: 3%;
background-color: var(--bgcolor);
border-radius: 8px;
box-shadow: 2px 2px 8px #000000;
}
.box {
width: 750px;
}
ul {
padding-inline-start: 0;
list-style: none;
}
a {
display: block;
line-height: 2.4em;
font-family: var(--font);
color: var(--linkcolor);
font-size: 1rem;
text-decoration: none;
outline: none;
transition: .2s;
}
a:hover {
color: #EA6F91;
}
.time {
font-family: "Fira Code"; monospace;
font-weight: mono;
font-size: 5.5rem;
margin: 50px 0px 50px 0px;
color: var(--linkcolor);
text-shadow: -5px 5px 0px #34738E, -10px 10px 0px #C3A5E6, -15px 15px 0px #9BCED7;
}