mirror of
https://github.com/godotengine/godot-website-cover-generator.git
synced 2026-09-03 23:33:32 +03:00
99 lines
3.8 KiB
HTML
99 lines
3.8 KiB
HTML
<html>
|
|
<head>
|
|
<title>Article cover generator - Godot Engine</title>
|
|
<link rel="stylesheet" href="styles/normalize.css" />
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body>
|
|
|
|
<script src="scripts/main.js"></script>
|
|
|
|
<div class="content">
|
|
<div class="toolbar">
|
|
<h3>Configuration</h3>
|
|
|
|
<div class="toolbar-item">
|
|
<label for="background-image">Featured image</label>
|
|
<div class="toolbar-item-controls">
|
|
<input type="file" accept="image/*" id="background-image" />
|
|
<button id="background-image-fit">Fit</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar-item">
|
|
<label for="title-text">Title text</label>
|
|
<input type="text" id="title-text" value="" />
|
|
</div>
|
|
|
|
<div class="toolbar-item">
|
|
<label for="super-text">Supertext</label>
|
|
<input type="text" id="super-text" value="" />
|
|
</div>
|
|
|
|
<div class="toolbar-spacer"></div>
|
|
|
|
<h3>Fine tuning</h3>
|
|
|
|
<div class="toolbar-item toolbar-item--oneline">
|
|
<label for="clear-color">Clear color</label>
|
|
<input type="color" id="clear-color" value="#000000" />
|
|
</div>
|
|
|
|
<div class="toolbar-item">
|
|
<label for="background-image-scale">Image scale</label>
|
|
<div class="toolbar-item-controls">
|
|
<input type="range" id="background-image-scale" min="0.25" max="6.0" step="0.001" value="1.0" />
|
|
<span id="background-image-scale-value">1.000</span>
|
|
<button id="background-image-scale-reset">Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar-item">
|
|
<label for="background-image-offset-x">Image offset</label>
|
|
<div class="toolbar-item-controls">
|
|
<div>
|
|
<input type="number" id="background-image-offset-x" style="max-width: 100px;" value="0.000" />
|
|
<input type="number" id="background-image-offset-y" style="max-width: 100px;" value="0.000" />
|
|
</div>
|
|
<button id="background-image-offset-reset">Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar-spacer"></div>
|
|
|
|
<div class="toolbar-item">
|
|
<button id="download-image">Download</button>
|
|
<span id="download-filename" class="toolbar-filename-label" title="Name of the downloaded image file"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="editor">
|
|
<div class="canvas-container">
|
|
<canvas id="generator"></canvas>
|
|
<canvas id="render-target" style="display:none;"></canvas>
|
|
</div>
|
|
<div class="editor-hint">
|
|
<img src="assets/ui/pointer.png" heigth="24" width="24" />
|
|
<span>Click and drag to adjust the image</span>
|
|
<span></span>
|
|
<img src="assets/ui/mouse-middle.png" heigth="24" width="24" />
|
|
<span>Use the scrollwheel to scale the image</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="credits">
|
|
Godot Logo by <a href="https://github.com/godotengine/godot/blob/master/LOGO_LICENSE.txt" target="_blank">Andrea Calabró</a>
|
|
●
|
|
Assets by <a href="https://kenney.nl/" target="_blank">Kenney</a>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|