60 lines
2.0 KiB
HTML
60 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='de'>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
|
<title>Interaktiver Blumenstrauß</title>
|
|
<style>
|
|
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
z-index: 1;
|
|
}
|
|
/* Overlays um die Bubbbly UI zu verstecken */
|
|
.overlay {
|
|
position: absolute;
|
|
background: #ffffff;
|
|
z-index: 10;
|
|
}
|
|
/* Top Left (TypingMind Logo) */
|
|
.overlay-top-left {
|
|
top: 0; left: 0; width: 300px; height: 100px;
|
|
}
|
|
/* Top Right (Input und Farbauswahl auf Desktop) */
|
|
.overlay-top-right {
|
|
top: 0; right: 0; width: 450px; height: 350px;
|
|
}
|
|
/* Bottom Left (Created by) */
|
|
.overlay-bottom-left {
|
|
bottom: 0; left: 0; width: 300px; height: 80px;
|
|
}
|
|
/* Bottom Center (Tap to bloom text) */
|
|
.overlay-bottom-center {
|
|
bottom: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 80px;
|
|
}
|
|
/* Bottom Right (Mobile Input - falls es unten ist) */
|
|
.overlay-bottom-right {
|
|
bottom: 0; right: 0; width: 450px; height: 120px;
|
|
}
|
|
/* On Mobile, the input box is at the bottom */
|
|
@media (max-width: 640px) {
|
|
.overlay-top-right { height: 10px; width: 10px; }
|
|
.overlay-bottom-right { width: 100%; height: 250px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<iframe src='https://www.bubbbly.com/bloom?u=https%3A%2F%2Fneleundtill.orfel.de'></iframe>
|
|
|
|
<div class='overlay overlay-top-left'></div>
|
|
<div class='overlay overlay-top-right'></div>
|
|
<div class='overlay overlay-bottom-left'></div>
|
|
<div class='overlay overlay-bottom-center'></div>
|
|
<div class='overlay overlay-bottom-right'></div>
|
|
</body>
|
|
</html>
|