Help
RSS
API
Feed
Maltego
Contact
Domain > barco-operator.com
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2025-06-16
3.163.80.11
(
ClassC
)
2025-10-07
3.169.173.33
(
ClassC
)
Port 80
HTTP/1.1 301 Moved PermanentlyServer: CloudFrontDate: Tue, 07 Oct 2025 23:52:14 GMTContent-Type: text/htmlContent-Length: 167Connection: keep-aliveLocation: https://barco-operator.com/X-Cache: Redirect from cloudfrontVia: 1.1 c5e1a6561d8dc3977e11160718fc75e8.cloudfront.net (CloudFront)X-Amz-Cf-Pop: HIO52-P4X-Amz-Cf-Id: Z9dG5f-WHLfuAwcLJzDvHNeC80iL4zGzou0hVvVWux5YXFYUN8gLnQ html>head>title>301 Moved Permanently/title>/head>body>center>h1>301 Moved Permanently/h1>/center>hr>center>CloudFront/center>/body>/html>
Port 443
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 34692Connection: keep-aliveDate: Tue, 07 Oct 2025 23:52:15 GMTLast-Modified: Thu, 18 Sep 2025 13:00:57 GMTETag: 5cd96c99ca5c38ff1a4c55e1ed2254e3Server: AmazonS3X-Cache: Miss from cloudfrontVia: 1.1 ebce609a4052492a033f7a3d502d1e3c.cloudfront.net (CloudFront)X-Amz-Cf-Pop: HIO52-P4X-Amz-Cf-Id: niqxnxU-yDity8tY-Xpzp6KDTax7OB9xHYAUP5T2gihimHU1LbAX2A !DOCTYPE html>html langnl>head> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1.0> !-- SEO Optimized Meta Tags for Dutch --> title>Freelance Barco Operator voor jouw evenement: Live content, persoonlijk geregeld./title> meta namedescription contentErvaren Barco Eventmaster S3/E2/E3 operator voor naadloze video- en visuele productie op jouw live evenementen. Specialist in Nederland en wereldwijd.> meta namekeywords contentBarco operator, Barco Eventmaster, S3, E2, E3, live evenementen, video productie, visuele techniek, technische ondersteuning, event support, Nederland, wereldwijd> !-- Hreflang tags for multilingual SEO --> !-- Pointing to itself (Dutch) --> link relalternate hrefhttps://barco-operator.com/index.html hreflangnl-NL /> !-- Pointing to English version --> link relalternate hrefhttps://barco-operator.com/en/index.html hreflangen-GB /> !-- Pointing to German version --> link relalternate hrefhttps://barco-operator.com/de/index.html hreflangde-DE /> !-- x-default for fallback or language selector --> link relalternate hrefhttps://barco-operator.com/index.html hreflangx-default /> link relicon href/images/favicon.ico typeimage/x-icon> link relicon typeimage/png href/images/favicon-32x32.png sizes32x32> link relicon typeimage/png href/images/favicon-16x16.png sizes16x16> link relapple-touch-icon href/images/apple-touch-icon.png> link relicon typeimage/png href/images/android-chrome-512x512.png sizes512x512> link relicon typeimage/png href/images/android-chrome-192x192.png sizes192x192> link relmask-icon href/images/safari-pinned-tab.svg color#5bbad5> link relmanifest href/site.webmanifest> script srchttps://cdn.tailwindcss.com>/script> link hrefhttps://fonts.googleapis.com/css2?familyInter:wght@300;400;500;600;700&displayswap relstylesheet> link relstylesheet hrefhttps://barco-operator.com/style.css> /head>body classantialiased> !-- JSON-LD Schema Markup for FAQ (Dutch) --> script typeapplication/ld+json> { @context: https://schema.org, @type: FAQPage, mainEntity: { @type: Question, name: Wat is precies een Barco Eventmaster S3/E2/E3 operator?, acceptedAnswer: { @type: Answer, text: Een Barco Event Master S3/E2/E3 operator is een specialist in het bedienen van de Barco Event Master software, die de S3, E2 en E3 hardwaremodellen aanstuurt. Deze rol vereist diepgaande kennis van zowel de software als de hardware zelf. De operator beheert complexe video-opstellingen, schakelt tussen videobronnen en presenteert content naadloos op schermen en projecties tijdens evenementen. } }, { @type: Question, name: Werk ik ook buiten Nederland?, acceptedAnswer: { @type: Answer, text: Ja, hoewel ik in Nederland gevestigd ben, is mijn expertise wereldwijd. Ik ben beschikbaar om jouw evenementen overal ter wereld te ondersteunen. } }, { @type: Question, name: Beschik ik over de benodigde documenten voor buitenlandse opdrachten?, acceptedAnswer: { @type: Answer, text: Ja, ik beschik over een A1/(E)101 verklaring, essentieel voor opdrachten buiten Nederland, binnen de EU/EER. Dit verzekert een soepele internationale inzet. } }, { @type: Question, name: Is een Verklaring Omtrent Gedrag (VOG) beschikbaar indien nodig?, acceptedAnswer: { @type: Answer, text: Jazeker. Indien een opdracht een VOG vereist, is het aanvragen en verkrijgen hiervan geen enkel probleem. } }, { @type: Question, name: Hoe ver van tevoren moet ik een operator boeken?, acceptedAnswer: { @type: Answer, text: Ik raad aan om te boeken zodra de data van je evenement zijn bevestigd, vooral voor complexe of meerdaagse projecten. Dit zorgt voor een goede planning en garandeert beschikbaarheid, wat jou de beste kans op gemoedsrust geeft. } }, { @type: Question, name: Welke aanvullende diensten bied ik?, acceptedAnswer: { @type: Answer, text: Naast Barco Eventmaster operator, bied ik all-round ondersteuning voor video, content en presentatie. Mijn expertise omvat jarenlange ervaring in audiovisuele technologie, streaming, design, ICT en evenementen. Dit omvat ook de bediening van diverse andere hardware en software zoals Analog Way, Pixelhue, Roland, Blackmagic, Qlab, Resolume Arena, Dataton Watchout, wat zorgt voor een naadloze live productie. } } } /script> !-- Language Switcher (Top Right) --> div classlang-switcher-top> a href/index.html classlang-btn idlang-nl-top> span roleimg aria-labelNederlandse Vlag>๐ณ๐ฑ/span> /a> a href/en/index.html classlang-btn idlang-en-top> span roleimg aria-labelBritse Vlag>๐ฌ๐ง/span> /a> a href/de/index.html classlang-btn idlang-de-top> span roleimg aria-labelDuitse Vlag>๐ฉ๐ช/span> /a> /div> div classflex justify-center py-8> img srcimages/BARCO_rgb_primarylogo_red.jpg altBarco Logo classh-16 w-auto> /div> section classbg-var(--color-barco-main) text-white py-20 px-4 md:px-8 text-center rounded-b-3xl> div classcontainer mx-auto> h1 classtext-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-4 rounded-lg> Professionele Freelance Barco Operator die jullie show begrijpt /h1> p classtext-lg sm:text-xl lg:text-2xl mb-8 max-w-3xl mx-auto opacity-90 rounded-lg> Je stopt al je energie in het onvergetelijk maken van live evenementen. Maar bij complexe video- en contentsystemen kan zelfs een kleine hapering alles verpesten. Ik help je om keer op keer perfecte visuals, video en presentatie te leveren, zodat jij je kunt richten op het grotere geheel. /p> a href#contact classbtn-primary rounded-full inline-block py-4 px-10>Informeer naar beschikbaarheid & neem contact op/a> /div> /section> !-- Problem Section --> section classpy-16 px-4 md:px-8 bg-gray-50> div classcontainer mx-auto> h2 classsection-heading text-center>De oplossing voor een vlekkeloze productie/h2> div classmax-w-4xl mx-auto text-center text-lg leading-relaxed text-gray-700> p classmb-4>Je hebt het al druk genoeg. Het laatste wat je wilt, is je zorgen maken over de video of je afvragen of je Barco setup vlekkeloos zal presteren. Technische storingen kunnen een perfect evenement snel ontsporen, klanten nerveus maken en jou in de problemen brengen. Een betrouwbare, deskundige Barco operator vinden is een nachtmerrie, en de stress van complexe video-opstellingen hoort niet bij jouw taken. Je kunt je eenvoudigweg geen technische storingen veroorloven./p> p classmb-4>Dat is waar ik in beeld kom. Ik zorg ervoor dat alles wat met beeld en conent te maken heeft op je evenement perfect werkt. Ik heb veel ervaring met het opzetten van complexe videosystemen. Alles ziet er altijd haarscherp en professioneel uit en de techniek werkt vlekkeloos. Met mijn hulp hoef je je geen zorgen te maken over technische problemen. Jij kunt je richten op de inhoud van je evenement en ik zorg ervoor dat de visuele presentatie vlekkeloos verloopt./p> /div> /div> /section> section classpy-16 px-4 md:px-8 bg-white> div classcontainer mx-auto flex flex-col lg:flex-row items-center gap-12> div classlg:w-1/2> h2 classsub-heading>Ervaar het vertrouwen van een werkelijk naadloze show/h2> p classtext-lg leading-relaxed text-gray-700 mb-6> Stel je voor: jouw visuals, video en presentatie in deskundige handen. Ik bied mijn ervaring als Barco a hrefbarco-s3.html>S3/a>, a hrefbarco-e2.html>E2/a>, a hrefbarco-e3.html>E3/a>, operator met diepgaande expertise en a href/barco-console.html target_blank>jarenlange/a> a href/legacy-system.html target_blank>ervaring/a> in audiovisuele technologie en evenementen. /p> p classtext-lg leading-relaxed text-gray-700> Ik ben ervaren in a hrefbarco-eventmaster.html>Barco Eventmaster/a> en combineer klantgerichtheid met een resolute aanpak om jouw evenement storingsvrij te houden. De last van complexe video- en contentoperaties ligt bij mij, voor een zorgeloze live productie. /p> /div> div classlg:w-1/2 flex justify-center> img srcimages/BARCO_rgb_primarylogo_red.jpg altBarco Logo classrounded-xl shadow-xl w-full max-w-md lg:max-w-none h-auto object-cover> /div> /div> /section> section classpy-16 px-4 md:px-8 bg-gray-50> div classcontainer mx-auto> h2 classsection-heading text-center>Hoe ik jouw evenement naar een hoger niveau til/h2> div classgrid md:grid-cols-3 gap-8> div classcard flex flex-col items-center text-center> img srchttps://placehold.co/120x120/FFCCCC/F00000?text1 altIcoon voor vlekkeloze uitvoering evenementen classmb-6 rounded-full p-4 benefit-icon-bg> h3 classfont-bold text-2xl mb-3 benefit-title>Vlekkeloze uitvoering, gegarandeerd/h3> p classtext-gray-600 leading-relaxed> Jouw reputatie vraagt om naadloze video-overgangen, zonder haperingen. Ik integreer perfect en voer elke visuele cue met precisie uit. /p> /div> div classcard flex flex-col items-center text-center> img srchttps://placehold.co/120x120/FFCCCC/F00000?text2 altIcoon voor proactiviteit en probleemoplossing classmb-6 rounded-full p-4 benefit-icon-bg> h3 classfont-bold text-2xl mb-3 benefit-title>Anticipeer en los problemen op voordat ze ontstaan/h3> p classtext-gray-600 leading-relaxed> Mijn diepgaande ervaring betekent dat ik niet alleen reageer, maar anticipeer. Ik identificeer potentiรซle problemen en bied oplossingen voordat ze een verrassing worden. /p> /div> div classcard flex flex-col items-center text-center> img srchttps://placehold.co/120x120/FFCCCC/F00000?text3 altIcoon voor evenement impact classmb-6 rounded-full p-4 benefit-icon-bg> h3 classfont-bold text-2xl mb-3 benefit-title>Verhoog de impact van jouw evenement/h3> p classtext-gray-600 leading-relaxed> Met een deskundige Barco operator zien jouw evenementen er scherper, professioneler en indrukwekkender uit. Lever elke keer een vlekkeloze evenement. /p> /div> /div> /div> /section> section classpy-16 px-4 md:px-8 bg-white> div classcontainer mx-auto> h2 classsection-heading text-center>Mijn eerdere projecten/h2> p classtext-center text-lg text-gray-700 mb-10>Ik heb met trots bijgedragen aan diverse evenementen van de hoogste kwaliteit./p> div classgrid sm:grid-cols-2 lg:grid-cols-3 gap-8> div classcard overflow-hidden> img srcimages/barco_e2_Grootschalige_bedrijfsconferentie.png altAfbeelding van grootschalige bedrijfsconferentie classw-full h-48 object-cover rounded-lg mb-4> h3 classfont-bold text-xl benefit-title mb-2>Grootschalige bedrijfsconferentie/h3> p classtext-gray-600 text-sm>Volledige Barco Eventmaster E2 ondersteuning voor een grootschalige meerdaagse internationale partnerconferentie in Amsterdam, inclusief meerdere schermen, live videofeeds en interactieve visuele elementen./p> /div> div classcard overflow-hidden> img srcimages/barco_e2_sales_event.png altAfbeelding van sales event classw-full h-48 object-cover rounded-lg mb-4> h3 classfont-bold text-xl benefit-title mb-2>Sales Event/h3> p classtext-gray-600 text-sm>Dynamische video-regie en visual content management met Barco E2 voor een Sales Event van een global service provider, waarbij diverse ledschermen, realtime camerabeeld en visuele content werden ingezet./p> /div> div classcard overflow-hidden> img srcimages/barco-e2_Developer_Summit.png altAfbeelding van developer summit classw-full h-48 object-cover rounded-lg mb-4> h3 classfont-bold text-xl benefit-title mb-2>Developer Summit/h3> p classtext-gray-600 text-sm>Barco E2 ondersteuning voor een Developer Summit. De Barco E2 diende als centraal regiesysteem voor de dynamische content. Dit omvatte de aansturing van een custom-size LED-walls, dsms met realtime camerabeelden en alle presentaties naadloos geรฏntegreerd./p> /div> /div> /div> /section>!-- download section --> section> div classbutton-container> a hrefhttps://barco-operator.com/pdf/barco_nl.pdf downloadbarco_nl.pdf classdownload-button> !-- PDF Icon (inline SVG) --> svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 384 512> !-- Font Awesome PDF icon path --> path dM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zm192 0V128H384L256 0zM128 272c0-8.8 7.2-16 16-16H240c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16V272zM128 368c0-8.8 7.2-16 16-16H240c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16V368z/> /svg> Informatiebrochure downloaden /a> /div> /section> section classpy-16 px-4 md:px-8 bg-gray-50> div classcontainer mx-auto> h2 classsection-heading text-center>Vertrouwd door toonaangevende bureaus & leveranciers/h2> div classmt-12 text-center> p classtext-xl text-gray-600 mb-6>Opdrachtgevers / klanten:/p> div classflex flex-wrap justify-center items-center gap-8> img srcimages/logo_auvicom.png altAUVICOM logo classh-10 opacity-75 hover:opacity-100 transition-opacity duration-300> img srcimages/logo_avex.png altAVEX logo classh-10 opacity-75 hover:opacity-100 transition-opacity duration-300> img srcimages/logo_bazelmans.png altBazelmans logo classh-10 opacity-75 hover:opacity-100 transition-opacity duration-300> img srcimages/logo_bourgonje.png altBourgonje logo classh-10 opacity-75 hover:opacity-100 transition-opacity duration-300> img srcimages/logo_ct.png altCreative Technologies logo classh-10 opacity-75 hover:opacity-100 transition-opacity duration-300> /div> /div> /div> /section> !-- Cities Ive Explored Section --> section classpy-16 px-4 md:px-8 bg-gray-100> div classhero-section bg-gray-200 p-6 shadow-xl w-full border border-gray-300> h1 classtext-2xl md:text-2xl font-extrabold text-center mb-6 text-gray-800 drop-shadow-lg> On-Site Event Support: Steden waar ik heb geholpen /h1> div idcities-container classgrid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 lg:gap-6> !-- Inhoud wordt hier dynamisch van JavaScript gegenereerd --> /div> /div> /section> section idcontact classbg-var(--color-barco-main) text-white py-20 px-4 md:px-8 text-center rounded-t-3xl> div classcontainer mx-auto> h2 classtext-3xl md:text-4xl font-bold mb-6>Klaar voor een stressvrij evenement?/h2> p classtext-lg md:text-xl mb-8 max-w-2xl mx-auto opacity-90> Laat technische onzekerheden jouw volgende productie niet overschaduwen. Haal vandaag nog een betrouwbare Barco expert in jouw team. /p> div classflex flex-col items-center justify-center space-y-4 mb-8> img srchttps://desertdog.nl/images/logo/logo_full_white.png altDesertDog logo classh-12 w-auto object-contain> p classtext-lg>E-mail: a hrefmailto:desertdog@desertdog.nl classunderline hover:no-underline>desertdog@desertdog.nl/a>/p> p classtext-lg>Website: a hrefhttps://desertdog.nl target_blank classunderline hover:no-underline>https://desertdog.nl/a>/p> p classtext-lg>Telefoon: 06 - 270 271 75/p> p classtext-lg>Adres: Vechtplantsoen 32-3, 3554TC Utrecht, The Netherlands/p> /div> a hrefmailto:desertdog@desertdog.nl classbtn-primary rounded-full inline-block py-4 px-10>informeer naar beschikbaarheid & neem contact op/a> /div> /section> section classpy-16 px-4 md:px-8 bg-gray-50> div classcontainer mx-auto> h2 classsection-heading>Veelgestelde vragen/h2> div classmax-w-3xl mx-auto> div classfaq-item> h3 classfont-semibold text-xl benefit-title mb-2>V: Wat is precies een Barco Eventmaster S3/E2/E3 operator?/h3> p classtext-gray-600 leading-relaxed>A: Een Barco Event Master S3/E2/E3 operator is een specialist in het bedienen van de Barco Event Master software, die de S3, E2 en E3 hardwaremodellen aanstuurt. Deze rol vereist diepgaande kennis van zowel de software als de hardware zelf. De operator beheert complexe video-opstellingen, schakelt tussen videobronnen en presenteert content naadloos op schermen en projecties tijdens evenementen./p> /div> div classfaq-item> h3 classfont-semibold text-xl benefit-title mb-2>V: Werk ik ook buiten Nederland?/h3> p classtext-gray-600 leading-relaxed>A: Ja, hoewel ik in Nederland gevestigd ben, is mijn expertise wereldwijd. Ik ben beschikbaar om jouw evenementen overal ter wereld te ondersteunen./p> /div> div classfaq-item> h3 classfont-semibold text-xl benefit-title mb-2>V: Beschik ik over de benodigde documenten voor buitenlandse opdrachten?/h3> p classtext-gray-600 leading-relaxed>A: Ja, ik beschik over een A1/(E)101 verklaring, essentieel voor opdrachten buiten Nederland, binnen de EU/EER. Dit verzekert een soepele internationale inzet./p> /div> div classfaq-item> h3 classfont-semibold text-xl benefit-title mb-2>V: Is een Verklaring Omtrent Gedrag (VOG) beschikbaar indien nodig?/h3> p classtext-gray-600 leading-relaxed>A: Jazeker. Indien een opdracht een VOG vereist, is het aanvragen en verkrijgen hiervan geen enkel probleem./p> /div> div classfaq-item> h3 classfont-semibold text-xl benefit-title mb-2>V: Hoe ver van tevoren moet ik een operator boeken?/h3> p classtext-gray-600 leading-relaxed>A: Ik raad aan om te boeken zodra de data van je evenement zijn bevestigd, vooral voor complexe of meerdaagse projecten. Dit zorgt voor een goede planning en garandeert beschikbaarheid, wat jou de beste kans op gemoedsrust geeft./p> /div> div classfaq-item> h3 classfont-semibold text-xl benefit-title mb-2>V: Welke aanvullende diensten bied ik?/h3> p classtext-gray-600 leading-relaxed>A: Naast Barco Eventmaster operator, bied ik all-round ondersteuning voor video, content en presentatie. Mijn expertise omvat jarenlange ervaring in audiovisuele technologie, streaming, design, ICT en evenementen. Dit omvat ook de bediening van diverse andere hardware en software zoals a hrefhttps://analogway-operator.com/ target_blank>Analog Way/a>, a hrefhttps://pixelhue-operator.com/ target_blank>Pixelhue/a>, Roland, Blackmagic, Qlab, Resolume Arena, Dataton Watchout, wat zorgt voor een naadloze live productie./p> /div> /div> /div> /section> !-- Language Menu (Bottom) --> nav classbg-gray-700 py-4 px-4 text-center> div classcontainer mx-auto flex justify-center space-x-6> a href/index.html classtext-white hover:text-var(--color-barco-light-red-bg) font-semibold transition-colors duration-200>Nederlands/a> a href/en/index.html classtext-white hover:text-var(--color-barco-light-red-bg) font-semibold transition-colors duration-200>English/a> a href/de/index.html classtext-white hover:text-var(--color-barco-light-red-bg) font-semibold transition-colors duration-200>Deutsch/a> /div> /nav> footer classbg-gray-800 text-white py-8 px-4 text-center rounded-t-lg> div classcontainer mx-auto> p>DesertDog / Barco Operator. Alle rechten voorbehouden./p> /div> /footer> script> // JavaScript to highlight the active language button in the top switcher document.addEventListener(DOMContentLoaded, function() { const currentPath window.location.pathname; const langButtons document.querySelectorAll(.lang-switcher-top .lang-btn); langButtons.forEach(button > { // Fixed: Use button.pathname directly to avoid Invalid URL error const buttonHref button.pathname; // Determine active language based on the path if (currentPath / && buttonHref /) { button.classList.add(active); // For root (Dutch) } else if (currentPath.startsWith(buttonHref) && buttonHref ! /) { button.classList.add(active); // For /en/ or /de/ } }); }); // Data for cities, sorted alphabetically within each country const citiesData { Netherlands: Amsterdam, Arnhem, Den Haag, Eindhoven, Leeuwarden, Maastricht, Nijmegen, Rotterdam, Utrecht, United States: Chicago, New York, Orlando, France: Lille, Lyon, Paris, United Kingdom: London, Silverstone, Germany: Berlin, Bonn, Dusseldorf, Essen, Hamburg, Spain: Cadiz, Malaga, Marbella, Bulgaria: Burgas, Croatia: Zagreb, Belgium: Antwerp, Brussels, Hasselt, Portugal: Lissabon, Poland: Krakow, Italy: Milan, Greece: Athens }; // Unicode flag emojis for countries const countryFlags { Netherlands: ๐ณ๐ฑ, United States: ๐บ๐ธ, France: ๐ซ๐ท, United Kingdom: ๐ฌ๐ง, Germany: ๐ฉ๐ช, Spain: ๐ช๐ธ, Bulgaria: ๐ง๐ฌ, Croatia: ๐ญ๐ท, Belgium: ๐ง๐ช, Portugal: ๐ต๐น, Poland: ๐ต๐ฑ, Italy: ๐ฎ๐น, Greece: ๐ฌ๐ท }; const citiesContainer document.getElementById(cities-container); let animationFrameId; // For requestAnimationFrame let scrollSpeed 1.0; // Pixels per frame let lastTimestamp 0; // Variables for custom drag-to-scroll functionality let isDragging false; let startPointerY 0; let startScrollTop 0; // Function to handle pointer down event for custom scrolling function handlePointerDown(e) { isDragging true; startPointerY e.clientY; startScrollTop citiesContainer.scrollTop; stopAutoScroll(); // Pause auto-scroll when user starts dragging citiesContainer.style.cursor grabbing; // Change cursor to indicate dragging citiesContainer.setPointerCapture(e.pointerId); // Capture pointer events for smoother drag e.preventDefault(); // Prevent default browser drag behavior (e.g., text selection) } // Function to handle pointer move event for custom scrolling function handlePointerMove(e) { if (!isDragging) return; // Only process if dragging is active const deltaY e.clientY - startPointerY; // Calculate vertical movement citiesContainer.scrollTop startScrollTop - deltaY; // Adjust scroll position e.preventDefault(); // Prevent default browser scrolling } // Function to handle pointer up event for custom scrolling function handlePointerUp(e) { isDragging false; citiesContainer.style.cursor grab; // Reset cursor citiesContainer.releasePointerCapture(e.pointerId); // Release pointer capture // Resume auto-scroll after a short delay to allow for quick taps without immediately restarting scroll setTimeout(startAutoScroll, 500); } // Function to handle pointer leave event (e.g., if mouse leaves element during drag) function handlePointerLeave(e) { if (isDragging) { // If dragging and pointer leaves, stop dragging isDragging false; citiesContainer.style.cursor grab; citiesContainer.releasePointerCapture(e.pointerId); setTimeout(startAutoScroll, 500); } } // Function to start the continuous auto-scroll animation function startAutoScroll() { stopAutoScroll(); // Ensure no multiple animations are running // Only start auto-scroll if the content is actually overflowing if (citiesContainer.scrollHeight > citiesContainer.clientHeight) { const scrollContentWrapper document.getElementById(scroll-content-wrapper); if (scrollContentWrapper) { // Clone the content to create a seamless loop const clonedContent scrollContentWrapper.cloneNode(true); citiesContainer.appendChild(clonedContent); } const animateScroll (timestamp) > { if (!lastTimestamp) lastTimestamp timestamp; const elapsed timestamp - lastTimestamp; if (!isDragging) { // Only auto-scroll if not dragging citiesContainer.scrollTop + scrollSpeed * (elapsed / 16); // Adjust speed based on frame rate // If scrolled to the end of the original content, reset to the top of the cloned content if (citiesContainer.scrollTop > citiesContainer.scrollHeight / 2) { citiesContainer.scrollTop 0; } } lastTimestamp timestamp; animationFrameId requestAnimationFrame(animateScroll); }; animationFrameId requestAnimationFrame(animateScroll); } } // Function to stop the continuous auto-scroll animation function stopAutoScroll() { if (animationFrameId) { cancelAnimationFrame(animationFrameId); animationFrameId null; } lastTimestamp 0; // Reset timestamp } // Function to render the city list function renderCityList() { citiesContainer.innerHTML ; // Clear existing content stopAutoScroll(); // Always stop any active scroll when re-rendering // Convert citiesData object to an array of objects for sorting const sortedCountries Object.keys(citiesData).map(country > ({ name: country, cities: citiesDatacountry })); // Sort countries by the number of cities in descending order sortedCountries.sort((a, b) > b.cities.length - a.cities.length); // Create a temporary container to hold all country divs const tempDiv document.createElement(div); tempDiv.className grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 lg:gap-6; // Iterate over sorted countries and cities to build the HTML structure sortedCountries.forEach(countryObj > { const countryDiv document.createElement(div); countryDiv.className bg-gray-300 p-4 shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-400 rounded-lg; const countryName document.createElement(h2); countryName.className text-xl mb-2 text-gray-700 border-b-2 border-gray-500 pb-1; const flag countryFlagscountryObj.name || ; countryName.innerHTML `${flag} ${countryObj.name}`; countryDiv.appendChild(countryName); const cityList document.createElement(ul); cityList.className space-y-1 text-sm text-gray-600; countryObj.cities.forEach(city > { const cityItem document.createElement(li); cityItem.className flex items-center space-x-2; cityItem.innerHTML ` svg classw-5 h-5 text-gray-500 fillcurrentColor viewBox0 0 20 20> path fill-ruleevenodd dM5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z clip-ruleevenodd>/path> /svg> span>${city}/span> `; cityList.appendChild(cityItem); }); countryDiv.appendChild(cityList); tempDiv.appendChild(countryDiv); // Append to temporary div }); // Check screen width for scrollable content if (window.innerWidth 800) { citiesContainer.classList.add(scrollable-content); // Remove grid classes for small screens, as the content will be in a single column for scrolling citiesContainer.classList.remove(grid, sm:grid-cols-2, md:grid-cols-3, lg:grid-cols-4, xl:grid-cols-5, 2xl:grid-cols-6); citiesContainer.classList.add(grid-cols-1); // Ensure its a single column for the scrollable effect const scrollContentWrapper document.createElement(div); scrollContentWrapper.id scroll-content-wrapper; scrollContentWrapper.className scroll-animation-container; // Append all country divs from the temporary div to the scrollContentWrapper while (tempDiv.firstChild) { scrollContentWrapper.appendChild(tempDiv.firstChild); } citiesContainer.appendChild(scrollContentWrapper); // Start auto-scroll after content is rendered startAutoScroll(); // Add event listeners for custom drag-to-scroll citiesContainer.addEventListener(pointerdown, handlePointerDown); citiesContainer.addEventListener(pointermove, handlePointerMove); citiesContainer.addEventListener(pointerup, handlePointerUp); citiesContainer.addEventListener(pointerleave, handlePointerLeave); } else { // For larger screens, remove scrollable-content class and add grid classes citiesContainer.classList.remove(scrollable-content); citiesContainer.classList.add(grid, sm:grid-cols-2, md:grid-cols-3, lg:grid-cols-4, xl:grid-cols-5, 2xl:grid-cols-6); citiesContainer.classList.remove(grid-cols-1); // Remove single column class // Append all country divs from the temporary div directly to the citiesContainer while (tempDiv.firstChild) { citiesContainer.appendChild(tempDiv.firstChild); } // Remove event listeners if they were added for smaller screens citiesContainer.removeEventListener(pointerdown, handlePointerDown); citiesContainer.removeEventListener(pointermove, handlePointerMove); citiesContainer.removeEventListener(pointerup, handlePointerUp); citiesContainer.removeEventListener(pointerleave, handlePointerLeave); } } // Initial render on DOMContentLoaded document.addEventListener(DOMContentLoaded, renderCityList); // Re-render on window resize to adjust for responsiveness window.addEventListener(resize, renderCityList); /script>/body>/html>๏ฟฝ
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]