Implement file filtering

2022-04-09 18:40:43 +02:00
parent 764b6a4653
commit e889bccb06
2 changed files with 48 additions and 4 deletions
--- a/header.html
+++ b/header.html
@@ -32,6 +32,13 @@
 			h1 {
 				text-align: center
 			}
+			summary {
+				text-align: center;
+			}
+			#search-container hr {
+				margin-top: 10px;
+				margin-bottom: 20px;
+			}
 		</style>
 	</head>
 	<body data-theme="dark">
@@ -233,5 +240,14 @@
 		</div>
 		<div class="wrapper">
 			<main class="page-content">
+				<div id="search-container" hidden>
+					<hr />
+					<div class="search-article">
+						<label for="search-input" aria-hidden="true">
+							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(128,128,128,0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+						</label>
+						<input type="search" id="search-input" placeholder="Filter the files" aria-label="Search">
+					</div>
+				</div>
 				<h1 id="directory" class="center">