🎨 Customization Guide¶

Lerne, wie du manniPhone an deine Bedürfnisse anpasst.

Theming¶

CSS Custom Properties¶

Alle Styles basieren auf CSS Variables in base.css:

:root {
  /* Farben */
  --color-primary: #1a1a2e;
  --color-secondary: #16213e;
  --color-accent: #e94560;
  --color-text: #eee;
  --color-text-muted: #888;

  /* Display */
  --display-bg: #111;
  --display-color: #0f0;
  --display-glow: rgba(0, 255, 0, 0.3);

  /* Animationen */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Schatten */
  --shadow-small: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-medium: 0 10px 30px rgba(0,0,0,0.5);
  --shadow-large: 0 20px 50px rgba(0,0,0,0.7);

  /* Border Radius */
  --radius-small: 5px;
  --radius-medium: 10px;
  --radius-large: 20px;
  --radius-round: 50%;
}

Theme erstellen¶

Light Theme:¶

[data-theme="light"] {
  --color-primary: #f5f5f5;
  --color-secondary: #e0e0e0;
  --color-text: #1a1a1a;
  --display-bg: #fff;
  --display-color: #333;
}

Aktivieren:¶

<html data-theme="light">

document.documentElement.dataset.theme = 'light';

Eigenes Telefon erstellen¶

1. HTML Template:¶

<!-- src/phones/myphone.html -->
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>MyPhone | manniPhone</title>
  <link rel="stylesheet" href="../assets/css/base.css">
  <link rel="stylesheet" href="../assets/css/myphone.css">
</head>
<body>
  <div class="phone-container myphone">
    <!-- Header -->
    <header class="phone-header">
      <a href="../index.html">← Zurück</a>
      <h1>MyPhone</h1>
    </header>

    <!-- Display -->
    <div class="display-area">
      <span id="number-display">-</span>
    </div>

    <!-- Keypad -->
    <div class="myphone-keypad">
      <button class="key" data-digit="1">1</button>
      <button class="key" data-digit="2">2</button>
      <!-- ... -->
    </div>

    <!-- Call Button -->
    <a id="dial-link" href="#" class="btn-call">
      📞 Anrufen
    </a>
  </div>

  <script type="module" src="../assets/js/dialer.js"></script>
  <script type="module" src="../assets/js/myphone.js"></script>
</body>
</html>

2. CSS Styles:¶

/* src/assets/css/myphone.css */

.myphone {
  --phone-color: #ff6b6b;
  --phone-accent: #4ecdc4;
}

.myphone .phone-header {
  background: var(--phone-color);
}

.myphone-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
}

.myphone .key {
  background: var(--phone-accent);
  border: none;
  border-radius: 10px;
  padding: 20px;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.1s;
}

.myphone .key:active {
  transform: scale(0.95);
}

3. JavaScript:¶

// src/assets/js/myphone.js
import ManniPhoneDialer from './dialer.js';

const display = document.getElementById('number-display');
const dialLink = document.getElementById('dial-link');

const dialer = new ManniPhoneDialer({
  displayElement: display,
  maxDigits: 15,
  onDigit: updateDisplay,
  onDial: openTelLink
});

function updateDisplay(digit, number) {
  display.textContent = number || '-';
}

function openTelLink(number) {
  dialLink.href = `tel:${number}`;
  dialLink.click();
}

// Keypad Events
document.querySelectorAll('.key').forEach(key => {
  key.addEventListener('click', () => {
    dialer.addDigit(key.dataset.digit);
  });
});

// Dial Event
dialLink.addEventListener('click', (e) => {
  if (!dialer.getNumber()) {
    e.preventDefault();
    return;
  }
  dialer.dial();
});

Sounds anpassen¶

Sound-Dateien:¶

Lege Sounds in src/assets/sounds/:

sounds/
├── key-click.mp3
├── dial-tone.mp3
├── dial-return.mp3
└── hangup.mp3

Sound-Konfiguration:¶

const dialer = new ManniPhoneDialer({
  soundEnabled: true,
  sounds: {
    keyClick: '/assets/sounds/key-click.mp3',
    dialTone: '/assets/sounds/dial-tone.mp3',
    dialReturn: '/assets/sounds/dial-return.mp3',
    hangup: '/assets/sounds/hangup.mp3'
  }
});

Eigene Sounds:¶

// Im Phone-spezifischen JS
const mySound = new Audio('/assets/sounds/custom.mp3');

document.querySelectorAll('.key').forEach(key => {
  key.addEventListener('click', () => {
    mySound.currentTime = 0;
    mySound.play();
  });
});

Animationen¶

Wählscheiben-Animation (Beispiel):¶

@keyframes dial-rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(var(--dial-rotation));
  }
  100% {
    transform: rotate(0deg);
  }
}

.rotary-dial.dialing {
  animation: dial-rotate 0.8s ease-in-out;
}

JavaScript Trigger:¶

function dialDigit(digit) {
  const rotation = (digit === 0 ? 10 : digit) * 30;
  dial.style.setProperty('--dial-rotation', `${rotation}deg`);
  dial.classList.add('dialing');

  setTimeout(() => {
    dial.classList.remove('dialing');
  }, 800);
}

PWA Manifest anpassen¶

`manifest.json`:¶

{
  "name": "manniPhone - Vintage Dialer",
  "short_name": "manniPhone",
  "description": "Time Travel für dein Smartphone",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#1a1a2e",
  "theme_color": "#e94560",
  "icons": [
    {
      "src": "/assets/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Eigene Icons:¶

Erstelle Icons in verschiedenen Größen: - 192×192 px - 512×512 px - (optional) 180×180 px für iOS

Internationalisierung (i18n)¶

Sprachdateien:¶

// src/assets/js/i18n/de.js
export default {
  dial: 'Wählen',
  clear: 'Löschen',
  call: 'Anrufen',
  back: 'Zurück',
  invalidNumber: 'Ungültige Nummer'
};

// src/assets/js/i18n/en.js
export default {
  dial: 'Dial',
  clear: 'Clear',
  call: 'Call',
  back: 'Back',
  invalidNumber: 'Invalid number'
};

Verwendung:¶

import de from './i18n/de.js';
import en from './i18n/en.js';

const lang = navigator.language.startsWith('de') ? de : en;

document.querySelector('.btn-call').textContent = lang.call;

Accessibility¶

ARIA Labels:¶

<button 
  class="key" 
  data-digit="5"
  aria-label="Ziffer 5"
  role="button"
>
  5
</button>

document.addEventListener('keydown', (e) => {
  if (e.key >= '0' && e.key <= '9') {
    dialer.addDigit(e.key);
  } else if (e.key === 'Backspace') {
    dialer.removeDigit();
  } else if (e.key === 'Enter') {
    dialer.dial();
  } else if (e.key === 'Escape') {
    dialer.clear();
  }
});

Focus Styles:¶

.key:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.key:focus:not(:focus-visible) {
  outline: none;
}

Best Practices¶

Performance: Nutze CSS für Animationen statt JavaScript
Accessibility: Teste mit Screen Reader
Offline: Cache alle Assets im Service Worker
Bundle Size: Halte JS unter 50KB
Testing: Teste auf echten Geräten (iOS Safari, Android Chrome)

Zurück zur Startseite