Spaces:
Sleeping
Sleeping
Commit
•
0034c2d
1
Parent(s):
0a3d2d2
added updated storeUI.html and proxy.html with modal
Browse files- templates/proxy.html +0 -2
- templates/storeUI.html +43 -0
templates/proxy.html
CHANGED
|
@@ -34,13 +34,11 @@
|
|
| 34 |
</style>
|
| 35 |
</head>
|
| 36 |
<body>
|
| 37 |
-
<!-- <div id="pageContainer" class="page-container"> -->
|
| 38 |
<div id= "brewRenderer" class="brewRenderer">
|
| 39 |
<!-- This div will display the content passed from the main app -->
|
| 40 |
<div id="printContent">{{ html_content|safe }}
|
| 41 |
</div>
|
| 42 |
</div>
|
| 43 |
-
<!-- </div> -->
|
| 44 |
<div id="preview-actions">
|
| 45 |
<button id="print-button">Print</button>
|
| 46 |
<button id="cancel-button">Cancel</button>
|
|
|
|
| 34 |
</style>
|
| 35 |
</head>
|
| 36 |
<body>
|
|
|
|
| 37 |
<div id= "brewRenderer" class="brewRenderer">
|
| 38 |
<!-- This div will display the content passed from the main app -->
|
| 39 |
<div id="printContent">{{ html_content|safe }}
|
| 40 |
</div>
|
| 41 |
</div>
|
|
|
|
| 42 |
<div id="preview-actions">
|
| 43 |
<button id="print-button">Print</button>
|
| 44 |
<button id="cancel-button">Cancel</button>
|
templates/storeUI.html
CHANGED
|
@@ -12,6 +12,42 @@
|
|
| 12 |
<title>DnD Stat Block</title>
|
| 13 |
<link rel="stylesheet" href="styles.css">
|
| 14 |
<script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 15 |
</head>
|
| 16 |
|
| 17 |
<body>
|
|
@@ -59,6 +95,13 @@
|
|
| 59 |
<img class="modal-content" id="modalImage">
|
| 60 |
<div id="caption"></div>
|
| 61 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 62 |
<script src="scripts.js"></script>
|
| 63 |
|
| 64 |
</script>
|
|
|
|
| 12 |
<title>DnD Stat Block</title>
|
| 13 |
<link rel="stylesheet" href="styles.css">
|
| 14 |
<script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script>
|
| 15 |
+
|
| 16 |
+
<style>
|
| 17 |
+
/* Modal styles */
|
| 18 |
+
.modal {
|
| 19 |
+
display: none; /* Hidden by default */
|
| 20 |
+
position: fixed; /* Stay in place */
|
| 21 |
+
z-index: 1000; /* Sit on top */
|
| 22 |
+
left: 0;
|
| 23 |
+
top: 0;
|
| 24 |
+
width: 100%; /* Full width */
|
| 25 |
+
height: 100%; /* Full height */
|
| 26 |
+
overflow: auto; /* Enable scroll if needed */
|
| 27 |
+
background-color: rgb(0,0,0); /* Fallback color */
|
| 28 |
+
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
| 29 |
+
}
|
| 30 |
+
.modal-content {
|
| 31 |
+
background-color: #fefefe;
|
| 32 |
+
margin: 5% auto; /* 15% from the top and centered */
|
| 33 |
+
padding: 20px;
|
| 34 |
+
border: 1px solid #888;
|
| 35 |
+
width: 80%; /* Could be more or less, depending on screen size */
|
| 36 |
+
height: 80%; /* Set an appropriate height for the modal */
|
| 37 |
+
overflow-y: auto; /* Enable vertical scrolling */
|
| 38 |
+
}
|
| 39 |
+
.close {
|
| 40 |
+
color: #aaa;
|
| 41 |
+
float: right;
|
| 42 |
+
font-size: 28px;
|
| 43 |
+
font-weight: bold;
|
| 44 |
+
}
|
| 45 |
+
.close:hover, .close:focus {
|
| 46 |
+
color: black;
|
| 47 |
+
text-decoration: none;
|
| 48 |
+
cursor: pointer;
|
| 49 |
+
}
|
| 50 |
+
</style>
|
| 51 |
</head>
|
| 52 |
|
| 53 |
<body>
|
|
|
|
| 95 |
<img class="modal-content" id="modalImage">
|
| 96 |
<div id="caption"></div>
|
| 97 |
</div>
|
| 98 |
+
<div id="printModal" class="modal">
|
| 99 |
+
<div class="modal-content">
|
| 100 |
+
<span class="close">×</span>
|
| 101 |
+
<div id="modalPreviewContent"></div>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
|
| 105 |
<script src="scripts.js"></script>
|
| 106 |
|
| 107 |
</script>
|