- Move word data from hardcoded seed.py to data/words.json - Expand from 210 words across 7 categories to 1014 words across 14 categories (animals, food, colors, sports, space, nature, music, science, countries, occupations, ocean, weather, mythology, technology) - Word list sidebar now shows title case (Tiger) while grid stays uppercase; text input remains case-insensitive - Add Ocean theme (light, blue accents) and Forest theme (dark, amber accents on deep green) - Replace hardcoded rgba values with --coral-bg CSS variable so selection highlighting adapts per theme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
91 lines
3.7 KiB
HTML
91 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Word Search{% end %}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
|
crossorigin="anonymous">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ static_url('css/theme.css') }}">
|
|
<script>
|
|
(function() {
|
|
var t = localStorage.getItem("ws-theme") || "indigo";
|
|
document.documentElement.setAttribute("data-theme", t);
|
|
document.documentElement.setAttribute("data-bs-theme", (t === "light" || t === "ocean") ? "light" : "dark");
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
{% block active_page %}{% end %}
|
|
|
|
<nav class="navbar navbar-expand-lg">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="bi bi-search"></i> Word Search
|
|
</a>
|
|
<button class="navbar-toggler" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'home' %}active{% end %}"
|
|
href="/">
|
|
<i class="bi bi-house-door"></i> Home
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'play' %}active{% end %}"
|
|
href="/game">
|
|
<i class="bi bi-controller"></i> Play
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'howtoplay' %}active{% end %}"
|
|
href="/howtoplay">
|
|
<i class="bi bi-question-circle"></i> How to Play
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'scoreboard' %}active{% end %}"
|
|
href="/scoreboard">
|
|
<i class="bi bi-trophy"></i> Scoreboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'about' %}active{% end %}"
|
|
href="/about">
|
|
<i class="bi bi-info-circle"></i> About
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<button id="theme-toggle" class="btn btn-sm btn-outline-secondary ms-2"
|
|
title="Switch theme">
|
|
<i class="bi bi-moon-stars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container py-4">
|
|
{% block content %}{% end %}
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
© 2026 Word Search
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
crossorigin="anonymous"></script>
|
|
<script src="{{ static_url('js/theme.js') }}"></script>
|
|
</body>
|
|
</html>
|