10 years later #1
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 %}
|
|
||||||
|
|
@ -15,10 +15,6 @@
|
||||||
{
|
{
|
||||||
"href": "/demo/examples.html",
|
"href": "/demo/examples.html",
|
||||||
"text": "Examples"
|
"text": "Examples"
|
||||||
},
|
|
||||||
{
|
|
||||||
"href": "/demo/tests.html",
|
|
||||||
"text": "Tests"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"demolinks": [
|
"demolinks": [
|
||||||
|
|
@ -49,10 +45,6 @@
|
||||||
{
|
{
|
||||||
"href": "demo/error/500.html",
|
"href": "demo/error/500.html",
|
||||||
"text": "500"
|
"text": "500"
|
||||||
},
|
|
||||||
{
|
|
||||||
"href": "demo/os.html",
|
|
||||||
"text": "OS"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue