<!-- SPDX-License-Identifier: Apache-2.0 OR MIT -->
<!doctype html>
<html lang="en-GB">

<head>
    <meta charset="utf-8">
    <title>Kaishi Language Selector</title>
    <meta content="jane.doe@kaishi.one (Jane Doe)" name="author">
    <meta content="Select your preferred language to explore Kaishi, a Static Site Generator starter template."
        name="description">
    <meta
        content="language selector, multilingual website, Kaishi, Static Site Generator, responsive design, choose language"
        name="keywords">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="ARIA" name="accessibility">
    <meta content="fullKeyboardControl" name="accessibility">
    <meta content="noFlashingHazard" name="accessibility">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
    <meta content="Kaishi Language Selector" name="apple-mobile-web-app-title">
    <meta
        content="default-src 'self'; script-src 'self' 'unsafe-inline' *.google-analytics.com https://cdn.jsdelivr.net unpkg.com www.googletagmanager.com x.clarity.ms; connect-src 'self' ws://localhost:* collect; img-src 'self' data: https: cloudcdn.pro; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' https://fonts.gstatic.com; media-src 'self';"
        http-equiv="Content-Security-Policy">
    <link href="https://kaishi.one" hreflang="en" rel="alternate">
    <link href="https://kaishi.one" rel="canonical">
    <link href="https://cloudcdn.pro/kaishi/v1/favicon.ico" rel="icon" type="image/x-icon">
    <link onload="this.onload=null;this.rel='stylesheet'" as="style" crossorigin
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" rel="preload">
    <link href="https://cloudcdn.pro/kaishi/v1/icons/192x192.png" rel="apple-touch-icon" sizes="192x192">
    <link href="/manifest.json" rel="manifest">
    <link href="/rss.xml" rel="alternate" type="application/rss+xml">
    <style>
        @keyframes dropDown {
            0% {
                transform: translateY(-0.618rem);
            }

            100% {
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .blur-light {
            backdrop-filter: saturate(180%) blur(20px);
            background-color: #ffffff9e;
        }

        .card {
            overflow: hidden;
        }

        .drop-down {
            animation: 1.618s dropDown;
        }

        .fade-in {
            animation: 3s fadeIn;
        }

        * {
            font-weight: 300;
        }

        pre {
            border: 1px solid #ddd;
            border-left: 3px solid var(--theme-color);
            color: #666;
            background: #f9f9f9;
            max-width: 100%;
            margin-bottom: 1.618em;
            padding: 1em 1.618em;
            font-family: monospace;
            font-size: 15px;
            line-height: 1.618;
            overflow: auto;
            display: block;
        }

        .zoom-in {
            transition: transform 0.618s cubic-bezier(0.618, 1, 0.618, 1);
        }

        .zoom-in:hover {
            transform: scale(1.0618);
        }

        .content .container {
            padding: 30px 20px;
            box-shadow: 2px 15px 20px #1f1f1f10, -2px -8px 20px #1f1f1f1a;
        }

        :root {
            --theme-color: #8ffa71;
        }

        a {
            color: var(--theme-color);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        strong {
            font-weight: 400;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--theme-color);
        }
        img{max-width:100%;height:auto;box-sizing: border-box;object-fit: cover;}
    </style>
</head>


<body class="text-center bg-black text-white text-start fs-6" id="page-top" itemscope
    itemtype="http://schema.org/WebPage">
    <nav class="navbar navbar-expand-lg bd-navbar navbar-dark bg-black text-white sticky-top shadow-small border-bottom border-black blur-dark shadow-lg"
        id="mainNav" itemscope itemtype="http://schema.org/SiteNavigationElement">
        <div class="container-xxl p-3">
            <a class="navbar-brand p-0 me-0 me-lg-2" aria-label="logo" href="/">
                <img alt="Logo of Kaishi, a starter template for static sites" class="d-inline-block align-top"
                    title="Logo of Kaishi, a starter template for static sites" height="33" loading="lazy"
                    src="https://cloudcdn.pro/kaishi/v1/logos/kaishi.svg" width="100">
            </a>
            <span itemprop="name">Kaishi</span>
            <button aria-label="Toggle navigation" aria-controls="navbarSupportedContent" aria-expanded="false"
                class="navbar-toggler" data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="text-uppercase p-2" title="Navigation link for the Contact page"
                            aria-label="Contact" href="/contact/index.html">Contact</a></li>
                    <li class="nav-item"><a class="text-uppercase p-2" title="Navigation link for the Features page"
                            aria-label="Features" href="/features/index.html">Features</a></li>
                    <li class="nav-item"><a class="text-uppercase p-2" title="Navigation link for the Post page"
                            aria-label="Post" href="/posts/index.html">Post</a></li>
                    <li class="nav-item"><a class="text-uppercase p-2" title="Navigation link for the Tags page"
                            aria-label="Tags" href="/tags/index.html">Tags</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <header class="w-100 position-relative">
        <img alt="MacBook Pro on white surface" class="fade-in position-absolute top-0 start-0 w-100 h-100"
            title="MacBook Pro on white surface" aria-hidden="false" data-has-animated="true" data-show-type="fade-in"
            height="398" loading="lazy"
            src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 398' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23166534'/><stop offset='1' stop-color='%2386efac'/></linearGradient></defs><rect width='1440' height='398' fill='url(%23g)'/></svg>"
            style="object-fit:cover;z-index:-1;" width="1440">
        <div class="text-center text-theme center mx-auto"
            style="z-index:1;background:#0000009e;width:100vw;height:100vh">
            <section class="position-absolute top-50 start-50 translate-middle w-75 p-5">
                <h1 class="mb-3 fw-semibold text-white display-1 lh-1">Kaishi</h1>
                <p class="fs-4">Select Your Language to Explore Kaishi</p>
            </section>
        </div>
    </header>
    <main class="bd-masthead fs-5 p-5" aria-label="main" id="main">
        <div class="text-start justify-content-between">
            <h2>Language Selector</h2>
            <p>Select your preferred language below to explore Kaishi, a Static Site Generator starter
                template.</p>
            <div class="locale-selector text-center d-flex flex-wrap justify-content-center">
{{LANGUAGE_LINKS}}
            </div>
        </div>
    </main>
    <footer class="footer bg-dark text-white mt-auto fs-6 py-5" aria-label="footer" id="footer">
        <p class="mb-0 text-center">
            <span class="px-2"><a href="/contact/index.html">Contact us</a></span>
            <span class="px-2"><a href="/privacy/index.html">Privacy notice and cookies</a></span>
            <span class="px-2"><a href="/terms/index.html">Terms of use</a></span>
        </p>
        <p class="mb-0 text-center py-2">
            <span class="px-2">Copyright © 2023-2025 Kaishi. All rights reserved.</span>
        </p>
    </footer>
    <script integrity="sha512-ToL6UYWePxjhDQKNioSi4AyJ5KkRxY+F1+Fi7Jgh0Hp5Kk2/s8FD7zusJDdonfe5B00Qw+B8taXxF6CFLnqNCw=="
        async crossorigin src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org/",
        "@type": "WebPage",
        "headline": "Kaishi Language Selector",
        "datePublished": "Wed, 01 Jan 2025 01:01:01 GMT",
        "dateModified": "Wed, 01 Jan 2025 01:01:01 GMT",
        "description": "Select your preferred language to explore Kaishi, a Static Site Generator starter template.",
        "image": {
          "@type": "ImageObject",
          "height": "2048",
          "width": "2048",
          "url": "https://cloudcdn.pro/kaishi/v1/logos/kaishi.svg"
        },
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": "https://kaishi.one",
          "name": "Kaishi Language Selector"
        },
        "author": "jane.doe@kaishi.one (Jane Doe)",
        "copyrightHolder": {
          "@type": "Person",
          "@id": "jane.doe@kaishi.one (Jane Doe)"
        },
        "copyrightYear": "2023-2025",
        "inLanguage": "en-GB",
        "name": "Kaishi",
        "publisher": {
          "@type": "Person",
          "@id": "jane.doe@kaishi.one (Jane Doe)"
        }
      }
    </script>
    <script>
        (function () {
            var a = document.createElement("script");
            a.src = "/main.js";
            a.type = "text/javascript";
            a.async = true;
            document.head.appendChild(a);
        })();
    </script>
</body>
</html>
