NOTE test commit from wsl
Discrepancy from atom git status
This commit is contained in:
parent
891b4be9dc
commit
cd870b1bfe
75 changed files with 15649 additions and 15649 deletions
|
|
@ -1,52 +1,52 @@
|
|||
<!-- page-index.njk -->
|
||||
{% set pageId = "index" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
|
||||
{% block title %}Index{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<h2>This is {{hippie.brand | upper}}</h2>
|
||||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
|
||||
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
|
||||
<p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||
<h3>Overview</h3>
|
||||
<nav>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demoadditionallinks" array -->
|
||||
{% for link in data.demoadditionallinks %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="pos_rel">
|
||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
|
||||
<h3>Demo Pages</h3>
|
||||
</div>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in data.demolinks %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- page-index.njk -->
|
||||
{% set pageId = "index" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
|
||||
{% block title %}Index{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<h2>This is {{hippie.brand | upper}}</h2>
|
||||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
|
||||
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
|
||||
<p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||
<h3>Overview</h3>
|
||||
<nav>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demoadditionallinks" array -->
|
||||
{% for link in data.demoadditionallinks %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="pos_rel">
|
||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
|
||||
<h3>Demo Pages</h3>
|
||||
</div>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in data.demolinks %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<!-- page-blank.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
|
||||
{% block title %}Blank{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
{% endblock %}
|
||||
<!-- page-blank.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
|
||||
{% block title %}Blank{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,81 +1,81 @@
|
|||
<!-- page-elements.njk -->
|
||||
{% set pageId = "elements" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo/_extended.njk" %}
|
||||
|
||||
{% block title %}Elements{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
|
||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Übersicht aller Elemente</h1>
|
||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
|
||||
</header>
|
||||
<article>
|
||||
<h1>Bereiche</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||
<h2><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- page-elements.njk -->
|
||||
{% set pageId = "elements" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo/_extended.njk" %}
|
||||
|
||||
{% block title %}Elements{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
|
||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Übersicht aller Elemente</h1>
|
||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
|
||||
</header>
|
||||
<article>
|
||||
<h1>Bereiche</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||
<h2><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "304" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Umleitung</h3>
|
||||
<p>Unverändert <dfn>Not Modified</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
|
||||
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "304" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Umleitung</h3>
|
||||
<p>Unverändert <dfn>Not Modified</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
|
||||
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "400" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "400" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "403" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "403" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "404" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "404" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!-- page-error-500.njk -->
|
||||
{% set pageId = "500" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Server-Fehler</h3>
|
||||
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
|
||||
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
|
||||
<p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
<!-- page-error-500.njk -->
|
||||
{% set pageId = "500" %}
|
||||
{% set pageClass = "body_status" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}{{ pageId }}{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<h3>Server-Fehler</h3>
|
||||
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
|
||||
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
|
||||
<p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</main>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,244 +1,244 @@
|
|||
<!-- page-elements.njk -->
|
||||
{% set pageId = "examples" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo/_extended.njk" %}
|
||||
|
||||
{% block title %}Examples{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
<article>
|
||||
<h2><h3></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<h2><h4></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<h2><section></h2>
|
||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<section class="overflow">
|
||||
<div class="float_space_left demo__avatar"><img src="../art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||
</section>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||
<div class="space_left_fourth">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_space_left">
|
||||
<ul>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Typ 1</a></li>
|
||||
<li><a href="" class="a_button">Typ 2</a></li>
|
||||
<li><a href="" class="a_button">Typ 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<h1>Aufmacher</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<div class="box_space height_basic">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="pos_abs pin_bottom width_full">
|
||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||
<footer id="js_demo_stop" class="demo_footer">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<li><a href="" class="a_button_text">Alpha</a></li>
|
||||
<li><a href="" class="a_button_text">Bravo</a></li>
|
||||
<li><a href="" class="a_button_text">Charlie</a></li>
|
||||
<li><a href="" class="a_button_text">Delta</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="txt_center demo__credits"><i class="i_bright">👨💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
</div>
|
||||
<form action="" method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
<option value="1" selected="selected"> Fancy list</option>
|
||||
<option value="2"> Table list</option>
|
||||
</select>
|
||||
Sorted by <select name="C">
|
||||
<option value="N" selected="selected"> Name</option>
|
||||
<option value="M"> Date Modified</option>
|
||||
<option value="S"> Size</option>
|
||||
<option value="D"> Description</option>
|
||||
</select>
|
||||
<select name="O">
|
||||
<option value="A" selected="selected"> Ascending</option>
|
||||
<option value="D"> Descending</option>
|
||||
</select>
|
||||
<select name="V">
|
||||
<option value="0" selected="selected"> in Normal order</option>
|
||||
<option value="1"> in Version order</option>
|
||||
</select>
|
||||
Matching <input type="text" name="P" value="*" />
|
||||
<input type="submit" name="X" value="Go" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list_link">
|
||||
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="demo__flag">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- page-elements.njk -->
|
||||
{% set pageId = "examples" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo/_extended.njk" %}
|
||||
|
||||
{% block title %}Examples{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
<article>
|
||||
<h2><h3></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<h2><h4></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<h2><section></h2>
|
||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<section class="overflow">
|
||||
<div class="float_space_left demo__avatar"><img src="../art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||
</section>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||
<div class="space_left_fourth">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_space_left">
|
||||
<ul>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Typ 1</a></li>
|
||||
<li><a href="" class="a_button">Typ 2</a></li>
|
||||
<li><a href="" class="a_button">Typ 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<h1>Aufmacher</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<div class="box_space height_basic">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="pos_abs pin_bottom width_full">
|
||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||
<footer id="js_demo_stop" class="demo_footer">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<li><a href="" class="a_button_text">Alpha</a></li>
|
||||
<li><a href="" class="a_button_text">Bravo</a></li>
|
||||
<li><a href="" class="a_button_text">Charlie</a></li>
|
||||
<li><a href="" class="a_button_text">Delta</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="txt_center demo__credits"><i class="i_bright">👨💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
</div>
|
||||
<form action="" method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
<option value="1" selected="selected"> Fancy list</option>
|
||||
<option value="2"> Table list</option>
|
||||
</select>
|
||||
Sorted by <select name="C">
|
||||
<option value="N" selected="selected"> Name</option>
|
||||
<option value="M"> Date Modified</option>
|
||||
<option value="S"> Size</option>
|
||||
<option value="D"> Description</option>
|
||||
</select>
|
||||
<select name="O">
|
||||
<option value="A" selected="selected"> Ascending</option>
|
||||
<option value="D"> Descending</option>
|
||||
</select>
|
||||
<select name="V">
|
||||
<option value="0" selected="selected"> in Normal order</option>
|
||||
<option value="1"> in Version order</option>
|
||||
</select>
|
||||
Matching <input type="text" name="P" value="*" />
|
||||
<input type="submit" name="X" value="Go" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list_link">
|
||||
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="demo__flag">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,17 +1,17 @@
|
|||
<!-- page-maintenance.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}Maintenance{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div id="root" class="overflow">
|
||||
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
|
||||
</div>
|
||||
{% endblock %}
|
||||
<!-- page-maintenance.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_maintenance.njk" %}
|
||||
|
||||
{% block title %}Maintenance{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div id="root" class="overflow">
|
||||
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,146 +1,146 @@
|
|||
<!-- page-os.njk -->
|
||||
{% set pageId = "os" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo/_extended.njk" %}
|
||||
|
||||
{% block title %}OS{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="height_full">
|
||||
<div class="flex_wrap">
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child">
|
||||
<!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
|
||||
<nav>
|
||||
<ul class="list_files">
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 1</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 2</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 3</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 4</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 5</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 6</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="list_files">
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 1</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 2</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 3</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 4</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 5</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 6</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex_child_one flex_row">
|
||||
<!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 -->
|
||||
<div class="flex_child box_file_wrp">
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 1</p>
|
||||
<p>Auszeichnung 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 2</p>
|
||||
<p>Auszeichnung 2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 3</p>
|
||||
<p>Auszeichnung 3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 4</p>
|
||||
<p>Auszeichnung 4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_child_one">
|
||||
<table class="table_file_simple">
|
||||
<tr>
|
||||
<td><img src="" alt=""></td>
|
||||
<td>Objektname 1</td>
|
||||
<td class="cell_file_path">Objektpfad 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="" alt=""></td>
|
||||
<td>Objektname 2</td>
|
||||
<td class="cell_file_path">Objektpfad 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex_child">
|
||||
<p>Status</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- page-os.njk -->
|
||||
{% set pageId = "os" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo/_extended.njk" %}
|
||||
|
||||
{% block title %}OS{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="height_full">
|
||||
<div class="flex_wrap">
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
<button class="demo__button_32"></button>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child">
|
||||
<!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
|
||||
<nav>
|
||||
<ul class="list_files">
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 1</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 2</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 3</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 4</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 5</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 6</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="list_files">
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 1</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 2</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 3</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 4</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 5</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<img src="" alt="">
|
||||
<p>Punkt 6</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex_child_one flex_row">
|
||||
<!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 -->
|
||||
<div class="flex_child box_file_wrp">
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 1</p>
|
||||
<p>Auszeichnung 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 2</p>
|
||||
<p>Auszeichnung 2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 3</p>
|
||||
<p>Auszeichnung 3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_wrap box_file_tile">
|
||||
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
||||
<div class="box_flex_one">
|
||||
<p>Dateiname 4</p>
|
||||
<p>Auszeichnung 4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_child_one">
|
||||
<table class="table_file_simple">
|
||||
<tr>
|
||||
<td><img src="" alt=""></td>
|
||||
<td>Objektname 1</td>
|
||||
<td class="cell_file_path">Objektpfad 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="" alt=""></td>
|
||||
<td>Objektname 2</td>
|
||||
<td class="cell_file_path">Objektpfad 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex_child">
|
||||
<p>Status</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,94 +1,94 @@
|
|||
<!-- page-tests.njk -->
|
||||
{% set pageId = "tests" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
{% import "demo/macros/_nav.njk" as nav %}
|
||||
|
||||
{% block title %}Tests{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
#error {
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
|
||||
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<form action="">
|
||||
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
|
||||
<p>Navigation</p>
|
||||
{{ nav.main(data.demoadditionallinks, 'Tests') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE Tests');
|
||||
|
||||
});
|
||||
function capLock(e){
|
||||
kc = e.keyCode?e.keyCode:e.which;
|
||||
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
|
||||
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
|
||||
document.getElementById('divMayus').style.visibility = 'visible';
|
||||
else
|
||||
document.getElementById('divMayus').style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function capsDetect() {
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
var isShiftPressed = false;
|
||||
var isCapsOn = false;
|
||||
var capsWarning = document.getElementById('error');
|
||||
body.addEventListener('keydown', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
capsDetect();
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- page-tests.njk -->
|
||||
{% set pageId = "tests" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
{% import "demo/macros/_nav.njk" as nav %}
|
||||
|
||||
{% block title %}Tests{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
#error {
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
|
||||
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<form action="">
|
||||
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
|
||||
<p>Navigation</p>
|
||||
{{ nav.main(data.demoadditionallinks, 'Tests') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE Tests');
|
||||
|
||||
});
|
||||
function capLock(e){
|
||||
kc = e.keyCode?e.keyCode:e.which;
|
||||
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
|
||||
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
|
||||
document.getElementById('divMayus').style.visibility = 'visible';
|
||||
else
|
||||
document.getElementById('divMayus').style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function capsDetect() {
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
var isShiftPressed = false;
|
||||
var isCapsOn = false;
|
||||
var capsWarning = document.getElementById('error');
|
||||
body.addEventListener('keydown', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
capsDetect();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue