86 lines
4.3 KiB
Django/Jinja
86 lines
4.3 KiB
Django/Jinja
{% extends "tools/_tool.jinja" %}
|
|
|
|
{% block tool_content %}
|
|
|
|
{{ render_h2(l10n("upload.title", tool_id, user_lang)) }}
|
|
<div class="px-s">
|
|
<button id="svgtopng-add" class="p-xs r-s border b-light primary">
|
|
<i class="fa-duotone fa-solid fa-cloud-arrow-up mr-xs"></i>{{ l10n("upload.add.button", tool_id, user_lang) }}
|
|
</button>
|
|
<button id="svgtopng-reset" class="p-xs r-s border b-light warning">
|
|
{{ l10n("upload.clear.button", tool_id, user_lang) }}
|
|
</button>
|
|
|
|
<br>
|
|
|
|
<div class="svgtopng-file-drop-container border r-s bkgd-blank">
|
|
<p class="svgtopng-file-drop-text" id="pngtoico-drop-text-drop">Drop your file(s) here</p>
|
|
<p class="svgtopng-file-drop-text" id="pngtoico-drop-text-file-single" hidden>You selected 1 file</p>
|
|
<p class="svgtopng-file-drop-text" id="pngtoico-drop-text-file-multiple" hidden>You selected <span>9</span> files</p>
|
|
<label for="pngtoico-drop" hidden>Choose or drop SVG files:</label>
|
|
<input type="file" id="pngtoico-drop" name="pngtoico-drop" accept="image/svg+xml"
|
|
class="w-full p-l" multiple/>
|
|
</div>
|
|
</div>
|
|
|
|
{{ render_h2(l10n("options.title", tool_id, user_lang)) }}
|
|
<div class="px-s">
|
|
<label for="svgtopng-fit-mode" class="mr-xs">{{ l10n("fit.label", tool_id, user_lang) }}:</label>
|
|
<select name="svgtopng-fit-mode" id="svgtopng-fit-mode" class="p-xxs border r-s">
|
|
<option value="fit-svg">{{ l10n("fit.svg", tool_id, user_lang) }}</option>
|
|
<option value="fit-fixed" selected>{{ l10n("fit.fixed", tool_id, user_lang) }}</option>
|
|
<option value="fit-bigger-than">{{ l10n("fit.bigger", tool_id, user_lang) }}</option>
|
|
<option value="fit-smaller-than">{{ l10n("fit.smaller", tool_id, user_lang) }}</option>
|
|
</select>
|
|
|
|
<div id="svgtopng-options-fit-svg" hidden>
|
|
|
|
</div>
|
|
|
|
<div id="svgtopng-options-fit-fixed">
|
|
<label for="fixed-size-width" class="mr-xs">{{ l10n("width", "commons", user_lang) }}:</label>
|
|
<input id="fixed-size-width" class="p-xxs border r-s" type="number" value="64">
|
|
<br>
|
|
<label for="fixed-size-height" class="mr-xs">{{ l10n("height", "commons", user_lang) }}:</label>
|
|
<input id="fixed-size-height" class="p-xxs border r-s" type="number" value="64">
|
|
</div>
|
|
|
|
<div id="svgtopng-options-fit-bigger-than" hidden>
|
|
<label for="bigger-than-size-width" class="mr-xs">{{ l10n("width.min", "commons", user_lang) }}:</label>
|
|
<input id="bigger-than-width" class="p-xxs border r-s" type="number" value="64">
|
|
<br>
|
|
<label for="bigger-than-height" class="mr-xs">{{ l10n("height.min", "commons", user_lang) }}:</label>
|
|
<input id="bigger-than-height" class="p-xxs border r-s" type="number" value="64">
|
|
</div>
|
|
|
|
<div id="svgtopng-options-fit-smaller-than" hidden>
|
|
<label for="smaller-than-size-width" class="mr-xs">{{ l10n("width.max", "commons", user_lang) }}:</label>
|
|
<input id="smaller-than-width" class="p-xxs border r-s" type="number" value="64">
|
|
<br>
|
|
<label for="smaller-than-height" class="mr-xs">{{ l10n("height.max", "commons", user_lang) }}:</label>
|
|
<input id="smaller-than-height" class="p-xxs border r-s" type="number" value="64">
|
|
</div>
|
|
|
|
<div>
|
|
<button id="svgtopng-export-individual" class="p-xs r-s border b-light success">
|
|
{{ l10n("download.main.button", tool_id, user_lang) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{ render_h2(l10n("preview.title", tool_id, user_lang)) }}
|
|
<div class="px-s">
|
|
<button id="svgtopng-preview-generate" class="p-xs r-s border b-light primary">
|
|
{{ l10n("preview.generate.button", tool_id, user_lang) }}
|
|
</button>
|
|
<button id="svgtopng-preview-reset" class="p-xs r-s border b-light warning">
|
|
{{ l10n("preview.clear.button", tool_id, user_lang) }}
|
|
</button>
|
|
<div id="svgtopng-preview-container" class="w-full ox-scroll">
|
|
<!--<hr class="subtle">-->
|
|
</div>
|
|
</div>
|
|
|
|
<!--<canvas id="svgtopng-conversion-canvas" width="256" height="256" class="border r-l d-none"></canvas>-->
|
|
{% endblock %}
|