handy-browser-farbe-andern.php
Quell Code
<?php
if(!empty($_GET["color"]) OR !empty($_POST["color"])){
if(empty($_GET["color"])){
$color=$_POST["color"];
}
if(empty($_POST["color"])){
$color=$_GET["color"];
}
}else{
$color='#ff0000';
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Homepage von Basti1012 </title>
<meta name="msapplication-TileColor" content="<?php echo $color; ?>">
<meta name="theme-color" content="<?php echo $color; ?>">
<base href="https://sebastian1012.bplaced.net/homepage-neu/">
<meta name="robots" content="index, follow">
<meta name="msapplication-config" content="images/browserconfig.xml">
<meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
<meta name="apple-mobile-web-app-capable" content = "yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="https://sebastian1012.bplaced.net/apple-icon-180x180.png" />
<meta property="og:site_name" content="Sebastian1012" />
<meta property="og:type" content="website" />
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
<link rel="apple-touch-startup-image" href="images/apple-icon-152x152.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
body > div{
display:flex;
}
#uhrzeit{
position:absolute;
bottom:0px;
font-size:100px;
text-align:center;
background:<?php echo $color; ?>;
}
#src_color:before{
content:'Hier klicken..';
width:100%;
height:100%;
position:absolute;
pointer-events:none;
}
</style>
<body>
<main>
<h2>Browser Farbe ändern . ( Nur Handys und Browser-Apps ) </h2>
<p> Suche dir eine Farbe aus und nachdem die Seite neu geladen wurde ändert sich die Farbe</p>
<form action="" method="POST">
<div id="uhrzeit"></div>
<input type="color" name="color" id="src_color" style="width:46vw;height:10vw;font-size:8vw;" value="<?php echo $color; ?>" />
<input type="submit" style="width:46vw;height:10vw;font-size:8vw;" id="senden" value="wechseln">
</div>
</div>
<br><br>
<h1>Oder Klicke hier für die Disco</h1>
<input style="width:46vw;height:10vw;font-size:8vw;" type="button" id="disco" value="Disco an">
<input style="width:46vw;height:8vw;font-size:6vw;" type="button" id="aus" value="Disco aus">
<h1>Oder schüttel das Handy um die Farbe zu ändern</h1>
<script>
document.getElementById('disco').addEventListener('click',function(){
timer=setInterval(function(){
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
$('meta').eq(1).attr('content', color);
$('meta').eq(2).attr('content', color);
$('#uhrzeit').css('background',color);
},500);
$('#aus').click(function(){
clearInterval(timer);
});
})
$('#src_color').change(function(){
$('#uhrzeit').css('background',this.value);
})
setInterval(function(){
var heute = new Date();
var StundenZahl = heute.getHours();
var MinutenZahl = heute.getMinutes();
var SekundenZahl = heute.getSeconds();
var stunden = StundenZahl+":";
if (MinutenZahl < 10) {
minuten = "0" + MinutenZahl + ":";
}else {
minuten = MinutenZahl + ":";
}
if (SekundenZahl < 10) {
sekunden = "0" + SekundenZahl + " ";
}else {
sekunden = SekundenZahl + " ";
}
zeit = stunden + minuten + sekunden;
$('#uhrzeit').html(zeit);
},1000);
</script>
<script src="https://cdn.rawgit.com/alexgibson/shake.js/master/shake.js"></script>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var shakeEvent = new Shake({threshold: 15});
shakeEvent.start();
window.addEventListener('shake', function(){
var r = getRandomInt(0, 255);
var g = getRandomInt(0, 255);
var b = getRandomInt(0, 255);
var color="rgb(" + r + "," + g + "," + b + ")";
$('meta').eq(1).attr('content', color);
$('meta').eq(2).attr('content', color);
$('body').css('background',color);
}, false);
function stopShake(){
shakeEvent.stop();
}
if(!("ondevicemotion" in window)){console.log("Not Supported");}
</script>
</body>
</html>