Val Town Code SearchReturn to Val Town

9ability to munge an arbitrary event webpage → structured data → Notion db.
10
11![seq6.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a3ae2e63-e781-4d81-835b-42ae1ba30700/public)
12
13[(source)](https://mermaid.live/edit#pako:eNplkt1um0AQRl9lNFetAm4cjKGoddWfqGqkJpFi9aLiZg1jTMPukN2hbmr53bsbnLSN2Qt24TtzZgQ7rLgmLNDR3UCmok-taqzSpQF_fWC-1crediTxYnHyTXWw5K0p4PP5El69G2z39o1jTUA_yQhsadWrhhYj_JgO5EVrlKdIQDYEnoOKjQRGOQiG2gdHLERjz8R_bV8PgSdozXZUHpuuejLvv3jX9TJOY6MMw7aVDbh7J6Sht6x7gZNDx_-rR_aZ3IkdKhks1VArUfDi4ubqEnj1Y6wrrXQUhZGi8N5vSaqXx31dsrTsy7XGkRV_E4bz0IODejXGx8gzvSU3dMdz_pPouDmkwNd0d10rVBqMsLFtjYVvnyLUZLUKR9yFWiX676CpxMJva1qr4MDS7D3WK_OdWT-Slodmg8Vadc6fhj4MefhJnp5aMjXZjzwYwWI2faiBxQ5_YTGdzydJliZJOsv9Ss7yCO-xyLNJPpumZ8k8y7PXp_l8H-HvB-vpJM_S_R_n7te3)

147     */
148    generateBasicAd(ad) {
149        if (!ad.imageUrl && !ad.clickUrl && !ad.title) return '';
150
151        const wrapperStart = ad.clickUrl ? 
166                    <div class="text-center">
167                        ${ad.title ? `<h3 class="text-xl font-semibold text-gray-800 mb-4">${ad.title}</h3>` : ''}
168                        ${ad.imageUrl ? `
169                            <div class="mb-4">
170                                <img src="${ad.imageUrl}" 
171                                     alt="${ad.title || 'Advertisement'}" 
172                                     class="max-w-full h-48 object-contain mx-auto rounded-lg shadow-sm"
405                <div class="text-center">
406                    \${ad.title ? \`<h3 class="text-xl font-semibold text-gray-800 mb-4">\${ad.title}</h3>\` : ''}
407                    \${ad.imageUrl ? \`
408                        <div class="mb-4">
409                            <img src="\${ad.imageUrl}" 
410                                 alt="\${ad.title || 'Advertisement'}" 
411                                 class="max-w-full h-48 object-contain mx-auto rounded-lg shadow-sm"

165                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
166                                <div>
167                                    <label class="block text-xs font-medium text-gray-700 mb-1">Image URL</label>
168                                    <input type="url" name="adImageUrl_1" class="ad-image-input w-full px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-purple-500"
169                                           placeholder="https://example.com/ad.jpg">
170                                </div>
344                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
345                    <div>
346                        <label class="block text-xs font-medium text-gray-700 mb-1">Image URL</label>
347                        <input type="url" name="adImageUrl_${slotNumber}" class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-purple-500" placeholder="https://example.com/ad.jpg">
348                    </div>
349                    <div>
404            document.querySelectorAll('.ad-slot').forEach(slot => {
405                const slotNumber = slot.dataset.slot;
406                const imageUrl = formData.get(`adImageUrl_${slotNumber}`);
407                const clickUrl = formData.get(`adClickUrl_${slotNumber}`);
408                const title = formData.get(`adTitle_${slotNumber}`);
409                const weight = parseInt(formData.get(`adWeight_${slotNumber}`)) || 5;
410                
411                if (imageUrl || clickUrl || title) {
412                    adSlots.push({
413                        id: `ad_${slotNumber}`,
414                        imageUrl, clickUrl, title, weight, slotNumber
415                    });
416                }

97                    <div class="space-y-3">
98                        <div>
99                            <label for="adImageUrl" class="block text-sm font-medium text-gray-700 mb-1">
100                                Advertisement Image URL
101                            </label>
102                            <input type="url" id="adImageUrl" name="adImageUrl" 
103                                   placeholder="https://example.com/ad-banner.jpg"
104                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
231            const subNiche = formData.get('subNiche');
232            const customSubNiche = formData.get('customSubNiche');
233            const adImageUrl = formData.get('adImageUrl');
234            const adClickUrl = formData.get('adClickUrl');
235            const adTitle = formData.get('adTitle');
244                subNiche: finalSubNiche,
245                advertisement: {
246                    imageUrl: adImageUrl,
247                    clickUrl: adClickUrl,
248                    title: adTitle

9- **One analysis per session** - refresh page for new analysis
10- **Basic niche selection** with 15+ categories and sub-niches
11- **Single advertisement slot** with image, URL, and title
12- **Professional layout** with video results display
13- **Full 10 video analysis** - we're generous! 😄

94                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
95                            <div>
96                                <label for="adImageUrl" class="block text-sm font-medium text-gray-700 mb-2">
97                                    Advertisement Image URL
98                                </label>
99                                <input type="url" id="adImageUrl" name="adImageUrl" 
100                                       placeholder="https://example.com/ad-banner.jpg"
101                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
338            const subNiche = formData.get('subNiche');
339            const customSubNiche = formData.get('customSubNiche');
340            const adImageUrl = formData.get('adImageUrl');
341            const adClickUrl = formData.get('adClickUrl');
342            const adTitle = formData.get('adTitle');
349                    <p><strong>Main Niche:</strong> ${nicheText}</p>
350                    ${finalSubNiche ? `<p><strong>Sub-Niche:</strong> ${finalSubNiche}</p>` : ''}
351                    ${adImageUrl || adClickUrl || adTitle ? `<p><strong>Advertisement:</strong> Basic ad configured</p>` : ''}
352                </div>
353            `;
354            
355            results.classList.remove('hidden');
356            showVideoResults(nicheText, finalSubNiche, { imageUrl: adImageUrl, clickUrl: adClickUrl, title: adTitle });
357            
358            // Mark free analysis as used
553            const advertisementContent = document.getElementById('advertisementContent');
554            
555            if (adConfig.imageUrl || adConfig.clickUrl || adConfig.title) {
556                let adHtml = '';
557                
566                }
567                
568                if (adConfig.imageUrl) {
569                    adHtml += `
570                        <div class="mb-4">
571                            <img src="${adConfig.imageUrl}" 
572                                 alt="${adConfig.title || 'Advertisement'}" 
573                                 class="max-w-full h-48 object-contain mx-auto rounded-lg shadow-sm"
574                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
575                            <div style="display:none;" class="text-gray-500 text-sm mt-2">
576                                ⚠️ Advertisement image failed to load
577                            </div>
578                        </div>

190                                <div>
191                                    <label class="block text-sm font-medium text-gray-700 mb-2">
192                                        Advertisement Image URL
193                                    </label>
194                                    <input type="url" name="adImageUrl_1" class="ad-image-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
195                                           placeholder="https://example.com/ad-banner.jpg">
196                                </div>
508            document.querySelectorAll('.ad-slot').forEach(slot => {
509                const slotNumber = slot.dataset.slot;
510                const imageUrl = formData.get(`adImageUrl_${slotNumber}`);
511                const clickUrl = formData.get(`adClickUrl_${slotNumber}`);
512                const title = formData.get(`adTitle_${slotNumber}`);
513                const weight = parseInt(formData.get(`adWeight_${slotNumber}`)) || 5;
514                
515                if (imageUrl || clickUrl || title) {
516                    adSlots.push({
517                        id: `ad_${slotNumber}`,
518                        imageUrl,
519                        clickUrl,
520                        title,

29- **Responsive Design** for all devices
30- **Interactive Elements** with hover effects
31- **Error Handling** for failed images/URLs
32
33## 🚀 Deployment
591. **Add Multiple Ads**: Use "Add Another Ad Slot" (up to 5)
602. **Configure Each Ad**:
61   - Image URL (banner/display image)
62   - Click URL (landing page)
63   - Title (headline text)
71- **Analytics Dashboard**: Monitor performance in real-time
72- **Click Tracking**: Automatic click and impression tracking
73- **Error Handling**: Graceful fallbacks for broken images
74- **Responsive Layout**: Works on desktop, tablet, and mobile
75
93
94**Banner Ad:**
95- Image: `https://example.com/banner.jpg`
96- Click: `https://yoursite.com/special-offer`
97- Title: `"Learn Advanced Techniques - 50% Off!"`

117                            
118                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
119                                <!-- Ad Image URL -->
120                                <div>
121                                    <label class="block text-sm font-medium text-gray-700 mb-2">
122                                        Advertisement Image URL
123                                    </label>
124                                    <input type="url" name="adImageUrl_1" class="ad-image-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
125                                           placeholder="https://example.com/ad-banner.jpg">
126                                </div>
462                    <div>
463                        <label class="block text-sm font-medium text-gray-700 mb-2">
464                            Advertisement Image URL
465                        </label>
466                        <input type="url" name="adImageUrl_${slotNumber}" class="ad-image-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
467                               placeholder="https://example.com/ad-banner.jpg">
468                    </div>
503        // Attach event listeners to ad slot
504        function attachAdSlotListeners(slotElement) {
505            const imageInput = slotElement.querySelector('.ad-image-input');
506            const clickInput = slotElement.querySelector('.ad-click-input');
507            const titleInput = slotElement.querySelector('.ad-title-input');
513                const previewContent = slotElement.querySelector('.ad-preview-content');
514                
515                const imageUrl = imageInput.value.trim();
516                const clickUrl = clickInput.value.trim();
517                const title = titleInput.value.trim();
518
519                if (imageUrl || clickUrl || title) {
520                    preview.classList.remove('hidden');
521                    
522                    let previewHtml = '<div class="text-center">';
523                    if (title) previewHtml += `<h4 class="font-semibold text-gray-800 mb-2">${title}</h4>`;
524                    if (imageUrl) {
525                        previewHtml += `<img src="${imageUrl}" alt="Advertisement" class="max-w-full h-32 object-contain mx-auto mb-2 rounded" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">`;
526                        previewHtml += `<div style="display:none;" class="text-gray-500 text-sm">⚠️ Image failed to load</div>`;
527                    }
528                    if (clickUrl) previewHtml += `<p class="text-sm text-blue-600 mt-2">🔗 ${clickUrl}</p>`;
535            }
536
537            imageInput.addEventListener('input', updateSlotPreview);
538            clickInput.addEventListener('input', updateSlotPreview);
539            titleInput.addEventListener('input', updateSlotPreview);
631            document.querySelectorAll('.ad-slot').forEach(slot => {
632                const slotNumber = slot.dataset.slot;
633                const imageUrl = formData.get(`adImageUrl_${slotNumber}`);
634                const clickUrl = formData.get(`adClickUrl_${slotNumber}`);
635                const title = formData.get(`adTitle_${slotNumber}`);
636                const weight = parseInt(formData.get(`adWeight_${slotNumber}`)) || 5;
637                
638                if (imageUrl || clickUrl || title) {
639                    adSlots.push({
640                        id: `ad_${slotNumber}`,
641                        imageUrl,
642                        clickUrl,
643                        title,
918            }
919            
920            // Add image if provided
921            if (ad.imageUrl) {
922                adHtml += `
923                    <div class="mb-4">
924                        <img src="${ad.imageUrl}" 
925                             alt="${ad.title || 'Advertisement'}" 
926                             class="max-w-full h-48 object-contain mx-auto rounded-lg shadow-sm"
927                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
928                        <div style="display:none;" class="text-gray-500 text-sm mt-2">
929                            ⚠️ Advertisement image failed to load
930                        </div>
931                    </div>
933            }
934            
935            // Add click URL display if provided (and not just image)
936            if (ad.clickUrl && !ad.imageUrl) {
937                adHtml += `
938                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">

276  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
277  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
278  gl.texImage2D(
279    gl.TEXTURE_2D, 0, gl.R8,
280    numBars, 1, 0,
307      gl.activeTexture(gl.TEXTURE0);
308      gl.bindTexture(gl.TEXTURE_2D, audioTex);
309      gl.texSubImage2D(
310        gl.TEXTURE_2D, 0, 0, 0, numBars, 1,
311        gl.RED, gl.UNSIGNED_BYTE, fftBuffer