l202/home_page.php
<!DOCTYPE html>
<html lang="en">
<?php
// SQLite database setup (create a file named "database.db" in the same directory)
$database = new SQLite3('database.db');
// Create a users table if it doesn't exist
$database->exec('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, Username TEXT UNIQUE, password TEXT)');
?>
<?php
session_start();
// Retrieve the username from the session
$enteredUsername = isset($_SESSION['username']) ? $_SESSION['username'] : "DefaultUsername";
?>
<head>
<style>
button {
border: 1px solid black;
background-color: #ffffff;
padding: 10px;
margin: 5px;
cursor: pointer;
}
</style>
<script>
window.onload = main
function main(){
document.getElementById("main_page").onclick = main_page
document.getElementById("knop1").onclick = knop1
document.getElementById("knop2_1").onclick = knop2_1
document.getElementById("knop3").onclick = knop3
document.getElementById("knop4").onclick = knop4
document.getElementById("knop5").onclick = knop5
document.getElementById("main_page").style.background='lightblue';
var btn = document.getElementById('knop2_1');
var btn1 = document.getElementById('knop3');
var btn2 = document.getElementById('knop4');
var btn3 = document.getElementById('knop5');
var btn4 = document.getElementById('knop1');
var btn5 = document.getElementById('main_page');
document.getElementById('knop1').innerHTML = "<?php echo $enteredUsername; ?>";
window.onresize = function(){
if (window.innerWidth <= 1240) {
btn.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn4.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn4.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn4.style.width = 100 + 'px';
window.addEventListener("resize", function(event) {
btn4.style.width = 100 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn1.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn1.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn1.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn1.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn2.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn2.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn2.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn2.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn3.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn3.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn3.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn3.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn5.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn5.style.width = window.innerWidth - 100 + 'px';
}, false);
btn5.style.height = 100 + 'px';
window.addEventListener("resize", function(event) {
btn5.style.height = 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn5.style.width = 100 + 'px';
window.addEventListener("resize", function(event) {
btn5.style.width = 100 + 'px';
}, false);
btn5.style.height = 500 + 'px';
window.addEventListener("resize", function(event) {
btn5.style.height = 500 + 'px';
}, false);
}
}
}
function main_page() {
alert("this is the main page")
}
function knop1() {
}
function knop2_1() {
window.location.href = "home_page.php";
}
function knop3() {
window.location.href = "guess_game.php";
}
function knop4() {
window.location.href = "maze_game.php";
}
function knop5() {
window.location.href = "snake_game.php";
}
setTimeout(function () {
var knop = document.getElementById("knop1");
knop.style.backgroundImage = "url('kaas.jpg')";
knop.style.backgroundRepeat = "no-repeat";
}, 1);
</script>
<body id="body">
<button id="knop1" style="width: 100px; height: 100px"></button>
<button id="knop2_1" style="width: 300px; height: 100px; background-color: black; color: white;">home page</button>
<button id="knop3" style="width: 300px; height: 100px">guess the number</button>
<button id="knop4" style="width: 300px; height: 100px">maze</button>
<button id="knop5" style="width: 300px; height: 100px">snake</button>
<p></p>
<button id="main_page" style="width: 100px; height: 500px; border-width: 1px;">main page</button>
<button id="text" style="width: 1212px; height: 500px;"> hier kan u op één van de bovenstaande knoppen klikken </button>
</body>
</head>
</html>
Resultaat
Made by Thijs Aarnoudse