Standardize document generator toolbar buttons
This commit is contained in:
parent
4802ba2894
commit
7ae37d0bb7
|
|
@ -1,67 +1,115 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Generator</title>
|
||||
<link rel="stylesheet" href="/static/styles.css?v=picker1">
|
||||
<title>Utility App</title>
|
||||
<link rel="stylesheet" href="/static/styles.css?v=shell1">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="heading">
|
||||
<h1>Document Generator</h1>
|
||||
<header class="app-header">
|
||||
<div class="app-header-inner">
|
||||
<div class="app-title">Utility App</div>
|
||||
|
||||
<nav class="app-nav">
|
||||
<button class="nav-button active" type="button" data-view="homeView">Home</button>
|
||||
<button class="nav-button" type="button" data-view="docGeneratorView">Document Generator</button>
|
||||
<button class="nav-button" type="button" data-view="pdfAnnotatorView">PDF Annotator</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<button id="clearFormButton" type="button">Clear Form</button>
|
||||
|
||||
<label class="file-button">
|
||||
Upload JSON
|
||||
<input type="file" id="presetFileInput" accept=".json,application/json">
|
||||
</label>
|
||||
|
||||
<button id="downloadJsonButton" type="button">Download JSON</button>
|
||||
|
||||
<label class="file-button">
|
||||
Upload Data CSV
|
||||
<input type="file" id="dataFileInput" accept=".csv,text/csv">
|
||||
</label>
|
||||
|
||||
<button id="downloadDataButton" type="button">Download Data CSV</button>
|
||||
|
||||
<h2>Document Type</h2>
|
||||
|
||||
<input type="hidden" id="documentTypeSelect">
|
||||
|
||||
<div class="document-picker dropdown-picker">
|
||||
<button id="documentPickerToggle" class="document-picker-toggle" type="button">
|
||||
<span id="selectedDocumentLabel">Select Document Type</span>
|
||||
<span class="dropdown-arrow">▼</span>
|
||||
</button>
|
||||
|
||||
<div id="documentPickerMenu" class="document-picker-menu">
|
||||
<h3>Default Templates</h3>
|
||||
<div id="defaultDocumentOptions" class="picker-list"></div>
|
||||
|
||||
<h3>Uploaded JSONs</h3>
|
||||
<div id="uploadedJsonOptions" class="picker-list"></div>
|
||||
<main class="container">
|
||||
<section id="homeView" class="app-view active">
|
||||
<div class="heading">
|
||||
<h1 id="mainPageTitle">Utility App</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="documentDescription"></div>
|
||||
<div id="mainPageContent" class="main-page-content" contenteditable="true">
|
||||
<p>Select a tool above. This main page text is editable in the browser for quick notes, instructions, or workflow reminders.</p>
|
||||
<p><strong>Current tools:</strong> Document Generator and PDF Annotator.</p>
|
||||
</div>
|
||||
|
||||
<form id="docForm">
|
||||
<div id="fieldsContainer"></div>
|
||||
<div class="home-actions">
|
||||
<button id="saveMainPageButton" type="button">Save Main Page Text</button>
|
||||
<button id="resetMainPageButton" type="button">Reset Main Page Text</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Generate Documents</h2>
|
||||
<section id="docGeneratorView" class="app-view">
|
||||
<div class="heading">
|
||||
<h1>Document Generator</h1>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Generate DOCX">
|
||||
<div class="tool-button-row">
|
||||
<button id="clearFormButton" class="tool-action-button" type="button">Clear Form</button>
|
||||
|
||||
<label class="file-button tool-action-button">
|
||||
Upload JSON
|
||||
<input type="file" id="presetFileInput" accept=".json,application/json">
|
||||
</label>
|
||||
|
||||
<button id="downloadJsonButton" class="tool-action-button" type="button">Download JSON</button>
|
||||
|
||||
<label class="file-button tool-action-button">
|
||||
Upload Data CSV
|
||||
<input type="file" id="dataFileInput" accept=".csv,text/csv">
|
||||
</label>
|
||||
|
||||
<button id="downloadDataButton" class="tool-action-button" type="button">Download Data CSV</button>
|
||||
</div>
|
||||
|
||||
<h2>Document Type</h2>
|
||||
|
||||
<input type="hidden" id="documentTypeSelect">
|
||||
|
||||
<div class="document-picker dropdown-picker">
|
||||
<button id="documentPickerToggle" class="document-picker-toggle" type="button">
|
||||
<span id="selectedDocumentLabel">Select Document Type</span>
|
||||
<span class="dropdown-arrow">▼</span>
|
||||
</button>
|
||||
|
||||
<div id="documentPickerMenu" class="document-picker-menu">
|
||||
<h3>Default Templates</h3>
|
||||
<div id="defaultDocumentOptions" class="picker-list"></div>
|
||||
|
||||
<h3>Uploaded JSONs</h3>
|
||||
<div id="uploadedJsonOptions" class="picker-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="documentDescription"></div>
|
||||
|
||||
<form id="docForm">
|
||||
<div id="fieldsContainer"></div>
|
||||
|
||||
<h2>Generate Documents</h2>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Generate DOCX">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="pdfAnnotatorView" class="app-view">
|
||||
<div class="heading">
|
||||
<h1>PDF Annotator</h1>
|
||||
</div>
|
||||
|
||||
<p>This is a stub page for the PDF Annotator tool.</p>
|
||||
|
||||
<p>
|
||||
<a class="tool-launch-link" href="http://192.168.1.21:3004/" target="_blank" rel="noopener">
|
||||
Open PDF Annotator
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>Later, this page can embed or proxy the PDF annotator workflow directly inside the Utility App.</p>
|
||||
</section>
|
||||
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/static/app.js?v=picker1"></script>
|
||||
<script src="/static/app.js?v=shell1"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -301,3 +301,121 @@ input[type="submit"] {
|
|||
font-style: italic;
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.app-header-inner {
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
border: 1px solid #777;
|
||||
}
|
||||
|
||||
.nav-button.active {
|
||||
background: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.app-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-view.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-page-content {
|
||||
min-height: 180px;
|
||||
padding: 14px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
background: #fafafa;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.main-page-content:focus {
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.home-actions {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.tool-launch-link {
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tool-launch-link:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.tool-button-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin: 10px 0 18px;
|
||||
}
|
||||
|
||||
.tool-action-button,
|
||||
button.tool-action-button,
|
||||
label.tool-action-button {
|
||||
width: 125px;
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 8px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-button.tool-action-button input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.tool-button-row {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tool-action-button,
|
||||
button.tool-action-button,
|
||||
label.tool-action-button {
|
||||
width: 118px;
|
||||
font-size: 12px;
|
||||
padding: 5px 6px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue