demo.html - Pytml - Pytml is a 15KB lightweight PyScript alternative

demo.html (2173B)
      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="UTF-8">
      5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6   <title>Pytml — Demos</title>
      7   <style>
      8     body { font-family: system-ui, sans-serif; margin: 0; background: #070a12; color: #eef2ff; }
      9     main { max-width: 1100px; margin: auto; padding: 50px 24px; }
     10     a { color: inherit; text-decoration: none; }
     11     .back { color: #93c5fd; }
     12     h1 { font-size: 48px; margin: 16px 0 8px; }
     13     .lead { color: #9ca8bc; }
     14     .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 18px; margin-top: 32px; }
     15     .card { border: 1px solid #202941; background: #0e1322; border-radius: 16px; padding: 22px; }
     16     .card h2 { margin-top: 0; }
     17     .card p { color: #9ca8bc; line-height: 1.55; min-height: 48px; }
     18     .open { display: inline-block; margin-top: 10px; background: #3b82f6; padding: 10px 14px; border-radius: 10px; }
     19   </style>
     20 </head>
     21 <body>
     22   <main>
     23     <a class="back" href="index.html">← Back to Pytml</a>
     24     <h1>Pytml Demos</h1>
     25     <p class="lead">Runnable examples using the public Pytml runtime at https://pytml.vercel.app/pytml.js.</p>
     26     <div class="grid">
     27       <article class="card"><h2>Calculator</h2><p>A simple calculator using numbered Pytml buttons inside &lt;py1&gt;.</p><a class="open" href="examples/calculator.html">Open demo →</a></article>
     28       <article class="card"><h2>Counter</h2><p>Small state example showing Python event handlers and DOM updates.</p><a class="open" href="examples/counter.html">Open demo →</a></article>
     29       <article class="card"><h2>Greeting</h2><p>Use browser input and Python to build a tiny interactive page.</p><a class="open" href="examples/greeting.html">Open demo →</a></article>
     30       <article class="card"><h2>Joystick</h2><p>Pointer/touch joystick controls exposed to Python.</p><a class="open" href="examples/joystick.html">Open demo →</a></article>
     31       <article class="card"><h2>Packages</h2><p>Install Python packages through micropip and use them in the browser.</p><a class="open" href="examples/packages.html">Open demo →</a></article>
     32     </div>
     33   </main>
     34 </body>
     35 </html>