From a2b424e5af183238a22f63c39d87d9fb0ca35e27 Mon Sep 17 00:00:00 2001
From: phil <uniphil@gmail.com>
Date: Sun, 22 Mar 2026 20:31:23 -0400
Subject: [PATCH] spin on drop styles instead of useful things

---
 shared/challenges_markdown/three/part_two.md | 97 ++++++++++++--------
 1 file changed, 57 insertions(+), 40 deletions(-)

diff --git a/shared/challenges_markdown/three/part_two.md b/shared/challenges_markdown/three/part_two.md
index 34b1150..ca32ac0 100644
--- a/shared/challenges_markdown/three/part_two.md
+++ b/shared/challenges_markdown/three/part_two.md
@@ -11,8 +11,8 @@ the inspection will check for:
 any valid DID will do for the commit, and the signature won't be checked
 
 <form id="car-upload" method="post" action="/day/3/upload-car" enctype="multipart/form-data">
-  <div id="drop-zone" style="border: 1px dashed oklch(0.7 0 0); border-radius: 0.5rem; padding: 1.25rem 1.5rem; text-align: center; cursor: pointer; max-width: 28rem;">
-    <p id="drop-label" style="display: flex; align-items: center; gap: 0.75rem; margin: 0; opacity: 0.667">
+  <div id="drop-zone" style="border-radius: 0.5rem; padding: 1.25rem 1.5rem; text-align: center; cursor: pointer; max-width: 28rem;">
+    <p id="drop-label" style="display: flex; align-items: center; gap: 0.75rem; margin: 0">
       Drop your car off here <small style="opacity: 0.667">(or click to browse)</small>
     </p>
     <div id="drop-file-name" class="hidden" style="font-family: monospace; font-size: 0.875rem;"></div>
@@ -24,50 +24,67 @@ TODO: remove the "check answer" button
 
 <script>
 (function() {
-    const form = document.getElementById('car-upload');
-    const zone = document.getElementById('drop-zone');
-    const input = document.getElementById('car-input');
-    const label = document.getElementById('drop-label');
-    const fileName = document.getElementById('drop-file-name');
+  const form = document.getElementById('car-upload');
+  const zone = document.getElementById('drop-zone');
+  const input = document.getElementById('car-input');
+  const label = document.getElementById('drop-label');
+  const fileName = document.getElementById('drop-file-name');
 
-    function trySubmit(file) {
-        if (file.size > 2 * Math.pow(2, 20)) {
-            alert('Are sending a car or a damn truck??? (max 2MB)');
-            return;
-        }
-        input.files = file instanceof FileList ? file : new DataTransfer().files;
-        if (!(input.files && input.files[0])) {
-            // DataTransfer trick didn't work, set via the drop path
-        }
-        label.classList.add('hidden');
-        fileName.classList.remove('hidden');
-        fileName.textContent = 'Uploading ' + file.name + '...';
-        form.submit();
+  function trySubmit(file) {
+    if (file.size > 2 * Math.pow(2, 20)) {
+      alert('Are sending a car or a damn truck??? (max 2MB)');
+      return;
     }
+    input.files = file instanceof FileList ? file : new DataTransfer().files;
+    if (!(input.files && input.files[0])) {
+      // DataTransfer trick didn't work, set via the drop path
+    }
+    label.classList.add('hidden');
+    fileName.classList.remove('hidden');
+    fileName.textContent = 'Uploading ' + file.name + '...';
+    form.submit();
+  }
 
-    zone.addEventListener('click', function() { input.click(); });
+  zone.addEventListener('click', function() { input.click(); });
 
-    input.addEventListener('change', function() {
-        if (input.files[0]) trySubmit(input.files[0]);
-    });
+  input.addEventListener('change', function() {
+    if (input.files[0]) trySubmit(input.files[0]);
+  });
 
-    zone.addEventListener('dragover', function(e) {
-        e.preventDefault();
-        zone.style.borderColor = 'oklch(0.6 0.2 260)';
-    });
+  zone.addEventListener('dragover', function(e) {
+    e.preventDefault();
+    zone.classList.add('dragging');
+  });
 
-    zone.addEventListener('dragleave', function() {
-        zone.style.borderColor = 'oklch(0.7 0 0)';
-    });
+  zone.addEventListener('dragleave', function() {
+    zone.classList.remove('dragging');
+  });
 
-    zone.addEventListener('drop', function(e) {
-        e.preventDefault();
-        zone.style.borderColor = 'oklch(0.7 0 0)';
-        var file = e.dataTransfer.files[0];
-        if (file) {
-            input.files = e.dataTransfer.files;
-            trySubmit(file);
-        }
-    });
+  zone.addEventListener('drop', function(e) {
+    e.preventDefault();
+    zone.style.borderColor = 'oklch(0.7 0 0)';
+    var file = e.dataTransfer.files[0];
+    if (file) {
+      input.files = e.dataTransfer.files;
+      trySubmit(file);
+    }
+  });
 })();
 </script>
+<style>
+#drop-zone {
+  border: 1px dashed oklch(0.7 0 0);
+}
+#drop-zone.dragging,
+#drop-zone:hover {
+  background: hsla(0, 0%, 50%, 0.333);
+  border-color: #22c55e;
+}
+#drop-label {
+  opacity: 0.667;
+}
+#drop-zone.dragging #drop-label
+#drop-zone:hover #drop-label {
+  opacity: 1;
+}
+</style>
-- 
2.51.2