index.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<title>

			TODO by ddan9

		</title>

		<meta name="description" content="Simple TODO List Application">

		<meta name="keywords" content="Todo, TODO, List, TODO List, Web, Vue, Materialize, Simple, Simple TODO">

		<meta name="author" content="ddan9">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<meta name="color-scheme" content="light">

		<meta name="theme-color" content="teal">

		<meta http-equiv="content-type" content="text/html; charset=utf-8">

		<meta http-equiv="cache-control" content="private, max-age=3155760000">

		<meta http-equiv="pragma" content="private">

		<meta http-equiv="expires" content="Sun, 01 Jan 2122 00:00:01 GMT">

		<link rel="manifest" href="./manifest.json">

		<link rel="icon" type="image/png" href="https://img.icons8.com/stickers/100/000000/task.png">

		<link rel="stylesheet" hrep="./style.css">

		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">

		</script>

		<script src="https://code.jquery.com/jquery-3.2.1.min.js">

		</script>

		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0">

		</script>

		<style type="text/css">

			html {

				scroll-behavior: smooth;

			}

			.fade-enter-active {

				transition: opacity 0.2s;

			}

			.fade-leave-active {

				transition: opacity 0.5s;

			}

			.fade-enter, .fade-leave-to {

				opacity: 0;

			}

			.collection-background-transition {

				transition: background-color 0.2s ease;

			}

			.footer-tip-transition {

				transition: opacity 0.2s ease;

			}

		</style>

	</head>

	<body style="display: flex; min-height: 100vh; flex-direction: column; scroll-behavior: smooth">

		<div class="app" id="app" style="display: flex; min-height: 100vh; flex-direction: column; scroll-behavior: smooth">

			<app-loading v-bind:loadingshow="loadingShow">

			</app-loading>

			<app-unloader v-bind:unloadershow="unloaderShow">

			</app-unloader>

			<custom-navbar v-bind:search="search" v-bind:reload="reload">

			</custom-navbar>

			<main style="flex: 1 0 auto">

				<task-list v-bind:selectelement="selectElement" v-bind:dropdowninit="dropdownInitialize" v-bind:showswapbutton="showSwapButton" v-bind:swaptask="swapTask" v-bind:changefullname="changeFullName" v-bind:todos="this.todos" v-bind:date="dateNow" v-bind:fullname="fullName" v-bind:greetingtime="greetingTime" v-bind:removetask="removeTask" v-bind:edittask="editTask">

				</task-list>

				<form-task v-bind:addtask="addTask" v-bind:scrollfocused="scrollFocused" v-bind:todos="this.todos" v-bind:clear="clear" v-bind:cleartextarea="clearTextArea" v-bind:cleartextareabutton="clearTextAreaButton" v-bind:cleartextareastate="clearTextAreaState">

				</form-task>

				<float-button v-bind:todos="this.todos" v-bind:changestatement="changeStatement" v-bind:floatbuttonscroll="floatButtonScroll" v-bind:statement="this.statement">

				</float-button>

			</main>

			<custom-footer v-bind:checkconnection="checkConnection" v-bind:todos="this.todos" v-bind:date="dateNow" v-bind:currenttip="currentTip">

			</custom-footer>

		</div>

		<script type="text/javascript" src="./index.js">

		</script>

	</body>

</html>