Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DAW Icons Gallery - FL Studio Style</title> | |
| <style> | |
| body { | |
| background: #2d2d30; | |
| color: #ffffff; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #ffffff; | |
| margin-bottom: 30px; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5); | |
| } | |
| .section { | |
| margin-bottom: 40px; | |
| background: #383838; | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3); | |
| } | |
| .section h2 { | |
| color: #ffcc00; | |
| margin-top: 0; | |
| border-bottom: 2px solid #555; | |
| padding-bottom: 10px; | |
| } | |
| .icon-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .icon-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background: #404040; | |
| padding: 15px; | |
| border-radius: 6px; | |
| border: 1px solid #555; | |
| } | |
| .icon-label { | |
| margin-top: 10px; | |
| font-size: 12px; | |
| text-align: center; | |
| color: #cccccc; | |
| } | |
| .state-container { | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| } | |
| .state-label { | |
| font-size: 10px; | |
| color: #999; | |
| } | |
| /* Transport controls specific styling */ | |
| .transport-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); | |
| gap: 15px; | |
| } | |
| .transport-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background: #404040; | |
| padding: 10px; | |
| border-radius: 4px; | |
| border: 1px solid #555; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>DAW Icons Gallery - FL Studio Style</h1> | |
| <!-- Knobs Section --> | |
| <div class="section"> | |
| <h2>Knobs (Lit & Non-lit)</h2> | |
| <div class="icon-grid"> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Small Normal Knob - Non-lit --> | |
| <svg width="40" height="40" viewBox="0 0 40 40"> | |
| <defs> | |
| <radialGradient id="knob-normal-off" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#2a2a2a"/> | |
| </radialGradient> | |
| <radialGradient id="knob-inner-off" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#404040"/> | |
| <stop offset="100%" style="stop-color:#1a1a1a"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="20" cy="20" r="18" fill="url(#knob-normal-off)" stroke="#1a1a1a" stroke-width="1"/> | |
| <circle cx="20" cy="20" r="12" fill="url(#knob-inner-off)"/> | |
| <line x1="20" y1="8" x2="20" y2="14" stroke="#808080" stroke-width="2" stroke-linecap="round" opacity="0.6"/> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Small Normal Knob - Lit --> | |
| <svg width="40" height="40" viewBox="0 0 40 40"> | |
| <defs> | |
| <radialGradient id="knob-normal-on" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#8080a0"/> | |
| <stop offset="100%" style="stop-color:#3a3a4a"/> | |
| </radialGradient> | |
| <radialGradient id="knob-inner-on" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#5050ff"/> | |
| <stop offset="100%" style="stop-color:#2a2aaa"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="20" cy="20" r="18" fill="url(#knob-normal-on)" stroke="#1a1a1a" stroke-width="1"/> | |
| <circle cx="20" cy="20" r="12" fill="url(#knob-inner-on)"/> | |
| <line x1="20" y1="8" x2="20" y2="14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.7"/> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Small Normal Knob</div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Big Normal Knob - Non-lit --> | |
| <svg width="60" height="60" viewBox="0 0 60 60"> | |
| <defs> | |
| <radialGradient id="big-knob-normal-off" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#2a2a2a"/> | |
| </radialGradient> | |
| <radialGradient id="big-knob-inner-off" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#404040"/> | |
| <stop offset="100%" style="stop-color:#1a1a1a"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="30" cy="30" r="28" fill="url(#big-knob-normal-off)" stroke="#1a1a1a" stroke-width="1"/> | |
| <circle cx="30" cy="30" r="18" fill="url(#big-knob-inner-off)"/> | |
| <line x1="30" y1="10" x2="30" y2="18" stroke="#808080" stroke-width="3" stroke-linecap="round"/> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Big Normal Knob - Lit --> | |
| <svg width="60" height="60" viewBox="0 0 60 60"> | |
| <defs> | |
| <radialGradient id="big-knob-normal-on" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#8080a0"/> | |
| <stop offset="100%" style="stop-color:#3a3a4a"/> | |
| </radialGradient> | |
| <radialGradient id="big-knob-inner-on" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#5050ff"/> | |
| <stop offset="100%" style="stop-color:#2a2aaa"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="30" cy="30" r="28" fill="url(#big-knob-normal-on)" stroke="#1a1a1a" stroke-width="1"/> | |
| <circle cx="30" cy="30" r="18" fill="url(#big-knob-inner-on)"/> | |
| <line x1="30" y1="10" x2="30" y2="18" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"/> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Big Normal Knob</div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Small Metal Knob - Non-lit --> | |
| <svg width="40" height="40" viewBox="0 0 40 40"> | |
| <defs> | |
| <radialGradient id="metal-knob-off" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#c0c0c0"/> | |
| <stop offset="50%" style="stop-color:#808080"/> | |
| <stop offset="100%" style="stop-color:#404040"/> | |
| </radialGradient> | |
| <radialGradient id="metal-inner-off" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#909090"/> | |
| <stop offset="100%" style="stop-color:#505050"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="20" cy="20" r="18" fill="url(#metal-knob-off)" stroke="#2a2a2a" stroke-width="1"/> | |
| <circle cx="20" cy="20" r="12" fill="url(#metal-inner-off)"/> | |
| <!-- Metal ridges --> | |
| <g stroke="#606060" stroke-width="0.5" opacity="0.6"> | |
| <line x1="8" y1="20" x2="12" y2="20"/> | |
| <line x1="28" y1="20" x2="32" y2="20"/> | |
| <line x1="20" y1="8" x2="20" y2="12"/> | |
| <line x1="20" y1="28" x2="20" y2="32"/> | |
| </g> | |
| <line x1="20" y1="8" x2="20" y2="14" stroke="#a0a0a0" stroke-width="2" stroke-linecap="round" opacity="0.6"/> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Small Metal Knob - Lit --> | |
| <svg width="40" height="40" viewBox="0 0 40 40"> | |
| <defs> | |
| <radialGradient id="metal-knob-on" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#e0e0ff"/> | |
| <stop offset="50%" style="stop-color:#a0a0ff"/> | |
| <stop offset="100%" style="stop-color:#6060aa"/> | |
| </radialGradient> | |
| <radialGradient id="metal-inner-on" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#b0b0ff"/> | |
| <stop offset="100%" style="stop-color:#7070bb"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="20" cy="20" r="18" fill="url(#metal-knob-on)" stroke="#2a2a2a" stroke-width="1"/> | |
| <circle cx="20" cy="20" r="12" fill="url(#metal-inner-on)"/> | |
| <!-- Metal ridges --> | |
| <g stroke="#8080ff" stroke-width="0.5" opacity="0.8"> | |
| <line x1="8" y1="20" x2="12" y2="20"/> | |
| <line x1="28" y1="20" x2="32" y2="20"/> | |
| <line x1="20" y1="8" x2="20" y2="12"/> | |
| <line x1="20" y1="28" x2="20" y2="32"/> | |
| </g> | |
| <line x1="20" y1="8" x2="20" y2="14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.7"/> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Small Metal Knob</div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Big Metal Knob - Non-lit --> | |
| <svg width="60" height="60" viewBox="0 0 60 60"> | |
| <defs> | |
| <radialGradient id="big-metal-knob-off" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#c0c0c0"/> | |
| <stop offset="50%" style="stop-color:#808080"/> | |
| <stop offset="100%" style="stop-color:#404040"/> | |
| </radialGradient> | |
| <radialGradient id="big-metal-inner-off" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#909090"/> | |
| <stop offset="100%" style="stop-color:#505050"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="30" cy="30" r="28" fill="url(#big-metal-knob-off)" stroke="#2a2a2a" stroke-width="1"/> | |
| <circle cx="30" cy="30" r="18" fill="url(#big-metal-inner-off)"/> | |
| <!-- Metal ridges --> | |
| <g stroke="#606060" stroke-width="0.8" opacity="0.6"> | |
| <line x1="8" y1="30" x2="14" y2="30"/> | |
| <line x1="46" y1="30" x2="52" y2="30"/> | |
| <line x1="30" y1="8" x2="30" y2="14"/> | |
| <line x1="30" y1="46" x2="30" y2="52"/> | |
| <line x1="13.5" y1="13.5" x2="17.9" y2="17.9"/> | |
| <line x1="42.1" y1="42.1" x2="46.5" y2="46.5"/> | |
| <line x1="46.5" y1="13.5" x2="42.1" y2="17.9"/> | |
| <line x1="17.9" y1="42.1" x2="13.5" y2="46.5"/> | |
| </g> | |
| <line x1="30" y1="10" x2="30" y2="18" stroke="#a0a0a0" stroke-width="3" stroke-linecap="round" opacity="0.6"/> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Big Metal Knob - Lit --> | |
| <svg width="60" height="60" viewBox="0 0 60 60"> | |
| <defs> | |
| <radialGradient id="big-metal-knob-on" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#e0e0ff"/> | |
| <stop offset="50%" style="stop-color:#a0a0ff"/> | |
| <stop offset="100%" style="stop-color:#6060aa"/> | |
| </radialGradient> | |
| <radialGradient id="big-metal-inner-on" cx="0.5" cy="0.5" r="0.6"> | |
| <stop offset="0%" style="stop-color:#b0b0ff"/> | |
| <stop offset="100%" style="stop-color:#7070bb"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="30" cy="30" r="28" fill="url(#big-metal-knob-on)" stroke="#2a2a2a" stroke-width="1"/> | |
| <circle cx="30" cy="30" r="18" fill="url(#big-metal-inner-on)"/> | |
| <!-- Metal ridges --> | |
| <g stroke="#8080ff" stroke-width="0.8" opacity="0.8"> | |
| <line x1="8" y1="30" x2="14" y2="30"/> | |
| <line x1="46" y1="30" x2="52" y2="30"/> | |
| <line x1="30" y1="8" x2="30" y2="14"/> | |
| <line x1="30" y1="46" x2="30" y2="52"/> | |
| <line x1="13.5" y1="13.5" x2="17.9" y2="17.9"/> | |
| <line x1="42.1" y1="42.1" x2="46.5" y2="46.5"/> | |
| <line x1="46.5" y1="13.5" x2="42.1" y2="17.9"/> | |
| <line x1="17.9" y1="42.1" x2="13.5" y2="46.5"/> | |
| </g> | |
| <line x1="30" y1="10" x2="30" y2="18" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"/> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Big Metal Knob</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slider Caps Section --> | |
| <div class="section"> | |
| <h2>Slider Caps (Lit & Non-lit)</h2> | |
| <div class="icon-grid"> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Slider Cap - Non-lit --> | |
| <svg width="30" height="20" viewBox="0 0 30 20"> | |
| <defs> | |
| <linearGradient id="slider-cap-off" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#505050"/> | |
| <stop offset="50%" style="stop-color:#353535"/> | |
| <stop offset="100%" style="stop-color:#202020"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="26" height="16" rx="2" fill="url(#slider-cap-off)" stroke="#1a1a1a" stroke-width="1"/> | |
| <rect x="4" y="4" width="22" height="12" rx="1" fill="#404040" opacity="0.5"/> | |
| <line x1="8" y1="6" x2="8" y2="14" stroke="#606060" stroke-width="1"/> | |
| <line x1="15" y1="6" x2="15" y2="14" stroke="#606060" stroke-width="1"/> | |
| <line x1="22" y1="6" x2="22" y2="14" stroke="#606060" stroke-width="1"/> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Slider Cap - Lit --> | |
| <svg width="30" height="20" viewBox="0 0 30 20"> | |
| <defs> | |
| <linearGradient id="slider-cap-on" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#7070ff"/> | |
| <stop offset="50%" style="stop-color:#5555cc"/> | |
| <stop offset="100%" style="stop-color:#404088"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="26" height="16" rx="2" fill="url(#slider-cap-on)" stroke="#1a1a1a" stroke-width="1"/> | |
| <rect x="4" y="4" width="22" height="12" rx="1" fill="#6060ff" opacity="0.3"/> | |
| <line x1="8" y1="6" x2="8" y2="14" stroke="#a0a0ff" stroke-width="1"/> | |
| <line x1="15" y1="6" x2="15" y2="14" stroke="#a0a0ff" stroke-width="1"/> | |
| <line x1="22" y1="6" x2="22" y2="14" stroke="#a0a0ff" stroke-width="1"/> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Slider Cap</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Radio Buttons Section --> | |
| <div class="section"> | |
| <h2>Radio Buttons (Lit & Non-lit)</h2> | |
| <div class="icon-grid"> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Radio Button - Non-lit --> | |
| <svg width="20" height="20" viewBox="0 0 20 20"> | |
| <defs> | |
| <radialGradient id="radio-off" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#404040"/> | |
| <stop offset="100%" style="stop-color:#202020"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="10" cy="10" r="9" fill="url(#radio-off)" stroke="#1a1a1a" stroke-width="1"/> | |
| <circle cx="10" cy="10" r="6" fill="#2a2a2a"/> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Radio Button - Lit --> | |
| <svg width="20" height="20" viewBox="0 0 20 20"> | |
| <defs> | |
| <radialGradient id="radio-on" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#6060ff"/> | |
| <stop offset="100%" style="stop-color:#3030aa"/> | |
| </radialGradient> | |
| </defs> | |
| <circle cx="10" cy="10" r="9" fill="url(#radio-on)" stroke="#1a1a1a" stroke-width="1"/> | |
| <circle cx="10" cy="10" r="6" fill="#4040cc"/> | |
| <circle cx="10" cy="10" r="3" fill="#ffffff"/> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Radio Button</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transport Controls Section --> | |
| <div class="section"> | |
| <h2>Transport Controls</h2> | |
| <div class="transport-grid"> | |
| <div class="transport-item"> | |
| <!-- Play Button --> | |
| <svg width="32" height="32" viewBox="0 0 32 32"> | |
| <defs> | |
| <linearGradient id="play-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#60ff60"/> | |
| <stop offset="100%" style="stop-color:#30cc30"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/> | |
| <polygon points="12,8 12,24 22,16" fill="url(#play-gradient)"/> | |
| </svg> | |
| <div class="icon-label">Play</div> | |
| </div> | |
| <div class="transport-item"> | |
| <!-- Pause Button --> | |
| <svg width="32" height="32" viewBox="0 0 32 32"> | |
| <defs> | |
| <linearGradient id="pause-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ffff60"/> | |
| <stop offset="100%" style="stop-color:#cccc30"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/> | |
| <rect x="10" y="8" width="4" height="16" fill="url(#pause-gradient)"/> | |
| <rect x="18" y="8" width="4" height="16" fill="url(#pause-gradient)"/> | |
| </svg> | |
| <div class="icon-label">Pause</div> | |
| </div> | |
| <div class="transport-item"> | |
| <!-- Stop Button --> | |
| <svg width="32" height="32" viewBox="0 0 32 32"> | |
| <defs> | |
| <linearGradient id="stop-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ff6060"/> | |
| <stop offset="100%" style="stop-color:#cc3030"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/> | |
| <rect x="10" y="10" width="12" height="12" fill="url(#stop-gradient)"/> | |
| </svg> | |
| <div class="icon-label">Stop</div> | |
| </div> | |
| <div class="transport-item"> | |
| <!-- Record Button --> | |
| <svg width="32" height="32" viewBox="0 0 32 32"> | |
| <defs> | |
| <radialGradient id="record-gradient" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#ff4040"/> | |
| <stop offset="100%" style="stop-color:#cc2020"/> | |
| </radialGradient> | |
| </defs> | |
| <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/> | |
| <circle cx="16" cy="16" r="6" fill="url(#record-gradient)"/> | |
| </svg> | |
| <div class="icon-label">Record</div> | |
| </div> | |
| <div class="transport-item"> | |
| <!-- Fast Forward Button --> | |
| <svg width="32" height="32" viewBox="0 0 32 32"> | |
| <defs> | |
| <linearGradient id="ff-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#60c0ff"/> | |
| <stop offset="100%" style="stop-color:#3090cc"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/> | |
| <polygon points="8,8 8,24 16,16" fill="url(#ff-gradient)"/> | |
| <polygon points="16,8 16,24 24,16" fill="url(#ff-gradient)"/> | |
| </svg> | |
| <div class="icon-label">Fast Forward</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DAW Views Section --> | |
| <div class="section"> | |
| <h2>DAW Views & Components</h2> | |
| <div class="icon-grid"> | |
| <div class="icon-item"> | |
| <!-- Piano Roll --> | |
| <svg width="50" height="40" viewBox="0 0 50 40"> | |
| <defs> | |
| <linearGradient id="piano-bg" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#404040"/> | |
| <stop offset="100%" style="stop-color:#353535"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="46" height="36" rx="2" fill="url(#piano-bg)" stroke="#555" stroke-width="1"/> | |
| <!-- Piano keys on left --> | |
| <rect x="4" y="4" width="8" height="32" fill="#f0f0f0"/> | |
| <rect x="4" y="6" width="5" height="4" fill="#2a2a2a"/> | |
| <rect x="4" y="12" width="5" height="4" fill="#2a2a2a"/> | |
| <rect x="4" y="20" width="5" height="4" fill="#2a2a2a"/> | |
| <rect x="4" y="26" width="5" height="4" fill="#2a2a2a"/> | |
| <rect x="4" y="32" width="5" height="4" fill="#2a2a2a"/> | |
| <!-- Grid lines --> | |
| <g stroke="#666" stroke-width="0.5" opacity="0.5"> | |
| <line x1="12" y1="4" x2="46" y2="4"/> | |
| <line x1="12" y1="10" x2="46" y2="10"/> | |
| <line x1="12" y1="16" x2="46" y2="16"/> | |
| <line x1="12" y1="22" x2="46" y2="22"/> | |
| <line x1="12" y1="28" x2="46" y2="28"/> | |
| <line x1="12" y1="34" x2="46" y2="34"/> | |
| <line x1="16" y1="4" x2="16" y2="36"/> | |
| <line x1="22" y1="4" x2="22" y2="36"/> | |
| <line x1="28" y1="4" x2="28" y2="36"/> | |
| <line x1="34" y1="4" x2="34" y2="36"/> | |
| <line x1="40" y1="4" x2="40" y2="36"/> | |
| </g> | |
| <!-- Note blocks --> | |
| <rect x="16" y="10" width="8" height="4" rx="1" fill="#60ff60"/> | |
| <rect x="28" y="16" width="6" height="4" rx="1" fill="#ff6060"/> | |
| <rect x="22" y="22" width="10" height="4" rx="1" fill="#6060ff"/> | |
| </svg> | |
| <div class="icon-label">Piano Roll</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Playlist View --> | |
| <svg width="50" height="40" viewBox="0 0 50 40"> | |
| <defs> | |
| <linearGradient id="playlist-bg" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#383838"/> | |
| <stop offset="100%" style="stop-color:#2d2d30"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="46" height="36" rx="2" fill="url(#playlist-bg)" stroke="#555" stroke-width="1"/> | |
| <!-- Timeline --> | |
| <rect x="4" y="4" width="42" height="6" fill="#404040"/> | |
| <g stroke="#666" stroke-width="0.5"> | |
| <line x1="8" y1="4" x2="8" y2="10"/> | |
| <line x1="16" y1="4" x2="16" y2="10"/> | |
| <line x1="24" y1="4" x2="24" y2="10"/> | |
| <line x1="32" y1="4" x2="32" y2="10"/> | |
| <line x1="40" y1="4" x2="40" y2="10"/> | |
| </g> | |
| <!-- Track lanes --> | |
| <g fill="#606060" opacity="0.3"> | |
| <rect x="4" y="12" width="42" height="4"/> | |
| <rect x="4" y="18" width="42" height="4"/> | |
| <rect x="4" y="24" width="42" height="4"/> | |
| <rect x="4" y="30" width="42" height="4"/> | |
| </g> | |
| <!-- Audio clips --> | |
| <rect x="6" y="13" width="12" height="2" rx="1" fill="#40c040"/> | |
| <rect x="20" y="13" width="8" height="2" rx="1" fill="#40c040"/> | |
| <rect x="8" y="19" width="16" height="2" rx="1" fill="#c04040"/> | |
| <rect x="12" y="25" width="10" height="2" rx="1" fill="#4040c0"/> | |
| <rect x="26" y="25" width="14" height="2" rx="1" fill="#4040c0"/> | |
| <rect x="16" y="31" width="12" height="2" rx="1" fill="#c0c040"/> | |
| </svg> | |
| <div class="icon-label">Playlist View</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Mixer --> | |
| <svg width="50" height="40" viewBox="0 0 50 40"> | |
| <defs> | |
| <linearGradient id="mixer-bg" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#404040"/> | |
| <stop offset="100%" style="stop-color:#303030"/> | |
| </linearGradient> | |
| <linearGradient id="fader-track" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#2a2a2a"/> | |
| <stop offset="100%" style="stop-color:#1a1a1a"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="46" height="36" rx="2" fill="url(#mixer-bg)" stroke="#555" stroke-width="1"/> | |
| <!-- Channel strips --> | |
| <g> | |
| <!-- Channel 1 --> | |
| <rect x="6" y="6" width="8" height="28" fill="#353535" stroke="#555" stroke-width="0.5"/> | |
| <circle cx="10" cy="10" r="2" fill="#404040"/> | |
| <rect x="8" y="14" width="4" height="12" fill="url(#fader-track)"/> | |
| <rect x="7" y="20" width="6" height="3" rx="1" fill="#808080"/> | |
| <rect x="8" y="28" width="4" height="4" rx="1" fill="#606060"/> | |
| <!-- Channel 2 --> | |
| <rect x="16" y="6" width="8" height="28" fill="#353535" stroke="#555" stroke-width="0.5"/> | |
| <circle cx="20" cy="10" r="2" fill="#404040"/> | |
| <rect x="18" y="14" width="4" height="12" fill="url(#fader-track)"/> | |
| <rect x="17" y="18" width="6" height="3" rx="1" fill="#808080"/> | |
| <rect x="18" y="28" width="4" height="4" rx="1" fill="#606060"/> | |
| <!-- Channel 3 --> | |
| <rect x="26" y="6" width="8" height="28" fill="#353535" stroke="#555" stroke-width="0.5"/> | |
| <circle cx="30" cy="10" r="2" fill="#404040"/> | |
| <rect x="28" y="14" width="4" height="12" fill="url(#fader-track)"/> | |
| <rect x="27" y="22" width="6" height="3" rx="1" fill="#808080"/> | |
| <rect x="28" y="28" width="4" height="4" rx="1" fill="#606060"/> | |
| <!-- Master Channel --> | |
| <rect x="36" y="6" width="8" height="28" fill="#454545" stroke="#777" stroke-width="0.5"/> | |
| <circle cx="40" cy="10" r="2" fill="#505050"/> | |
| <rect x="38" y="14" width="4" height="12" fill="url(#fader-track)"/> | |
| <rect x="37" y="16" width="6" height="3" rx="1" fill="#a0a0a0"/> | |
| <rect x="38" y="28" width="4" height="4" rx="1" fill="#808080"/> | |
| </g> | |
| </svg> | |
| <div class="icon-label">Mixer</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Keyboard to MIDI --> | |
| <svg width="50" height="30" viewBox="0 0 50 30"> | |
| <defs> | |
| <linearGradient id="kbd-bg" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#f0f0f0"/> | |
| <stop offset="100%" style="stop-color:#e0e0e0"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Keyboard --> | |
| <rect x="2" y="8" width="30" height="20" rx="2" fill="url(#kbd-bg)" stroke="#ccc" stroke-width="1"/> | |
| <!-- White keys --> | |
| <g fill="#ffffff" stroke="#ccc" stroke-width="0.5"> | |
| <rect x="4" y="10" width="3" height="16"/> | |
| <rect x="8" y="10" width="3" height="16"/> | |
| <rect x="12" y="10" width="3" height="16"/> | |
| <rect x="16" y="10" width="3" height="16"/> | |
| <rect x="20" y="10" width="3" height="16"/> | |
| <rect x="24" y="10" width="3" height="16"/> | |
| <rect x="28" y="10" width="3" height="16"/> | |
| </g> | |
| <!-- Black keys --> | |
| <g fill="#2a2a2a"> | |
| <rect x="6" y="10" width="2" height="10"/> | |
| <rect x="10" y="10" width="2" height="10"/> | |
| <rect x="17" y="10" width="2" height="10"/> | |
| <rect x="21" y="10" width="2" height="10"/> | |
| <rect x="25" y="10" width="2" height="10"/> | |
| </g> | |
| <!-- Arrow --> | |
| <path d="M 34 18 L 40 18" stroke="#666" stroke-width="2" fill="none" marker-end="url(#arrow)"/> | |
| <!-- MIDI connector --> | |
| <rect x="42" y="14" width="6" height="8" rx="1" fill="#404040" stroke="#666" stroke-width="1"/> | |
| <circle cx="45" cy="16" r="0.5" fill="#ccc"/> | |
| <circle cx="45" cy="18" r="0.5" fill="#ccc"/> | |
| <circle cx="45" cy="20" r="0.5" fill="#ccc"/> | |
| <defs> | |
| <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> | |
| <polygon points="0 0, 10 3.5, 0 7" fill="#666"/> | |
| </marker> | |
| </defs> | |
| </svg> | |
| <div class="icon-label">Keyboard to MIDI</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Metronome --> | |
| <svg width="40" height="50" viewBox="0 0 40 50"> | |
| <defs> | |
| <linearGradient id="metro-body" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#404040"/> | |
| </linearGradient> | |
| <radialGradient id="metro-face" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#f0f0f0"/> | |
| <stop offset="100%" style="stop-color:#d0d0d0"/> | |
| </radialGradient> | |
| </defs> | |
| <!-- Base --> | |
| <rect x="8" y="40" width="24" height="8" rx="2" fill="#2a2a2a"/> | |
| <!-- Main body --> | |
| <path d="M 12 40 L 8 10 Q 8 6 12 6 L 28 6 Q 32 6 32 10 L 28 40 Z" fill="url(#metro-body)" stroke="#2a2a2a" stroke-width="1"/> | |
| <!-- Face --> | |
| <circle cx="20" cy="18" r="8" fill="url(#metro-face)" stroke="#999" stroke-width="1"/> | |
| <!-- Tick marks --> | |
| <g stroke="#333" stroke-width="1"> | |
| <line x1="20" y1="12" x2="20" y2="14"/> | |
| <line x1="26" y1="18" x2="24" y2="18"/> | |
| <line x1="20" y1="24" x2="20" y2="22"/> | |
| <line x1="14" y1="18" x2="16" y2="18"/> | |
| </g> | |
| <!-- Pendulum --> | |
| <line x1="20" y1="18" x2="22" y2="8" stroke="#333" stroke-width="2"/> | |
| <circle cx="22" cy="8" r="2" fill="#ff6060"/> | |
| <!-- Center --> | |
| <circle cx="20" cy="18" r="1" fill="#333"/> | |
| <!-- Tempo indicator --> | |
| <rect x="14" y="30" width="12" height="4" rx="1" fill="#404040"/> | |
| <rect x="15" y="31" width="4" height="2" rx="0.5" fill="#60ff60"/> | |
| </svg> | |
| <div class="icon-label">Metronome</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Window Controls Section --> | |
| <div class="section"> | |
| <h2>Window Controls (Lit & Non-lit)</h2> | |
| <div class="icon-grid"> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Close Button - Non-lit --> | |
| <svg width="24" height="24" viewBox="0 0 24 24"> | |
| <defs> | |
| <linearGradient id="close-off" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#505050"/> | |
| <stop offset="100%" style="stop-color:#353535"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#close-off)" stroke="#2a2a2a" stroke-width="1"/> | |
| <g stroke="#808080" stroke-width="2" stroke-linecap="round"> | |
| <line x1="8" y1="8" x2="16" y2="16"/> | |
| <line x1="16" y1="8" x2="8" y2="16"/> | |
| </g> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Close Button - Lit --> | |
| <svg width="24" height="24" viewBox="0 0 24 24"> | |
| <defs> | |
| <linearGradient id="close-on" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ff6060"/> | |
| <stop offset="100%" style="stop-color:#cc3030"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#close-on)" stroke="#2a2a2a" stroke-width="1"/> | |
| <g stroke="#ffffff" stroke-width="2" stroke-linecap="round"> | |
| <line x1="8" y1="8" x2="16" y2="16"/> | |
| <line x1="16" y1="8" x2="8" y2="16"/> | |
| </g> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Close (X)</div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Minimize Button - Non-lit --> | |
| <svg width="24" height="24" viewBox="0 0 24 24"> | |
| <defs> | |
| <linearGradient id="min-off" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#505050"/> | |
| <stop offset="100%" style="stop-color:#353535"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#min-off)" stroke="#2a2a2a" stroke-width="1"/> | |
| <line x1="8" y1="12" x2="16" y2="12" stroke="#808080" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| <div class="state-label">Off</div> | |
| </div> | |
| <div> | |
| <!-- Minimize Button - Lit --> | |
| <svg width="24" height="24" viewBox="0 0 24 24"> | |
| <defs> | |
| <linearGradient id="min-on" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#6060ff"/> | |
| <stop offset="100%" style="stop-color:#3030cc"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#min-on)" stroke="#2a2a2a" stroke-width="1"/> | |
| <line x1="8" y1="12" x2="16" y2="12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| <div class="state-label">On</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Minimize</div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="state-container"> | |
| <div> | |
| <!-- Trash - Non-lit (closed) --> | |
| <svg width="24" height="30" viewBox="0 0 24 30"> | |
| <defs> | |
| <linearGradient id="trash-body-off" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#404040"/> | |
| </linearGradient> | |
| <linearGradient id="trash-lid-off" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#707070"/> | |
| <stop offset="100%" style="stop-color:#505050"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Body --> | |
| <path d="M 6 12 L 7 26 Q 7 28 9 28 L 15 28 Q 17 28 17 26 L 18 12 Z" fill="url(#trash-body-off)" stroke="#2a2a2a" stroke-width="1"/> | |
| <!-- Lid --> | |
| <rect x="4" y="10" width="16" height="3" rx="1" fill="url(#trash-lid-off)" stroke="#2a2a2a" stroke-width="1"/> | |
| <!-- Handle --> | |
| <rect x="9" y="8" width="6" height="2" rx="1" fill="#505050" stroke="#2a2a2a" stroke-width="0.5"/> | |
| <!-- Lines on body --> | |
| <g stroke="#404040" stroke-width="1" opacity="0.5"> | |
| <line x1="10" y1="15" x2="10" y2="24"/> | |
| <line x1="12" y1="15" x2="12" y2="24"/> | |
| <line x1="14" y1="15" x2="14" y2="24"/> | |
| </g> | |
| </svg> | |
| <div class="state-label">Closed</div> | |
| </div> | |
| <div> | |
| <!-- Trash - Lit (open) --> | |
| <svg width="24" height="30" viewBox="0 0 24 30"> | |
| <defs> | |
| <linearGradient id="trash-body-on" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ff8080"/> | |
| <stop offset="100%" style="stop-color:#cc5050"/> | |
| </linearGradient> | |
| <linearGradient id="trash-lid-on" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ff9090"/> | |
| <stop offset="100%" style="stop-color:#dd6060"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Body --> | |
| <path d="M 6 12 L 7 26 Q 7 28 9 28 L 15 28 Q 17 28 17 26 L 18 12 Z" fill="url(#trash-body-on)" stroke="#2a2a2a" stroke-width="1"/> | |
| <!-- Lid (tilted open) --> | |
| <g transform="rotate(-25 12 11)"> | |
| <rect x="4" y="9" width="16" height="3" rx="1" fill="url(#trash-lid-on)" stroke="#2a2a2a" stroke-width="1"/> | |
| <rect x="9" y="7" width="6" height="2" rx="1" fill="#dd6060" stroke="#2a2a2a" stroke-width="0.5"/> | |
| </g> | |
| <!-- Lines on body --> | |
| <g stroke="#cc4040" stroke-width="1" opacity="0.7"> | |
| <line x1="10" y1="15" x2="10" y2="24"/> | |
| <line x1="12" y1="15" x2="12" y2="24"/> | |
| <line x1="14" y1="15" x2="14" y2="24"/> | |
| </g> | |
| </svg> | |
| <div class="state-label">Open</div> | |
| </div> | |
| </div> | |
| <div class="icon-label">Trash Can</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Static Tools Section --> | |
| <div class="section"> | |
| <h2>Static Tools</h2> | |
| <div class="icon-grid"> | |
| <div class="icon-item"> | |
| <!-- Razor Blade at 45 degrees --> | |
| <svg width="30" height="30" viewBox="0 0 30 30"> | |
| <defs> | |
| <linearGradient id="razor-blade" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#d0d0d0"/> | |
| <stop offset="50%" style="stop-color:#a0a0a0"/> | |
| <stop offset="100%" style="stop-color:#707070"/> | |
| </linearGradient> | |
| <linearGradient id="razor-handle" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#404040"/> | |
| </linearGradient> | |
| </defs> | |
| <g transform="rotate(45 15 15)"> | |
| <!-- Handle --> | |
| <rect x="10" y="20" width="10" height="6" rx="1" fill="url(#razor-handle)" stroke="#2a2a2a" stroke-width="0.5"/> | |
| <!-- Blade --> | |
| <path d="M 15 4 L 13 20 L 17 20 Z" fill="url(#razor-blade)" stroke="#505050" stroke-width="0.5"/> | |
| <!-- Cutting edge highlight --> | |
| <line x1="15" y1="4" x2="15" y2="10" stroke="#ffffff" stroke-width="0.5" opacity="0.8"/> | |
| </g> | |
| </svg> | |
| <div class="icon-label">Razor Blade</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Pencil --> | |
| <svg width="30" height="30" viewBox="0 0 30 30"> | |
| <defs> | |
| <linearGradient id="pencil-body" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ffcc00"/> | |
| <stop offset="100%" style="stop-color:#cc9900"/> | |
| </linearGradient> | |
| <linearGradient id="pencil-tip" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#d0a070"/> | |
| <stop offset="100%" style="stop-color:#a07040"/> | |
| </linearGradient> | |
| </defs> | |
| <g transform="rotate(45 15 15)"> | |
| <!-- Eraser --> | |
| <rect x="13" y="4" width="4" height="3" rx="1" fill="#ff6060"/> | |
| <!-- Metal ferrule --> | |
| <rect x="13" y="7" width="4" height="2" fill="#c0c0c0"/> | |
| <!-- Body --> | |
| <rect x="13" y="9" width="4" height="14" fill="url(#pencil-body)" stroke="#aa8800" stroke-width="0.5"/> | |
| <!-- Wood tip --> | |
| <path d="M 13 23 L 15 26 L 17 23 Z" fill="url(#pencil-tip)" stroke="#906030" stroke-width="0.5"/> | |
| <!-- Lead --> | |
| <circle cx="15" cy="26" r="0.5" fill="#2a2a2a"/> | |
| </g> | |
| </svg> | |
| <div class="icon-label">Pencil</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Paint Brush --> | |
| <svg width="30" height="30" viewBox="0 0 30 30"> | |
| <defs> | |
| <linearGradient id="brush-handle" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#8B4513"/> | |
| <stop offset="100%" style="stop-color:#654321"/> | |
| </linearGradient> | |
| <linearGradient id="brush-ferrule" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#c0c0c0"/> | |
| <stop offset="100%" style="stop-color:#808080"/> | |
| </linearGradient> | |
| </defs> | |
| <g transform="rotate(45 15 15)"> | |
| <!-- Handle --> | |
| <rect x="13" y="6" width="4" height="12" rx="0.5" fill="url(#brush-handle)" stroke="#4a2c17" stroke-width="0.5"/> | |
| <!-- Ferrule --> | |
| <rect x="12.5" y="18" width="5" height="4" fill="url(#brush-ferrule)" stroke="#606060" stroke-width="0.5"/> | |
| <!-- Bristles --> | |
| <g stroke="#404040" stroke-width="0.8" opacity="0.8"> | |
| <line x1="13" y1="22" x2="13" y2="26"/> | |
| <line x1="14" y1="22" x2="14" y2="25"/> | |
| <line x1="15" y1="22" x2="15" y2="26"/> | |
| <line x1="16" y1="22" x2="16" y2="25"/> | |
| <line x1="17" y1="22" x2="17" y2="26"/> | |
| </g> | |
| <!-- Paint on tip --> | |
| <circle cx="15" cy="25" r="1" fill="#6060ff" opacity="0.7"/> | |
| </g> | |
| </svg> | |
| <div class="icon-label">Paint Brush</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Selector (cursor arrow) --> | |
| <svg width="24" height="24" viewBox="0 0 24 24"> | |
| <defs> | |
| <linearGradient id="selector-arrow" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ffffff"/> | |
| <stop offset="100%" style="stop-color:#d0d0d0"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Arrow body --> | |
| <path d="M 4 4 L 4 18 L 9 13 L 13 13 L 16 16 L 18 14 L 15 11 L 15 7 Z" fill="url(#selector-arrow)" stroke="#2a2a2a" stroke-width="1"/> | |
| <!-- Shadow --> | |
| <path d="M 5 5 L 5 18 L 10 13 L 14 13 L 17 16 L 19 14 L 16 11 L 16 7 Z" fill="#808080" opacity="0.3"/> | |
| </svg> | |
| <div class="icon-label">Selector</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Search (magnifying glass) --> | |
| <svg width="24" height="24" viewBox="0 0 24 24"> | |
| <defs> | |
| <radialGradient id="search-lens" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#f0f0f0"/> | |
| <stop offset="100%" style="stop-color:#c0c0c0"/> | |
| </radialGradient> | |
| <linearGradient id="search-handle" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#404040"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Lens --> | |
| <circle cx="11" cy="11" r="7" fill="url(#search-lens)" stroke="#808080" stroke-width="2"/> | |
| <circle cx="11" cy="11" r="5" fill="none" stroke="#a0a0a0" stroke-width="1"/> | |
| <!-- Handle --> | |
| <line x1="17" y1="17" x2="21" y2="21" stroke="url(#search-handle)" stroke-width="3" stroke-linecap="round"/> | |
| <!-- Highlight on lens --> | |
| <circle cx="9" cy="9" r="2" fill="#ffffff" opacity="0.6"/> | |
| </svg> | |
| <div class="icon-label">Search</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Magnet --> | |
| <svg width="24" height="24" viewBox="0 0 24 24"> | |
| <defs> | |
| <linearGradient id="magnet-red" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ff4040"/> | |
| <stop offset="100%" style="stop-color:#cc2020"/> | |
| </linearGradient> | |
| <linearGradient id="magnet-blue" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#4040ff"/> | |
| <stop offset="100%" style="stop-color:#2020cc"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Horseshoe magnet shape --> | |
| <path d="M 6 20 L 6 12 Q 6 6 12 6 Q 18 6 18 12 L 18 20" fill="none" stroke="#606060" stroke-width="8" stroke-linecap="round"/> | |
| <!-- North pole (red) --> | |
| <path d="M 6 20 L 6 12 Q 6 6 12 6" fill="none" stroke="url(#magnet-red)" stroke-width="6" stroke-linecap="round"/> | |
| <!-- South pole (blue) --> | |
| <path d="M 12 6 Q 18 6 18 12 L 18 20" fill="none" stroke="url(#magnet-blue)" stroke-width="6" stroke-linecap="round"/> | |
| <!-- Pole labels --> | |
| <text x="6" y="22" font-family="Arial" font-size="8" fill="#ffffff" text-anchor="middle">N</text> | |
| <text x="18" y="22" font-family="Arial" font-size="8" fill="#ffffff" text-anchor="middle">S</text> | |
| </svg> | |
| <div class="icon-label">Magnet</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Microphone --> | |
| <svg width="24" height="30" viewBox="0 0 24 30"> | |
| <defs> | |
| <linearGradient id="mic-body" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#808080"/> | |
| <stop offset="100%" style="stop-color:#505050"/> | |
| </linearGradient> | |
| <radialGradient id="mic-grille" cx="0.5" cy="0.5" r="0.8"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#404040"/> | |
| </radialGradient> | |
| </defs> | |
| <!-- Mic body --> | |
| <rect x="8" y="4" width="8" height="12" rx="4" fill="url(#mic-body)" stroke="#2a2a2a" stroke-width="1"/> | |
| <!-- Grille --> | |
| <rect x="9" y="5" width="6" height="10" rx="3" fill="url(#mic-grille)"/> | |
| <!-- Grille holes --> | |
| <g fill="#2a2a2a"> | |
| <circle cx="11" cy="7" r="0.5"/> | |
| <circle cx="13" cy="7" r="0.5"/> | |
| <circle cx="10" cy="9" r="0.5"/> | |
| <circle cx="12" cy="9" r="0.5"/> | |
| <circle cx="14" cy="9" r="0.5"/> | |
| <circle cx="11" cy="11" r="0.5"/> | |
| <circle cx="13" cy="11" r="0.5"/> | |
| <circle cx="10" cy="13" r="0.5"/> | |
| <circle cx="12" cy="13" r="0.5"/> | |
| <circle cx="14" cy="13" r="0.5"/> | |
| </g> | |
| <!-- Stand --> | |
| <rect x="11" y="16" width="2" height="8" fill="#404040"/> | |
| <rect x="8" y="24" width="8" height="3" rx="1" fill="#404040"/> | |
| <!-- XLR connector --> | |
| <circle cx="12" cy="20" r="1.5" fill="#2a2a2a" stroke="#606060" stroke-width="0.5"/> | |
| <g fill="#808080"> | |
| <circle cx="11.2" cy="19.5" r="0.3"/> | |
| <circle cx="12.8" cy="19.5" r="0.3"/> | |
| <circle cx="12" cy="20.8" r="0.3"/> | |
| </g> | |
| </svg> | |
| <div class="icon-label">Microphone</div> | |
| </div> | |
| <div class="icon-item"> | |
| <!-- Speaker --> | |
| <svg width="30" height="24" viewBox="0 0 30 24"> | |
| <defs> | |
| <linearGradient id="speaker-body" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#404040"/> | |
| <stop offset="100%" style="stop-color:#2a2a2a"/> | |
| </linearGradient> | |
| <radialGradient id="speaker-cone" cx="0.3" cy="0.3" r="0.8"> | |
| <stop offset="0%" style="stop-color:#606060"/> | |
| <stop offset="100%" style="stop-color:#353535"/> | |
| </radialGradient> | |
| </defs> | |
| <!-- Speaker cabinet --> | |
| <rect x="4" y="4" width="22" height="16" rx="2" fill="url(#speaker-body)" stroke="#1a1a1a" stroke-width="1"/> | |
| <!-- Main driver --> | |
| <circle cx="15" cy="12" r="6" fill="url(#speaker-cone)" stroke="#2a2a2a" stroke-width="1"/> | |
| <circle cx="15" cy="12" r="3" fill="#2a2a2a"/> | |
| <circle cx="15" cy="12" r="1" fill="#808080"/> | |
| <!-- Tweeter --> | |
| <circle cx="21" cy="8" r="2" fill="url(#speaker-cone)" stroke="#2a2a2a" stroke-width="0.5"/> | |
| <circle cx="21" cy="8" r="0.8" fill="#2a2a2a"/> | |
| <!-- Sound waves --> | |
| <g stroke="#60ff60" stroke-width="1" fill="none" opacity="0.6"> | |
| <path d="M 2 8 Q 0 12 2 16"/> | |
| <path d="M 1 6 Q -2 12 1 18"/> | |
| <path d="M 0 4 Q -4 12 0 20"/> | |
| </g> | |
| </svg> | |
| <div class="icon-label">Speaker</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |