mirror of
https://github.com/danbulant/phpdroid
synced 2026-05-19 04:08:51 +00:00
first open reliese
This commit is contained in:
Daniel Bulant
GitHub
parent
71cc661171
commit
ad0eab1a8c
38 changed files with 4574 additions and 0 deletions
BIN
android.png
Normal file
BIN
android.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
41
back.svg
Normal file
41
back.svg
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="640.000000pt" height="640.000000pt" viewBox="0 0 640.000000 640.000000"
|
||||
preserveAspectRatio="xMidYMid meet" style="fill: white;">
|
||||
<metadata>
|
||||
Created by potrace 1.15, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)"
|
||||
fill="white" stroke="none">
|
||||
<path d="M3305 5821 c-3 -6 -38 -26 -78 -46 -39 -20 -108 -56 -152 -80 -44
|
||||
-23 -111 -59 -150 -79 -38 -20 -77 -40 -85 -44 -19 -11 -45 -25 -145 -77 -44
|
||||
-23 -120 -64 -170 -90 -168 -89 -280 -148 -350 -185 -38 -20 -80 -41 -92 -48
|
||||
-13 -7 -33 -17 -45 -24 -13 -7 -55 -29 -95 -49 -39 -21 -120 -64 -180 -95 -59
|
||||
-32 -128 -69 -153 -81 -54 -29 -221 -116 -385 -203 -66 -35 -139 -72 -162 -84
|
||||
-38 -17 -59 -46 -35 -46 5 0 24 -15 43 -33 19 -18 72 -67 119 -107 47 -41 97
|
||||
-87 113 -102 15 -16 30 -28 33 -28 3 0 24 -18 47 -40 23 -22 49 -47 57 -54 8
|
||||
-7 65 -57 125 -111 61 -53 112 -101 113 -106 2 -5 8 -9 14 -9 5 0 28 -18 51
|
||||
-40 23 -22 49 -46 57 -54 8 -7 62 -55 120 -106 58 -51 112 -99 120 -106 8 -8
|
||||
34 -32 57 -54 23 -22 44 -40 47 -40 3 0 18 -12 33 -28 16 -15 66 -60 113 -101
|
||||
112 -98 118 -104 167 -151 23 -22 44 -40 47 -40 3 0 18 -13 33 -28 16 -16 69
|
||||
-64 118 -107 107 -93 151 -132 180 -162 12 -13 24 -23 27 -23 3 0 34 -27 69
|
||||
-60 35 -33 68 -60 72 -60 10 0 4 34 -24 140 -47 176 -58 219 -79 300 -11 47
|
||||
-29 114 -39 150 -25 86 -40 154 -37 158 2 1 16 -2 32 -8 16 -7 47 -15 69 -20
|
||||
58 -12 113 -32 290 -102 51 -20 285 -134 340 -166 250 -142 571 -427 751 -667
|
||||
21 -27 50 -67 66 -87 15 -20 28 -41 28 -46 0 -5 9 -17 20 -27 11 -10 20 -24
|
||||
20 -30 0 -7 7 -18 15 -25 8 -7 21 -24 29 -39 15 -28 35 -64 71 -126 100 -170
|
||||
239 -498 304 -720 11 -38 30 -99 41 -134 11 -36 20 -73 20 -84 0 -10 9 -51 19
|
||||
-90 36 -133 91 -492 91 -589 0 -86 15 -67 70 87 37 104 43 121 56 165 7 25 21
|
||||
68 29 95 46 141 55 173 55 190 0 10 9 48 19 84 41 139 94 444 108 626 10 131
|
||||
10 455 0 575 -15 167 -61 407 -109 565 -33 109 -96 282 -123 335 -7 14 -33 68
|
||||
-59 120 -25 52 -57 113 -71 135 -13 22 -34 56 -45 75 -21 35 -38 62 -75 116
|
||||
-33 48 -138 188 -154 205 -9 10 -32 36 -51 60 -45 55 -283 293 -339 339 -24
|
||||
19 -50 42 -60 51 -9 8 -63 51 -121 94 -58 43 -122 91 -142 107 -20 15 -39 28
|
||||
-42 28 -5 0 -35 19 -156 100 -14 9 -32 19 -40 23 -8 4 -37 20 -65 36 -156 92
|
||||
-512 256 -632 292 -48 14 -51 24 -24 77 11 20 29 57 40 82 60 131 91 201 116
|
||||
260 29 69 49 112 89 199 15 30 26 61 26 68 0 15 -16 17 -25 4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
27
components.js
Normal file
27
components.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
This script will load all available components.
|
||||
*/
|
||||
function sendEvent(text){
|
||||
event = new CustomEvent(text, {});
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
if(typeof mainScriptIncluded == 'undefined'){
|
||||
var script = document.createElement("script");
|
||||
script.src = "https://os.danbulant.eu/main.js";
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
if(typeof mediaPlayerScriptIncluded == 'undefined'){
|
||||
var script = document.createElement("script");
|
||||
script.src = "https://os.danbulant.eu/mp.js";
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
if(typeof dialogScriptIncluded == 'undefined'){
|
||||
var script = document.createElement("script");
|
||||
script.src = "https://os.danbulant.eu/dialog.js";
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
if(typeof snackbarScriptIncluded == 'undefined'){
|
||||
var script = document.createElement("script");
|
||||
script.src = "https://os.danbulant.eu/toast.js";
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
BIN
data/music/Soldiers Marching-SoundBible.com-1108480953.mp3
Normal file
BIN
data/music/Soldiers Marching-SoundBible.com-1108480953.mp3
Normal file
Binary file not shown.
BIN
data/music/beep.wav
Normal file
BIN
data/music/beep.wav
Normal file
Binary file not shown.
BIN
data/music/click.wav
Normal file
BIN
data/music/click.wav
Normal file
Binary file not shown.
BIN
data/music/computerstartup.wav
Normal file
BIN
data/music/computerstartup.wav
Normal file
Binary file not shown.
BIN
data/music/digital-life.wav
Normal file
BIN
data/music/digital-life.wav
Normal file
Binary file not shown.
BIN
data/music/event.mp3
Normal file
BIN
data/music/event.mp3
Normal file
Binary file not shown.
BIN
data/music/os-start-up.mp3
Normal file
BIN
data/music/os-start-up.mp3
Normal file
Binary file not shown.
BIN
data/music/welcometowhatever.wav
Normal file
BIN
data/music/welcometowhatever.wav
Normal file
Binary file not shown.
31
dialog.js
Normal file
31
dialog.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
if (typeof mainScriptIncluded == 'undefined') {
|
||||
console.log("Main.js is missing, some functions may fail.");
|
||||
}
|
||||
if(typeof dialogScriptIncluded == 'undefined'){
|
||||
dialogScriptIncluded = true;
|
||||
function dialog(text,btn,btn2,cancel){
|
||||
parent.postMessage("dialog:"+text+"btn1:"+btn+"btn2:"+btn2+"cancellable:"+cancel, "*");
|
||||
console.log("Beaming information into OS to show dialog with text '"+text+"', button 1 as'"+btn+"', button 2 as'"+btn2+"' and cancellable set to '"+cancel+"'");
|
||||
}
|
||||
function closeDialog(){
|
||||
parent.postMessage("close:dialog", "*");
|
||||
}
|
||||
var event;
|
||||
function messageProcessor(text){
|
||||
if(text.includes("event:btn1")){
|
||||
sendEvent("dialog:button1");
|
||||
} else if(text.includes("event:btn2")){
|
||||
sendEvent("dialog:button2");
|
||||
}
|
||||
}
|
||||
window.addEventListener("message", messageReceiver, false);
|
||||
var reference;
|
||||
var data;
|
||||
function messageReceiver(event)
|
||||
{
|
||||
reference = event.reference;
|
||||
data = event.data;
|
||||
messageProcessor(data);
|
||||
}
|
||||
sendEvent("dialog:loaded");
|
||||
}
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
2
filesystem.js
Normal file
2
filesystem.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// TODO: better browser filesystem
|
||||
// for now, just use localStorage
|
||||
30
home.svg
Normal file
30
home.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet" fill="white" style="fill: white;">
|
||||
<metadata>
|
||||
Created by potrace 1.15, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="white" stroke="none">
|
||||
<path d="M2426 5038 c-46 -46 -317 -326 -602 -622 l-519 -539 -5 417 -5 418
|
||||
-33 29 c-58 52 -153 34 -186 -35 -14 -30 -16 -94 -16 -560 l0 -525 -418 -433
|
||||
c-532 -553 -492 -507 -492 -566 0 -54 17 -85 60 -107 42 -22 92 -19 128 8 17
|
||||
12 523 533 1123 1157 601 624 1095 1136 1099 1138 4 1 494 -496 1089 -1105
|
||||
595 -609 1100 -1123 1122 -1140 46 -37 91 -43 139 -18 43 22 60 53 60 108 0
|
||||
45 -4 53 -57 110 -162 172 -2261 2314 -2283 2329 -15 11 -44 18 -73 18 -47 0
|
||||
-50 -2 -131 -82z"/>
|
||||
<path d="M2513 4513 c-17 -10 -430 -427 -917 -927 -702 -720 -888 -917 -896
|
||||
-945 -14 -50 -14 -2503 0 -2553 6 -20 24 -48 41 -62 l31 -26 643 0 643 0 31
|
||||
26 c17 14 35 42 41 62 6 23 10 271 10 675 l0 637 430 0 430 0 0 -666 0 -666
|
||||
34 -34 34 -34 650 0 650 0 30 29 c16 17 32 44 36 62 12 61 7 2523 -5 2559 -14
|
||||
38 -1751 1835 -1802 1863 -17 9 -43 17 -57 17 -14 0 -39 -8 -57 -17z m994
|
||||
-1246 l682 -702 0 -1162 1 -1163 -475 0 -475 0 0 655 c0 720 2 698 -60 730
|
||||
-25 13 -111 15 -615 15 -523 0 -590 -2 -614 -16 -58 -34 -56 -3 -59 -721 l-3
|
||||
-663 -474 0 -475 0 0 1159 0 1159 815 836 815 835 128 -130 c70 -72 434 -447
|
||||
809 -832z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
573
index.php
Normal file
573
index.php
Normal file
|
|
@ -0,0 +1,573 @@
|
|||
<?
|
||||
//Copyright (c) 2018 Daniel Bulant. All Rights Reserved.
|
||||
//Using The freesound project, jQuery, fontawesome and more
|
||||
session_start();
|
||||
if(isset($_SESSION["notifications"])){
|
||||
$notifications = $_SESSION["notifications"];
|
||||
} else {
|
||||
$_SESSION["notifications"] = $notification = array();
|
||||
}
|
||||
if(((isset($_SERVER['HTTPS'])) && (strtolower($_SERVER['HTTPS']) == 'on')) || ((isset($_SERVER['HTTP_X_FORWARDED_PROTO'])) && (strtolower($_SERVER['HTTP_X_FORWARDED_PROTO']) == 'https'))){
|
||||
|
||||
} else {
|
||||
header("location: https://os.danbulant.eu");
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>android OS - php</title>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
|
||||
<script src="howler.js"></script>
|
||||
</head>
|
||||
<body id="body">
|
||||
<div class="loading"><img src="android.png"></div>
|
||||
<div class="notification-bar" style="width: 100%;"id="notification" onclick="showNOTIFY();">
|
||||
<div style="display: inline-block; text-align: left;" class="inverted-color half-width"id="time"></div>
|
||||
<i class="fab fa-android"></i>
|
||||
</div>
|
||||
<iframe src="https://os.danbulant.eu/system/home.php" id="iframe" width="100%" height="100%" frameborder="0">
|
||||
Tvůj prohlížeč nepodporuje iframe. Použij prosím novější prohlížeč.
|
||||
</iframe>
|
||||
<!-- Modal content -->
|
||||
<!-- The Modal -->
|
||||
<div id="popup" class="modal">
|
||||
|
||||
<!-- Modal content -->
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<p id="popup-text">Android not responding</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="modal_btn1" onclick="beam('event:btn1')">wait</button><button id="modal_btn2" onclick="beam('event:btn2')">restart</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="notifications" class="notifications hidenotification">
|
||||
|
||||
<!-- Modal content -->
|
||||
<div class="notify-content">
|
||||
<div class="notify-header">
|
||||
<h2>Notifications</h2>
|
||||
</div>
|
||||
<div class="after-header">
|
||||
settings here
|
||||
</div>
|
||||
<div class="notify-body">
|
||||
|
||||
</div>
|
||||
<div class="notify-footer inverted-color full-width">
|
||||
<h3 onclick="hideNOTIFY();">close</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="menu">
|
||||
<img onclick="event_menu();" src="menu.svg">
|
||||
<img onclick="event_home();" src="home.svg">
|
||||
<img onclick="event_back();"src="back.svg">
|
||||
</div>
|
||||
<div id="snackbar">Some text some message..</div>
|
||||
</body>
|
||||
<script>
|
||||
var sb = document.getElementById("snackbar");
|
||||
function showSnackbar(text, time) {
|
||||
console.log("Oh, I just got something to output as toast!");
|
||||
sb.className = "sbshow";
|
||||
sb.innerHTML = text;
|
||||
cssTime = time / 1000;
|
||||
cssTime = cssTime + "s";
|
||||
sb.style.animation = "fadein 0.5s, fadeout 0.5s "+cssTime;
|
||||
setTimeout(function(){ sb.className = sb.className.replace("sbshow", ""); }, parseInt(time) + 500);
|
||||
}
|
||||
var frame = window.frames[0];
|
||||
function beam(text){
|
||||
frame.postMessage(text);
|
||||
}
|
||||
function get_page(){
|
||||
return document.getElementById('iframe').src;
|
||||
}
|
||||
// Get the modal
|
||||
var cancellable = true;
|
||||
var modal = document.getElementById('popup');
|
||||
var modal_btn1 = document.getElementById('modal_btn1');
|
||||
var modal_btn2 = document.getElementById('modal_btn2');
|
||||
var currentBTN = "device_wait";
|
||||
function showPOPUP(text,type){
|
||||
if(type == 1){
|
||||
modal_btn1.innerHTML = "wait";
|
||||
modal_btn2.innerHTML = "restart";
|
||||
currentBTN = "device_wait";
|
||||
} else if(type == 2){
|
||||
modal_btn1.innerHTML = "wait";
|
||||
modal_btn2.innerHTML = "close";
|
||||
currentBTN = "app_wait";
|
||||
} else if(type == 3){
|
||||
modal_btn1.innerHTML = "yes";
|
||||
modal_btn2.innerHTML = "no";
|
||||
currentBTN = "true_false";
|
||||
}
|
||||
modal.style.display = "block";
|
||||
jQuery("#popup-text").html(text);
|
||||
}
|
||||
var popupText;
|
||||
function showCustomPOPUP(data){
|
||||
popupText = data.substring(
|
||||
data.lastIndexOf("text:") + 1,
|
||||
data.lastIndexOf("btn1:")
|
||||
);
|
||||
modal_btn1.innerHTML = data.substring(data.lastIndexOf("btn1:") + 5, data.lastIndexOf("btn2:"));
|
||||
modal_btn2.innerHTML = data.substring(data.lastIndexOf("btn2:") + 5, data.lastIndexOf("cancellable:"));
|
||||
cancellable = data.substring(data.lastIndexOf("cancellable:") + 12, data.length);
|
||||
currentBTN = "app_custom";
|
||||
modal.style.display = "block";
|
||||
jQuery("#popup-text").html(popupText);
|
||||
}
|
||||
function showCustomSnackbar(data){
|
||||
text = data.substring(data.lastIndexOf("snackbar:") + 9, data.lastIndexOf("time:"));
|
||||
time = data.substring(data.lastIndexOf("time:") + 5, data.length);
|
||||
console.log("Oh, it looks like me(showCustomSnackbar) received an information about snackbar! I'll just send it next, so I execute showSnackbar("+text+","+time+")!")
|
||||
showSnackbar(text,time);
|
||||
}
|
||||
function hidePOPUP(){
|
||||
modal.style.display = "none";
|
||||
}
|
||||
setTimeout(hideLoad,5000);
|
||||
|
||||
var startupSound = new Howl({
|
||||
src: ['data/music/welcometowhatever.wav']
|
||||
});
|
||||
startupSound.play();
|
||||
$(".notification-bar").hide();
|
||||
function hideLoad(){
|
||||
$(".loading").hide();
|
||||
$(".notification-bar").show();
|
||||
}
|
||||
|
||||
//notifications script
|
||||
var eventSound = new Howl({
|
||||
src: ['data/music/event.mp3']
|
||||
});
|
||||
function addNotification(app,text){
|
||||
eventSound.play();
|
||||
jQuery.get("notifications/add.php", { application : app, content : text}, function(data, status, jqXHR) { console.log(status); });
|
||||
reloadNotifications();
|
||||
}
|
||||
|
||||
function reloadNotifications(){
|
||||
$(".notify-body").load("notifications/list.php");
|
||||
}
|
||||
|
||||
reloadNotifications();
|
||||
|
||||
function showCustomNotification(data){
|
||||
app = data.substring(data.lastIndexOf("notification:") + 13, data.lastIndexOf("content:"));
|
||||
text = data.substring(data.lastIndexOf("content:") + 8,data.length);
|
||||
addNotification(app,text);
|
||||
}
|
||||
|
||||
|
||||
function showNOTIFY(){
|
||||
var notifications = document.getElementById("notifications");
|
||||
notifications.classList.add("shownotification");
|
||||
notifications.classList.remove("hidenotification");
|
||||
console.log("showing notifications");
|
||||
}
|
||||
|
||||
function hideNOTIFY(){
|
||||
notifications.classList.remove("shownotification");
|
||||
notifications.classList.add("fadeout");
|
||||
console.log("hiding notifications");
|
||||
setTimeout(function(){
|
||||
notifications.classList.remove("fadeout");
|
||||
notifications.classList.add("hidenotification");
|
||||
console.log("stopping notification animation");
|
||||
}, 400);
|
||||
|
||||
}
|
||||
|
||||
document.getElementById("body").style.paddingTop = document.getElementById("notification").offsetHeight + "px";
|
||||
document.getElementById("notification").style.top = "0px";
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal && cancellable) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
if (event.target == notifications) {
|
||||
hideNOTIFY();
|
||||
console.log("clicked outside notification");
|
||||
}
|
||||
}
|
||||
function openAPP(app){
|
||||
document.getElementById('iframe').src = app;
|
||||
}
|
||||
function event_back(){
|
||||
frame.postMessage("event:back", "*");
|
||||
console.log("event:back");
|
||||
}
|
||||
function event_home(){
|
||||
beam("event:close");
|
||||
if(get_page() !== "pages/home.php");
|
||||
openAPP("pages/home.php");
|
||||
console.log("event:home");
|
||||
}
|
||||
function event_menu(){
|
||||
frame.postMessage("event:menu", "*");
|
||||
console.log("event:menu");
|
||||
}
|
||||
function close(text){
|
||||
if(text == "app"){
|
||||
openAPP("pages/home.php");
|
||||
} else if(text == "dialog"){
|
||||
hidePOPUP();
|
||||
}
|
||||
}
|
||||
window.addEventListener("message", receiveMessage, false);
|
||||
var reference;
|
||||
var data;
|
||||
function receiveMessage(event)
|
||||
{
|
||||
|
||||
|
||||
reference = event.reference;
|
||||
data = event.data;
|
||||
if(data.includes("open:")){
|
||||
openAPP(data.replace("open:",""));
|
||||
} else if(data.includes("error:")){
|
||||
showPOPUP(data.replace("error:",""),2);
|
||||
} else if(data.includes("dialog:")){
|
||||
showCustomPOPUP(data.replace("dialog:",""));
|
||||
} else if(data.includes("close:")){
|
||||
close(data.replace("close:",""));
|
||||
} else if(data.includes("snackbar:")){
|
||||
showCustomSnackbar(data);
|
||||
} else if(data.includes("notification:")){
|
||||
showCustomNotification(data);
|
||||
}
|
||||
}
|
||||
|
||||
//time script
|
||||
(function () {
|
||||
function checkTime(i) {
|
||||
return (i < 10) ? "0" + i : i;
|
||||
}
|
||||
|
||||
function startTime() {
|
||||
var today = new Date(),
|
||||
h = checkTime(today.getHours()),
|
||||
m = checkTime(today.getMinutes()),
|
||||
s = checkTime(today.getSeconds());
|
||||
document.getElementById('time').innerHTML = h + ":" + m;
|
||||
t = setTimeout(function () {
|
||||
startTime()
|
||||
}, 2000);
|
||||
}
|
||||
startTime();
|
||||
})();
|
||||
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
|
||||
@import url('https://fonts.googleapis.com/css?family=Raleway');
|
||||
@import url('https://fonts.googleapis.com/css?family=Oswald');
|
||||
body, html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
.loading {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 500;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
.loading > img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
animation: greenLight 5s infinite;
|
||||
}
|
||||
@keyframes greenLight {
|
||||
50% {filter: drop-shadow(0px 0px 5px #A4CA39);}
|
||||
}
|
||||
#snackbar {
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
margin-left: -125px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
padding: 16px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: 30px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#snackbar.sbshow {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
from {bottom: 0; opacity: 0;}
|
||||
to {bottom: 30px; opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {bottom: 0; opacity: 0;}
|
||||
to {bottom: 30px; opacity: 1;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from {bottom: 30px; opacity: 1;}
|
||||
to {bottom: 0; opacity: 0;}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {bottom: 30px; opacity: 1;}
|
||||
to {bottom: 0; opacity: 0;}
|
||||
}
|
||||
.app {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.text {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
.after-header {
|
||||
background-color: white;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
.notify-item {
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
border-radius: 5px;
|
||||
padding: 2px 16px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
.notification-bar {
|
||||
background-color:black !important;
|
||||
position: fixed;
|
||||
color: white !important;
|
||||
width:100%;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/* The Modal (background) */
|
||||
.notifications {
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
-webkit-animation-name: fadeIn; /* Fade in the background */
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
.hidenotification {
|
||||
display: none;
|
||||
}
|
||||
.shownotification {
|
||||
display: block;
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.fadeout {
|
||||
z-index: 2;
|
||||
-webkit-animation-name: fadeOut;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
/* Modal Content */
|
||||
.notify-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
/*background-color: #fefefe;*/
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
-webkit-animation-name: slideIn;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-name: slideIn;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.notify-close {
|
||||
color: white;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notify-close:hover,
|
||||
.notify-close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notify-header {
|
||||
padding: 2px 8px;
|
||||
background-color: #5cb85c;
|
||||
color: white;
|
||||
}
|
||||
.notify-header > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notify-body {padding: 2px 16px;}
|
||||
|
||||
.notify-footer {
|
||||
padding: 2px 16px;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255,255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Add Animation */
|
||||
@-webkit-keyframes slideIn {
|
||||
from {top: -100%; opacity: 0}
|
||||
to {top: 0; opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {top: -100%; opacity: 0}
|
||||
to {top: 0; opacity: 1}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {opacity: 0}
|
||||
to {opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {opacity: 0}
|
||||
to {opacity: 1}
|
||||
}
|
||||
@-webkit-keyframes fadeOut {
|
||||
from {top: 0; opacity: 1}
|
||||
to {top: -100%; opacity: 0}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {top: 0; opacity: 1}
|
||||
to {top: -100%; opacity: 0}
|
||||
}
|
||||
.menu {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
width: 30%;
|
||||
height: 10%;
|
||||
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
.menu > img {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
}
|
||||
.full-width {
|
||||
width = 100%;
|
||||
}
|
||||
.half-width {
|
||||
width = 100%;
|
||||
}
|
||||
.inverted-color {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
|
||||
/* -webkit-animation-name: animatetop;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-name: animatetop;
|
||||
animation-duration: 0.4s;*/
|
||||
}
|
||||
|
||||
/* Add Animation */
|
||||
@-webkit-keyframes animatetop {
|
||||
from {top:-300px; opacity:0}
|
||||
to {top:0; opacity:1}
|
||||
}
|
||||
|
||||
@keyframes animatetop {
|
||||
from {top:-300px; opacity:0}
|
||||
to {top:0; opacity:1}
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: white;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 2px 16px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 2px 16px;
|
||||
/*background-color: #5cb85c;*/
|
||||
color: white;
|
||||
}
|
||||
.modal-footer > button {
|
||||
border: none;
|
||||
text-align: right;
|
||||
color: #409C8E;
|
||||
background-color: rgba(255, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
49
instascan.min.js
vendored
Normal file
49
instascan.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
39
main.js
Normal file
39
main.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
if(typeof mainScriptIncluded == 'undefined'){
|
||||
function get_parent(){
|
||||
return window.parent;
|
||||
}
|
||||
var mainScriptIncluded = true;
|
||||
var parent = get_parent();
|
||||
function home(){
|
||||
parent.postMessage("close:app", "*");
|
||||
}
|
||||
function beam(text){
|
||||
parent.postMessage(text, "https://os.danbulant.eu/");
|
||||
}
|
||||
function sendEvent(text){
|
||||
event = new CustomEvent(text, {});
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
function sendNotification(app,text){
|
||||
beam("notification:" + app + "content:" + text);
|
||||
}
|
||||
function mainMessageProcessor(text){
|
||||
if(text.includes("event:back")){
|
||||
sendEvent("button:menu");
|
||||
} else if(text.includes("event:menu")){
|
||||
sendEvent("button:menu");
|
||||
} else if(text.includes("event:close")){
|
||||
sendEvent("event:close");
|
||||
}
|
||||
}
|
||||
window.addEventListener("message", mainMessageReceiver, false);
|
||||
var reference;
|
||||
var data;
|
||||
function mainMessageReceiver(event)
|
||||
{
|
||||
reference = event.reference;
|
||||
data = event.data;
|
||||
mainMessageProcessor(data);
|
||||
}
|
||||
sendEvent("main:loaded");
|
||||
}
|
||||
23
menu.svg
Normal file
23
menu.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="220.000000pt" height="220.000000pt" viewBox="0 0 220.000000 220.000000"
|
||||
preserveAspectRatio="xMidYMid meet" style="fill: white;">
|
||||
<metadata>
|
||||
Created by potrace 1.15, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,220.000000) scale(0.100000,-0.100000)"
|
||||
fill="white" stroke="none">
|
||||
<path d="M220 1783 c-28 -10 -70 -56 -81 -90 -14 -42 -5 -93 22 -127 46 -59 2
|
||||
-56 942 -56 l864 0 34 23 c90 60 88 181 -4 237 -31 19 -57 20 -897 19 -476 0
|
||||
-872 -3 -880 -6z"/>
|
||||
<path d="M220 1233 c-28 -10 -70 -56 -81 -90 -14 -42 -5 -93 22 -127 46 -59 2
|
||||
-56 942 -56 l864 0 34 23 c90 60 88 181 -4 237 -31 19 -57 20 -897 19 -476 0
|
||||
-872 -3 -880 -6z"/>
|
||||
<path d="M220 683 c-28 -10 -70 -56 -81 -90 -14 -42 -5 -93 22 -127 46 -59 2
|
||||
-56 942 -56 l864 0 34 23 c90 60 88 181 -4 237 -31 19 -57 20 -897 19 -476 0
|
||||
-872 -3 -880 -6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
92
mp.js
Normal file
92
mp.js
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
var script = document.createElement("script");
|
||||
script.src = "https://os.danbulant.eu/howler.js";
|
||||
document.head.appendChild(script);
|
||||
if(typeof mainScriptIncluded == 'undefined'){
|
||||
console.log("some functions may not work correctly. Please consider including main script.");
|
||||
}
|
||||
if(typeof mediaPlayerScriptIncluded == 'undefined'){
|
||||
mediaPlayerScriptIncluded = true;
|
||||
function load(src){
|
||||
sound = new howl({src: [src]});
|
||||
return sound;
|
||||
}
|
||||
function play(sound){
|
||||
sound.play();
|
||||
}
|
||||
function pause(sound){
|
||||
sound.pause();
|
||||
}
|
||||
function stop(sound){
|
||||
sound.stop();
|
||||
}
|
||||
function setVolume(sound,volume){
|
||||
sound.volume(volume);
|
||||
}
|
||||
function getVolume(sound){
|
||||
return sound.volume();
|
||||
}
|
||||
function mute(sound){
|
||||
sound.mute(true);
|
||||
}
|
||||
function unmute(sound){
|
||||
sound.mute(false);
|
||||
}
|
||||
function fade(sound, from, to, duration){
|
||||
sound.fade(from,to,duration);
|
||||
}
|
||||
function setSpeed(sound, speed){
|
||||
sound.rate(speed);
|
||||
}
|
||||
function getSpeed(sound){
|
||||
return sound.rate();
|
||||
}
|
||||
function seek(sound, to){
|
||||
sound.seek(to);
|
||||
}
|
||||
function getSeek(sound){
|
||||
return sound.seek();
|
||||
}
|
||||
function startLoop(sound){
|
||||
sound.loop(true);
|
||||
}
|
||||
function stopLoop(sound){
|
||||
sound.loop(false);
|
||||
}
|
||||
function getLoop(sound){
|
||||
return sound.loop();
|
||||
console.log("To loop or not to loop, that's the question");
|
||||
}
|
||||
function state(sound){
|
||||
return sound.state();
|
||||
}
|
||||
function playing(sound){
|
||||
return sound.playing();
|
||||
}
|
||||
function duration(sound){
|
||||
return sound.duration();
|
||||
}
|
||||
function remove(sound){
|
||||
sound.unload();
|
||||
console.log("unloaded and removed sound");
|
||||
}
|
||||
function global_mute(){
|
||||
Howler.mute(true);
|
||||
}
|
||||
function global_unmute(){
|
||||
Howler.mute(false);
|
||||
}
|
||||
function get_global_volume(){
|
||||
return Howler.volume();
|
||||
}
|
||||
function set_global_volume(number){
|
||||
Howler.volume(number);
|
||||
}
|
||||
function global_remove(){
|
||||
Howler.unload();
|
||||
console.log("All sounds have been destroyed");
|
||||
}
|
||||
function codec_availabe(codec){
|
||||
return Howler.codecs(codec);
|
||||
}
|
||||
sendEvent("mp:loaded");
|
||||
}
|
||||
7
notifications/add.php
Normal file
7
notifications/add.php
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?
|
||||
session_start();
|
||||
$count = count($_SESSION["notifications"]);
|
||||
|
||||
$_SESSION["notifications"][$count]["app"] = $_GET["application"];
|
||||
$_SESSION["notifications"][$count]["text"] = $_GET["content"];
|
||||
$_SESSION["notifications"][$count]["date"] = date("j.n.y G:i");
|
||||
10
notifications/list.php
Normal file
10
notifications/list.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?
|
||||
session_start();
|
||||
foreach ($_SESSION["notifications"] as $notification) {
|
||||
?>
|
||||
<div class="notify-item">
|
||||
<p class="app"><?=$notification["app"];?> <small><?=$notification["date"]; ?></small></p>
|
||||
<p class="text"><?=$notification["text"]; ?></p>
|
||||
</div>
|
||||
<?
|
||||
}
|
||||
46
pages/apps.json
Normal file
46
pages/apps.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"apps" : {
|
||||
"calculator" : {
|
||||
"name" : "calculator",
|
||||
"icon" : "https://lh3.googleusercontent.com/U3jWNUNqn2XqlNhD2ggy6ELAtt0jRps9MKbfERUWcOBO8uC_BmZUqCKV5eD2uarhg14=s180-rw",
|
||||
"url" : "/pages/calculator.php",
|
||||
"favorite" : true
|
||||
},
|
||||
"stickman_rope" : {
|
||||
"name" : "Stickman rope",
|
||||
"icon" : "https://is5-ssl.mzstatic.com/image/thumb/Purple128/v4/58/5f/e1/585fe19a-f77f-f66a-3d3c-c195d70cf9af/AppIcon-0-1x_U007emarketing-0-85-220-7.png/246x0w.jpg",
|
||||
"url" : "/pages/rope.php",
|
||||
"favorite" : false
|
||||
},
|
||||
"binary" : {
|
||||
"name" : "Binary translator",
|
||||
"icon" : "https://media.cdnandroid.com/07/2a/38/0a/imagen-binary-code-translator-0big.jpg",
|
||||
"url" : "/pages/binary.php",
|
||||
"favorite" : false
|
||||
},
|
||||
"clock" : {
|
||||
"name" : "Binary clock",
|
||||
"icon" : "https://images-eu.ssl-images-amazon.com/images/I/61n252YpctL.png",
|
||||
"url" : "/pages/clock.php",
|
||||
"favorite" : true
|
||||
},
|
||||
"humanity" : {
|
||||
"name" : "Humanity is dead",
|
||||
"icon" : "https://img.itch.zone/aW1nLzE2NTkxODcucG5n/315x250%23c/OiX9Sl.png",
|
||||
"url" : "/pages/humanity.php",
|
||||
"favorite" : false
|
||||
},
|
||||
"beat_racer" : {
|
||||
"name" : "Beat racer",
|
||||
"icon" : "https://i.kukupao.com/orig/256d1716223712ce767615df63a7a4b7",
|
||||
"url" : "/pages/beat-racer.php",
|
||||
"favorite" : false
|
||||
},
|
||||
"qr" : {
|
||||
"name" : "QR code scanner",
|
||||
"icon" : "https://www.dummies.com/wp-content/uploads/324172.image0.jpg",
|
||||
"url" : "/pages/scanner.php",
|
||||
"favorite" : true
|
||||
}
|
||||
}
|
||||
}
|
||||
25
pages/beat-racer.php
Normal file
25
pages/beat-racer.php
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Beat racer - Dan os APP</title>
|
||||
<script src="https://os.danbulant.eu/components.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.3/iframeResizer.contentWindow.min.js" integrity="sha256-xF+/yQUjfxb6NkS6541gf8bm9uH2LTfqaW1M98Hc/q4=" crossorigin="anonymous" onload="iFrameResize({log:true}, '#myIframe');"></script>
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="myIframe" src="https://html5.gamedistribution.com/a64a009d7ef9401bbcd9711157170d4c/" height="100%" width="100%"scrolling="no"></iframe>
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
170
pages/binary.php
Normal file
170
pages/binary.php
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Binary translator</title>
|
||||
<script src="https://os.danbulant.eu/main.js"></script>
|
||||
<script src="https://os.danbulant.eu/dialog.js"></script>
|
||||
<script src="https://os.danbulant.eu/mp.js"></script>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="tools">
|
||||
<button class="sub toggle">SWITCH</button>
|
||||
<button class="sub clear clear-converted">CLEAR</button>
|
||||
<button class="convert">CONVERT</button>
|
||||
<button class="unconvert">UNCONVERT</button>
|
||||
</div>
|
||||
<div class="decimalToBinary">
|
||||
<textarea autofocus class="decimal" placeholder="Your Normal Text ... examble(cat)"></textarea>
|
||||
<textarea class="binary disabled" placeholder="Your Binary Code ... examble(0100100)"></textarea>
|
||||
</div>
|
||||
<div class="binaryToDecimal">
|
||||
<textarea class="binary" placeholder="Your Binary Code ... examble(0100100)"></textarea>
|
||||
<textarea class="decimal disabled" placeholder="Your Decimal Text ... examble(cat)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.toggle').click(function(){
|
||||
$('.decimalToBinary').toggleClass('decimalToBinaryClose')
|
||||
$('.convert').toggleClass('decimalToBinaryClose')
|
||||
$('.binaryToDecimal').toggleClass('binaryToDecimalOpen')
|
||||
$('.unconvert').toggleClass('inline-block')
|
||||
$(".clear").toggleClass("clear-converted").toggleClass("clear-unconverted")
|
||||
})
|
||||
$(".clear").click(function () {
|
||||
if ($(this).hasClass("clear-converted")){
|
||||
$(".decimalToBinary textarea").val("")
|
||||
} else {
|
||||
$(".binaryToDecimal textarea").val("")
|
||||
}
|
||||
})
|
||||
$('.convert').click(function () {
|
||||
var charCodes = [],
|
||||
dividing = [],
|
||||
allBinaryCode = [],
|
||||
decimal = $('.decimalToBinary textarea.decimal').val(),
|
||||
chars = decimal.split('');
|
||||
for( x=0; x<decimal.length; x++){
|
||||
charCodes[x] = decimal.charCodeAt(x)
|
||||
}
|
||||
for (y=0; y<charCodes.length; y++){
|
||||
var equal = [],
|
||||
binary = [];
|
||||
decimal = charCodes[y];
|
||||
for(i=0; i<=999999999; i++){
|
||||
dividing[i] = decimal;
|
||||
equal[i] = dividing[i] / 2;
|
||||
decimal = Math.floor(equal[i]);
|
||||
binary[i] = dividing[i] % 2;
|
||||
if(equal[equal.length-1] < 1){
|
||||
break;
|
||||
}else{}
|
||||
}
|
||||
binary.reverse();
|
||||
allBinaryCode[y] = binary.join('').toString();
|
||||
}
|
||||
$('.decimalToBinary textarea.disabled').val(allBinaryCode.join(' ').toString());
|
||||
});
|
||||
$('.unconvert').click(function(){
|
||||
var allBinary = $('.binaryToDecimal textarea.binary').val().split(' '),
|
||||
unicodes = [];
|
||||
for(i=0; i<allBinary.length; i++){
|
||||
var oneBinaryLength = allBinary[i].length,
|
||||
equal = [],
|
||||
two = [],
|
||||
char = '',
|
||||
text = [];
|
||||
for(x=0; x<=oneBinaryLength -1; x++){
|
||||
two[x] = Math.pow(2,x);
|
||||
var binary = allBinary[i].split('');
|
||||
}
|
||||
two.reverse();
|
||||
for(y=0; y < two.length; y++){
|
||||
equal[y] = two[y] * eval(binary[y]);
|
||||
}
|
||||
unicodes[i] = eval(equal.join('+'));
|
||||
char = String.fromCharCode(unicodes[i]);
|
||||
text[i] = char;
|
||||
$('.binaryToDecimal textarea.disabled').val($('.binaryToDecimal textarea.disabled').val() + char)
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
background: #f0f0f0;
|
||||
}
|
||||
textarea{
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
display: block;
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
}
|
||||
textarea:focus{
|
||||
outline: 2px solid crimson;
|
||||
}
|
||||
.binaryToDecimal, .unconvert{
|
||||
display: none;
|
||||
}
|
||||
.decimalToBinaryClose{
|
||||
display: none;
|
||||
}
|
||||
.binaryToDecimalOpen{
|
||||
display: block;
|
||||
}
|
||||
.inline-block{
|
||||
display: inline-block;
|
||||
}
|
||||
.convert, .unconvert{
|
||||
padding: 10px;
|
||||
background: Crimson;
|
||||
color: #fff;
|
||||
border: 1px solid crimson;
|
||||
cursor: pointer;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
border-radius:3px;
|
||||
float:right;
|
||||
}
|
||||
.sub{
|
||||
padding:10px;
|
||||
background:#fff;
|
||||
color:#000;
|
||||
border:1px solid crimson;
|
||||
outline:none;
|
||||
border-radius:3px;
|
||||
cursor:pointer;
|
||||
transition:0.4s;
|
||||
-o-transition:0.4s;
|
||||
-moz-transition:0.4s;
|
||||
-webkit-transition:0.4s;
|
||||
}
|
||||
.sub:hover{
|
||||
background:#f7acba;
|
||||
}
|
||||
.container{
|
||||
width:100%;
|
||||
max-width:1000px;
|
||||
margin:10px auto;
|
||||
padding:2px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.tools{
|
||||
display:block;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
157
pages/calculator.php
Normal file
157
pages/calculator.php
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<div class="container">
|
||||
<fieldset id="container">
|
||||
<form name="calculator">
|
||||
|
||||
<input id="display" type="text" name="display" readonly>
|
||||
|
||||
<input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'">
|
||||
<input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'">
|
||||
<input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'">
|
||||
<input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '">
|
||||
<br>
|
||||
<input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'">
|
||||
<input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'">
|
||||
<input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'">
|
||||
<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '">
|
||||
<br>
|
||||
<input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'">
|
||||
<input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'">
|
||||
<input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'">
|
||||
<input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '">
|
||||
<br>
|
||||
<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''">
|
||||
<input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'">
|
||||
<input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
|
||||
<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '">
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
<script>
|
||||
var parent = window.parent;
|
||||
console.log("Calculator parent is "+parent+", and they are happy!");
|
||||
function message(text){
|
||||
if(text.includes("event:back")){
|
||||
parent.postMessage("open:pages/home.php", "*");
|
||||
} else if (text.includes("event:menu")){
|
||||
console.log("menu clicked (but it don't have any event in calculator)");
|
||||
}
|
||||
}
|
||||
window.addEventListener("message", receiveMessage, false);
|
||||
var reference;
|
||||
var data;
|
||||
function receiveMessage(event)
|
||||
{
|
||||
|
||||
|
||||
reference = event.reference;
|
||||
data = event.data;
|
||||
message(data);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background: url(http://www.inkspilldesign.com/demo/wood-tile-background.jpg);
|
||||
background-color: #424242;
|
||||
font-family: Tahoma;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 200px;
|
||||
padding: 8px 8px 20px 8px;
|
||||
margin: 20px auto;
|
||||
background-color: #ABABAB;
|
||||
border-radius: 4px;
|
||||
border-top: 2px solid #FFF;
|
||||
border-right: 2px solid #FFF;
|
||||
border-bottom: 2px solid #C1C1C1;
|
||||
border-left: 2px solid #C1C1C1;
|
||||
box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
#display {
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
height: 42px;
|
||||
width: 174px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
border-top: 2px solid #C1C1C1;
|
||||
border-right: 2px solid #C1C1C1;
|
||||
border-bottom: 2px solid #FFF;
|
||||
border-left: 2px solid #FFF;
|
||||
background-color: #FFF;
|
||||
box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mathButtons {
|
||||
margin: 2px 2px 6px 2px;
|
||||
color: #FFF;
|
||||
text-shadow: -1px -1px 0px #44006F;
|
||||
background-color: #434343;
|
||||
border-top: 2px solid #C1C1C1;
|
||||
border-right: 2px solid #C1C1C1;
|
||||
border-bottom: 2px solid #181818;
|
||||
border-left: 2px solid #181818;
|
||||
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
|
||||
}
|
||||
|
||||
.digits {
|
||||
color: #181818;
|
||||
text-shadow: 1px 1px 0px #FFF;
|
||||
background-color: #EBEBEB;
|
||||
border-top: 2px solid #FFF;
|
||||
border-right: 2px solid #FFF;
|
||||
border-bottom: 2px solid #C1C1C1;
|
||||
border-left: 2px solid #C1C1C1;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
|
||||
}
|
||||
|
||||
.digits:hover,
|
||||
.mathButtons:hover,
|
||||
#clearButton:hover {
|
||||
background-color: #FFBA75;
|
||||
box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
|
||||
border-top: 2px solid #FFF;
|
||||
border-right: 2px solid #FFF;
|
||||
border-bottom: 2px solid #AE5700;
|
||||
border-left: 2px solid #AE5700;
|
||||
}
|
||||
|
||||
#clearButton {
|
||||
color: #FFF;
|
||||
text-shadow: -1px -1px 0px #44006F;
|
||||
background-color: #D20000;
|
||||
border-top: 2px solid #FF8484;
|
||||
border-right: 2px solid #FF8484;
|
||||
border-bottom: 2px solid #800000;
|
||||
border-left: 2px solid #800000;
|
||||
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
|
||||
}
|
||||
</style>
|
||||
417
pages/clock.php
Normal file
417
pages/clock.php
Normal file
|
|
@ -0,0 +1,417 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Binary clock</title>
|
||||
<script src="https://os.danbulant.eu/components.js"></script>
|
||||
<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
|
||||
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
|
||||
</head>
|
||||
<body onclick="switchClock();">
|
||||
<div id="react"></div>
|
||||
<canvas id="clock-face"></canvas>
|
||||
<canvas id="clock-hands"></canvas>
|
||||
</body>
|
||||
<script>
|
||||
window.addEventListener("toast:loaded", sendLoadedToast, {once: true});
|
||||
function sendLoadedToast(){
|
||||
snackbar("Click anywhere to change clock style.",4000);
|
||||
}
|
||||
var react = false;
|
||||
function switchClock(){
|
||||
if(react){
|
||||
showAnalog();
|
||||
} else {
|
||||
showReact();
|
||||
}
|
||||
react = !react;
|
||||
}
|
||||
function showReact(){
|
||||
console.log("showing react");
|
||||
document.getElementById("react").style.display = "flex";
|
||||
document.getElementById("clock-face").style.display = "none";
|
||||
document.getElementById("clock-hands").style.display = "none";
|
||||
}
|
||||
function showAnalog(){
|
||||
console.log("showing analog");
|
||||
document.getElementById("react").style.display = "none";
|
||||
document.getElementById("clock-face").style.display = "flex";
|
||||
document.getElementById("clock-hands").style.display = "flex";
|
||||
}
|
||||
window.onload = function () {
|
||||
var cf = document.getElementById("clock-face"),
|
||||
cf$ = cf.getContext("2d"),
|
||||
ch = document.getElementById("clock-hands"),
|
||||
ch$ = ch.getContext("2d"),
|
||||
// firstColor = '#f44242',
|
||||
// secondColor = '#223235',
|
||||
// background = '#0f0f0f',
|
||||
// handsColor = '#ffffff', // red blue black theme
|
||||
|
||||
// firstColor = '#ff00a5',
|
||||
// secondColor = '#2b103a',
|
||||
// background = '#0f0f0f',
|
||||
// handsColor = '#0087ff', //cold purple theme
|
||||
|
||||
firstColor = "#17b9dc",
|
||||
secondColor = "#223235",
|
||||
background = "#0f0f0f",
|
||||
handsColor = "#ffffff", //dark theme
|
||||
sixtieth = 2 * Math.PI / 60,
|
||||
twelfth = sixtieth * 5;
|
||||
|
||||
var w = cf.width = ch.width = window.innerWidth,
|
||||
h = cf.height = ch.height = window.innerHeight,
|
||||
shortestSide = w <= h ? w : h,
|
||||
i = void 0,
|
||||
r = void 0,
|
||||
v = void 0,
|
||||
currentAngle = void 0,
|
||||
handsWidth = void 0,
|
||||
time = void 0,
|
||||
secondsAngle = void 0,
|
||||
minutesAngle = void 0,
|
||||
hoursAngle = void 0,
|
||||
timeElapsed = void 0,
|
||||
last = void 0,
|
||||
clockRadius = shortestSide / 2 - shortestSide / 20;
|
||||
|
||||
function drawface() {
|
||||
cf$.fillStyle = background;
|
||||
cf$.fillRect(0, 0, cf$.canvas.width, cf$.canvas.height);
|
||||
|
||||
for (r = 1; r <= 6; r++) {
|
||||
cf$.fillStyle = firstColor;
|
||||
v = Math.pow(2, r - 1);
|
||||
|
||||
for (i = 0; i < 60; i++) {
|
||||
currentAngle = i * sixtieth - Math.PI / 2;
|
||||
|
||||
if (i % v === 0) {
|
||||
cf$.fillStyle = cf$.fillStyle === firstColor ?
|
||||
secondColor :
|
||||
firstColor;
|
||||
}
|
||||
|
||||
cf$.beginPath();
|
||||
cf$.arc(
|
||||
cf$.canvas.width / 2 +
|
||||
Math.cos(currentAngle) * (clockRadius - r * clockRadius / 15),
|
||||
cf$.canvas.height / 2 +
|
||||
Math.sin(currentAngle) * (clockRadius - r * clockRadius / 15),
|
||||
clockRadius / 40,
|
||||
0,
|
||||
Math.PI * 2);
|
||||
|
||||
cf$.fill();
|
||||
}
|
||||
}
|
||||
|
||||
for (r = 1; r <= 4; r++) {
|
||||
cf$.fillStyle = firstColor;
|
||||
v = Math.pow(2, r - 1);
|
||||
|
||||
for (i = 0; i < 12; i++) {
|
||||
currentAngle = i * twelfth - Math.PI / 2;
|
||||
|
||||
if (i % v === 0) {
|
||||
cf$.fillStyle = cf$.fillStyle === firstColor ?
|
||||
secondColor :
|
||||
firstColor;
|
||||
}
|
||||
|
||||
cf$.beginPath();
|
||||
cf$.arc(
|
||||
cf$.canvas.width / 2 +
|
||||
Math.cos(currentAngle) * (clockRadius / 1.8 - r * clockRadius / 11),
|
||||
cf$.canvas.height / 2 +
|
||||
Math.sin(currentAngle) * (clockRadius / 1.8 - r * clockRadius / 11),
|
||||
clockRadius / 27,
|
||||
0,
|
||||
Math.PI * 2);
|
||||
|
||||
cf$.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initHandsAngles() {
|
||||
time = new Date();
|
||||
|
||||
last = time.getTime();
|
||||
|
||||
secondsAngle =
|
||||
sixtieth * time.getSeconds() + sixtieth / 1000 * time.getMilliseconds();
|
||||
minutesAngle =
|
||||
sixtieth * time.getMinutes() + sixtieth / 60 * time.getSeconds();
|
||||
hoursAngle =
|
||||
twelfth * (
|
||||
time.getHours() > 12 ? time.getHours() - 12 : time.getHours()) +
|
||||
twelfth / 60 * time.getMinutes();
|
||||
}
|
||||
|
||||
function updateHandsAngles() {
|
||||
timeElapsed = +new Date() - last;
|
||||
|
||||
last = +new Date();
|
||||
|
||||
secondsAngle += sixtieth / 1000 * timeElapsed;
|
||||
minutesAngle += sixtieth / 60 * (timeElapsed / 1000);
|
||||
hoursAngle += twelfth / 60 * (timeElapsed / 1000 / 60);
|
||||
}
|
||||
|
||||
function drawHands() {
|
||||
handsWidth = clockRadius / 130;
|
||||
|
||||
ch$.clearRect(0, 0, ch$.canvas.width, ch$.canvas.height);
|
||||
ch$.fillStyle = handsColor;
|
||||
ch$.strokeStyle = handsColor;
|
||||
ch$.lineWidth = handsWidth;
|
||||
|
||||
ch$.save();
|
||||
ch$.beginPath();
|
||||
ch$.translate(ch$.canvas.width / 2, ch$.canvas.height / 2);
|
||||
ch$.rotate(secondsAngle);
|
||||
ch$.fillRect(
|
||||
-handsWidth / 2,
|
||||
-handsWidth / 2,
|
||||
handsWidth,
|
||||
-clockRadius + clockRadius / 15);
|
||||
|
||||
ch$.fill();
|
||||
ch$.restore();
|
||||
|
||||
ch$.save();
|
||||
ch$.beginPath();
|
||||
ch$.translate(ch$.canvas.width / 2, ch$.canvas.height / 2);
|
||||
ch$.rotate(minutesAngle);
|
||||
ch$.fillRect(
|
||||
-handsWidth / 2,
|
||||
-handsWidth / 2,
|
||||
handsWidth,
|
||||
-clockRadius + clockRadius / 5);
|
||||
|
||||
ch$.fill();
|
||||
ch$.restore();
|
||||
|
||||
ch$.save();
|
||||
ch$.beginPath();
|
||||
ch$.translate(ch$.canvas.width / 2, ch$.canvas.height / 2);
|
||||
ch$.rotate(hoursAngle);
|
||||
ch$.fillRect(
|
||||
-handsWidth / 2,
|
||||
-handsWidth / 2,
|
||||
handsWidth,
|
||||
-clockRadius + clockRadius / 1.5);
|
||||
|
||||
ch$.fill();
|
||||
ch$.restore();
|
||||
|
||||
ch$.beginPath();
|
||||
ch$.arc(
|
||||
ch$.canvas.width / 2,
|
||||
ch$.canvas.height / 2,
|
||||
clockRadius / 1.87,
|
||||
0,
|
||||
Math.PI * 2);
|
||||
|
||||
ch$.stroke();
|
||||
|
||||
ch$.beginPath();
|
||||
ch$.arc(
|
||||
ch$.canvas.width / 2,
|
||||
ch$.canvas.height / 2,
|
||||
clockRadius,
|
||||
0,
|
||||
Math.PI * 2);
|
||||
|
||||
ch$.stroke();
|
||||
|
||||
ch$.beginPath();
|
||||
ch$.arc(
|
||||
ch$.canvas.width / 2,
|
||||
ch$.canvas.height / 2,
|
||||
clockRadius / 30,
|
||||
0,
|
||||
Math.PI * 2);
|
||||
|
||||
ch$.fill();
|
||||
|
||||
ch$.fillStyle = background;
|
||||
ch$.beginPath();
|
||||
ch$.arc(
|
||||
ch$.canvas.width / 2,
|
||||
ch$.canvas.height / 2,
|
||||
clockRadius / 33,
|
||||
0,
|
||||
Math.PI * 2);
|
||||
|
||||
ch$.fill();
|
||||
}
|
||||
|
||||
drawface();
|
||||
initHandsAngles();
|
||||
|
||||
(function loop() {
|
||||
updateHandsAngles();
|
||||
drawHands();
|
||||
requestAnimationFrame(loop);
|
||||
})();
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
w = cf.width = ch.width = window.innerWidth;
|
||||
h = cf.height = ch.height = window.innerHeight;
|
||||
shortestSide = w <= h ? w : h;
|
||||
clockRadius = shortestSide / 2 - shortestSide / 20;
|
||||
drawface();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var Pip = function Pip(_ref) {var isOn = _ref.isOn;return (
|
||||
React.createElement("div", { className: "pip " + (isOn && 'pip--on') }));};
|
||||
|
||||
var BinaryDigit = function BinaryDigit(_ref2) {var base2NumberAsArray = _ref2.base2NumberAsArray;return (
|
||||
React.createElement("div", { className: "binary-digit" },
|
||||
|
||||
base2NumberAsArray.map(function (pip, idx) {return React.createElement(Pip, { key: idx, isOn: pip === 1 });})));};
|
||||
|
||||
|
||||
|
||||
var BinaryDigitGroup = function BinaryDigitGroup(_ref3) {var group = _ref3.group;return (
|
||||
React.createElement("div", { className: "binary-digit-group" },
|
||||
|
||||
group.map(function (binaryDigit, idx) {return React.createElement(BinaryDigit, { base2NumberAsArray: binaryDigit, key: idx });})));};var
|
||||
|
||||
|
||||
|
||||
Clock = function (_React$Component) {_inherits(Clock, _React$Component);
|
||||
function Clock(props) {_classCallCheck(this, Clock);var _this = _possibleConstructorReturn(this, (Clock.__proto__ || Object.getPrototypeOf(Clock)).call(this,
|
||||
props));
|
||||
_this.state = {
|
||||
digits: [[], [], []] };return _this;
|
||||
|
||||
}_createClass(Clock, [{ key: "componentDidMount", value: function componentDidMount()
|
||||
|
||||
{
|
||||
setInterval(function () {
|
||||
var date = new Date();
|
||||
var newDigits = [
|
||||
numberAsBinaryArrayPair(date.getHours()),
|
||||
numberAsBinaryArrayPair(date.getMinutes()),
|
||||
numberAsBinaryArrayPair(date.getSeconds())];
|
||||
|
||||
this.setState({
|
||||
digits: newDigits });
|
||||
|
||||
}.bind(this), 1000);
|
||||
} }, { key: "render", value: function render()
|
||||
|
||||
{
|
||||
return (
|
||||
React.createElement("div", { className: "app" },
|
||||
React.createElement("div", { className: "clock" },
|
||||
|
||||
this.state.digits.map(function (digit) {return React.createElement(BinaryDigitGroup, { group: digit });}))));
|
||||
|
||||
|
||||
|
||||
|
||||
} }]);return Clock;}(React.Component);
|
||||
|
||||
|
||||
|
||||
ReactDOM.render(
|
||||
React.createElement(Clock, null),
|
||||
document.getElementById('react'));
|
||||
|
||||
|
||||
|
||||
function numberToBinary(base10Number) {
|
||||
var base2Values = [8, 4, 2, 1];
|
||||
var output = [0, 0, 0, 0];
|
||||
var remainder = base10Number;
|
||||
|
||||
base2Values.forEach(function (val, idx) {
|
||||
var left = remainder - val;
|
||||
|
||||
if (left >= 0) {
|
||||
output[idx] = 1;
|
||||
remainder = left;
|
||||
}
|
||||
});
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
function numberAsBinaryArrayPair(number) {
|
||||
var pair = [];
|
||||
if (number < 10) {
|
||||
pair[0] = numberToBinary();
|
||||
pair[1] = numberToBinary(number);
|
||||
} else {
|
||||
var numberAsArray = String(number).split('');
|
||||
pair[0] = numberToBinary(parseInt(numberAsArray[0], 10));
|
||||
pair[1] = numberToBinary(parseInt(numberAsArray[1], 10));
|
||||
}
|
||||
|
||||
return pair;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
canvas {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.pip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin: 7px;
|
||||
background-color: #525252;
|
||||
border-radius: 100%;
|
||||
transition: all .3s ease-in;
|
||||
}
|
||||
|
||||
.pip--on {
|
||||
background-color: #48d8b8;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.clock {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.binary-digit-group {
|
||||
display: flex;
|
||||
margin: 0 6px;
|
||||
}
|
||||
html, body {
|
||||
background: #27272C;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
||||
2
pages/home.php
Normal file
2
pages/home.php
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?
|
||||
header("location: ../system/home.php");
|
||||
48
pages/humanity.php
Normal file
48
pages/humanity.php
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Humanity is dead</title>
|
||||
<script src="https://os.danbulant.eu/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-image"></div>
|
||||
<iframe src="http://v6p9d9t4.ssl.hwcdn.net/html/1149496/index.html" width="818px" height="498px" frameborder="0"></iframe>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<style>
|
||||
body,html {
|
||||
padding:0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:
|
||||
}
|
||||
iframe {
|
||||
z-index: 2;
|
||||
}
|
||||
.bg-image {
|
||||
z-index: 1;
|
||||
/* The image used */
|
||||
background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=background-blur-clean-531880.jpg&fm=jpg");
|
||||
|
||||
/* Add the blur effect */
|
||||
filter: blur(8px);
|
||||
-webkit-filter: blur(8px);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* Full height */
|
||||
height: 100%;
|
||||
|
||||
/* Center and scale the image nicely */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
83
pages/rope.php
Normal file
83
pages/rope.php
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="cs" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Stickman rope</title>
|
||||
<script src="https://os.danbulant.eu/main.js"></script>
|
||||
<script src="https://os.danbulant.eu/dialog.js"></script>
|
||||
<script src="https://os.danbulant.eu/mp.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="https://html5.gamedistribution.com/35345f23f44b4b8789581d5cafdbd6a6/" width="100%" height="100%" frameborder="0">
|
||||
</iframe>
|
||||
</body>
|
||||
<script>
|
||||
var parent = get_parent();
|
||||
window.addEventListener("button:menu", button_menu, false);
|
||||
window.addEventListener("button:back", button_back, false);
|
||||
window.addEventListener("event:close", app_closed, false);
|
||||
window.addEventListener("dialog:button1", dialog_button1, false);
|
||||
window.addEventListener("dialog:button2", dialog_button2, false);
|
||||
//menu button clicked (os based)
|
||||
function button_menu(){
|
||||
console.log("menu button clicked");
|
||||
}
|
||||
//back button clicked (os based)
|
||||
function button_back(){
|
||||
console.log("back button clicked");
|
||||
|
||||
}
|
||||
//app closed (home button, calling home, fatal error)
|
||||
function app_closed(){
|
||||
console.log("app closed");
|
||||
|
||||
}
|
||||
//dialog button pressed (the first one)
|
||||
function dialog_button1(){
|
||||
console.log("dialog btn1");
|
||||
|
||||
}
|
||||
//dialog button pressed (the second one)
|
||||
function dialog_button2(){
|
||||
console.log("dialog btn2");
|
||||
|
||||
}
|
||||
// DEPRECATED: Use new functions instead
|
||||
/*
|
||||
function message(text){
|
||||
if(text.includes("event:back")){
|
||||
//parent.postMessage("open:pages/home.php", "*");
|
||||
home();
|
||||
} else if (text.includes("event:menu")){
|
||||
//parent.postMessage("dialog:Menu clicked btn1:ok btn2:hello cancellable:false", "*");
|
||||
dialog("menu clicked","ok","hello","false");
|
||||
} else if(text.includes("event:btn1")){
|
||||
console.log("btn1 clicked");
|
||||
closeDialog();
|
||||
} else if(text.includes("event:btn2")){
|
||||
console.log("YOU just CLICKed button NUMBER 2")
|
||||
closeDialog();
|
||||
} else if(text.includes("event:close")){
|
||||
console.log("goodbye");
|
||||
}
|
||||
}
|
||||
window.addEventListener("message", receiveMessage, false);
|
||||
var reference;
|
||||
var data;
|
||||
function receiveMessage(event)
|
||||
{
|
||||
reference = event.reference;
|
||||
data = event.data;
|
||||
message(data);
|
||||
}*/
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
142
pages/scanner.php
Normal file
142
pages/scanner.php
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Instascan</title>
|
||||
<script type="text/javascript" src="https://os.danbulant.eu/instascan.min.js"></script>
|
||||
<script type="text/javascript" src="https://os.danbulant.eu/components.js"></script>
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
</head>
|
||||
<body onload="startRecord();">
|
||||
|
||||
<video id="bgvid" playsinline></video>
|
||||
<div id="polina">
|
||||
<h1>QR scanner</h1>
|
||||
<p id="scan">Your scans today:</p>
|
||||
<button id="pauseBTN" onclick="switchScan();" disabled>Waiting..</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var vid = document.getElementById("bgvid");
|
||||
var btn = document.getElementById("pauseBTN");
|
||||
var scanRunning = false;
|
||||
let scanner = new Instascan.Scanner({ video: document.getElementById('bgvid') });
|
||||
function startRecord(){
|
||||
console.log("starting scan");
|
||||
scanRunning = true;
|
||||
scanner.addListener('scan', function (content) {
|
||||
console.log(content);
|
||||
//document.getElementById("text").innerHTML = content;
|
||||
$("#scan").after("<p>" + content + "</p>");
|
||||
//snackbar("Scanned!",4000);
|
||||
sendNotification("QR scanner","Succesfully scanned! Content was '" + content + "'");
|
||||
});
|
||||
Instascan.Camera.getCameras().then(function (cameras) {
|
||||
if (cameras.length > 0) {
|
||||
scanner.start(cameras[0]);
|
||||
console.log("New camera: " + cameras[0].name);
|
||||
btn.innerHTML = "Pause scan";
|
||||
btn.disabled = false;
|
||||
} else {
|
||||
console.error('No cameras found.');
|
||||
snackbar("No camera found!",2000);
|
||||
btn.disabled = true;
|
||||
home();
|
||||
}
|
||||
}).catch(function (e) {
|
||||
console.error(e);
|
||||
snackbar("An error occured.",4000);
|
||||
btn.disabled = true;
|
||||
home();
|
||||
});
|
||||
}
|
||||
function stopRecord() {
|
||||
console.log("stopping scan");
|
||||
scanRunning = false;
|
||||
vid.classList.add("stopfade");
|
||||
scanner.stop();
|
||||
btn.innerHTML = "Resume scan";
|
||||
btn.disabled = false;
|
||||
}
|
||||
function switchScan(){
|
||||
console.log("switching scan");
|
||||
btn.disabled = true;
|
||||
if(scanRunning){
|
||||
stopRecord();
|
||||
} else {
|
||||
startRecord();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #000;
|
||||
}
|
||||
video {
|
||||
position: fixed;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -100;
|
||||
background-size: cover;
|
||||
transition: 1s opacity;
|
||||
}
|
||||
.stopfade {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#polina {
|
||||
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
|
||||
font-weight:100;
|
||||
background: rgba(0,0,0,0.3);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
width: 33%;
|
||||
margin:2rem;
|
||||
float: right;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
letter-spacing: .3rem;
|
||||
}
|
||||
#polina button {
|
||||
display: block;
|
||||
width: 80%;
|
||||
padding: .4rem;
|
||||
border: none;
|
||||
margin: 1rem auto;
|
||||
font-size: 1.3rem;
|
||||
background: rgba(255,255,255,0.23);
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: .3s background;
|
||||
}
|
||||
#polina button:hover {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background:rgba(0,0,0,0.5);
|
||||
padding: .5rem;
|
||||
transition: .6s background;
|
||||
}
|
||||
a:hover{
|
||||
background:rgba(0,0,0,0.9);
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
div{width:70%;}
|
||||
}
|
||||
@media screen and (max-device-width: 800px) {
|
||||
html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
160
system/home.php
Normal file
160
system/home.php
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<?
|
||||
$json = file_get_contents("../pages/apps.json");
|
||||
$list = json_decode($json, true);
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body class="unselectable">
|
||||
|
||||
|
||||
<div class="grid-container main">
|
||||
<? foreach ($list["apps"] as $key => $app) {
|
||||
if($app["favorite"]){
|
||||
continue;
|
||||
}
|
||||
?>
|
||||
<div>
|
||||
<a href="<?=$app["url"]; ?>">
|
||||
<figure>
|
||||
<img src="<?=$app["icon"]; ?>">
|
||||
<figcaption><?=$app["name"];?></figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<?
|
||||
}
|
||||
?>
|
||||
<div class="empty">
|
||||
</div>
|
||||
<div class="empty">
|
||||
</div>
|
||||
<div class="empty">
|
||||
</div>
|
||||
<div class="empty">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid-container dock">
|
||||
<? foreach ($list["apps"] as $key => $app) {
|
||||
if(!$app["favorite"]) continue;
|
||||
?>
|
||||
<div>
|
||||
<a href="<?=$app["url"]; ?>">
|
||||
<figure>
|
||||
<img src="<?=$app["icon"]; ?>">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<? } ?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@-webkit-keyframes colorful {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@-moz-keyframes colorful {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@keyframes colorful {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
|
||||
@import url('https://fonts.googleapis.com/css?family=Raleway');
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-width:100%;
|
||||
background: linear-gradient(270deg, #b216c3, #237fea);
|
||||
background-size: 400% 400%;
|
||||
/* background-image: url("https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");*/
|
||||
-webkit-animation: colorful 30s ease infinite;
|
||||
-moz-animation: colorful 30s ease infinite;
|
||||
animation: colorful 30s ease infinite;
|
||||
background-position:center top;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
grid-row-gap: 5vw;
|
||||
grid-column-gap: 3vw;
|
||||
padding: 10px;
|
||||
}
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.grid-container > div {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
width:10vw;
|
||||
height:10vw;
|
||||
}
|
||||
.grid-container > div > a >figure {
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.grid-container > div > a > figure > figcaption {
|
||||
text-align: center;
|
||||
padding-top:0;
|
||||
margin-top:0;
|
||||
color: white !important;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.grid-container > div > a >figure > img {
|
||||
width:90%;
|
||||
height:90%;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.grid-container > div:hover:not(.empty) {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
.dock {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
border-radius: 20px;
|
||||
width: 90%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
10
system/settings.php
Normal file
10
system/settings.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
10
test.json
Normal file
10
test.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
[
|
||||
{
|
||||
"app" : "hello",
|
||||
"path" : "there"
|
||||
},
|
||||
{
|
||||
"app" : "hello",
|
||||
"path" : "there2"
|
||||
}
|
||||
]
|
||||
5
test.php
Normal file
5
test.php
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<?
|
||||
$app = json_decode(file_get_contents("test.json"), true);
|
||||
foreach ($app as $x) {
|
||||
echo $x["path"]."\n";
|
||||
}
|
||||
11
toast.js
Normal file
11
toast.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
if (typeof mainScriptIncluded == 'undefined') {
|
||||
console.log("Main.js is missing, some functions may fail.");
|
||||
}
|
||||
if(typeof snackbarScriptIncluded == 'undefined'){
|
||||
snackbarScriptIncluded = true;
|
||||
function snackbar(text,time){
|
||||
parent.postMessage("snackbar:"+text+"time:"+time, "*");
|
||||
console.log("Beaming information into OS to show toast with text '"+text+"' for "+time+" miliseconds");
|
||||
}
|
||||
sendEvent("toast:loaded");
|
||||
}
|
||||
2
websurf.php
Normal file
2
websurf.php
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?
|
||||
echo file_get_contents("https://www.websurf.cz/api?id=137126&key=73555f4567f4e0131949bdaab6019d4b");
|
||||
Loading…
Reference in a new issue