129 lines
5.1 KiB
HTML
129 lines
5.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>CSS Matrix3D Perspective Calculator</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header-left">
|
|
<h1>CSS Matrix3D Perspective Calculator</h1>
|
|
<p>Set 4 corners on the field and widget size — get CSS matrix3d() for perspective rendering</p>
|
|
</div>
|
|
<span class="mode-hint" id="modeHint">Drag corners on the field</span>
|
|
<div class="mode-toggle">
|
|
<button class="mode-btn active" id="btnEdit">Edit</button>
|
|
<button class="mode-btn" id="btnPreview">Preview</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="left-col">
|
|
<div class="panel">
|
|
<svg id="svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet"></svg>
|
|
</div>
|
|
<div class="panel">
|
|
<div id="fieldContainer">
|
|
<div id="field">
|
|
<div id="widget">
|
|
<span>WIDGET</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-col">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>Field</h2>
|
|
<button class="btn btn-edit-field" id="btnEditField">Edit</button>
|
|
</div>
|
|
<div class="field-size-stack">
|
|
<div class="chain-link" id="chainLink" title="Keep aspect ratio">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
height="20"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path class="chain-locked" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
|
<path class="chain-locked" d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
|
<path class="chain-unlocked" d="M13.5 10.5l3-3" style="display: none" />
|
|
<path class="chain-unlocked" d="M10.5 13.5l-3 3" style="display: none" />
|
|
<path class="chain-unlocked" d="M7.5 7.5l9 9" style="display: none" />
|
|
</svg>
|
|
</div>
|
|
<div class="field-stack-inputs">
|
|
<label><span>W</span><input id="inpFieldW" type="number" value="1920" min="1" disabled /></label>
|
|
<label><span>H</span><input id="inpFieldH" type="number" value="1080" min="1" disabled /></label>
|
|
</div>
|
|
</div>
|
|
<div class="field-edit-options" id="fieldEditOptions">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="chkRescaleCoords" checked />
|
|
<span>Rescale coordinates</span>
|
|
</label>
|
|
<div class="field-save-row">
|
|
<button class="btn btn-cancel-field" id="btnCancelField">Cancel</button>
|
|
<button class="btn btn-save-field" id="btnSaveField">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="bgPanel">
|
|
<h2>Background</h2>
|
|
<div class="bg-controls">
|
|
<input type="file" id="bgFileInput" accept="image/*" hidden />
|
|
<button class="btn btn-edit-field" id="btnBgLoad">Load Image</button>
|
|
<button class="btn btn-cancel-field" id="btnBgRemove" style="display:none">Remove</button>
|
|
<select id="bgObjectFit">
|
|
<option value="contain">contain</option>
|
|
<option value="cover">cover</option>
|
|
<option value="fill">fill</option>
|
|
<option value="none">none</option>
|
|
<option value="scale-down">scale-down</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="widgetPanel">
|
|
<h2>Widget</h2>
|
|
<div class="field-row">
|
|
<label><span>W</span><input id="inpWidgetW" type="number" value="400" min="1" /></label>
|
|
<label><span>H</span><input id="inpWidgetH" type="number" value="300" min="1" /></label>
|
|
</div>
|
|
<div class="widget-img-controls">
|
|
<input type="file" id="widgetFileInput" accept="image/*" hidden />
|
|
<button class="btn btn-edit-field" id="btnWidgetLoad">Load Image</button>
|
|
<button class="btn btn-cancel-field" id="btnWidgetRemove" style="display:none">Remove</button>
|
|
</div>
|
|
<input id="widgetPasteInput" type="text" class="widget-paste-input" placeholder="Ctrl+V to paste image" readonly />
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Corners</h2>
|
|
<div class="corner-inputs" id="cornerInputs"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>CSS Output</h2>
|
|
<textarea id="cssOutput" rows="10" readonly></textarea>
|
|
<div class="btn-row">
|
|
<button class="btn btn-copy" id="copyBtn">Copy CSS</button>
|
|
<button class="btn btn-reset" id="resetBtn">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script type="module" src="js/main.js"></script>
|
|
</body>
|
|
</html>
|