please use this for an advertising spot between swipes. or every 3 swipes or soemthing

script.js

@@ -1,6 +1,6 @@
 
 class RabbitHole {
-constructor() {
+    constructor() {
         this.titleEl = document.getElementById('title');
         this.extractEl = document.getElementById('extract');
         this.metaEl = document.getElementById('meta');
@@ -16,6 +16,7 @@ constructor() {
         this.currentIndex = -1;
         this.user = null;
         this.insights = [];
+        this.swipeCount = 0;
         this.analytics = {
             totalArticles: 0,
             totalTime: 0,
@@ -25,8 +26,7 @@ constructor() {
 
         this.init();
     }
-
-    init() {
+init() {
         this.createParticles();
         this.bindEvents();
         this.animateEntrance();
@@ -72,10 +72,15 @@ createParticles() {
                 return;
             }
             if (!this.started) return;
-
-            if (dx > 60) this.fetchLinkedArticle();
-            if (dx < -60) this.fetchRandomArticle();
-        });
+            if (dx > 60) {
+                this.swipeCount++;
+                this.fetchLinkedArticle();
+            }
+            if (dx < -60) {
+                this.swipeCount++;
+                this.fetchRandomArticle();
+            }
+});
 
         // Keyboard navigation
         document.addEventListener('keydown', e => {
@@ -104,6 +109,11 @@ createParticles() {
     }
     async fetchRandomArticle() {
         try {
+            // Check if we should show ad
+            if (this.swipeCount > 0 && this.swipeCount % 3 === 0) {
+                await this.showAdvertisement();
+            }
+            
             this.setLoading(true);
             this.clearError();
             this.showRabbitAnimation();
@@ -126,6 +136,11 @@ createParticles() {
         if (!this.outgoingLinks.length) return this.fetchRandomArticle();
         const next = this.outgoingLinks[Math.floor(Math.random() * this.outgoingLinks.length)];
         try {
+            // Check if we should show ad
+            if (this.swipeCount > 0 && this.swipeCount % 3 === 0) {
+                await this.showAdvertisement();
+            }
+            
             this.setLoading(true);
             this.clearError();
             this.showRabbitAnimation();
@@ -267,16 +282,21 @@ startExperience() {
             video.currentTime = 0;
         }, 2500); // Extended from 1000ms to 2500ms
     }
-handleArrowRight() {
+    handleArrowRight() {
         if (!this.started) this.startExperience();
-        else this.fetchLinkedArticle();
+        else {
+            this.swipeCount++;
+            this.fetchLinkedArticle();
+        }
     }
 
     handleArrowLeft() {
-        if (this.started) this.fetchRandomArticle();
+        if (this.started) {
+            this.swipeCount++;
+            this.fetchRandomArticle();
+        }
     }
-
-    shareExperience() {
+shareExperience() {
         if (navigator.share) {
             navigator.share({
                 title: 'QuantumRabbitHole Explorer',
@@ -338,7 +358,47 @@ handleArrowRight() {
             }
         }
     }
-    setContentBackground(page) {
+
+    async showAdvertisement() {
+        return new Promise((resolve) => {
+            const adOverlay = document.createElement('div');
+            adOverlay.className = 'ad-overlay';
+            adOverlay.innerHTML = `
+                <div class="ad-content">
+                    <div class="ad-header">
+                        <span class="ad-badge">Sponsored</span>
+                        <button class="ad-close">&times;</button>
+                    </div>
+                    <div class="ad-body">
+                        <img src="https://static.photos/technology/320x240/42" alt="Advertisement" class="ad-image">
+                        <h3 class="ad-title">Discover More with Quantum Explorer</h3>
+                        <p class="ad-description">Unlock premium features and ad-free experience with our Pro plan!</p>
+                        <button class="ad-cta">Learn More</button>
+                    </div>
+                </div>
+            `;
+            
+            document.body.appendChild(adOverlay);
+            
+            const closeAd = () => {
+                adOverlay.classList.add('fade-out');
+                setTimeout(() => {
+                    document.body.removeChild(adOverlay);
+                    resolve();
+                }, 300);
+            };
+            
+            adOverlay.querySelector('.ad-close').addEventListener('click', closeAd);
+            adOverlay.querySelector('.ad-cta').addEventListener('click', () => {
+                window.open('https://example.com/pro-plan', '_blank');
+                closeAd();
+            });
+            
+            // Auto-close after 5 seconds
+            setTimeout(closeAd, 5000);
+        });
+    }
+setContentBackground(page) {
         const text = page.extract?.toLowerCase() || '';
         const card = document.getElementById('card');
         

style.css

@@ -483,6 +483,116 @@ user-profile {
 history-modal {
   display: none;
 }
+
+/* Advertisement overlay styles */
+.ad-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(14, 15, 17, 0.95);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  animation: fadeIn 0.3s ease;
+}
+
+.ad-content {
+  background: #1a1c20;
+  border: 2px solid var(--rabbithole-accent);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 0 40px var(--rabbithole-glow);
+}
+
+.ad-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.ad-badge {
+  background: var(--rabbithole-accent);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.ad-close {
+  background: none;
+  border: none;
+  color: var(--rabbithole-muted);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ad-close:hover {
+  color: var(--rabbithole-fg);
+}
+
+.ad-body {
+  text-align: center;
+}
+
+.ad-image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.ad-title {
+  color: var(--rabbithole-fg);
+  margin: 0 0 0.5rem 0;
+  font-size: 1.2rem;
+}
+
+.ad-description {
+  color: var(--rabbithole-muted);
+  margin: 0 0 1.5rem 0;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.ad-cta {
+  background: linear-gradient(135deg, var(--rabbithole-accent), var(--rabbithole-accent2));
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: 2rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s var(--rabbithole-easing);
+  width: 100%;
+}
+
+.ad-cta:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 20px var(--rabbithole-glow);
+}
+
+.fade-out {
+  animation: fadeOut 0.3s ease forwards;
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
 /* Loading states */
 .loading {
   opacity: 0.8;