kiwec
/
osu-ranked-lobbies



123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ranked lobbies for osu!</title>
    <link rel="stylesheet" href="/styles.min.css?v=4">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <script defer src="/twemoji.min.js"></script>
    <script defer src="/base.js?v=2"></script>
  </head>
  <body class="bg-zinc-800">
    <header class="h-16 bg-zinc-900">
      <nav class="flex max-w-5xl m-auto p-1">
        <div>
          <a class="opacity-75 hover:opacity-100" href="/faq/">
            <img class="p-1 h-14" src="/images/o!RL-logo.png" />
          </a>
        </div>
        <div class="flex-auto self-center text-center">
          <a class="p-1 opacity-75 hover:opacity-100" href="/lobbies/">
            <span class="text-2xl">Lobbies</span>
          </a>
          <i class="border opacity-75 ml-1 mr-2"> </i>
          <a class="p-1 opacity-75 hover:opacity-100" href="/leaderboard/">
            <span class="text-2xl">Leaderboard</span>
          </a>
        </div>
        <div class="max-sm:absolute max-sm:top-16 max-sm:right-2 flex self-center">
          <a class="p-2 opacity-75 hover:opacity-100" href="https://kiwec.net/discord">
            <img class="h-8" src="/images/discord.png" />
          </a>
          <div class="relative">
            <button id="toggle-rulesets-dropdown-btn" class="p-2 opacity-75 hover:opacity-100">
              <img class="h-8" src="/images/mode-osu.png" />
            </button>
            <div id="rulesets-dropdown" class="absolute hidden z-10 mt-4 -ml-12 bg-zinc-700 rounded-md">
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="osu">
                <img class="h-8" src="/images/mode-osu.png" />
                <span class="px-2 leading-7">osu!</span>
              </button>
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="taiko">
                <img class="h-8" src="/images/mode-taiko.png" />
                <span class="px-2 leading-7">osu!taiko</span>
              </button>
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="catch">
                <img class="h-8" src="/images/mode-catch.png" />
                <span class="px-2 leading-7">osu!catch</span>
              </button>
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="mania">
                <img class="h-8" src="/images/mode-mania.png" />
                <span class="px-2 leading-7">osu!mania</span>
              </button>
            </div>
          </div>

          <a class="login-btn p-2 opacity-75 hover:opacity-100" href="/me/">
            <img class="h-8 rounded-full" src="/images/login.png" />
          </a>
        </div>
      </nav>
    </header>

    <main class="p-8 max-sm:pt-16">
      <%~ it.body %>
    </main>

    <footer class="p-4 text-center m-auto">o!rl is a hobby project and is not affiliated with <a href="https://osu.ppy.sh/" target="_blank">osu!</a>.</footer>
  </body>
</html>