mcelwain
/
utility-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Standardize document generator toolbar buttons

This commit is contained in:
Sean McElwain 2026-06-09 23:53:26 -05:00
parent 4802ba2894
commit 7ae37d0bb7
2 changed files with 214 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
static/index.html
View File

@ -1,30 +1,61 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Document Generator</title> <title>Utility App</title>
<link rel="stylesheet" href="/static/styles.css?v=picker1"> <link rel="stylesheet" href="/static/styles.css?v=shell1">
</head> </head>
<body> <body>
<div class="container"> <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>
<main class="container">
<section id="homeView" class="app-view active">
<div class="heading">
<h1 id="mainPageTitle">Utility App</h1>
</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>
<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>
<section id="docGeneratorView" class="app-view">
<div class="heading"> <div class="heading">
<h1>Document Generator</h1> <h1>Document Generator</h1>
</div> </div>
<button id="clearFormButton" type="button">Clear Form</button> <div class="tool-button-row">
<button id="clearFormButton" class="tool-action-button" type="button">Clear Form</button>
<label class="file-button"> <label class="file-button tool-action-button">
Upload JSON Upload JSON
<input type="file" id="presetFileInput" accept=".json,application/json"> <input type="file" id="presetFileInput" accept=".json,application/json">
</label> </label>
<button id="downloadJsonButton" type="button">Download JSON</button> <button id="downloadJsonButton" class="tool-action-button" type="button">Download JSON</button>
<label class="file-button"> <label class="file-button tool-action-button">
Upload Data CSV Upload Data CSV
<input type="file" id="dataFileInput" accept=".csv,text/csv"> <input type="file" id="dataFileInput" accept=".csv,text/csv">
</label> </label>
<button id="downloadDataButton" type="button">Download Data CSV</button> <button id="downloadDataButton" class="tool-action-button" type="button">Download Data CSV</button>
</div>
<h2>Document Type</h2> <h2>Document Type</h2>
@ -58,10 +89,27 @@
</div> </div>
</div> </div>
</form> </form>
</section>
<div id="status"></div> <section id="pdfAnnotatorView" class="app-view">
<div class="heading">
<h1>PDF Annotator</h1>
</div> </div>
<script src="/static/app.js?v=picker1"></script> <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>
</main>
<script src="/static/app.js?v=shell1"></script>
</body> </body>
</html> </html>

118
static/styles.css
View File

@ -301,3 +301,121 @@ input[type="submit"] {
font-style: italic; font-style: italic;
padding: 4px 0 8px; 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;
}
}