Brutalism_Music_Audio_Form

<div class="min-h-screen bg-[#FFF0F5] dark:bg-[#1A001A] p-4 sm:p-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#0FFF00] bg-[#FFC0CB] dark:bg-[#4B0082] p-6 sm:p-10 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-24 h-24 bg-[#00FFFF] dark:bg-[#FFD700] transform -translate-x-12 -translate-y-12 rotate-45 border-4 border-black dark:border-white"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-[#FF1493] dark:bg-[#00BFFF] transform translate-x-16 translate-y-16 -rotate-30 border-4 border-black dark:border-white"></div>

    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-black dark:text-white mb-4 sm:mb-6 leading-tight select-none uppercase tracking-wide border-b-4 border-black dark:border-white pb-2">
      <span class="block transform -rotate-2 inline-block bg-[#00FFFF] dark:bg-[#FFD700] px-3 py-1 mr-2">AUDIO</span> UPLOAD
    </h1>
    <p class="text-lg sm:text-xl text-black dark:text-white mb-8 select-none font-bold italic ">
      Unleash your sound, now on our platform. Brutally simple. Sweetly effective.
    </p>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
      <div class="mb-4 col-span-full md:col-span-1">
        <label for="song-title" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Song / Track Title
        </label>
        <input type="text" id="song-title" name="song-title" placeholder="e.g., 'Synthwave Dreamscape'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
      </div>

      <div class="mb-4 col-span-full md:col-span-1">
        <label for="artist-name" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Artist / Band Name
        </label>
        <input type="text" id="artist-name" name="artist-name" placeholder="e.g., 'Neon Echoes'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
      </div>

      <div class="mb-4 col-span-full">
        <label for="genre" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Genre
        </label>
        <select id="genre" name="genre" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 text-lg sm:text-xl font-mono appearance-none pr-8 bg-no-repeat bg-[length:24px_24px] bg-[right_1rem_center] bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')] dark:bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')]" style="background-image:
          url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');">
          <option value="">Select a genre...</option>
          <option value="electronic">Electronic</option>
          <option value="rock">Rock</option>
          <option value="hip-hop">Hip-Hop</option>
          <option value="pop">Pop</option>
          <option value="classical">Classical</option>
          <option value="jazz">Jazz</option>
          <option value="ambient">Ambient</option>
          <option value="synthwave">Synthwave</option>
          <option value="vaporwave">Vaporwave</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div class="mb-4 col-span-full">
        <label for="description" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Track Description\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(Max 500 chars)</span>
        </label>
        <textarea id="description" name="description" rows="5" maxlength="500" placeholder="Tell us about your track: its mood, inspiration, or how it was made..." class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono resize-y"></textarea>
      </div>

      <div class="mb-4 col-span-full">
        <label for="album-art" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Album Art\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(PNG, JPG, max 5MB)</span>
        </label>
        <div class="flex flex-col sm:flex-row items-center gap-4">
          <input type="file" id="album-art" name="album-art" accept="image/png, image/jpeg" class="hidden" onchange="document.getElementById('album-art-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
          <label for="album-art" class="inline-block px-6 py-3 sm:py-4 bg-[#FFD700] dark:bg-[#50C878] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] hover:shadow-[6px_6px_0_0_#FF1493] dark:hover:shadow-[6px_6px_0_0_#00BFFF] hover:bg-[#FFC0CB] dark:hover:bg-[#4B0082] transition-all duration-200 select-none">
            Choose File
          </label>
          <span id="album-art-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
        </div>
      </div>

      <div class="mb-4 col-span-full">
        <label for="audio-file" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Audio File\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(MP3, WAV, max 50MB)</span>
        </label>
        <div class="flex flex-col sm:flex-row items-center gap-4">
          <input type="file" id="audio-file" name="audio-file" accept="audio/mpeg, audio/wav" class="hidden" onchange="document.getElementById('audio-file-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
          <label for="audio-file" class="inline-block px-6 py-3 sm:py-4 bg-[#00FFFF] dark:bg-[#FFD700] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#9D00FC] dark:shadow-[4px_4px_0_0_#0FFF00] hover:shadow-[6px_6px_0_0_#9D00FC] dark:hover:shadow-[6px_6px_0_0_#0FFF00] hover:bg-[#A3EAAA] dark:hover:bg-[#2F4F4F] transition-all duration-200 select-none">
            Upload Audio
          </label>
          <span id="audio-file-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
        </div>
      </div>

      <div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <input type="checkbox" id="explicit" name="explicit" class="hidden peer">
        <label for="explicit" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#A3EAAA] dark:bg-[#2F4F4F] shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] cursor-pointer peer-checked:bg-[#FF1493] dark:peer-checked:bg-[#00BFFF] transition-all duration-200 overflow-hidden">
          <span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
        </label>
        <label for="explicit" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
          Contains Explicit Content
        </label>
      </div>

      <div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <input type="checkbox" id="terms" name="terms" class="hidden peer">
        <label for="terms" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#FFD700] dark:bg-[#50C878] shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] cursor-pointer peer-checked:bg-[#9D00FC] dark:peer-checked:bg-[#0FFF00] transition-all duration-200 overflow-hidden">
          <span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
        </label>
        <label for="terms" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
          I agree to the <a href="#" class="underline font-extrabold text-[#FF1493] dark:text-[#00BFFF] hover:text-[#9D00FC] dark:hover:text-[#0FFF00] transition-colors duration-200">Terms of Service</a>
        </label>
      </div>

      <div class="col-span-full mt-4 sm:mt-6">
        <button type="submit" class="w-full px-8 py-4 bg-[#FF69B4] dark:bg-[#00FFFF] text-black dark:text-white text-2xl sm:text-3xl font-extrabold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#FFD700] hover:shadow-[12px_12px_0_0_#9D00FC] dark:hover:shadow-[12px_12px_0_0_#FFD700] hover:bg-[#FF1493] dark:hover:bg-[#00BFFF] transition-all duration-200 cursor-pointer active:translate-x-1 active:translate-y-1 active:shadow-[4px_4px_0_0_black] dark:active:shadow-[4px_4px_0_0_white] select-none">
          SUBMIT MY SOUND
        </button>
      </div>
    </form>
  </div>
</div>