|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<div id="dial"> |
|
|
|
|
|
<div class="dial-center-design"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="finger-stop"></div> |
|
|
</div> |
|
|
|
|
|
<button id="clear-button">Clear</button> |
|
|
|
|
|
|
|
|
|
|
|
<audio id="dial-return-sound" src="rotary-dial-return.mp3" preload="auto"></audio> |
|
|
|
|
|
<audio id="dial-click-sound" src="rotary-click.mp3" preload="auto"></audio> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
