feat: add zoom and fullscreen controls to preview, enhance card fit options
This commit is contained in:
Ross
+147
@@ -287,6 +287,8 @@
|
||||
height: 600px;
|
||||
border: none;
|
||||
display: block;
|
||||
transform-origin: top left;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
@@ -301,6 +303,118 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.zoom-btn:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.zoom-btn:active {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fullscreen-btn {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.fullscreen-btn:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.preview-container.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.preview-container.fullscreen .preview-iframe {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.preview-container.fullscreen::before {
|
||||
content: '✕ Close (ESC)';
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 10000;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.preview-container.fullscreen:hover::before {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.fullscreen-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9998;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fullscreen-overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -612,6 +726,16 @@
|
||||
<label for="card-spacing">Card spacing (mm)</label>
|
||||
<input type="number" id="card-spacing" value="5" min="0" max="20">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="global-card-fit">Global card fit</label>
|
||||
<select id="global-card-fit">
|
||||
<option value="-0.02">Overfit (+2%)</option>
|
||||
<option value="0" selected>Exact fit</option>
|
||||
<option value="0.02">Underfit (-2%)</option>
|
||||
</select>
|
||||
<small style="color: #666; display: block; margin-top: 5px;">Adjust the print size for all cards (can be overridden per card)</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -644,6 +768,16 @@
|
||||
<div class="panel preview-panel">
|
||||
<h3 style="margin-bottom: 20px;">Preview</h3>
|
||||
|
||||
<div class="preview-controls">
|
||||
<div class="zoom-controls">
|
||||
<button class="zoom-btn" id="zoom-out" title="Zoom Out">-</button>
|
||||
<span class="zoom-level" id="zoom-level">100%</span>
|
||||
<button class="zoom-btn" id="zoom-in" title="Zoom In">+</button>
|
||||
<button class="zoom-btn" id="zoom-reset" title="Reset Zoom">↻</button>
|
||||
</div>
|
||||
<button class="fullscreen-btn" id="fullscreen-btn" title="Full Screen (Press ESC to exit)">⛶ Full Screen</button>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<div class="preview-placeholder" id="preview-placeholder">
|
||||
Click "Generate Preview" to see your cover
|
||||
@@ -930,6 +1064,17 @@
|
||||
<input type="number" id="card-footer-font-size" value="12" min="8" max="100" step="2">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-fit">Card print fit override</label>
|
||||
<select id="card-fit">
|
||||
<option value="">Use global setting</option>
|
||||
<option value="-0.02">Overfit (+2%)</option>
|
||||
<option value="0">Exact fit</option>
|
||||
<option value="0.02">Underfit (-2%)</option>
|
||||
</select>
|
||||
<small style="color: #666; display: block; margin-top: 5px;">Override the global card fit setting for this card</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Footer Position</label>
|
||||
<div class="position-controls">
|
||||
@@ -988,6 +1133,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fullscreen-overlay" id="fullscreen-overlay"></div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user