# Eigener Code

> Quelle: https://docs.voyane.com/funktionen/eigener-code/

> Mit einem Code-Baustein bauen Sie kleine Webseiten in eine Seite ein: Uhren, Countdowns oder Animationen in HTML, CSS und JavaScript, abgesichert in einer Sandbox.

Mit dem Baustein **Code** setzen Sie eine kleine Webseite in den Kasten einer Seite. Das eignet sich für alles, was die fertigen Elemente nicht abdecken: eine Uhr, ein Countdown, eine besondere Animation oder eine eigene Grafik. Sie müssen dafür nicht programmieren, Ihre KI schreibt den Code.

```text
Baue einen Countdown bis zum 1. Dezember in unseren Farben
und setze ihn rechts neben den Titel.
```

## Wie der Baustein funktioniert

Ein Code-Baustein besteht aus HTML, CSS und JavaScript. Es gelten diese Grenzen:

| Teil | Höchstumfang |
|---|---|
| HTML | 20'000 Zeichen |
| CSS | 8'000 Zeichen |
| JavaScript | 8'000 Zeichen |

- **Gezeichnet wird nur im Kasten.** Was nicht hineinpasst, wird abgeschnitten. Gestalten Sie lieber kleiner, als etwas überlaufen zu lassen.
- **Ihr Corporate Design steht bereit.** Farben, Schrift und Schriftgrade sind als Variablen vorhanden, zum Beispiel `--cd-primary`. Der Code ändert sich mit, wenn Sie Ihr [Corporate Design](https://docs.voyane.com/erste-schritte/corporate-design/) anpassen.
- **Feste Grössen in Pixeln.** Der Baustein wird auf jeden Bildschirm mitskaliert, ein fester Pixelwert passt deshalb überall.
- **Kein Scrollen.** Auf einem Bildschirm scrollt niemand.
- **Pro Format anders aufteilen.** Auf Wunsch bekommt der Baustein in jedem Format eine eigene Bühne, damit er quer und hochkant verschieden aufgebaut sein kann, siehe [Formate und Ausrichtung](https://docs.voyane.com/bildschirme/formate-und-ausrichtung/).

> [!note] Sicher in der Sandbox
> Der Code läuft abgeschottet in einer geschützten Umgebung. Optisch ist alles möglich, nach aussen gelangt nichts: Es gibt kein `alert()`, kein Popup und keinen Zugriff auf die Seite ringsum, auf Cookies oder auf den Speicher.