Initial Commit
This commit is contained in:
parent
25791e7c89
commit
9aa9907bb7
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.DS_Store
|
48
index.html
Normal file
48
index.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Startpage Title</title>
|
||||
<link rel="stylesheet" type="text/css" href="src/style/main.css">
|
||||
<script src="https://kit.fontawesome.com/a81a0c775a.js" crossorigin="anonymous"></script>
|
||||
<!-- Background randomizer -->
|
||||
<script defer src="src/script/randbg.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="head">
|
||||
<!-- Above-Search Logo -->
|
||||
<div class="logo"><img src="src/icons/fox.svg" /></div>
|
||||
<div class="search_box">
|
||||
<!-- Google Search -->
|
||||
<div id="gSearch" style="display:block;">
|
||||
<form id="textField" class="google" action="https://google.com/search" method="get">
|
||||
<input class="input_box" type="text" name="q" placeholder="Search" autofocus>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bookmark">
|
||||
<div class="category">
|
||||
<p class="title">Category One</p>
|
||||
<div class="bookmarks">
|
||||
<li><a class="bm" href="https://google.com">Google</a></li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category">
|
||||
<p class="title">Category Two</p>
|
||||
<li><a class="bm" href="https://steampowered.com">Steam</a></li>
|
||||
<div class="bookmarks">
|
||||
</div>
|
||||
</div>
|
||||
<div class="category">
|
||||
<p class="title">Category Three</p>
|
||||
<div class="bookmarks">
|
||||
<li><a class="bm" href="https://mail.google.com">GMail</a></li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
BIN
src/backgrounds/bg1.jpg
Normal file
BIN
src/backgrounds/bg1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 MiB |
3
src/backgrounds/bgs.json
Normal file
3
src/backgrounds/bgs.json
Normal file
@ -0,0 +1,3 @@
|
||||
[
|
||||
"src/backgrounds/bg1.jpg"
|
||||
]
|
BIN
src/fonts/iosevka_ttf/iosevka-bold.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-bold.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-bolditalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-bolditalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-boldoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-boldoblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-extrabold.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-extrabold.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-extrabolditalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-extrabolditalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-extraboldoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-extraboldoblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-extralight.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-extralight.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-extralightitalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-extralightitalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-extralightoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-extralightoblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-heavy.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-heavy.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-heavyitalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-heavyitalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-heavyoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-heavyoblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-italic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-italic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-light.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-light.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-lightitalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-lightitalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-lightoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-lightoblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-medium.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-medium.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-mediumitalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-mediumitalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-mediumoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-mediumoblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-oblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-oblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-regular.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-regular.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-semibold.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-semibold.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-semibolditalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-semibolditalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-semiboldoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-semiboldoblique.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-thin.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-thin.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-thinitalic.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-thinitalic.ttf
Normal file
Binary file not shown.
BIN
src/fonts/iosevka_ttf/iosevka-thinoblique.ttf
Normal file
BIN
src/fonts/iosevka_ttf/iosevka-thinoblique.ttf
Normal file
Binary file not shown.
55
src/icons/fox.svg
Normal file
55
src/icons/fox.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 14 KiB |
100
src/icons/google.svg
Normal file
100
src/icons/google.svg
Normal file
@ -0,0 +1,100 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
sodipodi:docname="google.svg"
|
||||
id="svg16"
|
||||
version="1.1"
|
||||
height="52"
|
||||
width="52"
|
||||
viewBox="0 0 5.2 5.2">
|
||||
<metadata
|
||||
id="metadata22">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs20">
|
||||
<inkscape:path-effect
|
||||
only_selected="false"
|
||||
apply_with_weight="true"
|
||||
apply_no_weight="true"
|
||||
helper_size="0"
|
||||
steps="2"
|
||||
weight="33.333333"
|
||||
lpeversion="1"
|
||||
is_visible="true"
|
||||
id="path-effect1925"
|
||||
effect="bspline" />
|
||||
<inkscape:path-effect
|
||||
only_selected="false"
|
||||
apply_with_weight="true"
|
||||
apply_no_weight="true"
|
||||
helper_size="0"
|
||||
steps="2"
|
||||
weight="33.333333"
|
||||
lpeversion="1"
|
||||
is_visible="true"
|
||||
id="path-effect885"
|
||||
effect="bspline" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
inkscape:current-layer="svg16"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-x="0"
|
||||
inkscape:cy="24.110555"
|
||||
inkscape:cx="46.005708"
|
||||
inkscape:zoom="7.989887"
|
||||
showgrid="false"
|
||||
id="namedview18"
|
||||
inkscape:window-height="704"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#232929"
|
||||
inkscape:document-rotation="0" />
|
||||
<g
|
||||
transform="matrix(0.92846546,0,0,0.92479909,0.17492131,0.19753118)"
|
||||
style="stroke:#6c8dac;stroke-width:0.48541465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="g1929">
|
||||
<path
|
||||
style="fill:#ff8080;fill-opacity:0;stroke:#6c8dac;stroke-width:0.48541465;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
id="path1911"
|
||||
sodipodi:type="arc"
|
||||
sodipodi:cx="2.4996181"
|
||||
sodipodi:cy="2.6108518"
|
||||
sodipodi:rx="2.1740921"
|
||||
sodipodi:ry="2.1773813"
|
||||
sodipodi:start="6.2744429"
|
||||
sodipodi:end="5.33678"
|
||||
sodipodi:open="true"
|
||||
sodipodi:arc-type="arc"
|
||||
d="M 4.673627,2.5918165 A 2.1740921,2.1773813 0 0 1 3.0230721,4.7241798 2.1740921,2.1773813 0 0 1 0.56877939,3.6116325 2.1740921,2.1773813 0 0 1 1.0791939,0.96243588 2.1740921,2.1773813 0 0 1 3.7705995,0.84430035" />
|
||||
<path
|
||||
style="fill:none;stroke:#6c8dac;stroke-width:0.48541465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 2.5940139,2.6155787 c 0,0 2.0796131,-0.023762 2.0796131,-0.023762"
|
||||
id="path1923"
|
||||
inkscape:path-effect="#path-effect1925"
|
||||
inkscape:original-d="M 2.5940139,2.6155787 4.673627,2.5918165"
|
||||
sodipodi:nodetypes="cc" />
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 3.4 KiB |
89
src/icons/search.svg
Normal file
89
src/icons/search.svg
Normal file
@ -0,0 +1,89 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
sodipodi:docname="search.svg"
|
||||
id="svg12"
|
||||
version="1.1"
|
||||
class="feather feather-crosshair"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke-width="2"
|
||||
stroke="#1789D0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
height="48"
|
||||
width="48">
|
||||
<metadata
|
||||
id="metadata18">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs16" />
|
||||
<sodipodi:namedview
|
||||
inkscape:current-layer="svg12"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:window-y="112"
|
||||
inkscape:window-x="317"
|
||||
inkscape:cy="24"
|
||||
inkscape:cx="24"
|
||||
inkscape:zoom="5.6041667"
|
||||
showgrid="false"
|
||||
id="namedview14"
|
||||
inkscape:window-height="480"
|
||||
inkscape:window-width="733"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff" />
|
||||
<g
|
||||
transform="matrix(1.0346466,0,0,1.0346466,-0.79687178,-0.0346466)"
|
||||
id="g25">
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
id="circle2" />
|
||||
<line
|
||||
x1="22"
|
||||
y1="12"
|
||||
x2="18"
|
||||
y2="12"
|
||||
id="line4" />
|
||||
<line
|
||||
x1="6"
|
||||
y1="12"
|
||||
x2="2"
|
||||
y2="12"
|
||||
id="line6" />
|
||||
<line
|
||||
x1="12"
|
||||
y1="6"
|
||||
x2="12"
|
||||
y2="2"
|
||||
id="line8" />
|
||||
<line
|
||||
x1="12"
|
||||
y1="22"
|
||||
x2="12"
|
||||
y2="18"
|
||||
id="line10" />
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 2.1 KiB |
9
src/script/randbg.js
Normal file
9
src/script/randbg.js
Normal file
@ -0,0 +1,9 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
fetch('idle-bgs/bgs.json')
|
||||
.then(response => response.json())
|
||||
.then(images => {
|
||||
const randomImage = images[Math.floor(Math.random() * images.length)];
|
||||
document.body.style.backgroundImage = `url(${randomImage})`;
|
||||
})
|
||||
.catch(error => console.error('Error fetching image list:', error));
|
||||
});
|
211
src/style/main.css
Normal file
211
src/style/main.css
Normal file
@ -0,0 +1,211 @@
|
||||
@font-face {
|
||||
font-family: iosevka-light;
|
||||
src: url('./fonts/iosevka_ttf/iosevka-light.ttf');
|
||||
}
|
||||
|
||||
html{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background:#1b1b1b;
|
||||
}
|
||||
|
||||
body {
|
||||
/* background: #263238; */
|
||||
background-image: url('./bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #ffa31a;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20%;
|
||||
font-family: iosevka-light;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
background-color: #292929;
|
||||
color: #ffa31a;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 4px 5px #171D20;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
border: #ffa31a 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bookmarks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: #191C1E;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 4px 5px #171D20;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
background: rgba(41, 41, 41, .6);
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
align-self: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
|
||||
.input_box {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
width: 100%;
|
||||
color: #ffa31a;
|
||||
font-size: 22px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
height: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: none;
|
||||
border: none;
|
||||
transition-duration: 0.6s;
|
||||
position: fixed;
|
||||
padding-left: 11px;
|
||||
padding-right: 12px;
|
||||
height: 70px;
|
||||
opacity: 60%;
|
||||
}
|
||||
|
||||
.engine {
|
||||
background: none;
|
||||
padding-left: 12px;
|
||||
padding-right: 11px;
|
||||
border: none;
|
||||
transition-duration: 0.6s;
|
||||
position: relative;
|
||||
opacity: 60%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
display: flex;
|
||||
background: rgba(41, 41, 41, .6);
|
||||
width: 600px;
|
||||
padding: 0px;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
box-shadow: 0px 4px 5px #171D20;
|
||||
align-self: center;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.engine:hover {
|
||||
filter: saturate(150%) brightness(120%) !important;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
filter: saturate(150%) brightness(120%) !important;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 16px;
|
||||
list-style-type: none;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: #F8BE4D;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #F8BE4D;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #B5CCE8;
|
||||
}
|
||||
|
||||
#credit {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-family: iosevka-light;
|
||||
}
|
||||
|
||||
#gSearch {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.container {
|
||||
display: block;
|
||||
}
|
||||
.bookmark {
|
||||
flex-direction: column;
|
||||
}
|
||||
.category {
|
||||
width: 90%;
|
||||
align-self: center;
|
||||
}
|
||||
.search_box {
|
||||
width: 90%;
|
||||
}
|
||||
.input_box {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
.engine {
|
||||
padding: 0px 5px;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user