all-controls.html - Pytml - Pytml is a 15KB lightweight PyScript alternative

all-controls.html (3362B)
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4   <meta charset="utf-8">
      5   <meta name="viewport" content="width=device-width, initial-scale=1">
      6   <title>Pytml 2.5 All Controls</title>
      7   <script src="https://pytml.vercel.app/pytml.js"></script>
      8   <style>
      9     body { font-family: system-ui; max-width: 900px; margin: 25px auto; padding: 20px; }
     10     section { border:1px solid #ddd; border-radius:12px; padding:16px; margin:14px 0; }
     11     .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
     12     #scroll { height:120px; overflow:auto; border:1px solid #bbb; padding:10px; }
     13     #stick { width:150px; height:150px; border-radius:50%; background:#ddd; }
     14   </style>
     15 </head>
     16 <body>
     17   <h1>Everyday browser controls</h1>
     18   <section>
     19     <div class="row">
     20       <input id="text_box" placeholder="Text bar">
     21       <input id="number_box" type="number" value="10">
     22       <input id="password_box" type="password" value="secret">
     23       <input id="search_box" type="search" placeholder="Search">
     24     </div>
     25     <textarea id="notes" rows="4" placeholder="Type a longer message"></textarea>
     26   </section>
     27   <section>
     28     <div class="row">
     29       <input id="range" type="range" min="0" max="100" value="50">
     30       <span id="range_value">50</span>
     31       <label><input id="check" type="checkbox"> checkbox</label>
     32       <label><input id="radio_a" type="radio" name="demo_radio" value="a"> A</label>
     33       <label><input id="radio_b" type="radio" name="demo_radio" value="b"> B</label>
     34       <select id="select"><option>One</option><option>Two</option><option>Three</option></select>
     35       <input id="color" type="color" value="#3366ff">
     36     </div>
     37   </section>
     38   <section>
     39     <form id="form"><input id="form_name" required placeholder="Form name"><button id="submit" type="submit">Submit</button></form>
     40     <p id="form_result"></p>
     41   </section>
     42   <section>
     43     <input id="date" type="date">
     44     <input id="time" type="time">
     45     <input id="file" type="file">
     46     <button id="read_file" type="button">Read file metadata</button>
     47     <pre id="file_result"></pre>
     48   </section>
     49   <section>
     50     <div id="scroll"><p>Scroll me.</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p><p>Line 7</p></div>
     51     <p id="scroll_value">scrollTop=0</p>
     52   </section>
     53   <section><canvas id="canvas" width="350" height="140"></canvas></section>
     54   <section><audio id="audio" controls></audio><video id="video" controls width="320"></video></section>
     55   <section><h2>Joystick</h2><div id="stick"></div><p id="stick_readout">x=0 y=0</p></section>
     56   <py1>
     57 from pytml import joystick
     58 
     59 def range_changed(event):
     60     range_value.text = range.value
     61 
     62 def submit_form(event):
     63     event.prevent_default()
     64     form_result.text = "Submitted: " + form_name.value
     65 
     66 def read_file(event):
     67     file_result.text = str(file.files)
     68 
     69 def scrolled(event):
     70     scroll_value.text = "scrollTop=" + str(scroll.scroll_top)
     71 
     72 def moved(event):
     73     stick_readout.text = f"x={event['joystick_x']:.2f} y={event['joystick_y']:.2f}"
     74 
     75 def draw():
     76     ctx = canvas.canvas_context("2d")
     77     ctx.clearRect(0, 0, 350, 140)
     78     ctx.fillStyle = "#3b82f6"
     79     ctx.fillRect(20, 20, 120, 80)
     80 
     81 draw()
     82 range.on("input", range_changed)
     83 form.on("submit", submit_form)
     84 read_file.on("click", read_file)
     85 file.on("change", read_file)
     86 scroll.on("scroll", scrolled)
     87 stick = joystick("stick")
     88 stick.on("joystickmove", moved)
     89   </py1>
     90 </body>
     91 </html>