Lösungen ,

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>