index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blueprint</title>
    <link href="/.modules/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/.modules/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="/.modules/global/global.css?version=2" rel="stylesheet">
    <link href="/index.css?version=2" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">

    <script defer data-domain="blueprint.zip" src="https://plausible.prpl.wtf/js/script.outbound-links.js"></script>

    <!-- Social Embeds -->
    <meta property="theme-color" content="#3b7cfe">
    <meta property="og:title" content="blueprint.zip">
    <meta property="og:description" content="Powerful, fast and developer-friendly extension framework for Pterodactyl. Utilize extension APIs, inject HTML, modify stylesheets, package extensions and so much more.">
    <meta property="og:url" content="https://blueprint.zip">
    <meta property="og:image" content="/.assets/brand/og.jpg">
    <meta property="og:type" content="website">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://blueprint.zip">
    <meta property="twitter:title" content="blueprint.zip">
    <meta property="twitter:description" content="Powerful, fast and developer-friendly extension framework for Pterodactyl. Utilize extension APIs, inject HTML, modify stylesheets, package extensions and so much more.">
    <meta property="twitter:image" content="/.assets/brand/og.jpg">
  </head>

  <body data-bs-theme="dark">

    <!-- Desktop Navbar -->
    <!--<div class="p-2 d-lg-inline d-none"></div>-->
    <header class="p-3 mb-3 border-bottom fixed-top d-lg-inline d-none blueprint-navbar">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
          <a href="." class="d-flex align-items-center mb-2 me-3 mb-lg-0 link-body-emphasis text-decoration-none">
            <img src="/.assets/brand/retro.png" height="30" alt="" />
          </a>
          <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
            <li><a href="." class="nav-link px-2 link-secondary">Home</a></li>
            <li><a href="/browse" class="nav-link px-2 link-body-emphasis">Browse</a></li>
            <li><a href="/docs" class="nav-link px-2 link-body-emphasis">Documentation</a></li>
          </ul>
          <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
            <li class="nav-item me-1 ms-1"><a class="nav-link px-1 nav-svg" href="https://bsky.app/profile/blueprint.zip"><img src="/.assets/storage/icons/bluesky.svg"/></a></li>
            <li class="nav-item me-1 ms-1 py-1"><a class="nav-link px-1" href="https://discord.com/servers/blueprint-1063548024825057451"><i class="bi bi-discord"></i></a></li>
            <li class="nav-item me-1 ms-1 py-1"><a class="nav-link px-1" href="https://github.com/BlueprintFramework"><i class="bi bi-github"></i></a></li>
            <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
              <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
              <hr class="d-lg-none my-2 text-white-50">
            </li>
            <li class="nav-item dropdown">
              <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (dark)">
                <i class="bi bi-moon-stars-fill my-1 theme-icon-active"></i>
                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end position-absolute gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px" aria-labelledby="bd-theme-text">
                <li><button type="button" class="theme-switcher-btn dropdown-item rounded-2 d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"><i class="bi bi-sun-fill me-2 opacity-50"></i> Light</button></li>
                <li><button type="button" class="theme-switcher-btn dropdown-item rounded-2 d-flex align-items-center active" data-bs-theme-value="dark" aria-pressed="true"><i class="bi bi-moon-stars-fill me-2 opacity-50"></i> Dark</button></li>
                <li><button type="button" class="theme-switcher-btn dropdown-item rounded-2 d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false"><i class="bi bi-circle-half me-2 opacity-50"></i> Auto</button></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- Mobile/Tablet Navbar -->
    <!--<div class="p-2 d-lg-none d-inline"></div>-->
    <nav class="navbar fixed-top d-lg-none d-inline blueprint-navbar-mobile">
      <div class="container-fluid">
        <a href="/" class="d-flex align-items-center mx-2 my-3 mb-lg-0 link-body-emphasis text-decoration-none"><img src=".assets/brand/retro.png" height="35" alt="" /></a>
        <button class="btn btn-secondary bg-dark-subtle border-0 nav-dropdown-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Navigation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a href="/" class="btn rounded-2 d-flex gap-2 py-2 px-3 lh-sm text-start align-items-center position-absolute mobile-nav-link bg-dark-subtle">
              <div>
                <i class="bi bi-house-fill h1"></i>
              </div>
              <div class="text-truncate">
                <strong class="d-block">Home</strong>
                <small>Learn more about Blueprint, what is is, and why it was made</small>
              </div>
            </a>
            <div class="mobile-nav-spacer"></div>
          </li>
          <li class="nav-item">
            <a href="./browse" class="btn rounded-2 d-flex gap-2 py-2 px-3 lh-sm text-start align-items-center position-absolute mobile-nav-link">
              <div>
                <i class="bi bi-puzzle-fill h1"></i>
              </div>
              <div class="text-truncate">
                <strong class="d-block">Browse</strong>
                <small>Explore and search extensions made by the community</small>
              </div>
            </a>
            <div class="mobile-nav-spacer"></div>
          </li>
          <li class="nav-item">
            <a href="./docs" class="btn rounded-2 d-flex gap-2 py-2 px-3 lh-sm text-start align-items-center position-absolute mobile-nav-link">
              <div>
                <i class="bi bi-book-fill h1"></i>
              </div>
              <div class="text-truncate">
                <strong class="d-block">Documentation</strong>
                <small>Guides and docs about interacting with Blueprint</small>
              </div>
            </a>
            <div class="mobile-nav-spacer"></div>
          </li>
          <div class="mobile-theme-switcher row position-absolute start-0 bottom-0 ms-1 mb-4">
            <div class="col-4">
              <a href="javascript:void" class="rounded-2 mobile-theme-switcher-btn" data-bs-theme-value="light">
                <i class="bi bi-sun-fill opacity-50 text-body" style="padding: 0 50%;"></i>
              </a>
            </div>
            <div class="col-4">
              <a href="javascript:void" class="rounded-2 mobile-theme-switcher-btn" data-bs-theme-value="dark">
                <i class="bi bi-moon-stars-fill opacity-50 text-body" style="padding: 0 50%;"></i>
              </a>
            </div>
            <div class="col-4">
              <a href="javascript:void" class="rounded-2 mobile-theme-switcher-btn" data-bs-theme-value="auto">
                <i class="bi bi-circle-half opacity-50 text-body" style="padding: 0 50%;"></i>
              </a>
            </div>
          </div>
        </ul>
      </div>
    </div>


    <!-- Content -->
    
    <!-- Hero -->
    <div class="bp-grid">
      <div class="px-4 mb-5 text-center bp-hero">
        <center>
          <div class="glyph-container my-4">
            <div class="glyph-square"></div>
            <div class="glyph-square"></div>
            <div class="glyph-square"></div>
            <div class="glyph-square"></div>
            <div class="glyph-square"></div>
          </div>
        </center>
        <h1 class="col-lg-7 mx-auto display-4 fw-bold text-body-emphasis width-800 pt-1 pb-2">
          Build 
          <span class="bp-highlight">powerful </span>
          themes and extensions with Blueprint.
        </h1>
        <div class="col-lg-6 mx-auto">
          <p class="lead my-3 mx-auto width-800 pb-3">
            Powerful, fast and developer-friendly extension framework for Pterodactyl. Utilize extension APIs, inject HTML, modify stylesheets, package extensions and so much more.
          </p>
          <div class="d-grid gap-2 d-sm-flex my-2 justify-content-sm-center">
            <a href="/docs?page=getting-started/Installation"><button type="button" class="btn btn-dark bg-body-tertiary btn-lg px-4 gap-3 me-1 dl-btn placeholder-wave rounded-pill">Get started <i class="bi bi-arrow-right"></i></button></a>
            <a href="https://github.com/blueprintframework/framework"><button type="button" class="btn btn-dark btn-lg px-4 ms-1 star-button rounded-pill"><i class="bi bi-star-fill me-1"></i> Star on GitHub!</button></a>
          </div>
        </div>
      </div>
    </div>

    <!-- Screenshot -->
    <a name="learnmore"></a>
    <div class="px-4 pt-5 my-5 text-center border-bottom">
      <div class="overflow-hidden bp-screenshot-cutoff" style="max-height: 30vh;">
        <div class="container px-1">
          <img src="/.assets/storage/misc/webp/1.webp" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Admin Screenshot" loading="lazy" width="700" height="500">
        </div>
      </div>
    </div>

    <!-- Extensions -->
    <div class="container my-5 d-none d-lg-block">
      <div class="d-flex flex-row align-items-center">
        <div class="justify-content-start">
          <h1 class="display-5 fw-bold lh-1 text-body-emphasis mb-4">Explore modifications built with Blueprint.</h1>
          <p class="lead">Find new and established extensions and themes on the extension browse page.</p>
          <a href="/browse/?1=n" class="icon-link me-3">
            Extensions
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
          <a href="/browse/?2=n" class="icon-link">
            Themes
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
        </div>
        <div class="justify-content-end ps-4">
          <img src="/.assets/storage/misc/png/12.png" width="400"/>
        </div>
      </div>
    </div>

    <!-- Features overview -->
    <div class="container">
      <div class="row g-4 pb-5 pt-5 pt-sm-5 pt-lg-0 row-cols-1 row-cols-lg-3">
        <div class="feature col">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-body-tertiary fs-2 mb-3 rounded-4">
            <i class="bi bi-puzzle-fill me-3 ms-3 mt-3 mb-3 invert-light"></i>
          </div>
          <h3 class="fs-2 text-body-emphasis">Extensions</h3>
          <p>Browse from a growing library of free, open source and paid extensions.</p>
          <a href="/browse" class="icon-link">
            Browse extensions
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
        </div>
        <div class="feature col pt-5 pt-xs-5 pt-sm-5 pt-lg-0">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-body-tertiary fs-2 mb-3 rounded-4">
            <i class="bi bi-book me-3 ms-3 mt-3 mb-3 invert-light"></i>
          </div>
          <h3 class="fs-2 text-body-emphasis">Documentation</h3>
          <p>Learn to build extensions with step-by-step guides and refer to documentation of Blueprint's features and extension APIs.</p>
          <a href="/docs" class="icon-link">
            Read more
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
        </div>
        <div class="feature col pt-5 pt-sm-5 pt-lg-0">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-body-tertiary fs-2 mb-3 rounded-4">
            <i class="bi bi-braces-asterisk me-3 ms-3 mt-3 mb-3 invert-light"></i>
          </div>
          <h3 class="fs-2 text-body-emphasis">Open source</h3>
          <p>Blueprint is Free and Open Source Software (FOSS). Anyone is free to use, study and modify the framework's source code.</p>
          <a href="https://github.com/BlueprintFramework" class="icon-link">
            GitHub
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
        </div>
        <div class="feature col pt-2 pt-xs-2 pt-sm-2 pt-lg-0">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-body-tertiary fs-2 mb-3 mt-5 rounded-4">
            <i class="bi bi-hearts me-3 ms-3 mt-3 mb-3 invert-light"></i>
          </div>
          <h3 class="fs-2 text-body-emphasis">Donation-funded</h3>
          <p>People just like you fund future development for Blueprint by donating and purchasing extensions.</p>
          <a href="https://github.com/sponsors/prplwtf" class="icon-link">
            Donate
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
        </div>
        <!-- Desktop only -->
        <div class="feature col d-lg-inline d-none">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-body-tertiary fs-2 mb-3 mt-5 rounded-4">
            <i class="bi bi-compass me-3 ms-3 mt-3 mb-3 invert-light"></i>
          </div>
          <h3 class="fs-2 text-body-emphasis">Beginner-friendly</h3>
          <p>Both installing and developing extensions is made to be less complicated than conventional methods.</p>
          <a href="/docs?page=getting-started/Installation" class="icon-link">
            Install Blueprint
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
        </div>
        <div class="feature col d-lg-inline d-none">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-body-tertiary fs-2 mb-3 mt-5 rounded-4">
            <i class="bi bi-palette2 me-3 ms-3 mt-3 mb-3 invert-light"></i>
          </div>
          <h3 class="fs-2 text-body-emphasis">Theme support</h3>
          <p>Extensions can ship with custom stylesheets to theme your Pterodactyl panel with.</p>
          <a href="/browse/?2=n&1=y" class="icon-link">
            Browse themes
            <i class="bi bi-chevron-right" style="padding-top: 2px; font-size: 1em; height: 1.2em; width: 1em;"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="pb-sm-3 pb-5"><span></span></div>
    
    <!-- Screenshot with hero -->
    <div class="container my-5 mt-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
        <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
          <h1 class="display-5 fw-bold lh-1 text-body-emphasis mb-4">Write and manage modifications, faster.</h1>
          <p class="lead">We aim to create a community of new and experienced developers being able to write easy to install and versatile extensions with up-to-date documentation, guides and developer tools.</p>
          <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3 mt-4">
            <a href="/docs"><button type="button" class="btn btn-primary btn-lg px-4 me-md-2 rounded-pill">Documentation</button></a>
            <a href="/browse"><button type="button" class="btn bg-body-tertiary btn-lg px-4 rounded-pill">Extensions</button></a>
          </div>
        </div>
        <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
          <img class="rounded-4 d-lg-inline d-none" src="/.assets/storage/misc/png/1.png" alt="" width="720">
        </div>
      </div>
    </div>
    
    
    <!-- Footer -->
    <div class="container">
      <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <div class="col-md-4 d-flex align-items-center">
          <a href="." class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
            <svg viewBox="0 0 500 500" class="text-body-secondary" xmlns="http://www.w3.org/2000/svg" width="30" height="24" fill="currentColor">
              <rect x="0" y="166.6666" width="166.6666" height="166.6666"/>
              <rect x="166.6666" y="0" width="166.6666" height="166.6666"/>
              <rect x="166.6666" y="333.3332" width="166.667" height="166.6666"/>
              <rect x="333.3332" y="166.6666" width="166.667" height="333.3332"/>
            </svg>
          </a>
          <span class="mb-3 mb-md-0 text-body-secondary">© 2023-<span class="currentYear">2025</span> Emma (<a href="https://prpl.wtf" class="text-body-secondary" target="_blank">prpl.wtf</a>)</span>
        </div>

        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
          <li class="ms-3"><a class="text-body-secondary" href="https://discord.com/servers/blueprint-1063548024825057451"><i class="bi bi-discord" width="24" height="24"></i></a></li>
          <li class="ms-3"><a class="text-body-secondary" href="https://github.com/BlueprintFramework"><i class="bi bi-github" width="24" height="24"></i></a></li>
          <li class="ms-3"><a class="text-body-secondary" href="https://github.com/sponsors/prplwtf"><i class="bi bi-chat-right-heart-fill" width="24" height="24"></i></a></li>
        </ul>
      </footer>
    </div>

    <div id="social-push">
      <div>
        <p>
          <b>Become part of Blueprint's Discord community</b> and be one of the first to get notified about new extension releases and framework updates.
        </p>
        <a href="https://discord.com/servers/blueprint-1063548024825057451" class="link-underline link-underline-opacity-0 me-3"><i class="bi bi-discord me-1"></i> Join the community</a>
        <a href="javascript:void" onclick="dismissSocial()" class="link-underline link-underline-opacity-0 pe-pointer text-secondary"><i class="bi bi-x-lg me-1"></i> Close</a>
      </div>
    </div>

    <script src="/.modules/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/.modules/bootstrap/etc/theme-switcher.js"></script>
    <script src="/.modules/global/global.js"></script>
  </body>
</html>