File size: 4,882 Bytes
d5fb696 40db3b8 d5fb696 0034c2d 8ac1fbd 0034c2d d5fb696 a980fa8 412d5a3 a980fa8 cf6d81c a980fa8 8ac1fbd a980fa8 2d15a52 dcc8bc7 b1df057 d5fb696 0034c2d 8ac1fbd 454d813 d5fb696 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<!DOCTYPE html>
<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/htmx.org@1.7.0/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> |