Erstelle eine Webseite mit einem 'Verbinde 9 Punkte'-Puzzle, bei dem vier Linien ohne Mausabheben gezeichnet werden und die Linien über das Raster hinausgehen dürfen. Beschreibe die Regeln und gestalte das Puzzle interaktiv zur Lösung mit der Maus. Sorge dafür, dass der Nutzer bei korrekter Lösung beglückwünscht wird oder bei Fehlern eine Erklärung erhält.

Projektübersicht
- Erstelle eine Webseite für das 'Verbinde 9 Punkte'-Puzzle.
- Implementiere Regeln und Richtlinien zur Erklärung des Spiels.

UI/UX Design und Ablauf
- Minimalistisches Design mit ausreichend Platz um die Punkte für klassische Lösungsansätze.
- Interaktiver Bereich, um mit der Maus Punkte zu verbinden.
- Implementiere einen Timer für die Herausforderung.

Kernfunktionen und Logik
- Verwende JavaScript/CSS für das interaktive Zeichnen der Linien.
- Überprüfe die Puzzle-Lösung: Zeige eine Glückwunschmeldung bei korrekter Lösung oder erkläre Fehler.
- Der Timer misst die für die Lösung benötigte Zeit.

Beste Praktiken
- Optimiere für Desktop- sowie mobile Browser.
- Sichere und effiziente clientseitige Logik.
- Klare visuelle Rückmeldung beim Zeichnen der Linien und bei Abschlussbenachrichtigungen.

Создай страницу с головоломкой соедини 9 точек 4-мя линиями не отрывая руки, линии могут выходить за пределы поля точек.
опиши правила и сделай чтобы можно было ее решить мышкой.
Обязательно выводи поздравление если задача решена,  или объяснение почему задача решена неверно.

Оставь достаточно места, для того чтобы решить задачу и выйти за пределы как в классическом решении

Q: Какой стиль или визуальное оформление вы предпочитаете для головоломки?
A: Например, минималистичный, яркий и игривый.

Q: Хотите ли вы добавить таймер или счетчик попыток для решения головоломки?
A: Да, хочу таймер.