diff options
Diffstat (limited to 'index.php')
| -rw-r--r-- | index.php | 101 |
1 files changed, 56 insertions, 45 deletions
@@ -12,18 +12,16 @@ session_start(); ?> <title>procrastiSlides: great for procratinators who need to get a presentation out, quick! 😆</title> <meta name="description" content="create .pdf presentations from markdown! 🤗 procrastiSlides is a simple presentation(s) site that respects your dark mode setting and has responsive web design. non-intruisive ads, no tracking, nothing but quick slides from plain text/markdown. 🏫 try copy and pasting your school notes! that might even work 😂"> - <link rel="icon" href="../img/site-icon.webp" type="image/x-icon"> - <meta name="color-scheme" content="light dark"> + <?php include "includes/link-tags-in-head.php"; ?> + <meta name="color-scheme" content="light dark"> </head> <body> <?php - include "includes/link-tags.php"; include "includes/procrastislides-banner.php"; include "includes/main-info.php"; include "includes/nav-header.php"; ?> - <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> <?php if (isset($_POST["compile"])) { $_SESSION["user-input"] = $_POST["user-input"]; ?> <div class="centered"> @@ -92,53 +90,66 @@ session_start(); ?> } ?> <?php if (!isset($_POST["compile"])) { ?> <div> - <h2 class="centered">markdown goes here:</h2> - <form class="" action="index.php" method="post"> - <textarea id="user-input" name="user-input" rows="8" cols="80"><?php echo $_SESSION["user-input"]; ?></textarea> - <div class="centered"> - <button type="submit" name="compile">create presentation</button> - </div> - </form> - <script type="text/javascript"> - var simplemde = new SimpleMDE({ - element: document.getElementById("user-input") - }); - </script> <br> - <a name="how-to"> - <h2 class="centered">quick read how-to:</h2> - </a> - <ul> - <li>type '#' to indicate that you are starting a new slide and then press ↵ (enter/return) twice.</li> - <li>you can add a "slide title" after each '#' to name that portion of your presentation.</li> + <details> + <summary style="font-size: 1.125rem;"><strong>← expand for markdown text editor ✏</strong></summary> + <p> + <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> + <form class="" action="index.php" method="post"> + <textarea id="user-input" name="user-input" rows="8" cols="80"><?php echo $_SESSION["user-input"]; ?></textarea> + <div class="centered"> + <button type="submit" name="compile">create presentation</button> + </div> + </form> + <script type="text/javascript"> + var simplemde = new SimpleMDE({ + element: document.getElementById("user-input") + }); + </script> + </p> + <link rel="stylesheet" href="../css/editor.css"> + </details> + <br> + <details> + <summary style="font-size: 1.125rem;"><strong>← expand for a quick read how-to 📖</strong></summary> + <p> <ul> - <li>a space between "#" and your slide title is required: <br><br> </li> - <ul class="no-bullets"> - <li># [YOUR TITLE GOES HERE]</li> + <li>type '#' to indicate that you are starting a new slide and then press ↵ (enter/return) twice.</li> + <li>you can add a "slide title" after each '#' to name that portion of your presentation.</li> + <ul> + <li>a space between "#" and your slide title is required: <br><br> </li> + <ul class="no-bullets"> + <li># [YOUR TITLE GOES HERE]</li> + </ul> + <br> </ul> - <br> - </ul> - <li>type/format text underneath the '#' for the slide contents.</li> - <ul> - <li>make sure to start typing your slide content two ↵'s ("enter key presses") away from the "#".</li> - <li>lists require to be formatted in this manner as well: <br><br> </li> - <ul class="no-bullets"> - <li># slide title <br><br> - This is a list <br><br> - * item 1 <br> - * item 2 <br> - * item 3 <br> - </li> + <li>type/format text underneath the '#' for the slide contents.</li> + <ul> + <li>make sure to start typing your slide content two ↵'s ("enter key presses") away from the "#".</li> + <li>lists require to be formatted in this manner as well: <br><br> </li> + <ul class="no-bullets"> + <li># slide title <br><br> + This is a list <br><br> + * item 1 <br> + * item 2 <br> + * item 3 <br> + </li> + </ul> </ul> </ul> - </ul> + <br> + <p class="centered"> <i>It's highly recommended that you use markdown lists rather than plain text lists</i> </p><br> + </p> + </details> <br> - <p class="centered"> <i>It's highly recommended that you use markdown lists rather than plain text lists</i> </p><br> - <h2 class="centered">short demo video:</h2> - </a><br> - <div class="responsive-video"> - <iframe loading="lazy" width="100%" height="480" src="https://www.youtube.com/embed/DGudYy0sfx8" title="procrastiSlides demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> - </div> + <details> + <summary style="font-size: 1.125rem;"><strong>← expand for a video short demo 🎬</strong></summary> + <p> + <div class="responsive-video"> + <iframe loading="lazy" width="100%" height="480" src="https://www.youtube.com/embed/DGudYy0sfx8" title="procrastiSlides demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> + </div> + </p> + </details> <br> </div> <?php } ?> |