Zum Inhalt

☎️ Wählscheiben-Telefon

Das klassische Wählscheiben-Interface – inspiriert von den Telefonen der 1970er und 1980er Jahre.

🎨 Interface

     ╭──────────────────╮
     │   ┌──────────┐   │
     │   │ 555-0123 │   │  ← Display
     │   └──────────┘   │
     │                  │
     │   ╭──────────╮   │
     │   │  0       │   │
     │   │ 9     1  │   │
     │   │ 8     2  │   │  ← Wählscheibe
     │   │ 7     3  │   │
     │   │ 6     4  │   │
     │   │  5       │   │
     │   ╰──────────╯   │
     │                  │
     │   ╭──────────╮   │
     │   │  ∿∿∿∿∿∿  │   │  ← Hörer
     │   ╰──────────╯   │
     ╰──────────────────╯

🔧 Bedienung

Ziffer wählen:

  1. Klicke auf das Fingerloch der gewünschten Ziffer
  2. Die Scheibe dreht sich automatisch nach rechts
  3. Nach dem Loslassen dreht sie zurück (Animation)
  4. Während des Rücklaufs: Warten!
  5. Dann nächste Ziffer

Nummer korrigieren:

  • Beim Wählscheiben-Telefon gibt es kein Zurück
  • Hörer auflegen und neu beginnen

Anrufen:

  • Klicke auf den Hörer unten
  • Der tel: Link wird geöffnet
  • Dein System startet die Telefon-App

📊 Technische Details

Impulse (historisch):

Die echte Wählscheibe erzeugte Impulse durch Unterbrechung des Stromkreises:

Ziffer Impulse Zeit (bei 10 IPS)
1 1 100 ms
2 2 200 ms
... ... ...
0 10 1000 ms

IPS = Impulse pro Sekunde (Standard: 10)

Animation (unsere Implementation):

// Rotation basiert auf Ziffer
const angle = digit === 0 ? 10 : digit;
const rotation = angle * 30; // 30° pro Ziffer

// CSS Animation
element.style.transform = `rotate(${rotation}deg)`;

Timing:

/* Hindrehen: schnell (vom User) */
.dial-forward {
  transition: transform 0.3s ease-out;
}

/* Rückdrehen: langsamer (mechanisch) */
.dial-return {
  transition: transform 0.8s ease-in-out;
}

🎵 Sound Design

Event Sound Datei
Ziffer wählen Klick-Geräusch dial-click.mp3
Scheibe zurück Rattern dial-return.mp3
Hörer abnehmen Freizeichen dialtone.mp3
Hörer auflegen Besetztzeichen hangup.mp3

🎨 CSS Styling

Scheiben-Container:

.rotary-dial {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #555 0%,
    #222 100%
  );
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.5),
    inset 0 -5px 15px rgba(0,0,0,0.3);
}

Fingerlöcher:

.finger-hole {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #111;
  cursor: pointer;
  transition: background 0.2s;
}

.finger-hole:hover {
  background: #333;
}

Positionierung (Kreisförmig):

.finger-hole:nth-child(1) { /* 1 */
  transform: rotate(30deg) translateY(-100px);
}
.finger-hole:nth-child(2) { /* 2 */
  transform: rotate(60deg) translateY(-100px);
}
/* ... usw. */

📱 Responsiveness

Viewport Scheibengröße
Desktop (>768px) 300px
Tablet (768px) 280px
Mobile (<480px) 240px

🔌 Integration

HTML Struktur:

<div class="rotary-phone">
  <div class="display-area">
    <span id="number-display">-</span>
  </div>

  <div class="rotary-dial">
    <div class="finger-hole" data-digit="1">1</div>
    <div class="finger-hole" data-digit="2">2</div>
    <!-- ... 0-9 -->
  </div>

  <a id="dial-link" class="receiver" href="#">
    Hörer abnehmen
  </a>
</div>

JavaScript Event:

document.querySelectorAll('.finger-hole').forEach(hole => {
  hole.addEventListener('click', () => {
    const digit = hole.dataset.digit;
    dialer.addDigit(digit);
    animateDial(digit);
  });
});

📚 Historischer Kontext

Die Wählscheibe wurde 1913 von Siemens patentiert (AT 67958B) und basierte auf dem Strowger-System von 1891.

Vorteile damals:

  • Keine Vermittlung nötig (automatisch)
  • Eindeutige Impulserkennung
  • Robuste Mechanik

Ablösung:

  • 1970er: Tonwahl (DTMF) ersetzt Impulse
  • 1980er: Tasten-Telefone werden Standard
  • 2000er: Mobiltelefone dominieren

💡 Easter Eggs

  • Wähle 911 oder 110 → Warnung erscheint
  • Wähle 0800 → Kostenlos-Badge erscheint
  • Wähle 1234567890 → Regenbogen-Animation

Zurück zu Phones Overview