Zomatree · February 22, 2022 22:57
diff --git a/homepage.html b/homepage.html
 <!DOCTYPE HTML>
 <html>
 <head>
    <meta charset='utf-8'>
    <title>Hello, Zomatree</title>
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
    <script>
        const transferToDDG = () => {
            let content = document.querySelector('input.searchField').value;
            window.open(`https://duckduckgo.com/?t=ffab&q=${content}`, '_self')
        }

        const postLoad = () => {
            const clockEle = document.querySelector('.clock');
            const docTitle = document.querySelector('title');

            const updateTime = () => {
                let now = new Date();
                let times = new Array(now.getHours(), now.getMinutes(), now.getSeconds());
                let newTimes = new Array();
                times.forEach(time => {newTimes.push(String(time).padStart(2, '0'))})
                clockEle.innerHTML = newTimes.join(':');

                let hour = now.getHours();
                let greetTime;
                if (hour < 12) {
                    greetTime = 'Morning';
                } else if (hour >= 12 && hour <=18) {
                    greetTime = 'Afternoon';
                } else {
                    greetTime = 'Evening';
                }
                docTitle.innerHTML = `Good ${greetTime}, Zomatree`;
            }

            const delegateSubmission = (event) => {
                if (event.keyCode == 13) {
                    transferToDDG();
                }
            }


            document.addEventListener('keydown', delegateSubmission);
            setInterval(updateTime, 1000);
            updateTime();
        }

        document.addEventListener('DOMContentLoaded', postLoad);
    </script>
    <style>
        :root {
            --bg: #1f2430;
            --fg: #cbccc6;
            --input-bg: #34455a;
            --submit-bg: #5ccfe6;
            --submit-fg: #101521;
            --submit-bg-hover: #73d0ff;
            --links-colour-right: #8fbcbb;
            --links-colour-left: #88c0d0;
        }

        * {
            font-family: monospace;
        }

        body {
            background-color: var(--bg);
        }

        #container {
            position: absolute;
            top: 50%;
            margin-top: -100px;
            left: 0;
            width: 100%;
        }

        #content {
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            height: 195px;
            text-align: center;
        }

        #content input {
            position: relative;
            background-color: var(--input-bg);
            border: none;
            color: var(--fg);
            height: 50px;
            width: 77%;
            text-align: center;
            font-size: 20px;
            border-radius: 5px;
        }

        #content button {
            background-color: var(--submit-bg);
            border: none;
            color: var(--submit-fg);
            height: 52px;
            width: 100px;
            font-size: 20px;
            text-align: center;
            border-radius: 5px;
        }

        #content button:hover {
            cursor: pointer;
            background-color: var(--submit-bg-hover);
        }

        #content button:active {
            box-shadow: none;
            transform: translate(1px, 1px);
        }

        #content .clock {
            color: var(--fg);
            text-align: right;
            font-size: 50px;
            position: absolute;
            bottom: 85%;
        }

        table.quickLinks {
            color: var(--fg);
            width: 100%;
            height: 75%;
        }

        table.quickLinks a {
            text-decoration: none;
            font-weight: bold;
        }

        .aLeft {
            color: var(--links-colour-left);
        }

        .aRight {
            color: var(--links-colour-right);
        }
    </style>
 </head>
 <body>
 <div id='container'>
    <div id='content'>
        <h1 class='clock'>00:00:00</h1>
        <input type='text' class='searchField' placeholder='Search with DuckDuckGo' autofocus>
        <button type='submit' onclick='transferToDDG();'>Go!</button>
        <table class='quickLinks'>
            <tr>
                <td><a class='aLeft' target='_blank' href='https://github.com/'>Github</a></td>
                <td><a class='aRight' target='_blank' href='https://youtube.com'>OurTube</a></td>
            </tr>
            <tr>
                <td><a class='aLeft' target='_blank' href='https://anilist.co/user/zomatree/'>AniList</a></td>
                <td><a class='aRight' target='_blank' href='https://twitch.tv'>Twitch</a></td>
            </tr>
        </table>
    </div>
 </div>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>Hello, Zomatree</title>
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
	<script>
	const transferToDDG = () => {
	let content = document.querySelector('input.searchField').value;
	window.open(`https://duckduckgo.com/?t=ffab&q=${content}`, '_self')
	}

	const postLoad = () => {
	const clockEle = document.querySelector('.clock');
	const docTitle = document.querySelector('title');

	const updateTime = () => {
	let now = new Date();
	let times = new Array(now.getHours(), now.getMinutes(), now.getSeconds());
	let newTimes = new Array();
	times.forEach(time => {newTimes.push(String(time).padStart(2, '0'))})
	clockEle.innerHTML = newTimes.join(':');

	let hour = now.getHours();
	let greetTime;
	if (hour < 12) {
	greetTime = 'Morning';
	} else if (hour >= 12 && hour <=18) {
	greetTime = 'Afternoon';
	} else {
	greetTime = 'Evening';
	}
	docTitle.innerHTML = `Good ${greetTime}, Zomatree`;
	}

	const delegateSubmission = (event) => {
	if (event.keyCode == 13) {
	transferToDDG();
	}
	}


	document.addEventListener('keydown', delegateSubmission);
	setInterval(updateTime, 1000);
	updateTime();
	}

	document.addEventListener('DOMContentLoaded', postLoad);
	</script>
	<style>
	:root {
	--bg: #1f2430;
	--fg: #cbccc6;
	--input-bg: #34455a;
	--submit-bg: #5ccfe6;
	--submit-fg: #101521;
	--submit-bg-hover: #73d0ff;
	--links-colour-right: #8fbcbb;
	--links-colour-left: #88c0d0;
	}

	* {
	font-family: monospace;
	}

	body {
	background-color: var(--bg);
	}

	#container {
	position: absolute;
	top: 50%;
	margin-top: -100px;
	left: 0;
	width: 100%;
	}

	#content {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	height: 195px;
	text-align: center;
	}

	#content input {
	position: relative;
	background-color: var(--input-bg);
	border: none;
	color: var(--fg);
	height: 50px;
	width: 77%;
	text-align: center;
	font-size: 20px;
	border-radius: 5px;
	}

	#content button {
	background-color: var(--submit-bg);
	border: none;
	color: var(--submit-fg);
	height: 52px;
	width: 100px;
	font-size: 20px;
	text-align: center;
	border-radius: 5px;
	}

	#content button:hover {
	cursor: pointer;
	background-color: var(--submit-bg-hover);
	}

	#content button:active {
	box-shadow: none;
	transform: translate(1px, 1px);
	}

	#content .clock {
	color: var(--fg);
	text-align: right;
	font-size: 50px;
	position: absolute;
	bottom: 85%;
	}

	table.quickLinks {
	color: var(--fg);
	width: 100%;
	height: 75%;
	}

	table.quickLinks a {
	text-decoration: none;
	font-weight: bold;
	}

	.aLeft {
	color: var(--links-colour-left);
	}

	.aRight {
	color: var(--links-colour-right);
	}
	</style>
	</head>
	<body>
	<div id='container'>
	<div id='content'>
	<h1 class='clock'>00:00:00</h1>
	<input type='text' class='searchField' placeholder='Search with DuckDuckGo' autofocus>
	<button type='submit' onclick='transferToDDG();'>Go!</button>
	<table class='quickLinks'>
	<tr>
	<td><a class='aLeft' target='_blank' href='https://github.com/'>Github</a></td>
	<td><a class='aRight' target='_blank' href='https://youtube.com'>OurTube</a></td>
	</tr>
	<tr>
	<td><a class='aLeft' target='_blank' href='https://anilist.co/user/zomatree/'>AniList</a></td>
	<td><a class='aRight' target='_blank' href='https://twitch.tv'>Twitch</a></td>
	</tr>
	</table>
	</div>
	</div>
	</body>
	</html>