index.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <title>kodeWeave: Your on the go code playground!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
    <meta name="description" content="kodeWeave is your on the go coding playground! Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.">
    <meta name="author" content="kodeWeave">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="kodeWeave: Your on the go code playground!">
    <meta name="theme-color" content="#13171f">
    <meta name="apple-mobile-web-app-title" content="kodeWeave: Your on the go code playground!">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="msapplication-starturl" content="./index.html">
    <meta name="msapplication-navbutton-color" content="#13171f">
    <meta property="og:url" content="https://michaelsboost.com/kodeWeave/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="kodeWeave: Your on the go code playground!" />
    <meta property="og:description" content="kodeWeave is your on the go coding playground! Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop." />
    <meta property="og:image"       content="https://raw.githubusercontent.com/michaelsboost/kodeWeave/main/imgs/header.png" />
    <link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
    <link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
    <link rel="apple-touch-icon" href="imgs/logo.svg">
    <link rel="stylesheet" href="dist/bundle.css">
  </head>
  <body>
    <div class="container" id="home">
      <nav class="relative md:sticky top-0 inset-x-0 flex-col md:flex-row items-center py-4 bg-[#13171f] bg-opacity-50 backdrop-filter backdrop-blur-lg">
        <ul class="flex items-center gap-0 md:gap-3">
          <!-- Logo -->
          <li>
            <a href="#home" class="text-2xl font-bold">
              <img src="imgs/logo.svg" alt="kodeWeave Logo" class="h-8">
            </a>
          </li>
        </ul>
          
          <!-- Links -->
        <ul class="hidden md:flex items-center gap-0 md:gap-3 text-xs sm:text-base md:text-base">
          <li class="flex gap-3 py-2">
            <div class="bg-[#cf06bc] rounded-md px-2 py-1 md:px-4 md:py-3">
              <a class="no-underline text-white" href="#home">Home</a>
            </div>
            <div class="px-2 py-1 md:px-4 md:py-3">
              <a class="no-underline text-white" href="https://github.com/michaelsboost/kodeWeave" target="_blank">Github</a>
            </div>
            <div class="px-2 py-1 md:px-4 md:py-3">
              <a class="no-underline text-white" href="https://twitter.com/michaelsboost" target="_blank">Twitter</a>
            </div>
            <div class="px-2 py-1 md:px-4 md:py-3">
              <a class="no-underline text-white" href="https://michaelsboost.com/donate" target="_blank">Support</a>
            </div>
          </li>
        </ul>
          
          <!-- Get Started Button -->
        <ul class="hidden md:flex items-center gap-0 md:gap-3">
          <li>
            <a href="./go" class="no-underline text-white bg-[#0d6efd] hover:bg-[#0b5ed7] active:bg-[#0a58ca] px-3 py-2 md:px-4 md:py-3 rounded-lg">
              Get Started
            </a>
          </li>
        </ul>
      </nav>
    
      <main class="flex flex-col items-center justify-center min-h-screen py-12">
        <hgroup class="text-center mb-8">
          <h1 class="text-4xl font-bold">
           Code with Speed, Preview with Power
          </h1>
          <h2 class="text-lg mt-4">
           A blazing fast PWA coding playground that lets you build, test, and deploy websites seamlessly across desktop and mobile.
          </h2>
        </hgroup>
        
        <div class="mb-8">
            <img class="w-full h-full object-cover object-center rounded-lg shadow-lg shadow-blue-900" src="imgs/screenshot.webp" srcset="https://michaelsboost.com/kodeWeave/imgs/screenshot-640w.webp 640w, https://michaelsboost.com/kodeWeave/imgs/screenshot-1280w.webp 1280w" alt="kodeWeave">
        </div>
      
        <a href="./go" class="w-full text-center no-underline text-white bg-[#0d6efd] hover:bg-[#0b5ed7] active:bg-[#0a58ca] text-xl px-5 py-4 rounded-lg">
          Try kodeWeave Now!
        </a>
      </main>
    
      <article id="features">
        <section class="container py-16">
          <hgroup class="text-center mb-8">
            <h1 class="text-4xl font-bold">
            Why kodeWeave?
            </h1>
            <h2 class="text-lg mt-4">
            Discover how kodeWeave helps you code faster, preview live, and deploy effortlessly.
            </h2>
          </hgroup>
          <div class="w-1/2 m-auto">
            <hr>
          </div>
          <div class="grid md:grid-cols-2 gap-8 p-4">
            <div class="text-center">
              <img src="imgs/lighthouse.png" alt="Blazing Fast" loading="lazy" class="mx-auto mb-4 rounded-lg">
              <h3 class="text-xl font-bold mb-2">Blazing Fast Performance</h3>
              <p>Experience unmatched speed, powered by kodeWeave’s client-side architecture.</p>
             </div>
             <div class="text-center">
              <img src="imgs/pwa.png" alt="PWA Export" loading="lazy" class="mx-auto mb-4 rounded-lg">
              <h3 class="text-xl font-bold mb-2">Export as PWA</h3>
              <p>Turn your projects into fully functional PWAs with just one click.</p>
             </div>
             <div class="text-center">
              <img src="imgs/frameworks.png" alt="Framework Support" loading="lazy" class="mx-auto mb-4 rounded-lg">
              <h3 class="text-xl font-bold mb-2">Supports Multiple Frameworks</h3>
              <p>Built-in support for popular frameworks like React, Vue, AlpineJS, and more.</p>
             </div>
             <div class="text-center">
              <img src="imgs/capture.svg" alt="Full Website Screenshot" loading="lazy" class="mx-auto mb-4 rounded-lg">
              <h3 class="text-xl font-bold mb-2">Screenshot Full Websites</h3>
              <p>Capture full-page screenshots with ease, perfect for documentation or sharing.</p>
             </div>
             <div class="text-center">
              <img src="imgs/multiplatform.svg" alt="Full Website Screenshot" loading="lazy" class="mx-auto mb-4 rounded-lg">
              <h3 class="text-xl font-bold mb-2">Mobile and Desktop</h3>
              <p>Experience the same creative freedom on both desktop and mobile devices.</p>
             </div>
             <div class="text-center">
              <img src="imgs/github.svg" alt="Full Website Screenshot" loading="lazy" class="mx-auto mb-4 rounded-lg">
              <h3 class="text-xl font-bold mb-2">Open Source and Free</h3>
              <p>kodeWeave is completely free for personal and commercial use under the MIT license.</p>
             </div>
          </div>
        </section>
      </article>
      
      <footer class="py-8 mt-16">
        <div class="container mx-auto flex flex-col items-center">
          <img src="imgs/author.jpg" alt="Michael Schwartz" class="w-64 h-64 rounded-full mb-4 shadow-lg">
          <p class="text-sm my-4">Created by Michael Schwartz</p>
          <div class="flex space-x-4 items-center">
            <!-- Twitter -->
            <a href="https://twitter.com/michaelsboost" target="_blank" class="text-white no-underline text-2xl hover:text-[#1DA1F2]">
              <svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m.058 1l9.267 12.39L0 23.462h2.099l8.163-8.82l6.596 8.82H24l-9.788-13.087L22.892 1h-2.1l-7.517 8.122L7.2 1zm3.087 1.546h3.28l14.488 19.37h-3.28L3.145 2.547Z"/></svg>
            </a>
            <!-- Website -->
            <a href="https://michaelsboost.com" target="_blank" class="text-white no-underline text-2xl hover:text-[#00d4ff]">
              <svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10"></path><path stroke-linecap="round" stroke-linejoin="round" d="M13 2.05S16 6 16 12m-5 9.95S8 18 8 12s3-9.95 3-9.95M2.63 15.5H12m-9.37-7h18.74"></path><path d="M21.879 17.917c.494.304.463 1.043-.045 1.101l-2.567.291l-1.151 2.312c-.228.459-.933.234-1.05-.334l-1.255-6.116c-.099-.48.333-.782.75-.525z" clip-rule="evenodd"></path></g></svg>
            </a>
            
            <!-- Support -->
            <a class="text-red-400" href="https://michaelsboost.com/donate/" target="_blank">
              <svg class="w-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" d="M240 102c0 70-103.79 126.66-108.21 129a8 8 0 0 1-7.58 0C119.79 228.66 16 172 16 102a62.07 62.07 0 0 1 62-62c20.65 0 38.73 8.88 50 23.89C139.27 48.88 157.35 40 178 40a62.07 62.07 0 0 1 62 62"></path></svg>
            </a>
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>