arrange this interface in a grid flexible fashion togeher with svg container. put all controls elements inside accordion dropdown transparent menu some where from top-right corner, and make svg container taking all viewport flexibly auto fitting. output full code without descriptions comments or explanations in chat and in code.: <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .slider-container {
    margin: 10px 0;
  }
</style>
</head>
<body>
<div>
  White Noise Frequency Range: <br>
  <input type="number" id="whiteMinFreq" value="0.50" step="0.01"> to
  <input type="number" id="whiteMaxFreq" value="0.70" step="0.01"> | Step:
  <input type="number" id="whiteStepFreq" value="0.01" step="0.01">
  <label><input type="checkbox" id="whiteNbFreq" checked> Enable Animation</label>
</div>

<div>
  Black Noise Frequency Range: <br>
  <input type="number" id="blackMinFreq" value="0.50" step="0.01"> to
  <input type="number" id="blackMaxFreq" value="0.70" step="0.01"> | Step:
  <input type="number" id="blackStepFreq" value="0.01" step="0.01">
  <label><input type="checkbox" id="blackNbFreq" checked> Enable Animation</label>
</div>

<div class="slider-container">
  <label for="speedSlider">Animation Speed: </label>
  <input type="range" id="speedSlider" min="1" max="60" value="60">
</div>

<svg width="500" height="500">
  <defs>
    <filter id="whiteNoiseFilter">
      <feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="1" result="whiteNoise"></feTurbulence>
      <feComponentTransfer in="whiteNoise" result="brightNoise">
        <feFuncA type="discrete" tableValues="1 0"></feFuncA>
      </feComponentTransfer>
      <feColorMatrix in="brightNoise" type="matrix"
       values="1 1 1 0 0  1 1 1 0 0  1 1 1 0 0  0 0 0 1 0" result="whiteBrightNoise"></feColorMatrix>
    </filter>
    <filter id="blackNoiseFilter">
      <feTurbulence type="fractalNoise" baseFrequency="0.58" numOctaves="1" result="blackNoise"></feTurbulence>
      <feComponentTransfer in="blackNoise" result="darkNoise">
        <feFuncA type="discrete" tableValues="0 1"></feFuncA>
      </feComponentTransfer>
      <feColorMatrix in="darkNoise" type="matrix"
       values="0.001 0.001 0.001 0 0  0.001 0.001 0.001 0 0  0.001 0.001 0.001 0 0  0 0 0 1 0" result="blackDarkNoise"></feColorMatrix>
    </filter>
  </defs>
  <rect width="500" height="500" fill="black"></rect>
  <rect width="500" height="500" filter="url(#whiteNoiseFilter)" fill="white"></rect>
  <rect width="500" height="500" filter="url(#blackNoiseFilter)"></rect>
</svg>

<script>
// Grab the filters and checkboxes
const whiteNoiseFilter = document.querySelector('#whiteNoiseFilter feTurbulence');
const blackNoiseFilter = document.querySelector('#blackNoiseFilter feTurbulence');

// Define initial values and elements
const whiteFreq = {
  min: document.getElementById('whiteMinFreq'),
  max: document.getElementById('whiteMaxFreq'),
  step: document.getElementById('whiteStepFreq'),
  checkbox: document.getElementById('whiteNbFreq'),
  current: 0.55,
  direction: 1
};

const blackFreq = {
  min: document.getElementById('blackMinFreq'),
  max: document.getElementById('blackMaxFreq'),
  step: document.getElementById('blackStepFreq'),
  checkbox: document.getElementById('blackNbFreq'),
  current: 0.58,
  direction: 1
};

const speedSlider = document.getElementById('speedSlider');
let frameRate = speedSlider.value;

// Every time the slider value changes, adjust the frameRate based on the slider's value.
speedSlider.addEventListener('input', function() {
  frameRate = this.value;
});

function updateFrequency() {
  if (whiteFreq.checkbox.checked) {
    animateFrequency(whiteFreq, whiteNoiseFilter);
  }

  if (blackFreq.checkbox.checked) {
    animateFrequency(blackFreq, blackNoiseFilter);
  }

  setTimeout(function() {
    requestAnimationFrame(updateFrequency);
  }, 1000 / frameRate);
}

function animateFrequency(freq, filterElem) {
  const minValue = parseFloat(freq.min.value);
  const maxValue = parseFloat(freq.max.value);
  const stepSize = parseFloat(freq.step.value);

  // Adjust direction if limits are reached
  if (freq.current >= maxValue || freq.current <= minValue) freq.direction *= -1;
  freq.current += freq.direction * stepSize;

  // Ensure the current frequency stays within the min/max range
  freq.current = Math.min(Math.max(freq.current, minValue), maxValue);
  
  // Update attribute with new frequency value
  filterElem.setAttribute('baseFrequency', freq.current.toFixed(2));
}

// Start the animation loop
updateFrequency();
</script>
</body>
</html>