index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SproutPHP</title>
    <meta
      name="description"
      content="SproutPHP is a modern, minimalist PHP framework for rapid web development. Batteries-included, HTMX-ready, and developer-happy."
    />
    <meta
      name="keywords"
      content="PHP, framework, SproutPHP, HTMX, web development, minimal, open source"
    />
    <meta name="author" content="Yanik Kumar, SproutPHP" />
    <meta property="og:title" content="SproutPHP - Minimal PHP Framework" />
    <meta
      property="og:description"
      content="SproutPHP is a modern, minimalist PHP framework for rapid web development. Batteries-included, HTMX-ready, and developer-happy."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://sproutphp.github.io/" />
    <meta
      property="og:image"
      content="https://sproutphp.github.io/img/SproutPHP_Logo.png"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="SproutPHP - Minimal PHP Framework" />
    <meta
      name="twitter:description"
      content="SproutPHP is a modern, minimalist PHP framework for rapid web development. Batteries-included, HTMX-ready, and developer-happy."
    />
    <meta
      name="twitter:image"
      content="https://sproutphp.github.io/img/SproutPHP_Logo.png"
    />
    <meta name="twitter:site" content="@SproutPHP" />
    <link rel="me" href="https://x.com/yanikkumar">
    <link rel="canonical" href="https://sproutphp.github.io/" />
    <link rel="icon" type="image/png" href="img/SproutPHP_Logo.png" />
    <!-- PicoCSS CDN (minimal variant) -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css"
    />
    <style>
      :root {
        --bg: var(--pico-background-color, #181c22);
        --fg: var(--pico-color, #fff);
        --muted: #b3b9c5;
        --primary: #4ade80;
        --accent: #db2777;
        --card: #23272f;
        --border: #2d323b;
        --shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
      }
      [data-theme="light"] {
        --bg: var(--pico-background-color, #f8fafc);
        --fg: var(--pico-color, #181c22);
        --muted: #475569;
        --primary: #16a34a;
        --accent: #db2777;
        --card: #fff;
        --border: #e5e7eb;
        --shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
      }
      html,
      body {
        background: var(--bg);
        color: var(--fg);
        min-height: 100vh;
        transition: background 0.2s, color 0.2s;
        font-size: 16px;
      }
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.2rem 1.5rem 0.5rem 1.5rem;
        background: transparent;
        box-shadow: none;
      }
      .beta-ribbon {
        position: absolute;
        top: 0;
        right: 0;
        background: #ff9800;
        color: white;
        padding: 5px 10px;
        font-weight: bold;
        font-size: 14px;
        text-decoration: none;
        border-bottom-left-radius: 5px;
        z-index: 999;
      }
      .logo-row {
        display: flex;
        align-items: center;
        gap: 0.7rem;
      }
      .logo-img {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 8px;
        background: #fff;
        border: 2px solid var(--primary);
        box-shadow: var(--shadow);
      }
      .brand {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--primary);
        letter-spacing: 0.01em;
      }
      nav {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        background: transparent;
        box-shadow: none;
        flex-wrap: wrap;
        justify-content: center;
      }
      nav a,
      nav button {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
        font-size: 1.05rem;
        background: none;
        border: none;
        box-shadow: none;
        transition: color 0.15s;
      }
      nav a:hover,
      nav button:hover {
        color: var(--accent);
        background: none;
      }
      .sponsor-btn {
        background: var(--card);
        color: var(--accent);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.2em 0.8em;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.3em;
        box-shadow: var(--shadow);
        transition: background 0.15s, color 0.15s;
      }
      .sponsor-btn:hover {
        background: var(--accent);
        color: #fff;
      }
      .stars-btn {
        background: var(--card);
        color: var(--fg);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.2em 0.7em;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.3em;
        box-shadow: var(--shadow);
        transition: background 0.15s, color 0.15s;
      }
      .stars-btn:hover {
        background: var(--primary);
        color: #fff;
      }
      .toggle-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--fg);
        margin-left: 1.2rem;
        transition: color 0.2s;
      }
      main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2.5rem 1rem 1.5rem 1rem;
        text-align: center;
      }
      .main-logo {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 16px;
        background: #fff;
        border: 2px solid var(--primary);
        margin-bottom: 1.2rem;
        box-shadow: var(--shadow);
      }
      .main-title {
        font-size: 2.5rem;
        font-weight: 800;
        margin: 0.2em 0 0.2em 0;
        color: var(--primary);
      }
      .main-version {
        color: var(--muted);
        font-size: 1.1rem;
        margin-bottom: 1.2em;
      }
      .main-desc {
        font-size: 1.18rem;
        color: var(--fg);
        margin-bottom: 1.2em;
        font-weight: 400;
        line-height: 1.6;
      }
      .main-links {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        margin-bottom: 2.2em;
        flex-wrap: wrap;
      }
      .main-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        background: var(--card);
        color: var(--fg);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.6em 1.2em;
        font-size: 1.08rem;
        font-weight: 500;
        text-decoration: none;
        box-shadow: var(--shadow);
        transition: background 0.15s, color 0.15s;
      }
      .main-links a:hover {
        background: var(--primary);
        color: #fff;
      }
      .sprout-btn {
        margin-top: 1.5em;
        background: var(--primary);
        color: #181c22;
        border: none;
        border-radius: 8px;
        padding: 1em 2.2em;
        font-size: 1.18rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--shadow);
        transition: background 0.18s, color 0.18s;
        display: flex;
        align-items: center;
        gap: 0.7em;
      }
      .sprout-btn:hover {
        background: #22d3ee;
        color: #181c22;
      }
      .footer-follow a,
      .footer-follow span {
        text-decoration: none !important;
        border: none !important;
        margin-top: 0.5em;
        font-size: 0.98em;
        color: var(--muted);
      }
      .fork-github-btn {
        position: absolute;
        bottom: 6.5em;
        right: 2em;
        display: inline-block;
        background: var(--card, #23272f);
        color: var(--fg, #fff);
        padding: 0.6em 1.2em;
        border-radius: 8px 8px 0 0;
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 2px 8px #0002;
        font-size: 1.1em;
        border: 2px solid var(--accent, #db2777);
        border-bottom: none;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        z-index: 10;
      }
      .fork-github-btn:hover {
        background: var(--accent, #db2777);
        color: #fff;
        border-color: var(--primary, #4ade80);
      }
      @media (max-width: 600px) {
        header {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.7em;
          padding: 1.1rem 0.7rem 0.5rem 0.7rem;
        }
        .main-title {
          font-size: 2rem;
        }
        .main-logo {
          width: 3.2rem;
          height: 3.2rem;
        }
        .main-links {
          flex-direction: column;
          gap: 0.8em;
        }
        .sprout-btn {
          width: 100%;
          justify-content: center;
        }
      }
      @media (max-width: 700px) {
        header {
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          padding: 1.1rem 0.7rem 0.5rem 0.7rem;
        }
        .logo-row {
          justify-content: center;
          width: 100%;
          margin-bottom: 0.7em;
        }
        nav {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;
          gap: 0.7em;
          margin-bottom: 0.5em;
          padding: 0.5em 0;
          border-radius: 12px;
          box-shadow: var(--shadow);
        }
        nav a,
        nav button {
          justify-content: center;
          width: auto;
          min-width: 0;
          margin: 0;
          font-size: 1.13em;
          padding: 0.6em 0.9em;
          border-radius: 8px;
        }
        .sponsor-btn,
        .stars-btn,
        .toggle-btn {
          font-size: 1.13em;
          padding: 0.6em 0.9em;
          border-radius: 8px;
        }
        .fork-github-btn {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <div class="logo-row">
        <img
          src="./img/SproutPHP_Logo.png"
          alt="SproutPHP Logo"
          class="logo-img"
        />
        <span class="brand">SproutPHP</span>
      </div>
      <nav>
        <a href="./about.html">About</a>
        <a href="https://sproutphp.github.io/documentation/">Docs</a>
        <a
          href="https://github.com/sponsors/yanikkumar"
          class="sponsor-btn"
          target="_blank"
          rel="noopener"
          >&#10084; Sponsor Creator</a
        >
        <a
          href="https://github.com/SproutPHP/framework"
          class="stars-btn"
          target="_blank"
          rel="noopener"
        >
          <svg
            height="18"
            viewBox="0 0 16 16"
            fill="currentColor"
            style="vertical-align: middle"
          >
            <path
              d="M8 12.027l-3.717 2.21.711-4.15-3.02-2.944 4.166-.605L8 2.5l1.86 3.99 4.166.605-3.02 2.944.711 4.15z"
            ></path>
          </svg>
          Stars
          <span
            id="star-count"
            style="
              background: var(--card);
              color: var(--muted);
              border-radius: 4px;
              padding: 0 0.4em;
              font-size: 0.95em;
              margin-left: 0.2em;
            "
            >...</span
          >
        </a>
        <button
          class="toggle-btn"
          id="theme-toggle"
          title="Toggle dark/light mode"
        >
          🌙
        </button>
      </nav>
    </header>
    <main>
      <img
        src="./img/SproutPHP_Logo.png"
        alt="SproutPHP Logo"
        class="main-logo"
      />
      <div class="main-title">SproutPHP</div>
      <code class="main-version sproutphp-version"> ... </code>
      <div class="main-desc">
        Welcome to <b>SproutPHP</b>, the seed-to-plant minimal PHP framework
        🌱<br />
        HTMX-ready, JS-optional, and developer-happy.
      </div>
      <div class="main-links">
        <a href="https://sproutphp.github.io/documentation/"
          >📖 Documentation</a
        >
        <a
          href="https://github.com/SproutPHP/framework"
          target="_blank"
          rel="noopener"
          >🌱 GitHub</a
        >
        <a
          href="https://github.com/sponsors/yanikkumar"
          target="_blank"
          rel="noopener"
          >❤️ Sponsor</a
        >
      </div>
      <div class="alert warning" id="beta-warning">
        🚧 SproutPHP is currently in beta (<code class="sproutphp-version"
          >...</code
        >). Expect changes and improvements.
      </div>
    </main>
    <footer
      class="footer"
      style="
        margin-top: 2rem;
        padding: 1.5rem 0;
        border-top: 1px solid #eee;
        text-align: center;
        font-size: 0.95rem;
        color: #888;
        background: var(--card, #23272f);
      "
    >
      <a
        href="https://github.com/SproutPHP/framework"
        target="_blank"
        class="fork-github-btn"
      >
        🍴 Fork me on GitHub
      </a>
      <div class="footer-follow">
        <span>Follow us:</span>
        <a
          href="https://github.com/SproutPHP"
          target="_blank"
          rel="noopener"
          aria-label="GitHub"
        >
          <svg
            width="24"
            height="24"
            viewbox="0 0 24 24"
            fill="currentColor"
            style="vertical-align: middle"
          >
            <path
              d="M12 2C6.477 2 2 6.484 2 12.021c0 4.428 2.865 8.184 6.839 9.504.5.092.682-.217.682-.482 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.004.07 1.532 1.032 1.532 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.339-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.987 1.029-2.686-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.025A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.295 2.748-1.025 2.748-1.025.546 1.378.202 2.397.1 2.65.64.699 1.028 1.593 1.028 2.686 0 3.847-2.338 4.695-4.566 4.944.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.744 0 .267.18.579.688.481C19.138 20.203 22 16.447 22 12.021 22 6.484 17.523 2 12 2z"
            />
          </svg>
        </a>
        <a
          href="https://twitter.com/SproutPHP"
          target="_blank"
          rel="noopener"
          aria-label="Twitter"
        >
          <svg
            width="24"
            height="24"
            viewbox="0 0 24 24"
            fill="currentColor"
            style="vertical-align: middle"
          >
            <path
              d="M17.53 2H21.5L14.36 10.09L22.75 22H15.97L10.98 15.18L5.29 22H1.32L8.87 13.36L1 2H7.97L12.54 8.22L17.53 2ZM16.32 20H18.34L7.75 3.97H5.59L16.32 20Z"
            />
          </svg>
        </a>
      </div>
      <div style="margin-top: 0.7em; font-size: 0.98em; color: var(--muted)">
        &copy; <span id="copyright-year"></span> SproutPHP. All rights reserved.
      </div>
    </footer>
    <script>
      // Dark/Light mode toggle
      const themeBtn = document.getElementById("theme-toggle");
      const html = document.documentElement;
      function setInitialTheme() {
        let theme = localStorage.getItem("theme");
        if (!theme) {
          theme = window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light";
        }
        html.setAttribute("data-theme", theme);
        themeBtn.textContent = theme === "dark" ? "🌙" : "☀️";
      }
      setInitialTheme();
      themeBtn.addEventListener("click", function () {
        const currentTheme = html.getAttribute("data-theme");
        const newTheme = currentTheme === "dark" ? "light" : "dark";
        html.setAttribute("data-theme", newTheme);
        localStorage.setItem("theme", newTheme);
        themeBtn.textContent = newTheme === "dark" ? "🌙" : "☀️";
      });

      document.getElementById("copyright-year").textContent =
        new Date().getFullYear();

      // Fetch GitHub star count dynamically
      fetch("https://api.github.com/repos/SproutPHP/framework")
        .then((response) => response.json())
        .then((data) => {
          if (data.stargazers_count !== undefined) {
            document.getElementById("star-count").textContent =
              data.stargazers_count;
          }
        })
        .catch(() => {
          document.getElementById("star-count").textContent = "—";
        });

      // Fetch latest release version
      fetch("https://api.github.com/repos/SproutPHP/framework/releases")
        .then((response) => response.json())
        .then((data) => {
          if (Array.isArray(data) && data.length > 0 && data[0].tag_name) {
            var version = data[0].tag_name;
            if (data[0].prerelease) {
              version += " (pre-release)";
            }
            var versionSpans = document.querySelectorAll(".sproutphp-version");
            versionSpans.forEach(function (span) {
              span.textContent = version;
            });
            // Show/hide beta warning
            var betaWarning = document.getElementById("beta-warning");
            if (version.includes("beta") || version.includes("pre-release")) {
              betaWarning.style.display = "block";
            } else {
              betaWarning.style.display = "none";
            }
          }
        })
        .catch(() => {
          // Optionally handle error
        });
    </script>
  </body>
</html>