<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Repo Roulette — Discover GitHub Repositories</title>

  <style>
    :root {
      --bg: #222831;
      --panel: #2b323c;
      --panel-2: #393e46;
      --accent: #00adb5;
      --text: #eeeeee;
      --muted: #aab2bd;
      --border: rgba(255,255,255,0.08);
      --danger: #ff5c5c;
      --success: #42d392;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      background:
        radial-gradient(circle at top left, rgba(0,173,181,0.12), transparent 30%),
        var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    select,
    input {
      font: inherit;
    }

    .container {
      width: min(1180px, calc(100% - 32px));
      margin: auto;
    }

    /* Navbar */

    header {
      border-bottom: 1px solid var(--border);
      background: rgba(34,40,49,0.8);
      backdrop-filter: blur(15px);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      font-size: 20px;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      background: var(--accent);
      color: #111;
      border-radius: 12px;
      font-size: 20px;
    }

    .github-link {
      color: var(--muted);
      font-size: 14px;
      transition: .2s;
    }

    .github-link:hover {
      color: var(--text);
    }

    /* Hero */

    .hero {
      text-align: center;
      padding: 70px 0 35px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(0,173,181,0.1);
      border: 1px solid rgba(0,173,181,0.25);
      color: #5de4ea;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .hero h1 {
      font-size: clamp(40px, 7vw, 76px);
      line-height: 0.95;
      letter-spacing: -3px;
      max-width: 850px;
      margin: auto;
    }

    .hero h1 span {
      color: var(--accent);
    }

    .hero p {
      color: var(--muted);
      max-width: 650px;
      margin: 22px auto 0;
      line-height: 1.7;
      font-size: 16px;
    }

    /* Controls */

    .controls {
      background: rgba(57,62,70,.72);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 22px;
      margin: 20px auto;
    }

    .filter-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1.2fr;
      gap: 14px;
    }

    .field label {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 7px;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    select,
    input {
      width: 100%;
      height: 46px;
      border-radius: 11px;
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--text);
      padding: 0 13px;
      outline: none;
    }

    select:focus,
    input:focus {
      border-color: var(--accent);
    }

    .actions {
      display: flex;
      gap: 12px;
      margin-top: 17px;
    }

    .btn {
      border: 0;
      border-radius: 12px;
      height: 50px;
      padding: 0 22px;
      cursor: pointer;
      font-weight: 800;
      transition: .2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
    }

    .btn-primary {
      background: var(--accent);
      color: #071415;
      flex: 1;
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.07);
    }

    .btn-secondary {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      background: #323944;
    }

    /* Status */

    .status {
      min-height: 26px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      margin: 15px 0;
    }

    /* Repo Card */

    .repo-wrapper {
      padding: 25px 0 70px;
    }

    .repo-card {
      display: none;
      background: linear-gradient(
        145deg,
        rgba(57,62,70,.95),
        rgba(43,50,60,.95)
      );
      border: 1px solid var(--border);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 25px 70px rgba(0,0,0,.25);
    }

    .repo-top {
      padding: 28px;
      border-bottom: 1px solid var(--border);
    }

    .repo-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .repo-name {
      font-size: 29px;
      font-weight: 850;
      margin-bottom: 8px;
      word-break: break-word;
    }

    .repo-owner {
      color: var(--accent);
      font-size: 14px;
      font-weight: 700;
    }

    .repo-description {
      margin-top: 20px;
      color: #c7ccd2;
      line-height: 1.7;
      max-width: 900px;
    }

    .repo-body {
      padding: 28px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .stat {
      background: rgba(34,40,49,.6);
      border: 1px solid var(--border);
      padding: 18px;
      border-radius: 14px;
    }

    .stat-value {
      display: block;
      font-size: 22px;
      font-weight: 850;
      margin-bottom: 4px;
    }

    .stat-label {
      color: var(--muted);
      font-size: 12px;
    }

    .topics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
    }

    .topic {
      padding: 7px 10px;
      border-radius: 8px;
      background: rgba(0,173,181,.1);
      color: #62e4e9;
      font-size: 12px;
      border: 1px solid rgba(0,173,181,.2);
    }

    .repo-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      color: var(--muted);
      margin-top: 22px;
      font-size: 13px;
    }

    .repo-meta strong {
      color: var(--text);
    }

    .repo-actions {
      display: flex;
      gap: 10px;
      margin-top: 25px;
      flex-wrap: wrap;
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 11px 16px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--panel);
      cursor: pointer;
      color: var(--text);
      font-weight: 700;
      font-size: 13px;
      transition: .2s;
    }

    .action-btn:hover {
      background: #363e49;
    }

    .action-btn.primary {
      background: var(--accent);
      color: #081415;
      border-color: transparent;
    }

    /* Empty state */

    .empty {
      text-align: center;
      padding: 65px 20px;
      border: 1px dashed rgba(255,255,255,.14);
      border-radius: 22px;
      color: var(--muted);
    }

    .empty-icon {
      font-size: 52px;
      margin-bottom: 15px;
    }

    .empty h2 {
      color: var(--text);
      margin-bottom: 8px;
    }

    /* Spinner */

    .spinner {
      width: 19px;
      height: 19px;
      border: 3px solid rgba(0,0,0,.2);
      border-top-color: #111;
      border-radius: 50%;
      animation: spin .7s linear infinite;
      display: none;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* Footer */

    footer {
      border-top: 1px solid var(--border);
      padding: 30px 0;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    /* Responsive */

    @media (max-width: 850px) {
      .filter-grid {
        grid-template-columns: 1fr 1fr;
      }

      .stats {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 600px) {
      .container {
        width: min(100% - 20px, 1180px);
      }

      .nav {
        height: 62px;
      }

      .hero {
        padding-top: 50px;
      }

      .hero h1 {
        letter-spacing: -2px;
      }

      .filter-grid {
        grid-template-columns: 1fr;
      }

      .actions {
        flex-direction: column;
      }

      .stats {
        grid-template-columns: 1fr 1fr;
      }

      .repo-title-row {
        flex-direction: column;
      }

      .repo-top,
      .repo-body {
        padding: 20px;
      }
    }
  </style>
</head>

<body>

<header>
  <div class="container nav">
    <a class="logo" href="#">
      <div class="logo-icon">🎲</div>
      <span>Repo Roulette</span>
    </a>

    <a
      href="https://github.com"
      target="_blank"
      class="github-link"
    >
      Powered by GitHub ↗
    </a>
  </div>
</header>

<main>

  <section class="hero">
    <div class="badge">
      ● OPEN SOURCE DISCOVERY ENGINE
    </div>

    <h1>
      Find your next<br>
      <span>GitHub repo.</span>
    </h1>

    <p>
      Discover random open-source repositories based on technology,
      popularity and topic. One click. One repo. Something new to explore.
    </p>
  </section>


  <section class="container">

    <div class="controls">

      <div class="filter-grid">

        <div class="field">
          <label>Language</label>

          <select id="language">
            <option value="">Any Language</option>
            <option value="JavaScript">JavaScript</option>
            <option value="TypeScript">TypeScript</option>
            <option value="Python">Python</option>
            <option value="Java">Java</option>
            <option value="Go">Go</option>
            <option value="Rust">Rust</option>
            <option value="C++">C++</option>
            <option value="C">C</option>
            <option value="PHP">PHP</option>
            <option value="Dart">Dart</option>
            <option value="Kotlin">Kotlin</option>
            <option value="Swift">Swift</option>
          </select>
        </div>


        <div class="field">
          <label>Topic</label>

          <input
            id="topic"
            type="text"
            placeholder="e.g. docker, ai, react"
          />
        </div>


        <div class="field">
          <label>Minimum Stars</label>

          <select id="stars">
            <option value="0">Any</option>
            <option value="10">10+</option>
            <option value="50">50+</option>
            <option value="100">100+</option>
            <option value="500">500+</option>
            <option value="1000">1K+</option>
            <option value="5000">5K+</option>
            <option value="10000">10K+</option>
            <option value="50000">50K+</option>
            <option value="100000">100K+</option>
            <option value="150000">150K+</option>
            <option value="200000">200K+</option>
          </select>
        </div>


        <div class="field">
          <label>Discovery Mode</label>

          <select id="mode">
            <option value="random">🎲 Random</option>
            <option value="hidden">💎 Hidden Gems</option>
            <option value="beginner">🧑‍💻 Beginner Friendly</option>
            <option value="trending">🔥 Recently Active</option>
          </select>
        </div>

      </div>


      <div class="actions">

        <button
          class="btn btn-primary"
          id="findButton"
          onclick="findRepository()"
        >
          <span id="btnText">🎲 Find a Repository</span>

          <span
            id="spinner"
            class="spinner"
          ></span>
        </button>

        <button
          class="btn btn-secondary"
          onclick="resetFilters()"
        >
          Reset
        </button>

      </div>

    </div>


    <div
      id="status"
      class="status"
    >
      Ready to discover something interesting.
    </div>


    <div class="repo-wrapper">

      <div
        id="emptyState"
        class="empty"
      >
        <div class="empty-icon">🎯</div>

        <h2>Nothing discovered yet</h2>

        <p>
          Configure your filters and hit
          <strong>Find a Repository</strong>.
        </p>
      </div>


      <article
        id="repoCard"
        class="repo-card"
      >

        <div class="repo-top">

          <div class="repo-title-row">

            <div>
              <div
                id="repoName"
                class="repo-name"
              >
              </div>

              <div
                id="repoOwner"
                class="repo-owner"
              >
              </div>
            </div>

          </div>

          <p
            id="repoDescription"
            class="repo-description"
          >
          </p>

        </div>


        <div class="repo-body">

          <div class="stats">

            <div class="stat">
              <span
                id="repoStars"
                class="stat-value"
              >
                -
              </span>

              <span class="stat-label">
                ⭐ Stars
              </span>
            </div>


            <div class="stat">
              <span
                id="repoForks"
                class="stat-value"
              >
                -
              </span>

              <span class="stat-label">
                🍴 Forks
              </span>
            </div>


            <div class="stat">
              <span
                id="repoIssues"
                class="stat-value"
              >
                -
              </span>

              <span class="stat-label">
                🐛 Open Issues
              </span>
            </div>


            <div class="stat">
              <span
                id="repoLanguage"
                class="stat-value"
              >
                -
              </span>

              <span class="stat-label">
                💻 Language
              </span>
            </div>

          </div>


          <div
            id="topics"
            class="topics"
          >
          </div>


          <div class="repo-meta">

            <span>
              Created:
              <strong id="createdDate">-</strong>
            </span>

            <span>
              Updated:
              <strong id="updatedDate">-</strong>
            </span>

            <span>
              License:
              <strong id="license">-</strong>
            </span>

          </div>


          <div class="repo-actions">

            <a
              id="githubButton"
              class="action-btn primary"
              target="_blank"
            >
              ↗ View on GitHub
            </a>

            <button
              class="action-btn"
              onclick="copyCloneCommand()"
            >
              📋 Copy Git Clone
            </button>

            <button
              class="action-btn"
              onclick="saveRepository()"
            >
              ❤️ Save
            </button>

            <button
              class="action-btn"
              onclick="findRepository()"
            >
              🔄 Another Repository
            </button>

          </div>

        </div>

      </article>

    </div>

  </section>

</main>


<footer>
  Repo Roulette · Built with HTML, CSS, JavaScript & GitHub API
</footer>


<script>

  let currentRepository = null;


  /*
   * Format large numbers
   */

  function formatNumber(number) {

    return new Intl.NumberFormat("en", {
      notation: "compact",
      maximumFractionDigits: 1
    }).format(number || 0);

  }


  /*
   * Format dates
   */

  function formatDate(date) {

    if (!date) {
      return "-";
    }

    return new Date(date).toLocaleDateString(
      "en-IN",
      {
        year: "numeric",
        month: "short",
        day: "numeric"
      }
    );

  }


  /*
   * Escape HTML
   */

  function escapeHTML(value) {

    if (!value) {
      return "";
    }

    return String(value)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }


  /*
   * Build GitHub search query
   */

  function buildQuery() {

    const language =
      document.getElementById("language").value;

    const topic =
      document.getElementById("topic").value.trim();

    const stars =
      document.getElementById("stars").value;

    const mode =
      document.getElementById("mode").value;


    const parts = [];


    if (language) {
      parts.push(`language:${language}`);
    }


    if (topic) {
      parts.push(`topic:${topic}`);
    }


    if (stars && Number(stars) > 0) {
      parts.push(`stars:>=${stars}`);
    }


    /*
     * Discovery modes
     */

    if (mode === "hidden") {

      parts.push("stars:10..2000");

      parts.push(
        `pushed:>=${getDateDaysAgo(180)}`
      );

    }


    if (mode === "beginner") {

      parts.push("good-first-issues:>0");

    }


    if (mode === "trending") {

      parts.push(
        `pushed:>=${getDateDaysAgo(30)}`
      );

    }


    /*
     * Ensure GitHub gets a valid query
     */

    if (parts.length === 0) {

      parts.push(
        `stars:>=10 pushed:>=${getDateDaysAgo(365)}`
      );

    }


    return parts.join(" ");

  }


  /*
   * Date helper
   */

  function getDateDaysAgo(days) {

    const date = new Date();

    date.setDate(
      date.getDate() - days
    );

    return date
      .toISOString()
      .split("T")[0];

  }


  /*
   * Main repository discovery
   */

  async function findRepository() {

    const button =
      document.getElementById("findButton");

    const spinner =
      document.getElementById("spinner");

    const btnText =
      document.getElementById("btnText");

    const status =
      document.getElementById("status");


    button.disabled = true;

    spinner.style.display = "block";

    btnText.textContent = "Searching...";

    status.textContent =
      "Scanning GitHub for a repository...";


    try {

      const query =
        buildQuery();


      /*
       * We request a random-ish page.
       *
       * GitHub Search API returns a maximum
       * of 100 results per page.
       */

      const randomPage =
        Math.floor(Math.random() * 10) + 1;


      const url =
        `https://api.github.com/search/repositories` +
        `?q=${encodeURIComponent(query)}` +
        `&sort=updated` +
        `&order=desc` +
        `&per_page=100` +
        `&page=${randomPage}`;


      const response =
        await fetch(url);


      if (!response.ok) {

        const error =
          await response.json().catch(
            () => ({})
          );

        throw new Error(
          error.message ||
          `GitHub API error: ${response.status}`
        );

      }


      const data =
        await response.json();


      if (
        !data.items ||
        data.items.length === 0
      ) {

        throw new Error(
          "No repositories matched your filters."
        );

      }


      /*
       * Random item from the returned results
       */

      const repository =
        data.items[
          Math.floor(
            Math.random() *
            data.items.length
          )
        ];


      displayRepository(repository);


      status.textContent =
        `Found ${data.total_count.toLocaleString()} matching repositories.`;

    }

    catch (error) {

      console.error(error);

      status.textContent =
        "Unable to find a repository.";

      showError(error.message);

    }

    finally {

      button.disabled = false;

      spinner.style.display = "none";

      btnText.textContent =
        "🎲 Find a Repository";

    }

  }


  /*
   * Display repository
   */

  function displayRepository(repo) {

    currentRepository = repo;


    document.getElementById(
      "emptyState"
    ).style.display = "none";


    document.getElementById(
      "repoCard"
    ).style.display = "block";


    document.getElementById(
      "repoName"
    ).textContent =
      repo.name || "-";


    document.getElementById(
      "repoOwner"
    ).textContent =
      `${repo.owner?.login || "unknown"} / ${repo.name}`;


    document.getElementById(
      "repoDescription"
    ).textContent =
      repo.description ||
      "No description provided.";


    document.getElementById(
      "repoStars"
    ).textContent =
      formatNumber(
        repo.stargazers_count
      );


    document.getElementById(
      "repoForks"
    ).textContent =
      formatNumber(
        repo.forks_count
      );


    document.getElementById(
      "repoIssues"
    ).textContent =
      formatNumber(
        repo.open_issues_count
      );


    document.getElementById(
      "repoLanguage"
    ).textContent =
      repo.language ||
      "Unknown";


    document.getElementById(
      "createdDate"
    ).textContent =
      formatDate(repo.created_at);


    document.getElementById(
      "updatedDate"
    ).textContent =
      formatDate(repo.updated_at);


    document.getElementById(
      "license"
    ).textContent =
      repo.license?.spdx_id ||
      repo.license?.name ||
      "None";


    document.getElementById(
      "githubButton"
    ).href =
      repo.html_url;


    /*
     * Topics
     */

    const topicsElement =
      document.getElementById("topics");


    topicsElement.innerHTML = "";


    if (
      repo.topics &&
      repo.topics.length
    ) {

      repo.topics
        .slice(0, 12)
        .forEach(topic => {

          const element =
            document.createElement("span");

          element.className = "topic";

          element.textContent =
            "#" + topic;

          topicsElement.appendChild(
            element
          );

        });

    }


    /*
     * Scroll to result
     */

    document.getElementById(
      "repoCard"
    ).scrollIntoView({
      behavior: "smooth",
      block: "center"
    });

  }


  /*
   * Copy clone command
   */

  async function copyCloneCommand() {

    if (!currentRepository) {
      return;
    }


    const command =
      `git clone ${currentRepository.clone_url}`;


    try {

      await navigator.clipboard.writeText(
        command
      );


      showTemporaryStatus(
        "Git clone command copied!"
      );

    }

    catch {

      showTemporaryStatus(
        command
      );

    }

  }


  /*
   * Save repository locally
   */

  function saveRepository() {

    if (!currentRepository) {
      return;
    }


    const saved =
      JSON.parse(
        localStorage.getItem(
          "repoRouletteSaved"
        ) || "[]"
      );


    const exists =
      saved.some(
        repo =>
          repo.id === currentRepository.id
      );


    if (!exists) {

      saved.push({
        id:
          currentRepository.id,

        name:
          currentRepository.full_name,

        url:
          currentRepository.html_url,

        description:
          currentRepository.description,

        stars:
          currentRepository.stargazers_count,

        language:
          currentRepository.language,

        savedAt:
          new Date().toISOString()
      });


      localStorage.setItem(
        "repoRouletteSaved",
        JSON.stringify(saved)
      );


      showTemporaryStatus(
        "Repository saved locally ❤️"
      );

    }

    else {

      showTemporaryStatus(
        "Repository already saved."
      );

    }

  }


  /*
   * Reset filters
   */

  function resetFilters() {

    document.getElementById(
      "language"
    ).value = "";

    document.getElementById(
      "topic"
    ).value = "";

    document.getElementById(
      "stars"
    ).value = "0";

    document.getElementById(
      "mode"
    ).value = "random";


    document.getElementById(
      "repoCard"
    ).style.display = "none";


    document.getElementById(
      "emptyState"
    ).style.display = "block";


    document.getElementById(
      "status"
    ).textContent =
      "Ready to discover something interesting.";

  }


  /*
   * Temporary status message
   */

  function showTemporaryStatus(message) {

    const status =
      document.getElementById("status");


    const oldText =
      status.textContent;


    status.textContent =
      message;


    setTimeout(() => {

      status.textContent =
        oldText;

    }, 2500);

  }


  /*
   * Error UI
   */

  function showError(message) {

    const empty =
      document.getElementById("emptyState");


    const card =
      document.getElementById("repoCard");


    card.style.display = "none";

    empty.style.display = "block";


    empty.innerHTML = `
      <div class="empty-icon">⚠️</div>

      <h2>Discovery failed</h2>

      <p>
        ${escapeHTML(message)}
      </p>
    `;

  }


  /*
   * Enter key on topic input
   */

  document
    .getElementById("topic")
    .addEventListener(
      "keydown",
      event => {

        if (
          event.key === "Enter"
        ) {

          findRepository();

        }

      }
    );

</script>

</body>
</html>