Spaces:

TheDrakosfire
/

StoreGenerator

StoreGenerator / templates /storeUI.html

formatted css, removed iframe print function, replaced with print.window(), add @media css to storeUI.html that print's only brewRenderer

8ac1fbd 2 months ago

raw

history blame contribute delete

4.88 kB

	<!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>