In meiner Freizeit habe ich eine personalisierte Startseite für den Browser entwickelt, die mir hilft, effizienter und fokussierter zu arbeiten. Die Seite ermöglicht mir schnellen Zugriff auf meine am häufigsten genutzten Webseiten und vermeidet unerwünschte Werbung, was bei fertigen Lösungen oft ein Problem darstellt. Mit meiner eigenen Schnellwahl habe ich die volle Kontrolle über die Inhalte und das Design. Die Startseite bietet große, bebilderte Schaltflächen, eine integrierte Google-Suche und einen Slider, der zwischen Freizeit- und Produktivitätsmodus umschaltet, um Ablenkungen während der Arbeit zu minimieren. Für die Entwicklung habe ich HTML, CSS und JavaScript verwendet, was mir ermöglichte, eine benutzerfreundliche und ansprechende Oberfläche zu schaffen.
Während der Entwicklung habe ich gelernt, was notwendig ist, um ein einfaches, aber funktionierendes Produkt zu entwickeln und wie man verschiedene Komponenten kombiniert, um die gewünschten Funktionen zu realisieren. Seit über drei Jahren nutze ich diese Startseite täglich und habe festgestellt, dass sie meine Produktivität steigert. Das letzte größere Update, bei dem der Slider für den Wechsel zwischen den Modi hinzugefügt wurde, hat die Seite noch nützlicher gemacht. Jetzt kann ich Ablenkungen noch gezielter vermeiden und mich besser auf meine Aufgaben konzentrieren.
< Ordnerstruktur />
Schnellwahl
│
│ datum.html
│ index.html
│
│ ─── bilder
│ 127001.png
│ amazon.png
│ dev.png
│ ebay.png
│ ebaykl.png
│ favicon.png
│ gearth.png
│ gfn.png
│ gmail.png
│ gmaps.png
│ gpt.png
│ gtranslate.png
│ insta.png
│ netflix.png
│ ntv.png
│ onedrive.png
│ rb.png
│ twitter.png
│ udemy.png
│ xing.png
│ yahoo.png
│ youtube.png
│
│ ─── css
│ datum.css
│ style.css
< index.html />
<!doctype html>
<!-- Browser Linksammlung -->
<html lang="de">
<head>
<meta name="robots" content="noindex">
<meta charset="UTF-8">
<meta name="author" content="Manuel Kilzer" />
<meta name="copyright" content="Manuel Kilzer" />
<link rel="icon" type="image/png" href="bilder/favicon.png">
<link rel="stylesheet" href="css/style.css">
<title>Schnellwahl</title>
</head>
<body>
<iframe id="datum" src="datum.html"></iframe> <!--Datum und Uhrzeit mit Javascript in iFrame-->
<input type="checkbox" id="slider" class="slider">
<label for="slider" class="slider-label">
<span class="slider-ball"></span>
</label>
<div id="content-off">
<p>Freizeit</p>
</div>
<div id="content-on">
<p>Produktiv</p>
</div>
<div id="google_div">
<form class="google_form" method="get" action="http://www.google.de/search" target="_blank">
<input id="google_textfeld" onfocus="this.value=''" name="q" type="text" size="60" maxlength="255"/>
<input id="google_button" type="submit" value="Google Suche"/>
</form>
</div>
<div class="links_div">
<a class="link freizeit" href="https://www.youtube.com" target="_blank"><img src="bilder/youtube.png" class="link_image"/></a>
<a class="link freizeit" href="https://www.netflix.com/de/" target="_blank"><img src="bilder/netflix.png" class="link_image"/></a>
<a class="link freizeit" href="https://www.amazon.de" target="_blank"><img src="bilder/amazon.png" class="link_image"/></a>
<a class="link freizeit" href="https://www.ebay.de" target="_blank"><img src="bilder/ebay.png" class="link_image"/></a>
<a class="link freizeit" href="https://www.kleinanzeigen.de" target="_blank"><img src="bilder/ebaykl.png" class="link_image"/></a>
<a class="link" href="https://onedrive.live.com" target="_blank"><img src="bilder/onedrive.png" class="link_image"/></a>
<a class="link" href="https://mail.google.com" target="_blank"><img src="bilder/gmail.png" class="link_image"/></a>
<a class="link" href="https://de.yahoo.com" target="_blank"><img src="bilder/yahoo.png" class="link_image"/></a>
<a class="link" href="https://translate.google.com/?hl=de" target="_blank"><img src="bilder/gtranslate.png" class="link_image"/></a>
<a class="link freizeit" href="https://www.n-tv.de" target="_blank"><img src="bilder/ntv.png" class="link_image"/></a>
<a class="link" href="https://chat.openai.com/chat" target="_blank"><img src="bilder/gpt.png" class="link_image"/></a>
<a class="link freizeit" href="https://twitter.com" target="_blank"><img src="bilder/twitter.png" class="link_image"/></a>
<a class="link freizeit" href="https://www.instagram.com" target="_blank"><img src="bilder/insta.png" class="link_image"/></a>
<a class="link" href="https://www.google.de/maps" target="_blank"><img src="bilder/gmaps.png" class="link_image"/></a>
<a class="link" href="https://earth.google.com/web/" target="_blank"><img src="bilder/gearth.png" class="link_image"/></a>
<a class="link arbeit" href="http://127.0.0.1:8000" target="_blank"><img src="bilder/127001.png" class="link_image"/></a>
<a class="link arbeit" href="https://www.udemy.com" target="_blank"><img src="bilder/udemy.png" class="link_image"/></a>
<a class="link freizeit" href="https://www.redbubble.com" target="_blank"><img src="bilder/rb.png" class="link_image"/></a>
<a class="link arbeit" href="https://lernplattform.gfn.de" target="_blank"><img src="bilder/gfn.png" class="link_image"/></a>
<a class="link arbeit" href="https://www.xing.com/" target="_blank"><img src="bilder/xing.png" class="link_image"/></a>
<a class="link" href="https://www.kilzer.dev" target="_blank"><img src="bilder/dev.png" class="link_image"/></a>
<!-- <a class="link" href="http://www." target="_blank"><img src="bilder/.png" class="link_image"/></a> -->
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const slider = document.getElementById("slider");
const contentOn = document.getElementById("content-on");
const contentOff = document.getElementById("content-off");
const free_elements = document.getElementsByClassName("freizeit");
const work_elements = document.getElementsByClassName("arbeit");
const body = document.body;
slider.addEventListener("change", function() {
if (slider.checked) {
contentOn.style.display = "block";
contentOff.style.display = "none";
for (let i = 0; i < free_elements.length; i++) {
let f_element = free_elements[i];
f_element.style.display = "none"
}
for (let i = 0; i < work_elements.length; i++) {
let w_element = work_elements[i];
w_element.style.display = "inline-block"
}
body.style.background = 'linear-gradient(165deg, rgba(0,1,1,1) 3%, rgba(29,253,235,1) 50%, rgba(252,176,69,1) 97%)';
} else {
contentOn.style.display = "none";
contentOff.style.display = "block";
for (let i = 0; i < free_elements.length; i++) {
let f_element = free_elements[i];
f_element.style.display = "inline-block"
}
for (let i = 0; i < work_elements.length; i++) {
let w_element = work_elements[i];
w_element.style.display = "none"
}
body.style.background = 'linear-gradient(165deg, rgba(0,1,1,1) 3%, rgba(166,25,6,1) 50%, rgba(158,106,33,1) 97%)';
}
});
if (slider.checked) {
contentOn.style.display = "block";
contentOff.style.display = "none";
} else {
contentOn.style.display = "none";
contentOff.style.display = "block";
for (let i = 0; i < free_elements.length; i++) {
let f_element = free_elements[i];
f_element.style.display = "inline-block"
}
for (let i = 0; i < work_elements.length; i++) {
let w_element = work_elements[i];
w_element.style.display = "none"
}
body.style.background = 'linear-gradient(165deg, rgba(0,1,1,1) 3%, rgba(166,25,6,1) 50%, rgba(158,106,33,1) 97%)';
}
});
</script>
<br>
<br>
</body>
</html>
^^
< datum.html />
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="Refresh" content="20; url=datum.html" />
<meta charset="UTF-8">
<title>Datum</title>
<link rel="stylesheet" href="css/datum.css">
</head>
<body>
<p id="datum">
<script type="text/javascript">
var now = new Date();
var hour_raw = now.getHours();
var minute_raw = now.getMinutes();
if (hour_raw < 10) {
var hour = "0" + hour_raw;
}
else {
var hour = hour_raw;
}
if (minute_raw < 10) {
var minute = "0" + minute_raw;
}
else {
var minute = minute_raw;
}
document.write(now.getDate(),'.',now.getMonth()+1,'.',now.getFullYear(),'<br>');
document.write(hour,':',minute,' Uhr');
</script>
</p>
</body>
</html>
^^
< style.css />
* {
padding: 0;
margin: 0;
}
body {
background-color: black;
height: 100%;
min-height: 100vh;
background-size: cover;
}
#datum {
height: 35px;
border: 0px;
border-color: white;
border-style: solid;
margin-top: 10px;
margin-left: 10px;
}
#google_div {
width: 800px;
margin: auto;
}
.google_form {
margin-top: 70px;
margin-left: 35px;
}
#google_textfeld {
font-family: arial;
font-size: 12pt;
font-weight: bold;
padding: 10px 18px;
box-sizing: border-box;
border: 0px;
border-radius: 6px;
}
#google_button {
margin-left: 4px;
height: 38px;
width: 125px;
background-color: black;
font-family: arial;
font-size: 12pt;
font-weight: bold;
color: white;
border: 1px;
border-style: solid;
border-color: white;
border-radius: 6px;
}
.links_div {
margin-top: 60px;
margin-left: 120px;
margin-right: 120px;
}
.link {
margin: 8px;
display: inline-block;
}
.link_image {
height: 150px;
border: 0px;
border-style: solid;
border-radius: 18px;
box-shadow: 3px 3px 7px black;
}
.slider {
display: none;
}
.slider-label {
display: block;
width: 72px;
height: 34px;
background-color: #a61906;
border-radius: 34px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 7px;
margin-left: 10px;
}
.slider-ball {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
transition: transform 0.3s;
}
.slider:checked + .slider-label {
background-color: #1dfdea;
}
.slider:checked + .slider-label .slider-ball {
transform: translateX(38px);
background-color: #fff;
}
p {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
margin-top: 7px;
margin-left: 10px;
}
#content-off p{
color: #a61906;
}
#content-on p {
color: #1dfdea;
}
^^
< datum.css />
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
#datum {
color: lightgrey;
font-family: arial;
}
Demo
^^