maru21
92bbebd2a1
fixed bug with sidebar click event not being cleared after accessing files and then pressing edit some cosmetic changes animations reimplemented bookshelfexport in localonly mode added logout functionality
358 lines
12 KiB
HTML
358 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.9.3/main.js"></script>
|
|
|
|
|
|
<body>
|
|
<div
|
|
class="w3-sidebar w3-bar-block w3-collapse w3-large"
|
|
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-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
|
|
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>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:itemid 1:fieldtype:formatting;</code> for each
|
|
item add an unique id!
|
|
</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">
|
|
<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" class="w3-modal">
|
|
<div class="w3-card-4 w3-modal-content w3-margin-top w3-animate-opacity" 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>
|