Changes to content
Removed some stale screens.
This commit is contained in:
Stephan
parent
6095870ce3
commit
50a1a6d925
4 changed files with 60 additions and 352 deletions
|
|
@ -1,145 +0,0 @@
|
|||
<!-- os.page -->
|
||||
{% set pageId = "os" %}
|
||||
|
||||
{% extends "demo/_extended.njk" %}
|
||||
|
||||
{% block title %}OS{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="h_full_view">
|
||||
<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,139 +0,0 @@
|
|||
<!-- tests.screen -->
|
||||
{% set pageId = "tests" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% 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 %}
|
||||
<h2>Caps Lock</h2>
|
||||
<div id="capsCheck">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<h2>Navigation</h2>
|
||||
{{ nav.main(data.demoadditionallinks, 'Tests') }}
|
||||
|
||||
<div id="divGame">
|
||||
<h2>Number Game</h2>
|
||||
<p class="guesses"></p>
|
||||
<p class="lastResult"></p>
|
||||
<p class="lowOrHi"></p>
|
||||
<label for="guessField">Guess</label>
|
||||
<input type="text" id="guessField" class="guessField">
|
||||
<input type="submit" value="Submit guess" class="guessSubmit">
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
assetsLoaded = true;
|
||||
logPerf('Assets loaded.');
|
||||
|
||||
$( document ).ready(function() {
|
||||
logPerf('JQ document ready event fired.');
|
||||
|
||||
let ranNum = Math.floor(Math.random() * 100) + 1;
|
||||
|
||||
const guesses = $('.guesses');
|
||||
const lastResult = $('.lastResult');
|
||||
const lowOrHi = $('.lowOrHi');
|
||||
|
||||
const guessField = $('.guessField');
|
||||
const guessSubmit = $('.guessSubmit');
|
||||
|
||||
let guessCount = 1;
|
||||
let resetButton;
|
||||
|
||||
function checkGuess() {
|
||||
console.log('Random:', ranNum);
|
||||
let userGuess = Number(guessField.value);
|
||||
if (guessCount === 1) {
|
||||
// guesses.get(0).textContent = 'Previous guesses: ';
|
||||
guesses.html('Previous guesses: ');
|
||||
}
|
||||
// guesses[0].textContent += userGuess + ', ';
|
||||
guesses.get(0).textContent += userGuess + ', ';
|
||||
// var g = guesses.html();
|
||||
// guesses.html(g += userGuess + ', ');
|
||||
|
||||
}
|
||||
|
||||
// checkGuess();
|
||||
|
||||
});
|
||||
|
||||
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 %}
|
||||
|
|
@ -1,58 +1,50 @@
|
|||
{
|
||||
"demoadditionallinks": [
|
||||
{
|
||||
"href": "/demo.html",
|
||||
"text": "Index"
|
||||
},
|
||||
{
|
||||
"href": "/demo/intro.html",
|
||||
"text": "Intro"
|
||||
},
|
||||
{
|
||||
"href": "/demo/elements.html",
|
||||
"text": "Elements"
|
||||
},
|
||||
{
|
||||
"href": "/demo/examples.html",
|
||||
"text": "Examples"
|
||||
},
|
||||
{
|
||||
"href": "/demo/tests.html",
|
||||
"text": "Tests"
|
||||
}
|
||||
],
|
||||
"demolinks": [
|
||||
{
|
||||
"href": "demo/blank.html",
|
||||
"text": "Blank"
|
||||
},
|
||||
{
|
||||
"href": "demo/maintenance.html",
|
||||
"text": "Maintenance"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/304.html",
|
||||
"text": "304"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/404.html",
|
||||
"text": "404"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/403.html",
|
||||
"text": "403"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/400.html",
|
||||
"text": "400"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/500.html",
|
||||
"text": "500"
|
||||
},
|
||||
{
|
||||
"href": "demo/os.html",
|
||||
"text": "OS"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"demoadditionallinks": [
|
||||
{
|
||||
"href": "/demo.html",
|
||||
"text": "Index"
|
||||
},
|
||||
{
|
||||
"href": "/demo/intro.html",
|
||||
"text": "Intro"
|
||||
},
|
||||
{
|
||||
"href": "/demo/elements.html",
|
||||
"text": "Elements"
|
||||
},
|
||||
{
|
||||
"href": "/demo/examples.html",
|
||||
"text": "Examples"
|
||||
}
|
||||
],
|
||||
"demolinks": [
|
||||
{
|
||||
"href": "demo/blank.html",
|
||||
"text": "Blank"
|
||||
},
|
||||
{
|
||||
"href": "demo/maintenance.html",
|
||||
"text": "Maintenance"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/304.html",
|
||||
"text": "304"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/404.html",
|
||||
"text": "404"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/403.html",
|
||||
"text": "403"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/400.html",
|
||||
"text": "400"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/500.html",
|
||||
"text": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<!-- nav.main.macro -->
|
||||
{% macro main(data, active='') %}
|
||||
<nav>
|
||||
<ul>
|
||||
{% for link in data %}
|
||||
<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endmacro %}
|
||||
<!-- nav.main.macro -->
|
||||
{% macro main(data, active='') %}
|
||||
<nav>
|
||||
<ul>
|
||||
{% for link in data %}
|
||||
<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endmacro %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue