diff --git a/index.html b/index.html
index da24828..c847fe8 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,14 @@
+<!-- this code is written by @biisal tg:biisal-files  -->
+<!-- stealing credit doesn't make you developer..so try to give full credit to the developer 😊 u will not loose anything for giving proper credit.instead  -->
+
+
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
 <head>
-    <title>M3U8 Player</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{file_name}}</title>
     <link rel="stylesheet" href="https://unpkg.com/sheryjs/dist/Shery.css" />
     <link rel="stylesheet" href="https://aeditx03.github.io/resources/StreamCSS.css">
     <link rel="stylesheet" href="https://aeditx03.github.io/resources/playerCss.css">
@@ -12,242 +18,179 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <style>
-    
-        body, html {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            font-family: Arial, sans-serif;
-            position: relative;
-            color: #fff;
-        }
-
-        body::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image: url('https://graph.org/file/fa19fd5568315383e978e.jpg');
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position: center;
-            filter: blur(1px);
-            z-index: -1;
-        }
-
-        .header {
-            padding: 20px;
-            text-align: center;
-            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
-            animation: fadeIn 1s ease;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
-            margin-bottom: 20px; /* Added */
-        }
-        .header h1 {
-            margin: 0;
-            font-size: 36px;
-            font-weight: 700;
-            letter-spacing: 2px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-            animation: shadowPulse 2s infinite alternate;
-        }
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
-        }
-        @keyframes shadowPulse {
-            from {
-                text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.5); 
-            }
-            to {
-                text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.7); 
-            }
-        }
-        .container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: calc(100% - 200px); 
-            animation: slideInUp 1s ease;
-        }
-        .video-container {
-            position: relative;
-            width: 90%;
-            max-width: 800px;
-            height: 50%;
-            overflow: hidden;
-            border-radius: 10px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
-        }
-        #my-video {
-            width: 100%;
-            height: 100%;
-        }
-        p {
-            margin-top: 20px;
-            font-size: 18px;
-            font-weight: 300;
-            letter-spacing: 1px;
-            animation: fadeIn 1s ease;
-        }
-        .search-container input[type=text] {
-            padding: 10px;
-            border-radius: 5px;
-            border: none;
-            outline: none;
-            width: 300px;
-            margin-bottom: 10px;
-        }
-        .search-container button {
-            padding: 10px 20px;
-            background-color: #ff0000; /* Changed to red */
-            border: none;
-            border-radius: 5px;
-            color: #fff;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
-        .search-container button:hover {
-            background-color: rgba(255, 64, 129, 1);
-        }
-        .button-row {
-            display: flex;
-            justify-content: center;
-            margin-bottom: 10px; /* Adjust spacing between rows */
-        }
-        .custom-button {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            background-color: #ff0000; /* Changed to red */
-            color: white;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            transition-duration: 0.4s;
-            cursor: pointer;
-        }
-
-        .custom-button:hover {
-            background-color: #cc0000; /* Darker red */
-            color: white;
-        }
-        footer {
-            bottom: 0;
-            width: 100%;
-            text-align: center;
-            background: transparent;
-            padding: 10px 0;
-        }
-                    color: #fff;
-        }
- .text {
-            text-align: center;
-            font-size: 13px;
-            color: #fff;
-        }
-    
-    </style>
+    <script src="https://cdn.tailwindcss.com"></script>
+
 </head>
+<!-- this code is written by @biisal tg:biisal-files  -->
+<!-- stealing credit doesn't make you developer..so try to give full credit to the developer 😊 u will not loose anything for giving proper credit.instead  -->
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"></script>
 <body>
-<div class="header">
-    <h2>M3U8 Player<h2>
-</div>
-<div class="container">
-    <div class="video-container">
-        <video id='my-video' controls>
-            <source id="video-source" title='Video' type='video/mp4' />
-        </video>
-    </div>
-    <p>Enjoy AdFree Content!</p><p>
-    <div class="search-container">
-        <input type="text" id="videoUrlInput" placeholder="Enter M3U8 Video URL Here">
-        
-        <button onclick="searchVideo()">Search</button>
-    </div>
-</div>
-<div class="text" style="text-align: center;">
-    <h3>Our All <span>Telegram Channels</span>  List</h3>
-    <div class="button-row">
-        <a class="magnet" href="https://t.me/MaximXAnime">
-            <button class="custom-button">Anime</button>
-        </a>
-        <a class="magnet" href="https://t.me/MaximXSticker">
-            <button class="custom-button">Stickers</button>
-        </a>
-        <a class="magnet" href="https://t.me/MaximXWallpaper">
-            <button class="custom-button">Wallpaper</button>
-        </a>
-    </div>
-</div>
-
-<div class="text" style="text-align: center;">
-    <p style="font-weight: 500;">
-        Welcome To Our Online Streaming Platform! Please Note That We Are Not Responsible For The Content Shared Or
-        Streamed Through Our Service. Users Are Encouraged To Respect Copyright Laws And Adhere To Our
-        Community Guidelines. Enjoy Easy, Hassle-Free File Streaming Service.
-    </p>
-</div>
-
-
-<footer>
-    <div class="copyright ">
-        <h5 class="text-center">This Page Is Designed By <a href="https://t.me/Shineii86" style="text-decoration: none;"><span style="font-weight: bold; color: red; text-shadow:1px 1px 1px black;">Shinei Nouzen</span></a></h5>
-
-        <div class="icons">
-            <a href="https://github.com/Shineii86" style="text-decoration: none;"><i class="fa-brands fa-github fa-lg"></i></a>
-            <a href="https://t.me/Shineii86" style="text-decoration: none;"><i class="fa-brands fa-telegram fa-lg"></i></a>
-            <a href="https://www.pinterest.com/ikx7a" style="text-decoration: none;"><i class="fa-brands fa-pinterest fa-lg"></i></a>
-            <a href="https://youtube.com/@ikx7a?si=o-w59oWeUM0EM7fa" style="text-decoration: none;"><i class="fa-brands fa-youtube fa-lg"></i></a>
-            <a href="https://www.instagram.com/ikx7.a" style="text-decoration: none;"><i class="fa-brands fa-instagram fa-lg"></i></a>
+    <nav>
+        <div class="nleft">
+            <a href="https://t.me/lucy_filter_bot">
+                <!-- if u are trying to change the header name please remove the title text from bottom line  -->
+                <h4 id="heading" style="z-index: 100;" class="magnet">𝐋ᴜᴄʏ</h4>
+            </a>
+        </div>
+        <div class="nryt">
+            <a class="home-btn magnet" href="#main" onclick="toggleWidthnav(this)">ʜᴏᴍᴇ</a>
+
+            <a href="#sec1" class="about-btn magnet" onclick="toggleWidthnav(this)">ᴀʙᴏᴜᴛ</a>
         </div>
-    </div>
-    <div class="copyright ">
-        <h4 class="text-center">Copyright © 2024 <a href="https://t.me/QuinxNetwork" style="text-decoration: none;"><span style="font-weight: bold; color: red; text-shadow: 1px 1px 1px black;">Quinx</span></a>, All Rights Reserved.</h4>
-    </div>
-</footer>
+    </nav>
+    <center>
+        <div class="about-nav">
+            <a href="#sec1" class="wlcm magnet" onclick="toggleWidth(this)">ᴡᴇʟᴄᴏᴍᴇ</a>
+            <a href="#sec2" class="abt-chnl magnet" onclick="toggleWidth(this)">ᴄʜᴀɴɴᴇʟs</a>
+            <a href="#sec3" class="magnet bot-btn" onclick="toggleWidth(this) , bot_btn_clicked()">ʙᴏᴛs</a>
+            <a href="#sec4" class="magnet contact-btn" onclick="toggleWidth(this)">ʟᴇᴛ's ᴛᴀʟᴋ</a>
+        </div>
+    </center>
+    <!-- this code is written by @biisal tg:biisal-files  -->
+    <!-- stealing credit doesn't make you developer..so try to give full credit to the developer 😊 u will not loose anything for giving proper credit.instead  -->
+
+    <div class="outer">
+        <div class="inner">
+            <div class="main" id="main">
+                <video id="player" class="player" src="{{file_url}}" type="video/mp4" playsinline controls
+                    width="100%"></video>
+                <div class="player"></div>
+                <div class="file-name">
+                    <h4>File name : </h4>
+                    <br>
+                    <p id="myDiv">{{file_name}}</p>
+                </div>
+                <div class="downloadBtn">
+                    <button class="magnet" onclick="vlc_player()"><img src="https://i.postimg.cc/15TQ4y7B/vlc.png"
+                            alt="">ᴡᴀᴛᴄʜ ɪɴ ᴠʟᴄ ᴘʟᴀʏᴇʀ</button>
+                    <button class="magnet" onclick="mx_player()"><img src="https://i.postimg.cc/sx4Msv4T/mx.png"
+                            alt="">ᴡᴀᴛᴄʜ ɪɴ ᴍx ᴘʟᴀʏᴇʀ</button>
+                    <button class="magnet" onclick="playit_player()"><img src="https://i.postimg.cc/RVGWYJFF/playit.png"
+                            alt="">ᴡᴀᴛᴄʜ ɪɴ ᴘʟᴀʏɪᴛ
+                        ᴘʟᴀʏᴇʀ</button>
+                    <button class="magnet" onclick="km_player()"><img src="https://i.postimg.cc/wT9tFQ9Z/km.png"
+                            alt="">ᴡᴀᴛᴄʜ ɪɴ ᴋᴍ ᴘʟᴀʏᴇʀ</button>
+                    <button class="magnet" onclick="s_player()"><img src="https://i.postimg.cc/XYJr6NGg/s.png"
+                            alt="">ᴡᴀᴛᴄʜ ɪɴ s ᴘʟᴀʏᴇʀ</button>
+                    <button class="magnet" onclick="hd_player()"><img src="https://i.postimg.cc/rFT43LNh/hd.png"
+                            alt="">ᴡᴀᴛᴄʜ ɪɴ ʜᴅ
+                        ᴘʟᴀʏᴇʀ(4K)</button>
+                    <button class="magnet" onclick="bisalDownload()"><img style="height: 35px;"
+                            src="https://i.postimg.cc/Zncc9YLq/Pngtree-download-icon-3581467.png" alt="">ᴅᴏᴡɴʟᴏᴀᴅ ᴠɪᴅᴇᴏ
+                    </button>
+                </div>
+
+            </div>
+            <div class="abt">
+                <div class="about">
+                    <div class="about-dets">
+                        <div class="abt-sec" id="sec1" style="padding: 160px 30px;">
+                            <h1 style="text-align: center;">ᴡᴇʟᴄᴏᴍᴇ ᴛᴏ our               <Span>sᴛʀᴇᴀᴍɪɴɢ ᴡᴇʙsɪᴛᴇ</Span></h1>
+                            <p style="text-align: center; line-height: 2;word-spacing: 2px;  letter-spacing: 0.8px;">
+                                We're
+                                thrilled to have <span>you</span> here.
+                                Get ready for an
+                                amazing <span>experience</span>
+                                filled with <span>entertainment</span>, <span>fun</span>, and <span>surprises</span>.
+                                Grab
+                                your snacks, sit back, and <span>enjoy</span> the show !
+                            </p>
+                        </div>
+                        <div class="abt-sec" id="sec2">
+                            <h1>our all <span>ᴄʜᴀɴɴᴇʟs</span> ʟɪsᴛ</h1>
+                            <div class="links chnl-link">
+                                <a class="magnet" href="https://t.me/movieflix_original"><button>ᴍᴏᴠɪᴇ
+                                        ғʟɪx</button></a>
+                                <a class="magnet" href="https://t.me/+kguATTZuGh4yYjA9"><button>sᴇʀɪᴇs
+                                        ғʟɪx</button></a>
+                                <a class="magnet" href="https://t.me/+kguATTZuGh4yYjA9"><button>ᴀɴɪᴍᴇ
+                                        ᴄʀᴜɪsᴇ</button></a>
+                                <a class="magnet" href="https://t.me/movie7xchat"><button>ᴍᴏᴠɪᴇ
+                                         ɢʀᴏᴜᴘ</button></a>
+                                <a class="magnet" href="https://t.me/codeflix_bots"><button>ᴄᴏᴅᴇ
+                                        ғʟɪx</button></a>
+                            </div>
+                        </div>
+                        <div class="abt-sec" id="sec3">
+                            <h1>our all <span>ʙᴏᴛs</span> ʟɪsᴛ</h1>
+                            <div class="links bot-link">
+                                <a class="magnet" href="https://t.me/lucy_filter_bot"><button>ʟᴜᴄʏ ᴀᴜᴛᴏ ғɪʟᴛᴇʀ</button></a>
+                            </div>
+                        </div>
+                        <div class="abt-sec" id="sec4">
+                            <!-- this code is written by @biisal tg:biisal-files  -->
+                            <!-- stealing credit doesn't make you developer..so try to give full credit to the developer 😊 u will not loose anything for giving proper credit.instead  -->
+
+                            <p style="text-align: center;">ʏᴏᴜ ᴄᴀɴ <Span> ᴛᴀʟᴋ</Span> ᴡɪᴛʜ ᴜs ғᴏʀ ʏᴏᴜʀ <Span>sᴜᴘᴘᴏʀᴛ</Span> ᴀɴᴅ ʏᴏᴜ ᴄᴀɴ  <Span>ʀᴇᴘᴏʀᴛ</Span> ᴛʜʀᴏᴜɢʜ
+                                ᴛᴇʟᴇɢʀᴀᴍ</p>
+                            <div class="links contact">
+                                <a href="https://t.me/weebs_support"><button>ᴄᴀɴᴛᴀᴄᴛ ᴜs</button></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer>
+            <div class="mid">
+                <h1 class="mid-text">ᴠɪsɪᴛ <a href="#sec3" onclick="bot_btn_clicked()"><span>ᴏᴜʀ ʙᴏᴛs</span></a>
+                    FOR
+                    MORE
+                    INFO</h1>
+            </div>
+
+            <div class="last-text">
+                <p class="text-center pb-20 pr-6 pl-6 absolute" style="font-weight: 500;">
+                    Welcome to our online streaming platform! Our website allows users to generate streamable links for
+                    various files using Telegram bot. Please note that we are not responsible for the content shared or
+                    streamed through our service. Users are encouraged to respect copyright laws and adhere to our
+                    community
+                    guidelines. Enjoy easy, hassle-free file streaming service.
+                </p>
+            </div>
 
+            <!-- this code is written by @biisal tg:biisal-files  -->
+            <!-- stealing credit doesn't make you developer..so try to give full credit to the developer 😊 u will not loose anything for giving proper credit.instead  -->
+
+
+
+            <div class="copyright ">
+                <h5 class="text-center">Copyright © 2023 <a href="https://t.me/codeflix_bots"><span
+                            style="font-weight: 700;">ᴄᴏᴅᴇғʟɪx</span></a>. All
+                    Rights Reserved.</h5>
+                <div class="icons">
+                    <a href="https://github.com/erotixe"><i class="fa-brands fa-github fa-lg"></i></a>
+                    <a href="https://t.me/sewxiy"><i class="fa-brands fa-telegram fa-lg"></i></a>
+                </div>
+                <h4 style="font-weight: 700;">This Page Is Designed By <a
+                        href="https://t.me/sewxiy"><span>ᴍɪᴋᴇʏ</span></a></h4>
+            </div>
+        </footer>
+</body>
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.155.0/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/automat/controlkit.js@master/bin/controlKit.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sheryjs/dist/Shery.js"></script>
 <script>
-    function searchVideo() {
-        const videoUrl = document.getElementById('videoUrlInput').value;
-        if (videoUrl.trim() === "https://github.com/Shineii86/m3u8player/blob/main/resources/ShadowGarden.mp4") {
-            // Redirect to your Telegram account
-            window.location.href = 'https://telegram.me/Shineii86';
-        } else {
-            // Proceed with searching the video
-            const mergedUrl = 'https://shineii86.github.io/m3u8player/?video='+ encodeURIComponent(videoUrl);
-            window.location.href = mergedUrl;
-        }
-    }
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const videoUrl = urlParams.get('video') || 'https://github.com/Shineii86/m3u8player/raw/main/resources/ShadowGarden.mp4';
-    const videoSource = document.getElementById('video-source');
-    videoSource.src = videoUrl;
-
-    fluidPlayer(
-        'my-video',
-        {
-            layoutControls: {
-                primaryColor: "rgba(224, 64, 251, 0.8)",
-                allowDownload: true
-            }
-        }
-    );
-    
+    document.addEventListener("DOMContentLoaded", function () {
+        const uncopyableElement = document.querySelector(".uncopyable");
+
+        uncopyableElement.addEventListener("selectstart", function (event) {
+            event.preventDefault();
+        });
+    });
 </script>
-</body>
+<script src="js/wow.min.js"></script>
+<script>
+    new WOW().init();
+</script>
+<script src="https://cdn.plyr.io/3.6.9/plyr.js"></script>
+<script src="https://aeditx03.github.io/resources/StreamJs.js"></script>
+
 </html>
+
+<!-- this code is written by @biisal tg:biisal-files  -->
+<!-- stealing credit doesn't make you developer..so try to give full credit to the developer 😊 u will not loose anything for giving proper credit.instead  -->
