Cyber Slider added

index.html

@@ -46,6 +46,11 @@
                         <label for="misskey">Misskey API</label>
                         <input type="radio" id="pleroma" name="backend" value="pleroma" autocomplete="off">
                         <label for="pleroma">Pleroma API</label>
+                    </div>
+                    <div class="slider-container">
+    <label for="countSlider">Cyber Score:</label>
+    <input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1">
+    <span id="sliderValueDisplay">250</span>
 </div>
                     <button type="submit" id="generateButton">⟨ Generate ⟩</button>
                 </form>
@@ -70,6 +75,9 @@
         </section>
         <section class="faq-section">
             <h3>Frequently Asked Questions</h3>
+            <p><strong>Q:</strong> What does Cyber Score mean?</p>
+            <p><strong>A:</strong> The higher you set the value, the more your Fediverse conversations are examined to determine with which users you interact the most. Imagine it as if you would like to view the last 7 days, the last 14 days, the last 30 days. Note that the higher the value you enter, the longer it takes for your Cyber Circle to be generated.
+            <hr>
             <p><strong>Q:</strong> Why is a Cyberpunk figure displayed instead of a profile picture?</p>
             <p><strong>A:</strong> If a user's profile picture cannot be loaded, a placeholder image (in this case, a Cyberpunk figure) is displayed. This is done to provide a visual substitute in case the original image is unavailable due to loading errors or missing image URLs.</p>
             <hr>
@@ -100,5 +108,7 @@
     <script src="js/create-circle.js"></script>
     <script src="js/image.js"></script>
     <script src="js/url.js"></script>
+    <script src="js/slider.js"></script>
+<script>initializeSlider();</script>
 </body>
 </html>