voidf1sh/startpage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

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

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

BIN
src/fonts/iosevka_ttf/iosevka-bold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-bolditalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-boldoblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-extrabold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-extrabolditalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-extraboldoblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-extralight.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-extralightitalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-extralightoblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-heavy.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-heavyitalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-heavyoblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-italic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-light.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-lightitalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-lightoblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-medium.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-mediumitalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-mediumoblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-oblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-regular.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-semibold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-semibolditalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-semiboldoblique.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-thin.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-thinitalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/iosevka_ttf/iosevka-thinoblique.ttf Normal file
View File

Binary file not shown.

55
src/icons/fox.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

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>
Side by Side

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>
Side by Side

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