Brutalist_Weather_Search_Box

<div class="p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen bg-gray-100 dark:bg-zinc-950 flex items-start justify-center font-mono">
  <div class="w-full max-w-4xl border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-900 shadow-[10px_10px_0_0_#1a202c] dark:shadow-[10px_10px_0_0_#a3e635] p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold text-black dark:text-lime-400 uppercase tracking-tighter mb-6 leading-none border-b-4 border-black dark:border-lime-400 pb-2">
      Climate Query Interface <span class="text-red-600 dark:text-orange-500">_V1.0</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-10">
      <div class="flex flex-col space-y-4">
        <label for="location-input" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase">
          LOCALE: <span class="text-red-600 dark:text-orange-500">WHERE?</span>
        </label>
        <input type="text" id="location-input" placeholder="e.g., Tokyo, Japan, New York City, or Latitude,Longitude" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-yellow-300 dark:bg-zinc-800 text-black dark:text-white placeholder:text-gray-700 dark:placeholder:text-gray-400 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635] tracking-wide">

        <label for="date-range-start" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase mt-4">
          PERIOD: <span class="text-red-600 dark:text-orange-500">WHEN?</span>
        </label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <input type="date" id="date-range-start" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-fuchsia-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
          <input type="date" id="date-range-end" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-fuchsia-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
        </div>
      </div>

      <div class="flex flex-col space-y-4">
        <label for="data-type" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase">
          METRIC: <span class="text-red-600 dark:text-orange-500">WHAT?</span>
        </label>
        <select id="data-type" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-cyan-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
          <option value="temperature" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Temperature (Avg/Max/Min)</option>
          <option value="precipitation" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Precipitation (mm/in)</option>
          <option value="humidity" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Humidity (%)</option>
          <option value="wind-speed" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Wind Speed (kph/mph)</option>
          <option value="uv-index" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">UV Index</option>
          <option value="pressure" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Atmospheric Pressure (hPa)</option>
          <option value="air-quality" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Air Quality (AQI)</option>
        </select>

        <label for="output-format" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase mt-4">
          FORMAT: <span class="text-red-600 dark:text-orange-500">HOW?</span>
        </label>
        <div class="flex flex-wrap gap-4">
          <label class="inline-flex items-center group">
            <input type="radio" name="output-format" value="graph" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150">
            <span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Graph</span>
          </label>
          <label class="inline-flex items-center group">
            <input type="radio" name="output-format" value="table" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150" checked>
            <span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Table</span>
          </label>
          <label class="inline-flex items-center group">
            <input type="radio" name="output-format" value="raw" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150">
            <span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Raw JSON</span>
          </label>
        </div>
      </div>
    </div>

    <button class="mt-8 w-full p-4 sm:p-5 md:p-6 bg-red-600 dark:bg-orange-500 text-white dark:text-black font-extrabold text-xl sm:text-2xl md:text-3xl lg:text-4xl uppercase border-4 border-black dark:border-lime-400 shadow-[6px_6px_0_0_#1a202c] dark:shadow-[6px_6px_0_0_#a3e635] hover:shadow-[0_0_0_0] hover:translate-x-2 hover:translate-y-2 transition-all duration-150 ease-out active:scale-95 tracking-tight">
      EXECUTE CLIMATE QUERY
      <span class="ml-2 text-yellow-300 dark:text-lime-200">// GO!</span>
    </button>

    <div class="mt-8 border-t-4 border-black dark:border-lime-400 pt-4 text-center">
      <p class="text-sm text-gray-700 dark:text-gray-300 font-bold uppercase">
        <span class="text-red-600 dark:text-orange-500">WARNING:</span> Data may contain anomalies. Trust at your own risk. // System v7.8a
      </p>
    </div>
  </div>
</div>