willdot.net / at-advent
forked from pds.dad/at-advent
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

spin on drop styles instead of useful things

phil a2b424e5 528b801c

+57 -40
+57 -40
shared/challenges_markdown/three/part_two.md
··· 11 11 any valid DID will do for the commit, and the signature won't be checked 12 12 13 13 <form id="car-upload" method="post" action="/day/3/upload-car" enctype="multipart/form-data"> 14 - <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;"> 15 - <p id="drop-label" style="display: flex; align-items: center; gap: 0.75rem; margin: 0; opacity: 0.667"> 14 + <div id="drop-zone" style="border-radius: 0.5rem; padding: 1.25rem 1.5rem; text-align: center; cursor: pointer; max-width: 28rem;"> 15 + <p id="drop-label" style="display: flex; align-items: center; gap: 0.75rem; margin: 0"> 16 16 Drop your car off here <small style="opacity: 0.667">(or click to browse)</small> 17 17 </p> 18 18 <div id="drop-file-name" class="hidden" style="font-family: monospace; font-size: 0.875rem;"></div> ··· 24 24 25 25 <script> 26 26 (function() { 27 - const form = document.getElementById('car-upload'); 28 - const zone = document.getElementById('drop-zone'); 29 - const input = document.getElementById('car-input'); 30 - const label = document.getElementById('drop-label'); 31 - const fileName = document.getElementById('drop-file-name'); 27 + const form = document.getElementById('car-upload'); 28 + const zone = document.getElementById('drop-zone'); 29 + const input = document.getElementById('car-input'); 30 + const label = document.getElementById('drop-label'); 31 + const fileName = document.getElementById('drop-file-name'); 32 32 33 - function trySubmit(file) { 34 - if (file.size > 2 * Math.pow(2, 20)) { 35 - alert('Are sending a car or a damn truck??? (max 2MB)'); 36 - return; 37 - } 38 - input.files = file instanceof FileList ? file : new DataTransfer().files; 39 - if (!(input.files && input.files[0])) { 40 - // DataTransfer trick didn't work, set via the drop path 41 - } 42 - label.classList.add('hidden'); 43 - fileName.classList.remove('hidden'); 44 - fileName.textContent = 'Uploading ' + file.name + '...'; 45 - form.submit(); 33 + function trySubmit(file) { 34 + if (file.size > 2 * Math.pow(2, 20)) { 35 + alert('Are sending a car or a damn truck??? (max 2MB)'); 36 + return; 37 + } 38 + input.files = file instanceof FileList ? file : new DataTransfer().files; 39 + if (!(input.files && input.files[0])) { 40 + // DataTransfer trick didn't work, set via the drop path 46 41 } 42 + label.classList.add('hidden'); 43 + fileName.classList.remove('hidden'); 44 + fileName.textContent = 'Uploading ' + file.name + '...'; 45 + form.submit(); 46 + } 47 47 48 - zone.addEventListener('click', function() { input.click(); }); 48 + zone.addEventListener('click', function() { input.click(); }); 49 49 50 - input.addEventListener('change', function() { 51 - if (input.files[0]) trySubmit(input.files[0]); 52 - }); 50 + input.addEventListener('change', function() { 51 + if (input.files[0]) trySubmit(input.files[0]); 52 + }); 53 53 54 - zone.addEventListener('dragover', function(e) { 55 - e.preventDefault(); 56 - zone.style.borderColor = 'oklch(0.6 0.2 260)'; 57 - }); 54 + zone.addEventListener('dragover', function(e) { 55 + e.preventDefault(); 56 + zone.classList.add('dragging'); 57 + }); 58 58 59 - zone.addEventListener('dragleave', function() { 60 - zone.style.borderColor = 'oklch(0.7 0 0)'; 61 - }); 59 + zone.addEventListener('dragleave', function() { 60 + zone.classList.remove('dragging'); 61 + }); 62 62 63 - zone.addEventListener('drop', function(e) { 64 - e.preventDefault(); 65 - zone.style.borderColor = 'oklch(0.7 0 0)'; 66 - var file = e.dataTransfer.files[0]; 67 - if (file) { 68 - input.files = e.dataTransfer.files; 69 - trySubmit(file); 70 - } 71 - }); 63 + zone.addEventListener('drop', function(e) { 64 + e.preventDefault(); 65 + zone.style.borderColor = 'oklch(0.7 0 0)'; 66 + var file = e.dataTransfer.files[0]; 67 + if (file) { 68 + input.files = e.dataTransfer.files; 69 + trySubmit(file); 70 + } 71 + }); 72 72 })(); 73 73 </script> 74 + <style> 75 + #drop-zone { 76 + border: 1px dashed oklch(0.7 0 0); 77 + } 78 + #drop-zone.dragging, 79 + #drop-zone:hover { 80 + background: hsla(0, 0%, 50%, 0.333); 81 + border-color: #22c55e; 82 + } 83 + #drop-label { 84 + opacity: 0.667; 85 + } 86 + #drop-zone.dragging #drop-label 87 + #drop-zone:hover #drop-label { 88 + opacity: 1; 89 + } 90 + </style>