index.html

<!doctype html>
<html lang="en">
<head>
    <!--
        mission:
        custom local Edge home page for calm, fast daily launching.

        main actions:
        - shows a greeting based on the computer's local time
        - shows a random work-mode subtitle on each page load
        - provides separate Google and Google Norge search bars
        - groups links into simple categories
        - uses a muted low-contrast palette that stays comfortable in light mode
        - stays fully static so it works directly from a local file path
    -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>home</title>

    <style>
        :root {
            /* source palette */
            --ink: #181322;
            --bark: #4b372c;
            --brick: #a2423a;
            --parchment: #cdc1a7;

            /* warm parchment base */
            --background: var(--parchment);
            --background-glow: color-mix(
                in srgb,
                var(--parchment) 78%,
                var(--brick) 22%
            );

            /* earthy layered surfaces */
            --panel: color-mix(
                in srgb,
                var(--parchment) 84%,
                var(--bark) 16%
            );
            --panel-soft: color-mix(
                in srgb,
                var(--parchment) 68%,
                var(--bark) 32%
            );
            --panel-hover: color-mix(
                in srgb,
                var(--parchment) 58%,
                var(--brick) 42%
            );

            /* dark text and warm secondary text */
            --text: var(--ink);
            --muted: var(--bark);

            /* brick-red controls with dark hover */
            --accent: var(--brick);
            --accent-hover: var(--ink);

            /* warm brown separators */
            --border: color-mix(
                in srgb,
                var(--bark) 62%,
                var(--parchment) 38%
            );

            --button-text: var(--parchment);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background: var(--background);
            color: var(--text);
            font-family: system-ui, "Segoe UI", sans-serif;
        }

        main {
            width: min(1050px, calc(100vw - 32px));
            margin: 0 auto;
            padding: 30px 0;
        }

        h1 {
            margin: 0 0 7px;
            font-size: clamp(1.45rem, 2.5vw, 2rem);
            font-weight: 650;
            letter-spacing: -0.025em;
        }

        .subtitle {
            margin: 0 0 26px;
            color: var(--muted);
            font-size: 0.95rem;
        }

        .searches {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 12px;
            margin-bottom: 26px;
        }

        form {
            display: flex;
            gap: 9px;
            padding: 10px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 15px;
        }

        input {
            min-width: 0;
            flex: 1;
            padding: 11px 13px;
            border: 1px solid var(--border);
            border-radius: 11px;
            background: var(--background);
            color: var(--text);
            font: inherit;
            outline: none;
        }

        input::placeholder {
            color: var(--muted);
        }

        input:focus {
            border-color: var(--accent);
        }

        button {
            padding: 11px 15px;
            border: 1px solid var(--accent);
            border-radius: 11px;
            background: var(--accent);
            color: var(--button-text);
            font: inherit;
            font-weight: 650;
            cursor: pointer;
        }

        button:hover {
            background: var(--accent-hover);
        }

        button:focus-visible,
        a:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .categories {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 13px;
        }

        .category {
            padding: 15px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 17px;
        }

        h2 {
            margin: 0 0 11px;
            color: var(--muted);
            font-size: 0.9rem;
            font-weight: 650;
            text-transform: lowercase;
        }

        .links {
            display: grid;
            gap: 8px;
        }

        a {
            display: block;
            padding: 11px 13px;
            border: 1px solid transparent;
            border-radius: 11px;
            background: var(--panel-soft);
            color: var(--text);
            text-decoration: none;
        }

        a:hover {
            background: var(--panel-hover);
            border-color: var(--accent);
        }
    </style>
</head>

<body>
    <main>
        <h1 id="greeting">hello, nroJ</h1>
        <p id="subtitle" class="subtitle">start creating.</p>

        <section class="searches" aria-label="search">
            <form action="https://www.google.com/search" method="get">
                <input
                    name="q"
                    type="search"
                    placeholder="search Google..."
                    autofocus
                >
                <button type="submit">World</button>
            </form>

            <form action="https://www.google.no/search" method="get">
                <!-- pushes results toward norway and norwegian language. -->
                <input type="hidden" name="gl" value="NO">
                <input type="hidden" name="hl" value="no">

                <input
                    name="q"
                    type="search"
                    placeholder="søk på Google Norge..."
                >
                <button type="submit">Norge</button>
            </form>
        </section>

        <section class="categories" aria-label="quick links">
            <section class="category">
                <h2>news</h2>

                <div class="links">
                    <a href="https://www.nrk.no">NRK</a>
                    <a href="https://www.abcnyheter.no">ABC Nyheter</a>
                    <a href="https://www3.nhk.or.jp/news/easy/">NHK News Easy</a>
                    <a href="https://matcha-jp.com/easy">MATCHA</a>
                    <a href="https://japanese.todaiinews.com/en">Todaii News</a>
                </div>
            </section>

            <section class="category">
                <h2>code</h2>

                <div class="links">
                    <a href="https://chatgpt.com">ChatGPT</a>
                    <a href="https://github.com/nroj95?tab=repositories">GitHub</a>
                    <a href="https://tutorialreference.com/#tutorials">Tutorial Reference</a>
                    <a href="https://regex101.com/">Regex 101</a>
                    <a href="https://stackoverflow.com">Stack Overflow</a>
                </div>
            </section>

            <section class="category">
                <h2>daily tools</h2>

                <div class="links">
                    <a href="https://www.yr.no/nb/s%C3%B8k?q=ulsteinvik">Yr</a>
                    <a href="https://min.happybytes.no">HappyBytes</a>
                    <a href="https://www.dropbox.com/home">Dropbox</a>
                    <a href="https://jisho.org">Jisho</a>
                    <a href="https://cloudconvert.com">CloudConvert</a>
                </div>
            </section>

            <section class="category">
                <h2>learning</h2>

                <div class="links">
                    <a href="https://www.wanikani.com/dashboard">WaniKani</a>
                    <a href="https://mimo.org">Mimo</a>
                    <a href="https://www.satorireader.com/series">Satori Reader</a>
                    <a href="https://www.ctrlpaint.com/library">CtrlPaint Library</a>
                </div>
            </section>
        </section>
    </main>

    <script>
        const greeting = document.getElementById("greeting");
        const subtitle = document.getElementById("subtitle");

        const currentHour = new Date().getHours();

        const greetings = [
            "midnight plans?",
            "still awake, nroJ?",
            "one more idea?",
            "deep night thoughts?",
            "almost dawn already?",
            "awake this early?",
            "early mission, nroJ?",
            "ready to begin?",
            "good morning, nroJ",
            "what’s first?",
            "making something cool?",
            "nearly noon already?",
            "midday momentum?",
            "ready for round two?",
            "good afternoon, nroJ",
            "what’s the next move?",
            "one more push?",
            "made something good?",
            "evening adventure?",
            "good evening, nroJ",
            "something fun tonight?",
            "got another idea?",
            "winding down, nroJ?",
            "one last adventure?"
        ];

        const subtitles = [
            "happiness is to love; strength is the mind in control; health is to breathe",
            "no matter how perfect or flawed you are, there will always be people that hate you.",
            "words, conventions, obligations, rules, authority. let them stay tools, not masters.",
            "stop restarting. start adapting. start creating.",
            "it’s not about the cards you’ve got — it’s how you use them",
            "the first step to being perfect is realizing you already are",
            "no one’s perfect — and that’s perfect",
            "don’t tell them the way — show them the way",
            "break the wall — do it all",
            "you know what a happy person needs? nothing — because they’re already happy",
            "who cares if you fail — if you’re already happy?",
            "breathe, motherf*cker!",
            "happy, strong, and healthy — the rest is bullsh*t",
            "there’s more than meets the eye",
            "if you’ve got guts, you can do anything",
            "be the one who moves forward — no matter how dirty you get",
            "your only limits are the ones you set on yourself",
            "big risks lead to great rewards",
            "truth? meaning? just words.",
            "don’t analyze everything — just feel. just be.",
            "the breath is everything",
            "comfort is boring. happiness is flat; suffering shapes the soul.",
            "it’s not about motivation — it’s about love",
            "love, love, love — again and again and again ❤️"
        ];

        greeting.textContent = greetings[currentHour];

        subtitle.textContent =
            subtitles[Math.floor(Math.random() * subtitles.length)];
    </script>
</body>
</html>