Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Updated Title Here --> | |
| <title>RotaryDial ☎️</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="phone-body"> | |
| <div class="display-panel"> | |
| <span id="dialed-numbers"></span> | |
| <button id="call-button" aria-label="Call">📞</button> | |
| </div> | |
| <div class="dial-assembly"> | |
| <!-- Rotating Dial Plate --> | |
| <div id="dial"> | |
| <!-- Holes and Numbers generated here --> | |
| <div class="dial-center-design"></div> | |
| </div> | |
| <!-- Finger Stop --> | |
| <div id="finger-stop"></div> | |
| </div> | |
| <button id="clear-button">Clear</button> | |
| <!-- Audio Elements --> | |
| <!-- Sound for the main dial return "whoosh" (optional) --> | |
| <audio id="dial-return-sound" src="rotary-dial-return.mp3" preload="auto"></audio> | |
| <!-- Sound for the individual clicks --> | |
| <audio id="dial-click-sound" src="rotary-click.mp3" preload="auto"></audio> | |
| <!-- NOTE: You need to provide the actual sound files rotary-dial-return.mp3 and rotary-click.mp3 --> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |