protoprototype
This commit is contained in:
severak
parent
42274c3930
commit
8e2b808eb1
|
|
@ -0,0 +1,119 @@
|
|||
* { box-sizing: border-box }
|
||||
|
||||
body {
|
||||
font-family: arial, sans-serif;
|
||||
background: url(bliss.jpg) no-repeat fixed center/cover;
|
||||
}
|
||||
|
||||
|
||||
.window {
|
||||
max-width: 50em;
|
||||
margin: 1em auto;
|
||||
margin-bottom: 3em;
|
||||
padding-top: 0;
|
||||
border: 1px solid darkgrey;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
.window h1, .window h2 {
|
||||
display: block;
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.window h1::after, .window h2::after {
|
||||
content: "×";
|
||||
float: right;
|
||||
background-color: lightgrey;
|
||||
color: black;
|
||||
border: 1px solid darkgrey;
|
||||
}
|
||||
|
||||
.window h1 img, .window h2 img {
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.window a {
|
||||
color: blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.window a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.window .menu, .window .menubar {
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
}
|
||||
|
||||
.window .menu li, .window .menubar li {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.window .menu li a, .window .menubar li a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.window .menu li a:hover {
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.window .menubar li a {
|
||||
border: 1px solid darkgrey;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
display: block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.window .menubar li a:hover {
|
||||
text-decoration: none;
|
||||
outline: 1px dotted black;
|
||||
}
|
||||
|
||||
.window .menubar li a img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.window .pad {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.window img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.window hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
}
|
||||
|
||||
#clippy {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.maindlg {
|
||||
display: block;
|
||||
height: 20ex;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>Tísňová linka</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="90s.css">
|
||||
<script src="uboot.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="window" id="dispecink">
|
||||
<h1><img src="msagent-4.png"> Dispečink 1.0</h1>
|
||||
<div class="pad">
|
||||
<p id="head"><strong>Volající:</strong> +420 <span>▓▓▓ ▓▓▓ ▓▓▓</span> <button id="respond">vzít hovor</button></p>
|
||||
<hr>
|
||||
|
||||
<div class="maindlg">
|
||||
<p id="prevtext"></p>
|
||||
<p id="maintext"></p>
|
||||
<ul id="replies">
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
Poslat:
|
||||
<select id="response">
|
||||
<option value="H">hasiče</option>
|
||||
<option value="Z">záchranku</option>
|
||||
<option value="P">policii</option>
|
||||
<option value="MP">městskou policii</option>
|
||||
<option disabled>====</option>
|
||||
<option value="plyn">plynárny</option>
|
||||
<option value="voda">vodárny</option>
|
||||
<option value="dpp">dopravní podnik</option>
|
||||
<option value="odtah">odtahovku</option>
|
||||
</select>
|
||||
|
||||
kam:
|
||||
|
||||
<select id="place">
|
||||
<option>Anděl</option>
|
||||
<option>Barrandov</option>
|
||||
<option>Lahovice</option>
|
||||
<option>Smíchovské nádraží</option>
|
||||
<option>Strakonická</option>
|
||||
</select>
|
||||
|
||||
|
||||
co se děje:
|
||||
|
||||
<select id="what">
|
||||
<option>požár</option>
|
||||
<option>povodně</option>
|
||||
<option>sebevrah</option>
|
||||
<option></option>
|
||||
<option>sebevrah</option>
|
||||
</select>
|
||||
|
||||
<button id="act">Ohlásit</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="window" id="twitter">
|
||||
<h2><img src="msie2-1.png">Internet exploder - Butter</h2>
|
||||
<div class="pad">
|
||||
|
||||
<div class="twitter">
|
||||
|
||||
<p>Kus nějakého jiného textu</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
currentTask = {};
|
||||
currentDialog = {};
|
||||
|
||||
tasks = [];
|
||||
|
||||
tasks.push({
|
||||
text: "Dobrý den, hoří tady auto...",
|
||||
dialog: [
|
||||
{q: "kdo volá?", a:"Fanička Janoušková", },
|
||||
{q: "kde?", a:"na Chaplinově náměstí, na Barrandově...", },
|
||||
{q: "jaká značka?", a:"ééé, to nevím... červený...", },
|
||||
{ q: "je v tom autě někdo?", a: "jenom mrtvej ukrajinec...",
|
||||
dialog: [
|
||||
{q: "jak se tam dostal?", a:""},
|
||||
{q: "", a: ""}
|
||||
]
|
||||
}
|
||||
],
|
||||
place: "Barrandov",
|
||||
what: "požár",
|
||||
response: ["H", "P"]
|
||||
});
|
||||
|
||||
|
||||
function respond()
|
||||
{
|
||||
if (tasks.length<1) return;
|
||||
currentTask = tasks.pop();
|
||||
gebi('maintext').innerText = currentTask.text;
|
||||
gebi('replies').innerHTML = '';
|
||||
currentDialog = currentTask.dialog;
|
||||
ipairs(currentTask.dialog, function(i,def){
|
||||
var li = makeElem('li', {"data-id":i});
|
||||
var a = makeElem('a', {href:"#"}, def.q);
|
||||
li.appendChild(a);
|
||||
gebi('replies').appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function act()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
|
||||
whenReady(function(){
|
||||
on('respond', 'click', function(){
|
||||
respond();
|
||||
});
|
||||
|
||||
on('replies', 'click', 'li', function(evt){
|
||||
var li = evt.target.parentElement;
|
||||
addClass(li, 'hidden');
|
||||
var ord = li.getAttribute('data-id');
|
||||
var reply = currentDialog[ord];
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
gebi('prevtext').textContext = currentDialog.text;
|
||||
gebi('maintext').textContent = reply.a;
|
||||
|
||||
if (reply.dialog) {
|
||||
// TODO -
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// alert('OK');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
#dispecink { width: 50%; position: relative; left: 5em; float: left; }
|
||||
#twitter { width: 30%; position: relative; float: right; position: relative; right: 3em; top: 10em; }
|
||||
|
||||
.twitter { background-color: white; }
|
||||
</style>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
Binary file not shown.
|
After Width: | Height: | Size: 823 B |
Binary file not shown.
|
After Width: | Height: | Size: 660 B |
|
|
@ -0,0 +1,138 @@
|
|||
// base javascript library
|
||||
|
||||
// protects programmer from javascript insanity, browser inconsitences and typing long strings
|
||||
|
||||
// (c) Severák 2019
|
||||
// WTFPL licensed
|
||||
|
||||
// kudos to lua team for inspiration
|
||||
// and http://bonsaiden.github.io/JavaScript-Garden/ for wonderful docs on insanities of JS
|
||||
|
||||
// guess type of x
|
||||
function type(v) {
|
||||
return Object.prototype.toString.call(v).slice(8, -1);
|
||||
}
|
||||
|
||||
// issues error when v is false-y
|
||||
function assert(v, message) {
|
||||
if (!message) message = 'assertion failed';
|
||||
if (!v) {
|
||||
throw message;
|
||||
}
|
||||
}
|
||||
|
||||
// shorthand to throwing exceptions
|
||||
function error(message) {
|
||||
throw message;
|
||||
}
|
||||
|
||||
// iterates over array calling fun(i, v)
|
||||
function ipairs(arr, fun) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
fun(i, arr[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// iterates over object calling fun(k, v)
|
||||
function pairs(obj, fun) {
|
||||
for(var k in obj) {
|
||||
if (obj.hasOwnProperty(k)) {
|
||||
fun(k, obj[k]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tostring(v) {
|
||||
// TODO
|
||||
}
|
||||
|
||||
function tonumber(v, base) {
|
||||
if (!base) base = 10;
|
||||
return parseFloat(v, base);
|
||||
}
|
||||
|
||||
|
||||
// and now some DOM stuff
|
||||
|
||||
// kudos to https://plainjs.com/
|
||||
|
||||
function gebi(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function makeElem(tag, attr, text) {
|
||||
// console.log('call makeElem:', tag, attr, text);
|
||||
var newElem = document.createElement(tag);
|
||||
if (attr) {
|
||||
pairs(attr, function(atr,val){
|
||||
newElem.setAttribute(atr, val);
|
||||
});
|
||||
}
|
||||
if (text) newElem.innerText = text;
|
||||
return newElem;
|
||||
}
|
||||
|
||||
|
||||
var addEvent = function(el, type, handler) {
|
||||
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
|
||||
};
|
||||
|
||||
// matches polyfill
|
||||
this.Element && function(ElementPrototype) {
|
||||
ElementPrototype.matches = ElementPrototype.matches ||
|
||||
ElementPrototype.matchesSelector ||
|
||||
ElementPrototype.webkitMatchesSelector ||
|
||||
ElementPrototype.msMatchesSelector ||
|
||||
function(selector) {
|
||||
var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
|
||||
while (nodes[++i] && nodes[i] != node);
|
||||
return !!nodes[i];
|
||||
}
|
||||
}(Element.prototype);
|
||||
|
||||
|
||||
function on(elem, eventName, fun, fun2) {
|
||||
assert(arguments.length>2, 'Wrong number of arguments to function on.');
|
||||
if (type(elem)=='String') elem = gebi(elem);
|
||||
if (arguments.length==4) {
|
||||
var selector = fun;
|
||||
var context = elem;
|
||||
addEvent(context || document, eventName, function(e) {
|
||||
var found, el = e.target || e.srcElement;
|
||||
while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
|
||||
if (found) fun2.call(el, e);
|
||||
});
|
||||
} else {
|
||||
addEvent(elem, eventName, fun);
|
||||
}
|
||||
}
|
||||
// sub variant with on(elem, eventName, subselector, fun)
|
||||
|
||||
function hasClass(elem, className) {
|
||||
if (type(elem)=='String') elem = gebi(elem);
|
||||
return elem.classList ? elem.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(elem.className);
|
||||
}
|
||||
|
||||
function addClass(elem, className) {
|
||||
if (type(elem)=='String') elem = gebi(elem);
|
||||
if (elem.classList) elem.classList.add(className);
|
||||
else if (!hasClass(elem, className)) elem.className += ' ' + className;
|
||||
}
|
||||
|
||||
function delClass(elem, className) {
|
||||
if (type(elem)=='String') elem = gebi(elem);
|
||||
if (elem.classList) elem.classList.remove(className);
|
||||
else elem.className = elem.className.replace(new RegExp('\\b'+ className+'\\b', 'g'), '');
|
||||
}
|
||||
|
||||
// jQuery-like DOM ready
|
||||
function whenReady(fun) {
|
||||
// in case the document is already rendered
|
||||
if (document.readyState!='loading') fun();
|
||||
// modern browsers
|
||||
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', fun);
|
||||
// IE <= 8
|
||||
else document.attachEvent('onreadystatechange', function(){
|
||||
if (document.readyState=='complete') fun();
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue