231 lines
8.8 KiB
HTML
231 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - CASIO PT-1 with HTML/CSS/JS</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="colorButtons">
|
|
<button class="mode1"></button>
|
|
<button class="mode2"></button>
|
|
<button class="mode3"></button>
|
|
<button class="mode4"></button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="casio-pt1">
|
|
<div class="casio-left">
|
|
<div class="speaker-container">
|
|
<div class="speaker"></div>
|
|
</div>
|
|
<div class="speaker-bottom">
|
|
<div class="power">
|
|
<div class="led on"></div>
|
|
<span>power</span>
|
|
</div>
|
|
<div class="logo">
|
|
<span class="brand">CASIO</span>
|
|
<div class="model">PT-1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="casio-right">
|
|
<div class="casio-controls">
|
|
<div class="controls-label">
|
|
<div class="group">
|
|
<div class="box">mode</div>
|
|
<div class="options">
|
|
<span class="fill inline">power off</span>
|
|
<span>record</span>
|
|
<span>play</span>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<div class="box">volume</div>
|
|
<div class="options">
|
|
<span>min</span>
|
|
<span class="volume">||||||||||</span>
|
|
<span>max</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group">
|
|
<div class="box">tone</div>
|
|
<div class="options">
|
|
<span>piano</span>
|
|
<span>fantasy</span>
|
|
<span>violin</span>
|
|
<span>flute</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="buttons group">
|
|
<div class="options">
|
|
<span>clear</span>
|
|
<span>del.</span>
|
|
<span class="arrow fill">▼</span>
|
|
<span class="arrow fill">▲</span>
|
|
<span>rhythm select</span>
|
|
<span>reset</span>
|
|
<span>demo</span>
|
|
<span>memory play</span>
|
|
</div>
|
|
<div class="semi box">tempo</div>
|
|
</div>
|
|
|
|
<div class="group">
|
|
<div class="last box">one key play</div>
|
|
</div>
|
|
</div>
|
|
<div class="controls-buttons">
|
|
<div class="grid">
|
|
<div class="mode slider">
|
|
<input id="off" type="radio" name="mode" value="off">
|
|
<label for="off"></label>
|
|
|
|
<input id="record" type="radio" name="mode" value="record">
|
|
<label for="record"></label>
|
|
|
|
<input id="play" type="radio" name="mode" value="play" checked>
|
|
<label for="play"></label>
|
|
</div>
|
|
<div class="volume slider">
|
|
<input id="v0" type="radio" name="volume" value="0">
|
|
<label for="v0"></label>
|
|
|
|
<input id="v1" type="radio" name="volume" value="0.25">
|
|
<label for="v1"></label>
|
|
|
|
<input id="v2" type="radio" name="volume" value="0.5">
|
|
<label for="v2"></label>
|
|
|
|
<input id="v3" type="radio" name="volume" value="0.75">
|
|
<label for="v3"></label>
|
|
|
|
<input id="v4" type="radio" name="volume" value="1" checked>
|
|
<label for="v4"></label>
|
|
</div>
|
|
<div class="tone slider">
|
|
<input id="piano" type="radio" name="tone" value="piano" checked>
|
|
<label for="piano"></label>
|
|
|
|
<input id="fantasy" type="radio" name="tone" value="fantasy">
|
|
<label for="fantasy"></label>
|
|
|
|
<input id="violin" type="radio" name="tone" value="violin">
|
|
<label for="violin"></label>
|
|
|
|
<input id="flute" type="radio" name="tone" value="flute">
|
|
<label for="flute"></label>
|
|
</div>
|
|
<div class="buttons group">
|
|
<div class="button steelblue" data-type="clear"></div>
|
|
<div class="button orange" data-type="del"></div>
|
|
<div class="button orange" data-type="down"></div>
|
|
<div class="button orange" data-type="up"></div>
|
|
<div class="button orange" data-type="rhythm"></div>
|
|
<div class="button gold" data-type="reset"></div>
|
|
<div class="button green" data-type="demo"></div>
|
|
<div class="button grey" data-type="memory"></div>
|
|
</div>
|
|
<div class="end group">
|
|
<div class="big button steelblue"></div>
|
|
<div class="big button steelblue"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="keys-container">
|
|
<div class="name-keys">
|
|
<div class="key-name"></div>
|
|
<div class="key-name"></div>
|
|
<div class="key-name" data-rhytm="march"></div>
|
|
<div class="key-name" data-rhytm="waltz"></div>
|
|
<div class="key-name" data-rhytm="4beat"></div>
|
|
<div class="key-name" data-rhytm="swing"></div>
|
|
<div class="key-name" data-rhytm="rock1"></div>
|
|
<div class="key-name" data-rhytm="rock2"></div>
|
|
<div class="key-name" data-rhytm="bossa nova"></div>
|
|
<div class="key-name" data-rhytm="samba"></div>
|
|
<div class="key-name" data-rhytm="rhumba"></div>
|
|
<div class="key-name" data-rhytm="beguine"></div>
|
|
<div class="key-name"></div>
|
|
<div class="key-name"></div>
|
|
<div class="key-name"></div>
|
|
<div class="key-name"></div>
|
|
<div class="key-name"></div>
|
|
<div class="instrument-type">ELECTRONIC MUSICAL INSTRUMENT</div>
|
|
</div>
|
|
<div class="keys">
|
|
<div class="black-keys">
|
|
<div class="black key" data-note="G#3"></div>
|
|
<div class="black key" data-note="A#3"></div>
|
|
<div class="black key" data-note="C#4"></div>
|
|
<div class="black key" data-note="D#4"></div>
|
|
<div class="black key" data-note="F#4"></div>
|
|
<div class="black key" data-note="G#4"></div>
|
|
<div class="black key" data-note="A#4"></div>
|
|
<div class="black key" data-note="C#5"></div>
|
|
<div class="black key" data-note="D#5"></div>
|
|
<div class="black key" data-note="F#5"></div>
|
|
<div class="black key" data-note="G#5"></div>
|
|
<div class="black key" data-note="A#5"></div>
|
|
</div>
|
|
<div class="white-keys">
|
|
<div class="white key" data-note="G3"></div>
|
|
<div class="white key" data-note="A3"></div>
|
|
<div class="white key" data-note="B3"></div>
|
|
<div class="white key" data-note="C4"></div>
|
|
<div class="white key" data-note="D4"></div>
|
|
<div class="white key" data-note="E4"></div>
|
|
<div class="white key" data-note="F4"></div>
|
|
<div class="white key" data-note="G4"></div>
|
|
<div class="white key" data-note="A4"></div>
|
|
<div class="white key" data-note="B4"></div>
|
|
<div class="white key" data-note="C5"></div>
|
|
<div class="white key" data-note="D5"></div>
|
|
<div class="white key" data-note="E5"></div>
|
|
<div class="white key" data-note="F5"></div>
|
|
<div class="white key" data-note="G5"></div>
|
|
<div class="white key" data-note="A5"></div>
|
|
<div class="white key" data-note="B5"></div>
|
|
</div>
|
|
</div>
|
|
<div class="note-keys">
|
|
<div class="note">G</div>
|
|
<div class="note">A</div>
|
|
<div class="note">B</div>
|
|
<div class="note">C</div>
|
|
<div class="note">D</div>
|
|
<div class="note">E</div>
|
|
<div class="note">F</div>
|
|
<div class="note">G</div>
|
|
<div class="note">A</div>
|
|
<div class="note">B</div>
|
|
<div class="note">C</div>
|
|
<div class="note">D</div>
|
|
<div class="note">E</div>
|
|
<div class="note">F</div>
|
|
<div class="note">G</div>
|
|
<div class="note">A</div>
|
|
<div class="note">B</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="created">
|
|
<span>Created by</span>
|
|
<a href="https://manz.dev/"><h2>Manz.dev</h2></a>
|
|
<p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtube.com/c/ManzDev/videos">Youtube</a></p>
|
|
</div>
|
|
<!-- partial -->
|
|
<script type="module" src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|