207 lines
13 KiB
HTML
207 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Knob Input Component</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
|
|
<svg class="defs">
|
|
<defs>
|
|
<radialGradient id="grad-dial-soft-shadow" cx="0.5" cy="0.5" r="0.5">
|
|
<stop offset="85%" stop-color="#242a2e" stop-opacity="0.4"></stop>
|
|
<stop offset="100%" stop-color="#242a2e" stop-opacity="0"></stop>
|
|
</radialGradient>
|
|
<linearGradient id="grad-dial-base" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#52595f"></stop>
|
|
<stop offset="100%" stop-color="#2b3238"></stop>
|
|
</linearGradient>
|
|
<linearGradient id="grad-dial-highlight" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#70777d" stop-opacity="1"></stop>
|
|
<stop offset="40%" stop-color="#70777d" stop-opacity="0"></stop>
|
|
<stop offset="55%" stop-color="#70777d" stop-opacity="0"></stop>
|
|
<stop offset="100%" stop-color="#70777d" stop-opacity="0.3"></stop>
|
|
</linearGradient>
|
|
<filter id="glow">
|
|
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="2"></feGaussianBlur>
|
|
<feComposite in="blur" in2="SourceGraphic" operator="over"></feComposite>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<div class="fl-studio-envelope">
|
|
<div class="fl-studio-envelope__visualizer">
|
|
<svg class="envelope-visualizer" viewBox="0 0 300 100" preserveAspectRatio="xMinYMid slice">
|
|
<path class="envelope-shape" d="M0,100L0,0" fill="transparent" stroke="#4eccff" stroke-width="2"></path>
|
|
<circle class="delay" cx="0" cy="100" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
|
|
<circle class="attack" cx="0" cy="0" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
|
|
<circle class="hold" cx="0" cy="0" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
|
|
<circle class="decay" cx="0" cy="100" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
|
|
<circle class="release" cx="0" cy="100" r="6" fill="#284554" stroke="#4eccff" stroke-width="2"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__controls">
|
|
<div class="fl-studio-envelope__control">
|
|
<div class="knob-input fl-studio-envelope__knob envelope-knob delay">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
<circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">delay</div>
|
|
</div>
|
|
<div class="fl-studio-envelope__control">
|
|
<div class="knob-input fl-studio-envelope__knob envelope-knob attack">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
<circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">att</div>
|
|
</div>
|
|
<div class="fl-studio-envelope__control">
|
|
<div class="knob-input fl-studio-envelope__knob envelope-knob hold">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
<circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">hold</div>
|
|
</div>
|
|
<div class="fl-studio-envelope__control">
|
|
<div class="knob-input fl-studio-envelope__knob envelope-knob decay">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
<circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">dec</div>
|
|
</div>
|
|
<div class="fl-studio-envelope__control">
|
|
<div class="knob-input fl-studio-envelope__knob envelope-knob sustain">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
<circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">sus</div>
|
|
</div>
|
|
<div class="fl-studio-envelope__control">
|
|
<div class="knob-input fl-studio-envelope__knob envelope-knob release">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
<circle class="indicator-dot" cx="20" cy="30" r="1.5" fill="#4eccff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">rel</div>
|
|
</div>
|
|
</div>
|
|
<div class="fl-studio-envelope__tension">
|
|
<div class="fl-studio-envelope__label"> </div>
|
|
<div class="knob-input fl-studio-envelope__knob tension-knob attack">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">tension</div>
|
|
<div class="knob-input fl-studio-envelope__knob tension-knob decay">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="fl-studio-envelope__label">tension</div>
|
|
<div class="knob-input fl-studio-envelope__knob tension-knob release">
|
|
<svg class="knob-input__visual" viewBox="0 0 40 40">
|
|
<circle class="focus-indicator" cx="20" cy="20" r="18" fill="#4eccff" filter="url(#glow)"></circle>
|
|
<circle class="indicator-ring-bg" cx="20" cy="20" r="18" fill="#353b3f" stroke="#23292d"></circle>
|
|
<path class="indicator-ring" d="M20,20Z" fill="#4eccff"></path>
|
|
<g class="dial">
|
|
<circle cx="20" cy="20" r="16" fill="url(#grad-dial-soft-shadow)"></circle>
|
|
<ellipse cx="20" cy="22" rx="14" ry="14.5" fill="#242a2e" opacity="0.15"></ellipse>
|
|
<circle cx="20" cy="20" r="14" fill="url(#grad-dial-base)" stroke="#242a2e" stroke-width="1.5"></circle>
|
|
<circle cx="20" cy="20" r="13" fill="transparent" stroke="url(#grad-dial-highlight)" stroke-width="1.5"></circle>
|
|
<circle class="dial-highlight" cx="20" cy="20" r="14" fill="#ffffff"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |