Adventskalender

→ Home → Content

1 2 3

Die Quadrätli (hier Polygone) sind in → SVG geschrieben. Der Script eines Quadrätli schaut so aus:

<svg height="40" width="40">
  <polygon points="0,0 40,0 40,40 0,40">
  <a href=""><text x="15" y="28">1</text></a>
</svg>

kommt ein 2. Quadrätli dazu, musst du die width mindestens um das weitere Quadrätli erweitern. Mit einem Abstand von 5 ist dann width=»85″ und die points=»45,0 85,0 usw,

In jedem Quadrätli befindet sich ein verlinkter Text (in diesem Beispiel nur die 1). Die Links führen zu .php-Dateien (für jeden Tag eine), welche den folgenden, ein bestimmtes Datum betreffenden Script beinhalten:

<?php
// Aktuelles Datum und Uhrzeit abrufen
$aktuellesDatum = date('Y-m-d');
$aktuelleUhrzeit = date('H:i');

// Gewünschtes Datum und Zeitrahmen definieren
$gewuenschtesDatum = '2023-12-01';
$minimaleUhrzeit = '10:00';
$maximaleUhrzeit = '12:00';

// Überprüfen, ob das aktuelle Datum übereinstimmt und die Uhrzeit im gewünschten Rahmen liegt
if ($aktuellesDatum == $gewuenschtesDatum && $aktuelleUhrzeit >= $minimaleUhrzeit && $aktuelleUhrzeit <= $maximaleUhrzeit) {
    // Wenn übereinstimmend, öffnen Sie die erste Webseite
    header('Location: 01.php');
} else {
    // Andernfalls öffnen Sie die zweite Webseite
    header('Location: fail.php');
}
?>

Dieser Script löst das Öffnen einer bestimmten Webseite aus. Das jeweilige "zurück" in diesen Seiten schliesst mittels eines JavaScript das Fenster - und der Besucher ist automatisch wieder im Adventskalender.

Selbstverständlich können die Quadrätli auch → Rundumeli oder → Hovers oder was auch immer sein.

Beispiel

Ich habe in → dieser Seite einen Christbaum

gezeichnet (und einen Screenshot gemacht und das Bild hier in einem links gefloateten div container eingesetzt), um mir die einzelnen Punkte (x/y) des Polygons, welches eben diesen Baum darstellen soll, gut vorstellen zu können. Die nebenstehende Zeichnung besteht aus 15 Linien, die insgesamt 16 Punkte verbinden. Als weitere Hilfe hätte ich noch die (vertikale) Symmetrieachse einzeichnen können. Nun beginne ich mit der Spitze, gebe dem Baum eine Breite von 400px (bedeutet: die Symmetrieachse befindet sich bei x=200px) und bestimme demnach Punkt 1 mit x=200 und y=0, in der SVG-Sprache = 200,0 und sofort Punkt 2 = 150,50 und Punkt 3 = 170,45 und ... jetzt bist du dran.

Ein weiteres Beispiel

1 2 3