{"id":66,"date":"2026-03-15T22:28:47","date_gmt":"2026-03-15T20:28:47","guid":{"rendered":"https:\/\/goudkop.learskool.co.za\/index.php\/photo-drop\/"},"modified":"2026-03-15T22:48:36","modified_gmt":"2026-03-15T20:48:36","slug":"photo-drop","status":"publish","type":"page","link":"https:\/\/goudkop.learskool.co.za\/index.php\/photo-drop\/","title":{"rendered":"Photo Drop"},"content":{"rendered":"\n<style>\n.gk-drop-zone{border:3px dashed #1B5E20;border-radius:12px;padding:60px 20px;text-align:center;background:#fff;cursor:pointer;transition:all .3s;margin-bottom:20px;max-width:800px;margin-left:auto;margin-right:auto}\n.gk-drop-zone:hover,.gk-drop-zone.dragover{background:#E8F5E9;border-color:#FFD700;transform:scale(1.01)}\n.gk-drop-icon{font-size:4rem;display:block;margin-bottom:15px}\n.gk-drop-zone h2{color:#1B5E20;font-size:1.4rem;margin-bottom:10px}\n.gk-drop-zone p{color:#666}\n.gk-browse-btn{display:inline-block;margin-top:15px;padding:10px 25px;background:#FFD700;color:#1B5E20;border:none;border-radius:5px;font-weight:600;font-size:1rem;cursor:pointer}\n.gk-browse-btn:hover{background:#C7A600}\n.gk-info{background:#E8F5E9;border-left:4px solid #1B5E20;padding:15px 20px;border-radius:0 8px 8px 0;margin-bottom:30px;line-height:1.6;max-width:800px;margin-left:auto;margin-right:auto}\n#gk-file-input{display:none}\n.gk-upload-list{list-style:none;padding:0;margin:20px auto 0;max-width:800px}\n.gk-upload-item{background:#fff;border-radius:8px;padding:12px 18px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 4px rgba(0,0,0,.08);flex-wrap:wrap;gap:5px}\n.gk-file-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}\n.gk-file-name{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.gk-file-size{color:#999;font-size:.8rem;white-space:nowrap}\n.gk-status{font-size:.85rem;padding:3px 10px;border-radius:12px;white-space:nowrap}\n.gk-status.pending{background:#FFF3E0;color:#E65100}\n.gk-status.uploading{background:#E3F2FD;color:#1565C0}\n.gk-status.done{background:#E8F5E9;color:#2E7D32}\n.gk-status.error{background:#FFEBEE;color:#C62828}\n.gk-progress{width:100%;height:4px;background:#eee;border-radius:2px;margin-top:6px;overflow:hidden}\n.gk-progress .fill{height:100%;background:#1B5E20;border-radius:2px;transition:width .3s;width:0}\n.gk-upload-btn{display:none;width:100%;max-width:800px;padding:14px;background:#1B5E20;color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;margin:20px auto 0}\n.gk-upload-btn:hover{background:#2E7D32}\n.gk-upload-btn:disabled{background:#999;cursor:not-allowed}\n.gk-upload-btn.show{display:block}\n<\/style>\n\n<div class=\"gk-info\">\n<strong>Hoe werk dit?<\/strong> Sleep jou foto's en video's hierin, of klik om te blaai. Die skool se admin sal die inhoud nagaan en later publiseer.<br>\n<strong>How does it work?<\/strong> Drag your photos and videos here, or click to browse. The school admin will review and publish the content later.<br><br>\n<em>Aanvaarde formate \/ Accepted formats: JPG, PNG, GIF, WEBP, HEIC, MP4, MOV, AVI (maks\/max 100MB)<\/em>\n<\/div>\n\n<div class=\"gk-drop-zone\" id=\"gk-drop-zone\">\n<span class=\"gk-drop-icon\">&#128247;<\/span>\n<h2>Sleep foto's &amp; video's hierin \/ Drop photos &amp; videos here<\/h2>\n<p>of \/ or<\/p>\n<button class=\"gk-browse-btn\" type=\"button\" onclick=\"document.getElementById('gk-file-input').click()\">Blaai na L&ecirc;ers \/ Browse Files<\/button>\n<input type=\"file\" id=\"gk-file-input\" multiple accept=\"image\/*,video\/*\">\n<\/div>\n\n<ul class=\"gk-upload-list\" id=\"gk-upload-list\"><\/ul>\n<button class=\"gk-upload-btn\" id=\"gk-upload-btn\" type=\"button\">Laai Alles Op \/ Upload All<\/button>\n\n<script>\n(function(){\nvar dz=document.getElementById(\"gk-drop-zone\"),fi=document.getElementById(\"gk-file-input\"),\nul=document.getElementById(\"gk-upload-list\"),btn=document.getElementById(\"gk-upload-btn\"),\nfiles=[],ajaxUrl=\"\/wp-admin\/admin-ajax.php\";\n[\"dragenter\",\"dragover\"].forEach(function(e){dz.addEventListener(e,function(ev){ev.preventDefault();dz.classList.add(\"dragover\")})});\n[\"dragleave\",\"drop\"].forEach(function(e){dz.addEventListener(e,function(ev){ev.preventDefault();dz.classList.remove(\"dragover\")})});\ndz.addEventListener(\"drop\",function(e){addFiles(Array.from(e.dataTransfer.files))});\nfi.addEventListener(\"change\",function(){addFiles(Array.from(fi.files));fi.value=\"\"});\nfunction fmtSize(b){if(b<1024)return b+\" B\";if(b<1048576)return(b\/1024).toFixed(1)+\" KB\";return(b\/1048576).toFixed(1)+\" MB\"}\nfunction addFiles(list){\nlist.forEach(function(f){\nvar id=\"gkf-\"+Date.now()+\"-\"+Math.random().toString(36).substr(2,5);\nfiles.push({id:id,file:f,status:\"pending\"});\nvar li=document.createElement(\"li\");li.className=\"gk-upload-item\";li.id=id;\nli.innerHTML='<div class=\"gk-file-info\"><span class=\"gk-file-name\">'+f.name+'<\/span><span class=\"gk-file-size\">'+fmtSize(f.size)+'<\/span><\/div><span class=\"gk-status pending\">Gereed<\/span>';\nul.appendChild(li);\n});\nif(files.length>0)btn.classList.add(\"show\");\n}\nbtn.addEventListener(\"click\",function(){\nbtn.disabled=true;btn.textContent=\"Besig om op te laai...\";\nvar pending=files.filter(function(f){return f.status===\"pending\"}),done=0;\npending.forEach(function(item){\nvar li=document.getElementById(item.id),st=li.querySelector(\".gk-status\");\nst.className=\"gk-status uploading\";st.textContent=\"Besig...\";\nvar pb=document.createElement(\"div\");pb.className=\"gk-progress\";pb.innerHTML='<div class=\"fill\"><\/div>';li.appendChild(pb);\nvar fd=new FormData();fd.append(\"action\",\"gk_photo_drop_upload\");fd.append(\"file\",item.file);\nvar xhr=new XMLHttpRequest();xhr.open(\"POST\",ajaxUrl,true);\nxhr.upload.onprogress=function(e){if(e.lengthComputable)pb.querySelector(\".fill\").style.width=Math.round(e.loaded\/e.total*100)+\"%\"};\nxhr.onload=function(){\ndone++;\ntry{var r=JSON.parse(xhr.responseText);if(r.success){st.className=\"gk-status done\";st.textContent=\"Klaar!\";item.status=\"done\"}else{st.className=\"gk-status error\";st.textContent=r.data||\"Fout\";item.status=\"error\"}}\ncatch(e){st.className=\"gk-status error\";st.textContent=\"Fout\";item.status=\"error\"}\npb.querySelector(\".fill\").style.width=\"100%\";chk(done,pending.length);\n};\nxhr.onerror=function(){done++;st.className=\"gk-status error\";st.textContent=\"Netwerk fout\";item.status=\"error\";chk(done,pending.length)};\nxhr.send(fd);\n});\n});\nfunction chk(c,t){\nif(c>=t){\nvar errs=files.filter(function(f){return f.status===\"error\"}).length;\nbtn.disabled=false;\nif(errs>0){btn.textContent=files.filter(function(f){return f.status===\"done\"}).length+\" opgelaai, \"+errs+\" foute\"}\nelse{btn.textContent=\"Alles opgelaai!\";btn.style.background=\"#2E7D32\";\nsetTimeout(function(){btn.textContent=\"Laai Meer Op \/ Upload More\";btn.style.background=\"\";files=files.filter(function(f){return f.status!==\"done\"});if(!files.length)btn.classList.remove(\"show\")},3000);\n}\n}\n}\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Hoe werk dit? Sleep jou foto&#8217;s en video&#8217;s hierin, of klik om te blaai. Die skool se admin sal die inhoud nagaan en later publiseer. How does it work? Drag your photos and videos here, or click to browse. The school admin will review and publish the content later. Aanvaarde formate \/ Accepted formats: JPG, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":""},"class_list":["post-66","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/pages\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":2,"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/pages\/66\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/pages\/66\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/goudkop.learskool.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}