Add project link to header

madelson · May 26, 2024 · 8a50fb4 · 8a50fb4
1 parent 9c8f307
commit 8a50fb4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 12 deletions.
diff --git a/gallery/gallery.css b/gallery/gallery.css
@@ -3,6 +3,50 @@ body {
 	margin: 0;
 	padding: 0;
 }
+
+header {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-bottom: 2px solid #ccc;
+}
+
+.header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.header-top h1 {
+    margin: 0;
+    font-size: 24px;
+}
+
+.header-top .project-link {
+    font-size: 16px;
+    text-decoration: none;
+    color: #007bff;
+}
+
+.header-bottom {
+    display: flex;
+    align-items: center;
+}
+
+.header-bottom input[type="text"] {
+    padding: 5px;
+    font-size: 16px;
+    margin-right: 10px;
+}
+
+.header-bottom label {
+    font-size: 16px;
+}
+
+.header-bottom input[type="checkbox"] {
+    margin-right: 5px;
+}
+
 .container {
 	max-width: 1200px;
 	margin: 20px auto;
@@ -11,6 +55,7 @@ body {
 .search-box {
 	margin-bottom: 20px;
 }
+
 .card-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

diff --git a/gallery/gallery.js b/gallery/gallery.js
@@ -7,19 +7,31 @@ const state = reactive({
 	showAllUniversesBeyondCards: false
 });
 
-html`<div class="container">
-	<div class="search-box">
-		<input type="text" @input="${e => state.searchTerm = e.target.value}" placeholder="Search..." />
-		<div class="show-universes-beyond-container">
-			<input type="checkbox" id="show-universes-beyond-checkbox" @change="${e => state.showAllUniversesBeyondCards = !!e.target.checked}" />
-			<label for="show-universes-beyond-checkbox">Show all Universes Beyond cards</label>
-		</div>
+html`
+<header>
+	<div class="header-top">
+		<h1>Universes Within Collection - Card Gallery</h1>
+		<a href="https://github.com/madelson/universes-within-collection" target="_blank" class="project-link">Project Site</a>
+	</div>
+	<div class="header-bottom">
+		<input type="text" 
+			@input="${e => state.searchTerm = e.target.value}"
+			placeholder="Search...">
+		<label>
+			<input type="checkbox" 
+				id="show-universes-beyond-checkbox"
+				@change="${e => state.showAllUniversesBeyondCards = !!e.target.checked}"> Show all Universes Beyond cards
+		</label>
 	</div>
+</header>
+<div class="container">
 	<div class="card-grid">
 		${() => getCards().map(cardTemplate)}
 	</div>
-	<div><br/><center><small><em>UWC card images are free to use as proxies. Usage of non-Magic art on UWC cards is done with permission from the Artist.</em></small></center></div>
-</div>`(document.getElementById('app'));
+	<div>
+		<br/><center><small><em>UWC card images are free to use as proxies. Usage of non-Magic art on UWC cards is done with permission from the Artist.</em></small></center>
+	</div>
+</div>`(document.body);
 
 function cardTemplate(card) {
 	return html`<div class="card">

diff --git a/index.html b/index.html
@@ -5,11 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Universes Within Collection - Card Gallery</title>
 	<link rel="stylesheet" href="./gallery/gallery.css">
-</head>
-<body>
-    <div id="app" />
 	<script type="module">
 		import './gallery/gallery.js';
 	</script>
+</head>
+<body>
 </body>
 </html>