Drop Zone

<!-- Drop Zone — toggle .is-over on dragenter / off on dragleave/drop -->
<div class="nuda-drop">
  <svg class="nuda-drop__icon" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="1.6"
       stroke-linecap="round" stroke-linejoin="round">
    <path d="M14 3 L14 8 L19 8" />
    <path d="M14 3 L7 3 A 2 2 0 0 0 5 5 L5 19 A 2 2 0 0 0 7 21 L17 21 A 2 2 0 0 0 19 19 L19 8 Z" />
    <path d="M9 14 L12 11 L15 14" />
    <path d="M12 11 L12 17" />
  </svg>
  <p class="nuda-drop__text">Drop files here</p>
  <span class="nuda-drop__hint">or click to browse</span>
  <input type="file" multiple hidden />
</div>

/* Drop Zone
   Dashed area with bobbing icon; turns accent on hover or .is-over (drag-enter).
   Customize: --drop-accent, --drop-bg */

.nuda-drop {
  --drop-accent: #e4ff54;
  --drop-bg: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  padding: 24px;
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: var(--drop-bg);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.nuda-drop:hover,
.nuda-drop.is-over {
  border-color: var(--drop-accent);
  background: rgba(228, 255, 84, 0.04);
}

.nuda-drop__icon {
  width: 32px;
  height: 32px;
  color: #a1a1aa;
  animation: nuda-drop-bob 2.4s ease-in-out infinite;
  transition: color 0.25s;
}

.nuda-drop:hover .nuda-drop__icon,
.nuda-drop.is-over .nuda-drop__icon { color: var(--drop-accent); }

.nuda-drop__text {
  font: 600 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  margin: 0;
}

.nuda-drop__hint {
  font: 500 0.7rem ui-sans-serif, system-ui, sans-serif;
  color: #63636e;
}

@keyframes nuda-drop-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-drop__icon { animation: none; }
}

/* Drop Zone — wires up native drag events + click-to-browse. */

(function () {
  var zone = document.querySelector('.nuda-drop');
  if (!zone) return;
  var input = zone.querySelector('input[type="file"]');

  ['dragenter', 'dragover'].forEach(function (ev) {
    zone.addEventListener(ev, function (e) {
      e.preventDefault();
      zone.classList.add('is-over');
    });
  });
  ['dragleave', 'drop'].forEach(function (ev) {
    zone.addEventListener(ev, function (e) {
      e.preventDefault();
      zone.classList.remove('is-over');
    });
  });

  zone.addEventListener('drop', function (e) {
    handle(e.dataTransfer.files);
  });
  zone.addEventListener('click', function () { input && input.click(); });
  input && input.addEventListener('change', function () { handle(input.files); });

  function handle(files) {
    // Replace with your upload logic.
    console.log('files:', files);
  }
})();