OpenSim.Webinterface

[Manfred Aabye]

Das Astro 5.5 Web Framework
Astro ist ein modernes Web-Framework, das sich auf die Erstellung von schnellen, statischen Websites konzentriert.
Es verwendet keine traditionellen CSS-Frameworks wie Bootstrap, sondern setzt auf moderne Web-Standards und ermöglicht die Integration von verschiedenen UI-Bibliotheken.

1. Astro-Projekt erstellen
Zuerst musst du ein neues Astro-Projekt erstellen. Führe dazu die folgenden Befehle aus:

bash

Code:

npm create astro@latest
cd dein-projekt
npm install

2. Astro-Komponenten erstellen
Erstelle eine neue Astro-Komponente für deine Seite, z.B. `src/pages/index.astro`.

3. Angepasster Code für Astro
Hier ist der angepasste Code für deine Seite in Astro:

astro
---

PHP-Code:

import '../styles/global.css';

const title = 'Deine Seite';
const SITE_NAME = 'Deine Seite';
const FONT_FAMILY = 'Arial, sans-serif';
const BACKGROUND_IMAGE = '/images/background.jpg';
const FOREGROUND_IMAGE = '/images/foreground.png';
const BACKGROUND_OPACITY = 0.9;
const FOREGROUND_OPACITY = 0.8;
const INITIAL_COLOR_SCHEME = 'default';

const colorSchemes = {
    default: {
        header: '#007bff',
        footer: '#343a40',
        secondary: '#f8f9fa',
        primary: '#212529'
    },
    dark: {
        header: '#343a40',
        footer: '#212529',
        secondary: '#121212',
        primary: '#ffffff'
    }
};

function setColorScheme(scheme) {
    document.documentElement.style.setProperty('--header-color', colorSchemes[scheme].header);
    document.documentElement.style.setProperty('--footer-color', colorSchemes[scheme].footer);
    document.documentElement.style.setProperty('--secondary-color', colorSchemes[scheme].secondary);
    document.documentElement.style.setProperty('--primary-color', colorSchemes[scheme].primary);
}
---

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title}</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <style>
        body {
            font-family: {FONT_FAMILY};
            background-color: var(--secondary-color);
            color: var(--primary-color);
            background-image: url({BACKGROUND_IMAGE});
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 100vh;
            width: 100vw;
            opacity: {BACKGROUND_OPACITY};
        }
        header {
            background-color: var(--header-color);
            padding: 10px;
            text-align: center;
            color: white;
        }
        footer {
            background-color: var(--footer-color);
            margin: 0;
            padding: 0;
            text-align: center;
            color: white;
            position: fixed;
            width: 100%;
            bottom: 0;
            line-height: 0;
        }
        .container {
            background-image: url({FOREGROUND_IMAGE});
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            padding: 20px;
            border-radius: 8px;
            opacity: {FOREGROUND_OPACITY};
        }
        .color-button {
            margin: 1px;
            padding: 1px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            font-size: 10px;
            color: white;
        }
    </style>
    <script>
        const colorSchemes = {JSON.stringify(colorSchemes)};

        function setColorScheme(scheme) {
            document.documentElement.style.setProperty('--header-color', colorSchemes[scheme].header);
            document.documentElement.style.setProperty('--footer-color', colorSchemes[scheme].footer);
            document.documentElement.style.setProperty('--secondary-color', colorSchemes[scheme].secondary);
            document.documentElement.style.setProperty('--primary-color', colorSchemes[scheme].primary);
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.color-button').forEach(function(button) {
                button.addEventListener('click', function() {
                    setColorScheme(this.dataset.scheme);
                });
            });
            // Set the initial color scheme
            setColorScheme('{INITIAL_COLOR_SCHEME}');
        });
    </script>
</head>
<body>
<header class="bg-primary text-white p-3">
    <h1>Welcome to {SITE_NAME}</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">{SITE_NAME}</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                {Object.entries(colorSchemes).map(([scheme, colors]) => (
                    <li class="nav-item">
                        <button class="btn btn-sm btn-secondary color-button" data-scheme={scheme} style={`background-color: ${colors.header};`}>{scheme.charAt(0).toUpperCase() + scheme.slice(1)}</button>
                    </li>
                ))}
            </ul>
        </div>
    </div>
</nav>
<div class="container mt-5">
    <!-- Inhalt der Seite -->
</div>
<footer class="bg-dark text-white text-center py-3">
    &copy; {new Date().getFullYear()} {SITE_NAME}
</footer>
</body>
</html> 


### 4. Globale CSS-Datei
Erstelle eine globale CSS-Datei `src/styles/global.css`, um die CSS-Variablen zu definieren:

css

Code:

:root {
    --header-color: #007bff;
    --footer-color: #343a40;
    --secondary-color: #f8f9fa;
    --primary-color: #212529;
}

5. Bilder hinzufügen
Lege die Bilder `background.jpg` und `foreground.png` in den `public/images`-Ordner.

6. Astro-Projekt starten
Starte das Astro-Projekt mit:

bash

Code:

npm run dev

Erläuterungen:
- Astro-Komponenten: Astro verwendet `.astro`-Dateien, die eine Mischung aus HTML, CSS und JavaScript sind.
- CSS-Variablen: Wir verwenden CSS-Variablen, um die Farben dynamisch zu ändern.
- JavaScript: Das JavaScript wird direkt in der Astro-Komponente eingebettet, um die Farben zu ändern.