diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 85 |
1 files changed, 47 insertions, 38 deletions
@@ -4,13 +4,16 @@ <title>Prosodyle</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" type="text/css" href="/cyfraeviolae/static/styles.css"> <link rel="stylesheet" type="text/css" href="/prosodyle/static/styles.css"> <link rel="shortcut icon" type="image/x-icon" href="/prosodyle/static/favicon.ico"> </head> <body> <div class="container"> <div> - <a href="/" class="title">Prosodyle</a><span>@</span><a href="https://cyfraeviolae.org">cyfraeviolae.org</a> + <span class="home"> + <a href="/prosodyle" class="title">Prosodyle</a><span>@</span><a href="https://cyfraeviolae.org">cyfraeviolae.org</a> + </span> <span class="sep">|</span> <a href="https://cyfraeviolae.org/git/prosodyle">source code</a> </div> @@ -24,15 +27,57 @@ place 🟨, or not in the word at all ⬜. </p> <noscript>Sorry, JavaScript is required to play Prosodyle.</noscript> + <br> <form id="game" action="javascript:void(0);" method="none"> <p> Write a line of poetry. Syllables in dark boxes should be stressed. </p> + <br> <div id="entry"></div> <div id="btns"> <button id="check" type="submit">Check</button> <button id="clear">Clear</button> </div> + <br> + <div style="text-align: center;"> + <div class="keyboard"> + <div class="kbrow"> + <div class="key" data-key="Q">Q</div> + <div class="key" data-key="W">W</div> + <div class="key" data-key="E">E</div> + <div class="key" data-key="R">R</div> + <div class="key" data-key="T">T</div> + <div class="key" data-key="Y">Y</div> + <div class="key" data-key="U">U</div> + <div class="key" data-key="I">I</div> + <div class="key" data-key="O">O</div> + <div class="key" data-key="P">P</div> + </div> + <div class="kbrow"> + <div class="key" data-key="A">A</div> + <div class="key" data-key="S">S</div> + <div class="key" data-key="D">D</div> + <div class="key" data-key="F">F</div> + <div class="key" data-key="G">G</div> + <div class="key" data-key="H">H</div> + <div class="key" data-key="J">J</div> + <div class="key" data-key="K">K</div> + <div class="key" data-key="L">L</div> + <div class="key" data-key="Backspace">⇤</div> + </div> + <div class="kbrow"> + <div class="key" data-key="Z">Z</div> + <div class="key" data-key="X">X</div> + <div class="key" data-key="C">C</div> + <div class="key" data-key="V">V</div> + <div class="key" data-key="B">B</div> + <div class="key" data-key="N">N</div> + <div class="key" data-key="M">M</div> + <div class="key" data-key="ArrowLeft">←</div> + <div class="key" data-key="ArrowRight">→</div> + </div> + </div> + </div> <hr> <div id="win" style="display: none;"> <p> @@ -49,6 +94,7 @@ In the meantime, you may share your results with your fellow acolytes, adding punctuation as desired. </p> + <br> <div> <textarea rows="4" id="share"></textarea> </div> @@ -58,43 +104,6 @@ <p id="guesses"></p> </form> </div> - <div class="keyboard"> - <div class="kbrow"> - <div class="key" data-key="Q">Q</div> - <div class="key" data-key="W">W</div> - <div class="key" data-key="E">E</div> - <div class="key" data-key="R">R</div> - <div class="key" data-key="T">T</div> - <div class="key" data-key="Y">Y</div> - <div class="key" data-key="U">U</div> - <div class="key" data-key="I">I</div> - <div class="key" data-key="O">O</div> - <div class="key" data-key="P">P</div> - </div> - <div class="kbrow"> - <div class="key" data-key="A">A</div> - <div class="key" data-key="S">S</div> - <div class="key" data-key="D">D</div> - <div class="key" data-key="F">F</div> - <div class="key" data-key="G">G</div> - <div class="key" data-key="H">H</div> - <div class="key" data-key="J">J</div> - <div class="key" data-key="K">K</div> - <div class="key" data-key="L">L</div> - <div class="key" data-key="Backspace">⇤</div> - </div> - <div class="kbrow"> - <div class="key" data-key="Z">Z</div> - <div class="key" data-key="X">X</div> - <div class="key" data-key="C">C</div> - <div class="key" data-key="V">V</div> - <div class="key" data-key="B">B</div> - <div class="key" data-key="N">N</div> - <div class="key" data-key="M">M</div> - <div class="key" data-key="ArrowLeft">←</div> - <div class="key" data-key="ArrowRight">→</div> - </div> - </div> <script src="/prosodyle/static/poems.js"></script> <script src="/prosodyle/static/script.js"></script> </body> |