Initial Commit

This commit is contained in:
Skylar Grant 2024-08-04 21:48:52 -04:00
parent 25791e7c89
commit 9aa9907bb7
36 changed files with 516 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.DS_Store

48
index.html Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

3
src/backgrounds/bgs.json Normal file
View File

@ -0,0 +1,3 @@
[
"src/backgrounds/bg1.jpg"
]

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

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
View 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
View 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
View 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
View 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;
}
}