diff options
| -rw-r--r-- | templates/index.html | 66 |
1 files changed, 54 insertions, 12 deletions
diff --git a/templates/index.html b/templates/index.html index b6b3e20..3f60d33 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Games</title> + <title>LOC</title> <style> * { @@ -50,14 +50,22 @@ color: var(--cl-blue-6); } + .controls { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 12px; + margin-bottom: 20px; + } + .tabs { display: flex; flex-wrap: wrap; gap: 8px; - margin-bottom: 20px; } - .tab { + .tab, + .export-button { background: var(--cl-gray-2); color: var(--cl-white); border: 1px solid var(--cl-gray-4); @@ -67,7 +75,8 @@ transition: background 0.15s; } - .tab:hover { + .tab:hover, + .export-button:hover { background: var(--cl-gray-3); } @@ -77,6 +86,10 @@ font-weight: bold; } + .export-button { + color: var(--cl-yellow); + } + .table-container { overflow-x: auto; background: var(--cl-gray-1); @@ -163,16 +176,22 @@ <h1>LIST OF CONSIDERATIONS</h1> -<div id="tabs" class="tabs"> - <button class="tab active" onclick="filterCategory('all', this)"> - All - </button> +<div class="controls"> + <div id="tabs" class="tabs"> + <button class="tab active" onclick="filterCategory('all', this)"> + All + </button> - {% for type in games | map(attribute='type') | unique | sort %} - <button class="tab" onclick="filterCategory('{{ type }}', this)"> - {{ type }} + {% for type in games | map(attribute='type') | unique | sort %} + <button class="tab" onclick="filterCategory('{{ type }}', this)"> + {{ type }} + </button> + {% endfor %} + </div> + + <button class="export-button" onclick="exportRawHtml()"> + Export Raw HTML </button> - {% endfor %} </div> <div class="table-container"> @@ -333,6 +352,29 @@ function filterCategory(category, button) { button.classList.add("active"); } + +function exportRawHtml() { + const rawHtml = + "<!DOCTYPE html>\n" + + document.documentElement.outerHTML; + + const blob = new Blob( + [rawHtml], + { type: "text/html" } + ); + + const url = + URL.createObjectURL(blob); + + const link = + document.createElement("a"); + + link.href = url; + link.download = "list-of-considerations.html"; + link.click(); + + URL.revokeObjectURL(url); +} </script> </body> |