Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link href="{{ css_files.all_css }}" rel="stylesheet"> | |
| <link href="{{ css_files.font_css }}" rel="stylesheet"> | |
| <link href="{{ css_files.bundle_css }}" rel="stylesheet"> | |
| <link href="{{ css_files.style_css }}" rel="stylesheet"> | |
| <link href="{{ css_files.phb_style_css }}" rel="stylesheet"> | |
| <link href="{{ css_files.store_ui_css }}" rel="stylesheet"> | |
| <title>DnD Stat Block</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script> | |
| <style> | |
| @media print { | |
| /* Hide everything by default */ | |
| body * { | |
| visibility: hidden; | |
| } | |
| /* Specifically show the section you want to print */ | |
| #brewRenderer, #brewRenderer * { | |
| visibility: visible; | |
| page-break-before: auto; | |
| page-break-after: avoid; | |
| page-break-inside: avoid; | |
| } | |
| /* Ensure the printable section takes up the full page */ | |
| #brewRenderer { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: auto; | |
| } | |
| } | |
| /* Modal styles */ | |
| .modal { | |
| display: none; /* Hidden by default */ | |
| position: fixed; /* Stay in place */ | |
| z-index: 1000; /* Sit on top */ | |
| left: 0; | |
| top: 0; | |
| width: 100%; /* Full width */ | |
| height: 100%; /* Full height */ | |
| overflow: auto; /* Enable scroll if needed */ | |
| background-color: rgb(0,0,0); /* Fallback color */ | |
| background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ | |
| } | |
| .modal-content { | |
| background-color: #fefefe; | |
| margin: 5% auto; /* 15% from the top and centered */ | |
| padding: 20px; | |
| border: 1px solid #888; | |
| width: 80%; /* Could be more or less, depending on screen size */ | |
| height: 80%; /* Set an appropriate height for the modal */ | |
| overflow-y: auto; /* Enable vertical scrolling */ | |
| } | |
| .close { | |
| color: #aaa; | |
| float: right; | |
| font-size: 28px; | |
| font-weight: bold; | |
| } | |
| .close:hover, .close:focus { | |
| color: black; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="grid-container"> | |
| <div class="block-container" id="blockContainer" > | |
| <div class="page" id = "block-page" data-page-id="block-container"> | |
| <!-- Blocks will be wrapped in a page div and loaded here --> | |
| </div> | |
| </div> | |
| <div id="floatingToolbar"> | |
| <h1>Store Description</h1> | |
| <textarea id="user-description" class="user-description-textarea" | |
| hx-post="/update-stats" hx-trigger="change" | |
| hx-target="#user-description" hx-swap="outerHTML" | |
| title="As much or as little description as you want to provide. You can provide specific employees, inventory etc">A very standard gear store run by a fae potted plant named Gorgeous</textarea> | |
| <button id="submitDescription">Submit</button> | |
| <button id="autofillButton">Autofill Pages</button> | |
| <button id="toggleButton">Toggle Image Descriptions</button> | |
| <button id="addPageButton">Add New Page</button> | |
| <button id="removePageButton">Remove Last Page</button> | |
| <button id="resetButton">Reset</button> | |
| <button id="printButton">Print</button> | |
| </div> | |
| <div class="page-container" id="pageContainer"> | |
| <div class="brewRenderer" id="brewRenderer"> | |
| <div class="pages" id="pages"> | |
| <div id="page-1" class="page" data-page-id="page-0"> | |
| <div class="columnWrapper"> | |
| <div class="block monster frame wide"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="trash-area" id="trashArea"></div> | |
| <!-- The Modal --> | |
| <div id="imageModal" class="modal"> | |
| <span class="close">×</span> | |
| <img class="modal-content" id="modalImage"> | |
| <div id="caption"></div> | |
| </div> | |
| <div id="printModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close">×</span> | |
| <div id="modalPreviewContent"></div> | |
| </div> | |
| </div> | |
| <div id="iFrameContainer" style="display:none;"></div> | |
| <script src="scripts.js"></script> | |
| </script> | |
| </body> | |
| </html> |