[object Object]

by der_robert

HTML

<a href="logout.php" class="logout">Abmelden</a>
<header>🌊 Willkommen, der_robert!</header>
<main>
    <nav>
        <div class="panel island-selector">
            <label for="island-select">🏝️ Insel wählen:</label>
            <select id="island-select">
                <option value="1">Insel 1: root:root (423|435)</option>
                <option value="2">Insel 2: Lagerhafen (412|428)</option>
                <option value="3">Insel 3: Goldstrand (438|422)</option>
                <option value="4">Insel 4: Außenposten (430|440)</option>
                <option value="5">Insel 5: Handelsinsel (415|437)</option>
            </select>
        </div>

        <h2>🏝️ Navigation</h2>
        <a href="map.php">🏝️ Übersicht</a>
        <a href="map.php">🌏 Inselkarte anzeigen</a>
        <a href="messages.php">📨 Nachrichten</a>
        <a href="leaderboard.php">📋 Bestenliste</a>
        <a href="alliances.php">🤝 Allianzen</a>
        <a href="quests.php">📜 Quests</a>
        <a href="academy.php">📚 Akademie</a>
        <a href="marketplace.php">🛒 Marktplatz</a>
        <a href="guide.php">📖 Spielanleitung</a>
        <a href="techtree.php">🌳 Technologiebaum</a>
        <a href="forum/forum.php">📣 Forum</a>
    </nav>
    <section class="content">
        <div class="panel">
            <h3>📦 Ressourcen</h3>
            <div class="resources-flex">
                <div class="resource-entry">
                    <div class="label">⚜️ Gold</div>
                    <div class="bar"><div class="fill" style="width: 6%;"></div></div>
                    <div class="value">
                        9.180 / 160.000<br />
                        <small>+14/min</small>
                    </div>
                </div>
                <div class="resource-entry">
                    <div class="label">🪨 Steine</div>
                    <div class="bar"><div class="fill" style="width: 13%;"></div></div>
                    <div...

SCSS

:root {
    --accent: #004d70;
    --light-blue: #d2ecf9;
    --white: #ffffff;
    --background: #f4fbff;
    --border: #c2dbe7;
    --shadow: rgba(0, 0, 0, 0.05);
    --highlight: #e0f3ff;
    --danger: #e53935;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background-color: var(--light-blue);
    color: #222;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background: var(--accent);
    color: var(--white);
    padding: 1rem 2rem;
    font-size: 1.4rem;
    font-weight: bold;
    box-shadow: 0 2px 6px var(--shadow);
}

main {
    display: flex;
    flex: 1;
}

nav {
    width: 260px;
    background: var(--white);
    border-right: 1px solid var(--border);
    padding: 1.5rem 1rem;
    box-shadow: 2px 0 4px var(--shadow);
    overflow-y: auto;

    h2 {
        font-size: 1.1rem;
        margin: 0 0 1rem;
    }

    a {
        display: block;
        padding: 0.4rem 0.2rem;
        text-decoration: none;
        color: var(--accent);
        font-weight: 500;
        transition: background 0.2s;

        &:hover {
            background: var(--highlight);
            border-radius: 4px;
        }
    }
}

.content {
    flex: 1;
    padding: 2rem;
    background: var(--background);
    overflow-y: auto;
}

.panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px var(--shadow);

    h3 {
        margin-top: 0;
        font-size: 1.2rem;
        color: var(--accent);
    }
}

.data-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px dashed #ddd;
    font-size: 0.95rem;

    &:last-child {
        border-bottom: none;
    }
}

button {
    background: var(--accent);
    color: var(--white);
 ...

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".upgrade-time[data-upgrade-time]").forEach((el) => {
    const seconds = parseInt(el.dataset.upgradeTime);
    let remaining = seconds;
    const d = Math.floor(remaining / 86400);
    remaining %= 86400;
    const h = Math.floor(remaining / 3600);
    remaining %= 3600;
    const m = Math.floor(remaining / 60);
    const s = remaining % 60;

    const parts = [];
    if (d > 0) parts.push(`${d}d`);
    if (h > 0) parts.push(`${h}h`);
    if (m > 0) parts.push(`${m}min`);
    if (s > 0) parts.push(`${s}s`);

    el.querySelector(".upgrade-time-formatted").textContent = parts.join(" ");
  });
});

document.querySelectorAll(".production-form input[type='number']").forEach(input => {
  input.classList.add("custom-number-input");

  const wrapper = document.createElement("div");
  wrapper.className = "number-input-wrapper";

  const minus = document.createElement("button");
  minus.type = "button";
  minus.className = "decrement-button";
  minus.textContent = "−";

  const plus = document.createElement("button");
  plus.type = "button";
  plus.className = "increment-button";
  plus.textContent = "+";

  const parent = input.parentElement;
  parent.insertBefore(wrapper, input);
  wrapper.appendChild(minus);
  wrapper.appendChild(input);
  wrapper.appendChild(plus);

  minus.addEventListener("click", () => {
    const min = parseInt(input.min) || 0;
    const value = parseInt(input.value) || 0;
    if (value > min) input.value = value - 1;
  });

  plus.addEventListener("click", () => {
    const max = parseInt(input.max) || Infinity;
    const value = parseInt(input.value) || 0;
    if (value < max) input.value = value + 1;
  });
});