352 lines
12 KiB
HTML
352 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<title>Template Generator</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css?family=Montserrat"
|
|
/>
|
|
<link rel="stylesheet" href="css/w3.css" />
|
|
<link rel="stylesheet" href="css/w3-colors-flat.css" />
|
|
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
|
|
<script type="module" src="js/9.2/main.js"></script>
|
|
|
|
|
|
<body>
|
|
<div
|
|
class="w3-sidebar w3-bar-block w3-collapse w3-large"
|
|
style="width: 300px; margin-top: 51px"
|
|
id="sidebar"
|
|
>
|
|
<ul class="w3-ul">
|
|
<li
|
|
class="w3-bar-item w3-padding-large w3-button"
|
|
style="border-bottom: 1px solid rgb(221, 221, 221)"
|
|
id="loadTemplateBtn"
|
|
>
|
|
Load new template
|
|
</li>
|
|
<li
|
|
class="w3-bar-item w3-padding-large w3-button"
|
|
style="border-bottom: 1px solid rgb(221, 221, 221)"
|
|
id="toggleFilesMenuSB"
|
|
>
|
|
Show saved documents
|
|
</li>
|
|
<li
|
|
class="w3-bar-item w3-padding-large w3-button"
|
|
style="display: block; border-bottom: 2px solid rgb(221, 221, 221)"
|
|
id="importFilesSB"
|
|
>
|
|
Manage backup files
|
|
</li>
|
|
<li
|
|
class="w3-bar-item w3-padding-large w3-button w3-flat-pomegranate"
|
|
style="display: none; border-bottom: 2px solid rgb(221, 221, 221)"
|
|
onclick="localStorage.clear()"
|
|
>
|
|
Clear storage
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="w3-top">
|
|
<div id="navReg" class="w3-flat-wet-asphalt w3-card w3-large">
|
|
<a
|
|
class="w3-button w3-left w3-padding-large w3-hover-grey w3-large w3-flat-wet-aspalt w3-large w3-hide-large"
|
|
href="javascript:void(0);"
|
|
title="Toggle Sidebar Menu"
|
|
id="toggleSidebarMenu"
|
|
><i class="fa fa-bars"></i
|
|
></a>
|
|
<a
|
|
class="w3-button w3-right w3-padding-large w3-hover-grey w3-large w3-flat-wet-aspalt"
|
|
href="javascript:void(0);"
|
|
title="Toggle Navigation Menu"
|
|
id="toggleNavigationMenu"
|
|
><i class="fa fa-bars"></i
|
|
></a>
|
|
<a
|
|
class="w3-button w3-right w3-padding-large w3-hover-grey w3-large w3-flat-wet-aspalt"
|
|
href="javascript:void(0);"
|
|
title="Toggle Textblocks Menu"
|
|
id="toggleTestBlocksMenu"
|
|
><i class="fa fa-plane"></i
|
|
></a>
|
|
<a
|
|
class="w3-button w3-right w3-padding-large w3-hover-grey w3-large w3-flat-wet-aspalt"
|
|
href="javascript:void(0);"
|
|
title="Toggle Files Menu"
|
|
id="toggleFilesMenu"
|
|
><i class="fa fa-file"></i
|
|
></a>
|
|
|
|
<a
|
|
href="."
|
|
id="siteTitle"
|
|
class="w3-left-align w3-button w3-padding-large w3-flat-wet-asphalt"
|
|
>Template Gen</a
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
id="navMob"
|
|
class="w3-bar-block w3-white w3-right w3-hide w3-large w3-border"
|
|
></div>
|
|
<div
|
|
id="navTb"
|
|
class="w3-bar-block w3-white w3-right w3-hide w3-large w3-border"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="w3-main" style="margin-left: 300px">
|
|
<div
|
|
id="mainForm"
|
|
class="w3-row-padding w3-padding-top-64 w3-container w3-flat-clouds"
|
|
>
|
|
<div class="w3-content">
|
|
<div class="w3-third w3-center">
|
|
<i
|
|
class="fas fa-file-alt w3-padding-64 w3-margin-right"
|
|
style="font-size: 200px; color: #34495e"
|
|
></i>
|
|
</div>
|
|
|
|
<div class="w3-twothird">
|
|
<h1>Choose a Template Above</h1>
|
|
<h5 class="w3-padding-32">
|
|
Generate Text and Copy it to Clipboard.
|
|
<br />
|
|
Create a new Template using text markings shown below. Please make
|
|
sure to follow the instructions closeley.
|
|
</h5>
|
|
<h5 class="w3-padding-top w3-text-grey">
|
|
<b>Instructions:</b>
|
|
</h5>
|
|
<ul class="w3-text-grey w3-ul">
|
|
<li>
|
|
A <b>Placeholder</b> helps to identify the correct input field
|
|
and has to be always set
|
|
</li>
|
|
<li>
|
|
The <b>Priorities</b> organize each input field and shows higher
|
|
priority ones first.
|
|
</li>
|
|
<li>
|
|
<b>For one word which needs to change:</b><br />
|
|
<code class="w3-codespan">%Sample Word%1</code>
|
|
</li>
|
|
<li>
|
|
Use <code class="w3-codespan">%</code> at the start and end
|
|
position of the placeholder
|
|
</li>
|
|
<li>
|
|
Set <code class="w3-codespan">1</code> as priority or any other
|
|
number up until 99
|
|
</li>
|
|
<li>
|
|
<b>For gender specific expressions:</b><br />
|
|
<code class="w3-codespan"
|
|
>%Sample Expression=m:der Bauer;w:die Bäuerin;d:
|
|
Bauern;%1</code
|
|
>
|
|
</li>
|
|
<li>
|
|
Use <code class="w3-codespan">%</code> at the start and end
|
|
position of the placeholder
|
|
</li>
|
|
<li>
|
|
Use <code class="w3-codespan">Sample Expression=</code> as
|
|
placeholder name
|
|
</li>
|
|
<li>
|
|
Use <code class="w3-codespan">m:der Bauer;</code> for each
|
|
gender; be careful to add it like so for every gender.
|
|
</li>
|
|
<li>
|
|
<b>For dropdown lists:</b><br />
|
|
Use <code class="w3-codespan">l:item 1;</code> for each
|
|
item
|
|
</li>
|
|
<li>
|
|
<b>For hidden fields and its trigger:</b><br />
|
|
Use <code class="w3-codespan">h:item 1!id;</code> for each
|
|
item add an unique id!
|
|
</li>
|
|
<li>
|
|
This works only in conjunction with <code class="w3-codespan">hiddenField</code> below
|
|
</li>
|
|
|
|
<li>
|
|
<b>Custom input placeholders:</b><br />
|
|
<code class="w3-codespan">%Sample Expression=longText%1</code>
|
|
</li>
|
|
<li>
|
|
Use <code class="w3-codespan">%</code> at the start and end
|
|
position of the placeholder
|
|
</li>
|
|
<li>
|
|
Use
|
|
<code class="w3-codespan">Sample Expression=</code> placeholder
|
|
name
|
|
</li>
|
|
<li>
|
|
Set <code class="w3-codespan">1</code> as priority or any other
|
|
number up until 99
|
|
</li>
|
|
<li>
|
|
At the moment there are these custom ones:<br />
|
|
<code class="w3-codespan"
|
|
>simpleInput, longText, hiddenField, current_time,
|
|
current_date</code
|
|
>
|
|
</li>
|
|
<li>
|
|
Config <code class="w3-codespan">hiddenField</code> like so: <br>
|
|
<code class="w3-codespan">%Sample Expression=hiddenField:id:longText:!l%1</code>
|
|
</li>
|
|
<li>
|
|
in this example <code class="w3-codespan">longText:!l</code> can also be omitted.
|
|
</li>
|
|
<li>
|
|
With <code class="w3-codespan">longText</code> you can add
|
|
markups like <code class="w3-codespan">!l</code> by adding them
|
|
like this:
|
|
</li>
|
|
<li>
|
|
<code class="w3-codespan"
|
|
>%Sample Expression=longText:!l%1</code
|
|
>
|
|
</li>
|
|
<li>
|
|
You can also use markups directly in the textarea or in the
|
|
template file at the beginning of a line.
|
|
</li>
|
|
<li>
|
|
<b>These markups are available:</b><br />
|
|
<code class="w3-codespan"
|
|
>!l = list, !ls = sub item, !n = numbered list, !e = end
|
|
markup, !es = end sub markup</code
|
|
>
|
|
</li>
|
|
<li>
|
|
<b>Textblocks can be invoked by adding a leading ! sign:</b
|
|
><br />
|
|
<code class="w3-codespan">!ne = no entry</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-container w3-flat-clouds w3-padding">
|
|
<div
|
|
id="submitContainer"
|
|
class="w3-container w3-flat-clouds w3-row-padding"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="w3-container w3-flat-clouds w3-padding">
|
|
<div
|
|
id="output"
|
|
class="w3-row-padding w3-padding-64 w3-container w3-flat-clouds"
|
|
style="margin-bottom: 0px"
|
|
></div>
|
|
</div>
|
|
|
|
|
|
<div id="login" style="display: none" class="w3-modal w3-card-4">
|
|
<div class="w3-modal-content w3-margin-top">
|
|
<div class="w3-container w3-padding-32 w3-flat-clouds">
|
|
<form method="post" action="javascript:void(0)" id="loginForm">
|
|
<label> enter password: </label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
class="w3-input w3-flat-clouds"
|
|
id="passwordField"
|
|
/>
|
|
<input
|
|
id="submitPassword"
|
|
type="submit"
|
|
value="Submit"
|
|
style="display: none"
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div
|
|
id="wrongPWAlert"
|
|
class="w3-panel w3-flat-pomegranate w3-display-container"
|
|
style="display: none"
|
|
>
|
|
<span
|
|
onclick="this.parentElement.style.display='none'"
|
|
class="w3-button w3-display-topright"
|
|
>×</span
|
|
>
|
|
<p>
|
|
wrong password - would you like to
|
|
<a
|
|
href="#"
|
|
style="text-decoration: underline"
|
|
onclick="localStorage.clear()"
|
|
>clear</a
|
|
>
|
|
all files?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modalNotifier" style="display: none" class="w3-modal w3-card-4">
|
|
<div class="w3-modal-content w3-margin-top">
|
|
<span
|
|
onclick="this.parentElement.parentElement.style.display='none'"
|
|
class="w3-button w3-display-topright w3-flat-clouds"
|
|
>×</span>
|
|
<div class="w3-container w3-padding-32 w3-flat-clouds">
|
|
<span id="modalMsg"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w3-container w3-flat-clouds" style="height: 15em">
|
|
<br />
|
|
</div>
|
|
<!-- Footer -->
|
|
|
|
<footer
|
|
class="w3-container w3-padding-64 w3-center w3-opacity w3-flat-asbestos"
|
|
>
|
|
<br />
|
|
<br />
|
|
<div
|
|
class="upload-btn-wrapper"
|
|
id="setFormButton"
|
|
style="display: none"
|
|
>
|
|
<button
|
|
class="w3-button w3-border w3-flat-wet-asphalt"
|
|
id="setFormBtn"
|
|
>
|
|
Set Form as Template
|
|
</button>
|
|
</div>
|
|
<div class="w3-container w3-margin-top" id="currentVersion">
|
|
<span></span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div id="password" style="display: none">nichtsoeinfach</div>
|
|
|
|
<p id="textBlocks"></p>
|
|
</body>
|
|
</html>
|