Initialize repo with current version.

master
YandolsZX 4 years ago
commit 3f108901f5
  1. 47
      assets/css/searcher.css
  2. 301
      assets/css/style.css
  3. 65
      assets/css/wave.css
  4. BIN
      assets/img/favicon-full.png
  5. 13
      assets/js/iconify.js
  6. 2
      assets/js/jquery.js
  7. 60
      assets/js/script.js
  8. 178
      index.html

@ -0,0 +1,47 @@
/*
* Searchbar Element
* Stylesheet taken from Tobias' Wave Startpage concept
* Modified by YandolsZX
* Original source can be found here: https://github.com/Tobias-Schoch/startpage-wave
*/
form .search-field, form .search-submit {
background: none;
outline: none;
border: none;
line-height: 40px;
position: relative;
}
form .search-field {
width: 93%;
padding-left: 15px;
color: white;
font-size: 30px;
bottom: -1px;
}
form .search-field::placeholder {
opacity: 0.65;
}
form .search-submit {
width: 6%;
top: -0.5em;
}
form .search-submit:hover {
cursor: pointer;
}
form .search-submit::before {
background-image:url(./google1.svg);
background-position:center center;
fill: white;
content:"";
width:23px;
height:23px;
position:absolute;
right:23px;
bottom: -3px;
}

@ -0,0 +1,301 @@
/*
* Startpage Stylesheet
* Sheet taken from TB-96's Evening Startpage project
* Modified by YandolsZX
* Original source can found here: https://github.com/TB-96/Evening-Startpage
*/
:root {
--color-theme: #2978ad;
--bg-primary: #212121;
--bg-secondary: rgba(21,21,21,.5);
--bg-hover: rgba(41,120,173,.5);
--color-primary: #eee;
--color-secondary: #74a7ca;
--color-success: #66BB6A;
--color-warning: #F57C00;
--color-danger: #DC3545;
--padding: 1rem;
--rounded: 0.25rem;
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12)
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 15px;
transition: opacity .3s;
font-family: "Open Sans";
}
html {
color: var(--color-primary);
background: var(--bg-primary) url("https://source.unsplash.com/1920x1080/?landscapes") no-repeat fixed center ;
background-size: 100%;
}
body {
margin: 0 auto;
padding: 0;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #4e4e4e;
}
::-webkit-scrollbar-thumb {
background: var(--bg-secondary);
}
a, a:visited {
color: var(--color-secondary);
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
cursor: pointer;
webkit-text-decoration-color: var(--color-text-acc);
webkit-text-decoration-skip: true;
}
#container {
margin: 2em auto 0;
width: 70%;
background-color: rgba(10, 10, 10, 0.7);
padding: 40px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
}
h1, h2 {
font-weight: 300;
margin: 0;
padding: 0;
}
h3, h4 {
text-transform: uppercase;
text-align: left;
color: var(--color-secondary);
}
h1 {
font-size: 4em;
font-weight: 700;
}
h3 {
font-size: 20px;
font-weight: 900;
padding: var(--padding);
}
h4 {
font-size: 1.1em;
font-weight: 400;
padding-bottom: .5rem;
}
h5 {
text-align: center;
font-size: 0.7em;
}
h5 a {
font-size: 1.0em;
}
#togglebookmarks {
text-decoration: none!important;
}
button {
background-color: var(--bg-hover);
color: #fff;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 5rem;
text-transform: uppercase;
box-shadow: var(--shadow);
}
button:hover {
background-color: var(--color-theme);
}
/* ANIMATION */
@keyframes fadeseq{
100% {
opacity: 1;
}
}
.fade {
opacity: 0;
}
.fade {
animation: fadeseq .3s forwards;
}
.fade:nth-child(2) {
animation-delay: .4s;
}
/* HEADERS */
#header {
text-align: center;
}
#header-time, #header-date {
cursor: default;
}
#header-time {
font-size: 5em;
}
#header-date {
margin-top: -1rem;
margin-bottom: .5rem;
}
#header-quote {
margin-top: 1rem;
}
/* LINKS */
#apps-container {
display: grid;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
#apps-container a {
text-decoration: none;
color: var(--color-primary);
}
.apps-item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 64px;
margin: .5rem;
box-shadow: var(--shadow);
background: var(--bg-secondary);
border-radius: var(--rounded);
-o-transition: background-color .3s;
-ms-transition: background-color .3s;
-moz-transition: background-color .3s;
-webkit-transition: background-color .3s;
/* ...and now for the proper property */
transition: background-color .3s;
}
.apps-item:hover {
background-color: var(--bg-hover)!important;
}
.apps-icon {
height: 64px;
margin: 0 1em;
padding-top: 13px;
}
.icon {
font-size: 2.5em;
}
.apps-text {
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.apps-text span {
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
text-decoration: none!important;
}
.apps-text span:nth-child(2n) {
color: var(--color-secondary);
font-size: 0.8em;
text-transform: lowercase;
}
/* BOOKMARKS */
#links-container {
display: grid;
flex-wrap: nowrap;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}
.links-item {
line-height: 1.5rem;
margin-left: 1rem;
margin-bottom: 2em;
webkit-font-smoothing: antialiased;
}
.links-item a {
color: var(--color-primary);
display: block;
line-height: 2;
text-decoration: none;
padding-left: .5em;
-o-transition: padding .3s;
-ms-transition: padding .3s;
-moz-transition: padding .3s;
-webkit-transition: padding .3s;
transition: padding .3s;
}
.links-item a:hover {
color: var(--color-secondary);
padding-left: 1em;
}
/* MOBILE */
@media screen and (max-width: 1100px) {
#container {
width: 90%;
}
}
@media screen and (max-width: 858px) {
#apps-container {
grid-template-columns: 1fr 1fr 1fr;
width: 90vw;
}
#links-container {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 666px) {
#apps-container {
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-columns: 1fr 1fr;
width: 90vw;
}
#links-container{
display: grid;
flex-wrap: nowrap;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
}

@ -0,0 +1,65 @@
/*
* Wave Animation
* Stylesheet taken from Tobias' Wave Startpage concept
* Modified by YandolsZX
* Original source can be found here: https://github.com/Tobias-Schoch/startpage-wave
*/
.wave-container .wave{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100px;
background:url('wave.svg');
background-size:990px 100px;
background-repeat: repeat-x;
-webkit-filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .7));
filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .7));
}
.wave-container .wave.wave1{
animation:animate 30s linear infinite;
z-index:1000;
opacity:1;
animation-delay:0s;
bottom: 0;
}
.wave-container .wave.wave2{
animation:animate2 15s linear infinite;
z-index:999;
opacity:0.5;
animation-delay:-5s;
bottom: 10px;
}
.wave-container .wave.wave3{
animation:animate 30s linear infinite;
z-index:998;
opacity:0.2;
animation-delay:-2s;
bottom: 15px;
}
.wave-container .wave.wave4{
animation:animate2 5s linear infinite;
z-index:997;
opacity:0.7;
animation-delay:-5s;
bottom: 20px;
}
@keyframes animate{
0%{
background-position-x: 0;
}
100%{
background-position-x: 990px;
}
}
@keyframes animate2{
0%{
background-position-x: 0;
}
100%{
background-position-x: -990px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,60 @@
/*
* Startpage Background Script
* Script taken from TB-96's Evening Startpage project
* Modified by YandolsZX
* Original source can found here: https://github.com/TB-96/Evening-Startpage
*/
function startTime() {
var currentDate = new Date();
var hr = parseInt(currentDate.getHours());
var min = parseInt(currentDate.getMinutes());
//Add a zero in front of numbers<10
if (min < 10) {
min = "0" + min;
}
if (hr < 10) {
hr = "0" + hr;
}
document.getElementById("header-time").innerHTML = hr + ":" + min;
var dateOptions = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
}
var date = currentDate.toLocaleDateString("en-GB", dateOptions);
document.getElementById("header-date").innerHTML = date;
var time = setTimeout(function(){ startTime() }, 60000);
}
/*
const quotes = [
'Hello, world...',
'yeet',
'fuq'
];
document.getElementById("header-quote").innerText = quotes[
Math.floor(Math.random() * quotes.length)
];
*/
$(document).ready(function(){
$("#togglebookmarks").click(function(){
$("#hiddenbookmarks").toggle();
});
});
document.addEventListener('click', function (event) {
// If the clicked element doesn't have the right selector, bail
if (!event.target.matches('#link')) return;
// Otherwise, run your code...
document.body.style.opacity = 0;
}, false);
document.getElementById("container").addEventListener("DOMContentLoaded", startTime());

@ -0,0 +1,178 @@
<!doctype html>
<!--
*
* Yandols' Startpage
* Inspired by https://github.com/TB-96/Evening-Startpage and https://github.com/Tobias-Schoch/startpage-wave
* Uses additional scripts such as Unsplash Source for daily wallpaper change (https://source.unsplash.com/)
*
-->
<html>
<head>
<title>Startpage</title>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="180x180" href="./assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon-16x16.png">
<link rel="manifest" href="./assets/img/site.webmanifest">
<link rel="mask-icon" href="./assets/img/safari-pinned-tab.svg" color="#212121">
<link rel="shortcut icon" href="./assets/img/favicon.ico">
<meta name="msapplication-TileColor" content="#212121">
<meta name="msapplication-config" content="./assets/img/browserconfig.xml">
<meta name="theme-color" content="#212121">
<link type="text/css" rel="stylesheet" href="./assets/css/style.css" media="screen, projection"/>
<link type="text/css" rel="stylesheet" href="./assets/css/searcher.css" media="screen, projection"/>
<link type="text/css" rel="stylesheet" href="./assets/css/wave.css" media="screen, projection"/>
<script src="./assets/js/iconify.js" type="text/javascript"></script>
<script src="./assets/js/jquery.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<main id="container" class="fade">
<section id="header">
<h1 id="header-time">00:00</h1>
<h2 id="header-date">Retrieving Datetime</h2>
<form method="GET" action="http://www.google.com/search">
<input name="as_q" class="search-field" placeholder="Type here to search on Google" autofocus>
<button type="submit" class="search-submit" value="" style="fill: white"></button>
</form>
<div class="randompic"> </div>
</section>
<section id="apps">
<h3>> Mainstream Websites</h3>
<div id="apps-container">
<a id="link" class="apps-item" href="https://www.reddit.com/" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-reddit"></span>
</div>
<div class="apps-text">
<span>Reddit</span>
<span>reddit.com</span>
</div>
</a>
<a id="link" class="apps-item" href="https://twitter.com/" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-twitter"></span>
</div>
<div class="apps-text">
<span>Twitter</span>
<span>twitter.com</span>
</div>
</a>
<a id="link" class="apps-item" href="https://boards.4channel.org/" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-clover"></span>
</div>
<div class="apps-text">
<span>4chan</span>
<span>boards.4channel.org</span>
</div>
</a>
<a id="link" class="apps-item" href="https://store.steampowered.com/" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-steam"></span>
</div>
<div class="apps-text">
<span>Steam Store</span>
<span>store.steampowered.com</span>
</div>
</a>
<a id="link" class="apps-item" href="https://www.youtube.com/" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-youtube"></span>
</div>
<div class="apps-text">
<span>Youtube</span>
<span>youtube.com</span>
</div>
</a>
<a id="link" class="apps-item" href="https://www.twitch.tv/" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-twitch"></span>
</div>
<div class="apps-text">
<span>Twitch</span>
<span>twitch.tv</span>
</div>
</a>
<a id="link" class="apps-item" href="https://mail.google.com" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-gmail"></span>
</div>
<div class="apps-text">
<span>Gmail</span>
<span>gmail.com</span>
</div>
</a>
<a id="link" class="apps-item" href="https://github.com/" rel="noopener noreferrer">
<div class="apps-icon">
<span class="iconify icon" data-icon="mdi-github"></span>
</div>
<div class="apps-text">
<span>GitHub</span>
<span>github.com</span>
</div>
</a>
</div>
</section>
<section id="links">
<a id="togglebookmarks"><h3>> More Websites</h3></a>
<div id="links-container">
<div class="links-item">
<h4>Services by Yandols</h4>
<a id="link" href="https://imeji.yandols.xyz/">Imeji</a>
<a id="link" href="https://git.yandols.xyz/">GitArea</a>
<a id="link" href="https://bin.yandols.xyz/">YandBin</a>
</div>
<div class="links-item">
<h4>Stories & Comics Sites</h4>
<a id="link" href="https://www.webnovel.com/" rel="noopener noreferrer">Webnovel</a>
<a id="link" href="https://tapas.io/" rel="noopener noreferrer">Tapastic</a>
<a id="link" href="https://www.webtoons.com/en/" rel="noopener noreferrer">LINE Webtoons</a>
<a id="link" href="https://kemono.cafe/" rel="noopener noreferrer">Kemono Cafe</a>
<!-- <a id="link" href="https://studiokhimera.com/" rel="noopener noreferrer">Studio Khimera</a> -->
</div>
<div class="links-item">
<h4>Art Sites</h4>
<a id="link" href="https://deviantart.com/" rel="noopener noreferrer">DeviantArt</a>
<a id="link" href="https://pixiv.net/" rel="noopener noreferrer">Pixiv</a>
<a id="link" href="https://www.artstation.com/" rel="noopener noreferrer">Artstation</a>
<a id="link" href="https://cgsociety.org/" rel="noopener noreferrer">CGSociety</a>
</div>
<div class="links-item">
<h4>News Sites</h4>
<a id="link" href="https://news.google.com/" rel="noopener noreferrer">Google News</a>
<a id="link" href="https://www.thestar.co.uk/" rel="noopener noreferrer">The Star (UK)</a>
<a id="link" href="https://arstechnica.com/" rel="noopener noreferrer">Ars Technica</a>
<a id="link" href="https://lowyat.net/" rel="noopener noreferrer">Lowyat</a>
</div>
<div id="hiddenbookmarks" style="display: none;">
<div class="links-item">
<h4>Other Stuff</h4>
<a id="link" href="https://google.com/" rel="noopener noreferrer">Placeholder</a>
<a id="link" href="https://google.com/" rel="noopener noreferrer">Placeholder</a>
<a id="link" href="https://google.com/" rel="noopener noreferrer">Placeholder</a>
</div>
</div>
</div>
</section>
<section id="footer">
<h5></h5>
<h5>Any searches made are not logged, all queries are sent directly to Google.</h5>
<h5>Daily randomized backgrounds (when available) are provided for free by <a href="https://unsplash.com">Unsplash</a>.</h5>
<h5></h5>
<h5>Copyright © 2020 YandolsZX & Locaria Technologies.</h5>
</section>
</main>
<div class="wave-container">
<div class="wave wave1"></div>
<div class="wave wave2"></div>
<div class="wave wave3"></div>
<div class="wave wave4"></div>
</div>
<script src="./assets/js/script.js" type="text/javascript"></script>
</body>
</html>
Loading…
Cancel
Save