Files
p5js/index.html
2026-06-01 11:33:23 +02:00

68 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>p5.js liberay</title>
</head>
<body>
<h1>p5.js liberay by me</h1>
<div class="liberayDiv">
<h2 >AbstractAlgorithms</h2>
<div class="liberay">
<iframe src="http://127.0.0.1:5501/liberay.html?sketches=Cubes.js,calmCircles.js,labyrinth.js,AbstractAlgorithm.js&size=200" frameborder="0"></iframe>
</div>
</div>
<div class="liberayDiv">
<h2>Agents doing stuff</h2>
<div class="liberay">
<iframe src="http://127.0.0.1:5501/liberay.html?sketches=snake.js,MarkovChain.js,snakeAIEvolution.js,GameOfLive.js&size=200" frameborder="0"></iframe>
</div>
</div>
<div class="liberayDiv">
<h2>Images manipulation</h2>
<div class="liberay">
<iframe src="http://127.0.0.1:5501/liberay.html?sketches=2images.js,image.js,imageNoice.js,L-System.js&size=200" frameborder="0"></iframe>
</div>
</div>
</body>
<script type="module" src="index.js"></script>
<style>
h1, h2 {
text-align: center;
font-family: cursive, serif;
}
body {
background-color: beige;
}
.liberay {
height: 600px;
width: 600px;
}
iframe {
height: 100%;
width: 100%;
border: none;
margin: 0;
}
.liberayDiv {
width: 470px;
margin: 10px;
padding: 10px;
border: 2px solid rgb(67, 0, 67);
border-radius: 10px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
display: inline-block;
}
.liberayDiv:hover {
background-color: rgb(67, 0, 67);
color: white;
cursor: pointer;
}
</style>
<script>
</script>
</html>