395 lines
14 KiB
HTML
395 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<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" />
|
|
|
|
<script>
|
|
//current javascript version
|
|
let jsVer = "9.9.9";
|
|
|
|
//settings
|
|
window.settings = {
|
|
localOnly: true,
|
|
lineBreak: 150,
|
|
font: "Arial",
|
|
fontSize: 9,
|
|
|
|
};
|
|
|
|
let script = document.createElement("script");
|
|
script.src = "js/" + jsVer + "/init.js";
|
|
script.type = "module";
|
|
document.head.appendChild(script);
|
|
</script>
|
|
|
|
<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" />
|
|
</head>
|
|
|
|
<body>
|
|
<div
|
|
class="w3-sidebar w3-bar-block w3-collapse w3-large w3-flat-clouds"
|
|
style="width: 300px; margin-top: 51px; padding-top: 12px"
|
|
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="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-ellipsis-v"></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
|
|
class="w3-button w3-right w3-padding-large w3-hover-grey w3-large w3-flat-wet-aspalt"
|
|
href="javascript:void(0);"
|
|
title="Logout"
|
|
id="logout"
|
|
><i class="fa fa-sign-out-alt"></i
|
|
></a>
|
|
<a
|
|
href="."
|
|
id="siteTitle"
|
|
class="w3-left-align w3-button w3-padding-large w3-flat-wet-asphalt"
|
|
><img class="logo" src="logo.png" alt="logo" height="30px"
|
|
/></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.
|
|
</h5>
|
|
<h5 class="w3-padding-top w3-text-grey">
|
|
<b>Shortcuts for template input:</b>
|
|
</h5>
|
|
<ul class="w3-text-grey w3-ul">
|
|
<li>
|
|
<b>Textblocks can be invoked by adding a leading ! sign:</b>
|
|
click the airplane button for a complete list
|
|
<code class="w3-codespan">!ne = no entry</code>
|
|
</li>
|
|
<li>
|
|
You can use markups directly in the textarea at the beginning of
|
|
a line.<br />
|
|
<b>These markups are available:</b><br />
|
|
<code class="w3-codespan">!l = list</code><br />
|
|
<code class="w3-codespan">!ls = sub item</code><br />
|
|
<code class="w3-codespan">!n = numbered list</code><br />
|
|
<code class="w3-codespan">!e = end markup</code><br />
|
|
<code class="w3-codespan">!es = end sub markup</code><br />
|
|
</li>
|
|
</ul>
|
|
<h5 class="w3-padding-top w3-text-grey">
|
|
<b>Instructions for creating a template:</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>Priority</b> value organizes 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><br>
|
|
Use <code class="w3-codespan">%</code> at the start and end
|
|
position of the placeholder<br>
|
|
Set <code class="w3-codespan">1</code> as priority or any other
|
|
number up until <code class="w3-codespan">99</code>
|
|
</li>
|
|
<li>
|
|
<b>Custom input placeholders:</b><br />
|
|
<code class="w3-codespan">%Sample Expression=longText%1</code
|
|
><br />
|
|
Use <code class="w3-codespan">%</code> at the start and end
|
|
position of the placeholder<br />
|
|
Use
|
|
<code class="w3-codespan">Sample Expression=</code> placeholder
|
|
name<br />
|
|
Set <code class="w3-codespan">1</code> as priority or any other
|
|
number up until <code class="w3-codespan">99</code> <br>
|
|
Config <code class="w3-codespan">hiddenField</code> like so:
|
|
<br />
|
|
<code class="w3-codespan"
|
|
>%Sample Expression=hiddenField:id:longText:!l%1</code
|
|
><br>
|
|
in this example <code class="w3-codespan">longText:!l</code> can
|
|
also be omitted.<br />
|
|
With <code class="w3-codespan">longText</code> you can add
|
|
markups like <code class="w3-codespan">!l</code> by adding them
|
|
like this:<br>
|
|
<code class="w3-codespan"
|
|
>%Sample Expression=longText:!l%1</code
|
|
>
|
|
</li>
|
|
<li>
|
|
<b>Use field types like longText or markup to customize further</b>
|
|
These are all the different Field types:<br />
|
|
<code class="w3-codespan">simpleInput</code><br />
|
|
<code class="w3-codespan">longText</code><br />
|
|
<code class="w3-codespan">hiddenField</code><br />
|
|
<code class="w3-codespan">current_time</code><br />
|
|
<code class="w3-codespan">current_date</code><br />
|
|
<code class="w3-codespan">markup:title</code><br />
|
|
And these are the markups you can add:<br />
|
|
<code class="w3-codespan">title</code><br />
|
|
<code class="w3-codespan">link</code><br />
|
|
<code class="w3-codespan">italic</code><br />
|
|
<code class="w3-codespan">green_highlighted</code><br />
|
|
<code class="w3-codespan">highlighted</code><br />
|
|
</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
|
|
><br />
|
|
Use <code class="w3-codespan">%</code> at the start and end
|
|
position of the placeholder<br />
|
|
Use <code class="w3-codespan">Sample Expression=</code> as
|
|
placeholder name<br />
|
|
Use <code class="w3-codespan">m:der Bauer;</code> <br />for each
|
|
gender; be careful to add it for the last item aswell
|
|
</li>
|
|
<li>
|
|
<b>For dropdown lists:</b><br />
|
|
Use <code class="w3-codespan">%Sample Expression=l:item 1;l:item 2;%1</code> for each item
|
|
</li>
|
|
<li>
|
|
<b>For hidden fields and its trigger:</b><br />
|
|
Use
|
|
<code class="w3-codespan">%Sample Expression=h:itemid 1:fieldtype:formatting;%1</code
|
|
><br />
|
|
You can also have multiple hidden fields selectable by a list
|
|
</li>
|
|
<li>
|
|
You can also use markups in the template file at the beginning
|
|
of a line.<br />
|
|
<b>These markups are available:</b><br />
|
|
<code class="w3-codespan">!l = list</code><br />
|
|
<code class="w3-codespan">!ls = sub item</code><br />
|
|
<code class="w3-codespan">!n = numbered list</code><br />
|
|
<code class="w3-codespan">!e = end markup</code><br />
|
|
<code class="w3-codespan">!es = end sub markup</code><br />
|
|
</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">
|
|
<div
|
|
class="w3-card-4 w3-modal-content w3-margin-top w3-animate-opacity"
|
|
style="max-width: 600px"
|
|
>
|
|
<div class="w3-container w3-padding-32 w3-flat-clouds">
|
|
<form method="post" action="javascript:void(0)" id="loginForm">
|
|
<h1>
|
|
Welcome to <img src="logo.png" alt="logo" height="40px" />
|
|
</h1>
|
|
<br />
|
|
<br />
|
|
<label> enter password: </label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
class="w3-input w3-flat-clouds"
|
|
id="passwordField"
|
|
/>
|
|
<input
|
|
id="submitPassword"
|
|
type="submit"
|
|
value="Submit"
|
|
class="w3-button w3-flat-wet-asphalt"
|
|
style="display: block; margin-top: 20px"
|
|
/>
|
|
</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; padding-top: 200px !important"
|
|
class="w3-modal"
|
|
>
|
|
<div
|
|
class="w3-card-4 w3-modal-content w3-margin-top"
|
|
style="max-width: 600px"
|
|
>
|
|
<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>
|