Spaces:

ewebspace
/

nsfw

Running

App Files Files Community

yasirme commited on Aug 17, 2025

Commit

114d59d

verified ·

1 Parent(s): df84dbc

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -7

index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!doctype html>
 <html lang="en">
 <head>
@@ -46,8 +45,7 @@
     })(document);
     smartlook('init', 'aa9463be7bcf3461cd111de8ed0dc6ede653881c', { region: 'eu' });
   </script>
-  <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-3KV5X49N3B"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
@@ -219,16 +217,87 @@
     .muted { color:#9b9b9b; font-size:13px; }
     .row { display:flex; gap:10px; align-items:center; }
     .note { font-size:13px; color:#cfcfcf; margin-top:6px; }
   </style>
 </head>
 <body>
   <div class="topbar" role="banner">
     <div class="btn-small" onclick="window.open('https://discord.gg/QjyD579HSn') ">Discord</div>
-    <div class="btn-small" onclick="window.open('https://www.instagram.com/yasir.me2008/')" style="cursor: pointer;">
-  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" alt="Instagram" style="width: 20px; height: 20px;">Instagram
-</div>
     <a class="btn-small" href="https://buymeacoffee.com/xyaiman" target="_blank" rel="noopener">
       <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="coffee">
@@ -314,11 +383,33 @@
       </div>
     </div>
   </div>
 <script>
   const baseUrl = 'https://image.pollinations.ai';
   let selectedStyle = null;
   let isGenerating = false;
   const styleTemplates = {
   cinema: " Shot in native IMAX 65mm and ARRI ALEXA LF with anamorphic lenses, color graded in HDR10/Dolby Vision, mastered in 4K DCI, utilizing dynamic lighting, practical effects, deep depth of field, authentic set design, golden hour cinematography, and multi-cam Steadicam, drone, and gimbal setups for immersive wide-to-intimate shots",
   realistic: " real life intricate footage scene captured photo",
@@ -561,6 +652,72 @@ GOAL: Generate prompts that produce realistic, natural-looking images by exploit
   const imagesContainer = document.getElementById('images');
   const generateBtn = document.getElementById('generateBtn');
   function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
   async function generateImage() {
     if (isGenerating) return;
     const rawPrompt = promptEl.value.trim();
@@ -620,6 +777,15 @@ GOAL: Generate prompts that produce realistic, natural-looking images by exploit
       const blob = await res.blob();
       const imgUrl = URL.createObjectURL(blob);
       card.innerHTML = `<img src="${imgUrl}" alt="generated image">`;
     } catch (err) {
       console.error(err);
       card.innerHTML = `<div class="muted" style="color:#ff6b6b;">Error generating image</div>`;

 <!doctype html>
 <html lang="en">
 <head>
     })(document);
     smartlook('init', 'aa9463be7bcf3461cd111de8ed0dc6ede653881c', { region: 'eu' });
   </script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-3KV5X49N3B"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
     .muted { color:#9b9b9b; font-size:13px; }
     .row { display:flex; gap:10px; align-items:center; }
     .note { font-size:13px; color:#cfcfcf; margin-top:6px; }
+    /* New styles for feedback popup */
+    #feedbackPopup {
+        position: fixed;
+        right: -300px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 280px;
+        padding: 20px;
+        background: #0f0f0f;
+        border-radius: 12px;
+        box-shadow: 0 8px 30px rgba(0,0,0,0.4);
+        border: 1px solid rgba(255,255,255,0.05);
+        z-index: 1500;
+        transition: right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+    #feedbackPopup.show {
+        right: 20px;
+    }
+    #feedbackPopup h3 {
+        margin: 0 0 10px 0;
+        font-size: 18px;
+    }
+    #feedbackPopup p {
+        font-size: 14px;
+        color: #b0b0b0;
+        margin: 0 0 15px 0;
+    }
+    .rating-stars {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 15px;
+    }
+    .rating-stars .fa-star {
+        font-size: 24px;
+        color: #333;
+        cursor: pointer;
+        transition: color 0.2s;
+    }
+    .rating-stars .fa-star.filled {
+        color: #ffc107;
+    }
+    #feedbackMessage {
+        width: 100%;
+        height: 80px;
+        background: #0c0c0c;
+        border: 1px solid rgba(255,255,255,0.04);
+        color: #fff;
+        padding: 10px;
+        border-radius: 8px;
+        resize: vertical;
+        font-family: 'Poppins', sans-serif;
+        font-size: 14px;
+        outline: none;
+    }
+    #feedbackActions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        margin-top: 15px;
+    }
+    #feedbackActions button {
+        background: #1a1a1a;
+        border-radius: 8px;
+        padding: 8px 14px;
+        font-size: 14px;
+        color: #fff;
+        border: 1px solid rgba(255,255,255,0.03);
+        cursor: pointer;
+    }
+    #feedbackActions #submitFeedbackBtn {
+        background: linear-gradient(90deg,#ff93e9,#9b7cff);
+        border: none;
+    }
   </style>
 </head>
 <body>
   <div class="topbar" role="banner">
     <div class="btn-small" onclick="window.open('https://discord.gg/QjyD579HSn') ">Discord</div>
     <a class="btn-small" href="https://buymeacoffee.com/xyaiman" target="_blank" rel="noopener">
       <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="coffee">
       </div>
     </div>
   </div>
+  <div id="feedbackPopup" class="popup">
+    <h3 style="color:#ff93e9;">Rate XimgGen</h3>
+    <p>How would you rate the quality of the generated images?</p>
+    <div class="rating-stars" id="ratingStars">
+        <i class="fa-solid fa-star" data-rating="1"></i>
+        <i class="fa-solid fa-star" data-rating="2"></i>
+        <i class="fa-solid fa-star" data-rating="3"></i>
+        <i class="fa-solid fa-star" data-rating="4"></i>
+        <i class="fa-solid fa-star" data-rating="5"></i>
+    </div>
+    <textarea id="feedbackMessage" placeholder="Optional message..."></textarea>
+    <div id="feedbackActions">
+        <button id="submitFeedbackBtn">Submit</button>
+    </div>
+  </div>
 <script>
   const baseUrl = 'https://image.pollinations.ai';
   let selectedStyle = null;
   let isGenerating = false;
+  let generationCount = 0;
+  let selectedRating = 0;
+  let feedbackSubmitted = false;
+  const FORM_SPREE_ENDPOINT = 'https://formspree.io/f/xgvzqeed';
   const styleTemplates = {
   cinema: " Shot in native IMAX 65mm and ARRI ALEXA LF with anamorphic lenses, color graded in HDR10/Dolby Vision, mastered in 4K DCI, utilizing dynamic lighting, practical effects, deep depth of field, authentic set design, golden hour cinematography, and multi-cam Steadicam, drone, and gimbal setups for immersive wide-to-intimate shots",
   realistic: " real life intricate footage scene captured photo",
   const imagesContainer = document.getElementById('images');
   const generateBtn = document.getElementById('generateBtn');
   function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
+  // New functions for feedback popup
+  const feedbackPopup = document.getElementById('feedbackPopup');
+  const ratingStars = document.getElementById('ratingStars');
+  const feedbackMessage = document.getElementById('feedbackMessage');
+  function showFeedbackPopup() {
+      feedbackPopup.classList.add('show');
+  }
+  function resetRating() {
+      selectedRating = 0;
+      document.querySelectorAll('.rating-stars .fa-star').forEach(star => {
+          star.classList.remove('filled');
+      });
+  }
+  async function submitFeedback() {
+      if (selectedRating === 0) {
+          alert("Please select a rating from 1 to 5.");
+          return;
+      }
+      const formData = {
+          rating: selectedRating,
+          message: feedbackMessage.value.trim() || 'No message provided.'
+      };
+      try {
+          await fetch(FORM_SPREE_ENDPOINT, {
+              method: 'POST',
+              headers: {
+                  'Content-Type': 'application/json',
+                  'Accept': 'application/json'
+              },
+              body: JSON.stringify(formData)
+          });
+          alert('Thank you for your feedback!');
+          feedbackPopup.classList.remove('show');
+          feedbackSubmitted = true;
+          feedbackMessage.value = '';
+          resetRating();
+      } catch (error) {
+          console.error('Error submitting feedback:', error);
+          alert('Failed to submit feedback. Please try again later.');
+      }
+  }
+  ratingStars.addEventListener('click', (e) => {
+      const clickedStar = e.target.closest('.fa-star');
+      if (clickedStar) {
+          selectedRating = parseInt(clickedStar.dataset.rating, 10);
+          document.querySelectorAll('.rating-stars .fa-star').forEach(star => {
+              if (parseInt(star.dataset.rating, 10) <= selectedRating) {
+                  star.classList.add('filled');
+              } else {
+                  star.classList.remove('filled');
+              }
+          });
+      }
+  });
+  document.getElementById('submitFeedbackBtn').addEventListener('click', submitFeedback);
   async function generateImage() {
     if (isGenerating) return;
     const rawPrompt = promptEl.value.trim();
       const blob = await res.blob();
       const imgUrl = URL.createObjectURL(blob);
       card.innerHTML = `<img src="${imgUrl}" alt="generated image">`;
+      // Increment generation count and show popup if threshold is met
+      if (!feedbackSubmitted) {
+          generationCount++;
+          if (generationCount >= 3) {
+              showFeedbackPopup();
+          }
+      }
     } catch (err) {
       console.error(err);
       card.innerHTML = `<div class="muted" style="color:#ff6b6b;">Error generating image</div>`;