<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Profile Box Design</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <script src='//niphaumeenses.net/vignette.min.js' data-zone='8559953' data-sdk='show_8559953'></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Name Box -->
 									<div class="namebox">
 									    <img src="https://i.ibb.co.com/cgV909Z/20241207-054239.png" style="pointer-events:none; object-fit: contain;" height="30px" alt=""></img>
 									    <strong id="name">LIONFISTAR</strong>
 									</div>
 									<!-- Balnace and Join box -->
 									<div class="balance-join">
 									<div class="balance-boxx" style="width: 90%; display: flex; justify-content: flex-start;">
 							<div class="dropdown">
    <img id="selectedImage" src="https://i.ibb.co/QcCGz79/Remove-bg-ai-1731076406777.png" alt="Select an option">
    <div class="dropdown-content">
        <a data-img="https://i.ibb.co/QcCGz79/Remove-bg-ai-1731076406777.png"><img src="https://i.ibb.co/QcCGz79/Remove-bg-ai-1731076406777.png" alt="Binance">Binance</a>
        <a data-img="https://i.ibb.co/kQ9LZ9h/150x150-gate-io1664797075115.png"><img src="https://i.ibb.co/kQ9LZ9h/150x150-gate-io1664797075115.png" alt="Gate.io">Gate.io</a>
        <a  data-img="https://i.ibb.co/ChgkRWq/OKEx-300x300-x2.png"><img src="https://i.ibb.co/ChgkRWq/OKEx-300x300-x2.png" alt="OKX">OKX</a>
        <a  data-img="https://i.ibb.co/cF17W9Z/bybit-logo-min.webp"><img src="https://i.ibb.co/cF17W9Z/bybit-logo-min.webp" alt="Bybit">Bybit</a>
        <a  data-img="https://i.ibb.co/rdTRVpH/bitget-token-new-bgb-logo.png"><img src="https://i.ibb.co/rdTRVpH/bitget-token-new-bgb-logo.png" alt="Bitget">Bitget</a>
    </div>
</div>
   
 					<spin class="div"></spin>
 					<div class="bb">
 					    <strong id="formatedbalance">0k</strong>
 					    <span style="font-size: 10px; color:#222843f0">Your balance</span>
 					    </div>
 					    <img src="https://lionfi.freewebhostmost.com/images/taptap.png" style="pointer-events:none;" height="20px" alt=""></img>
 					    		<spin class="div"></spin>
 					    					<div class="bb">
 					    <strong>#<span id="user-rank">0</span></strong>
 					    <span style="font-size: 10px; color:#222843f0">Rank Position</span>
 					    </div>
 					    		
 									</div>
 									<button class="joinbox" id="openbtn">Join&nbsp;channel</button>
 									
 									</div>
 									
 													<div class="halfround">
 									<!-- Puzzel and Tap power -->
 									<div class="ptw">
 									  <div class="ptw1" onclick="openbo()"> <img src="https://lionfi.freewebhostmost.com/images/taptap.png" style="pointer-events:none;" height="80%" alt=""></img>
 									  <span class="ptw11">
 									      <div class="taplevel">+<span id="taptapValue">1</span> <span style="font-size: 11px;">/ Lvl <span id="taptapValue2">1</span></div>
 									  <span style="font-size:12px; color:#5F5F77;">per tap</span>
 									  </span>
 									  </div>  
 									  <div class="ptw2">
 									      <img src="https://i.ibb.co.com/dLCxM58/5197544.png" height="60%" alt=""></img>
 									      <span class="ptw11">
 									          <span id="total-tasks">0</span><span style="font-size:12px; color:#5F5F77;">Total CPL Task</span>
 									          </span>
 									  </div>  
 									</div>
 					
 									
    <!-- Level Box -->
    <div class="level">
        <span id="current-level-name">Bronze</span>/<span id="next-level-name">Silver</span>
    </div>
     <div class="progress-container">
        <div id="progress-bar" class="progress-bar">
            0.00%
        </div>
    </div>
  		    <!-- Level Box -->
   

        <!-- Puzzel box -->
        
        <div class="puzzel-box" id="puzzel-box"></div>
        
        <!-- Balance show -->
        <div class="balance-box">
        <div class="img1"></div>
        <span id="user-balance">0</span>
    </div>
            
            
        </div>
        
         <!-- TapTap Earn image -->
        
        <div class="taptap" id="taptap">
           
            </div>
        
        <!-- Drop Game -->
        
         <div class="drop-game-box">
        <div class="left-section">
            <div class="drop-game-text">Drop Game</div>
            <div class="ticket-section">
                <div class="img2"></div>
                <span id="ticket">0</span>
            </div>
        </div>
        <div class="play-button" id="playbtn">Play </div>
    </div>
        
        

    <!-- Navber Box -->
   <nav class="bottom-nav" id="bottomNav">
        <a  id="homeLink">
            <div class="nav-item">
                <div class="img-home"></div>
                <span class="nav-text">Home</span>
            </div>
        </a>
        <a  id="earnLink">
            <div class="nav-item">
                <div class="img-earn"></div>
                <span class="nav-text">Earn</span>
            </div>
        </a>
        <a  id="leaderboardLink">
            <div class="nav-item">
                <div class="img-leaderboard"></div>
                <span class="nav-text">Players</span>
            </div>
        </a>
        <a  id="inviteLink">
            <div class="nav-item">
                <div class="img-invite"></div>
                <span class="nav-text">Invite</span>
            </div>
        </a>
         <a  id="airdropLink">
            <div class="nav-item">
                <div class="img-airdrop"></div>
                <span class="nav-text">Airdrop</span>
            </div>
        </a>
    </nav>
    <div class="toast" id="toast"></div>
    <div id="comingSoonDialog" class="dialog">
        <div class="dialog-content">
            <img src="https://lionfi.freewebhostmost.com/coming.gif" alt="Coming Soon" class="gif">
            <h1 class="coming-soon-text"> Leaderboard <br>Coming Soon</h1>
        </div>
    </div>
    <!--HelfRound end -->
    </div>
  
    <!-- Per tap scroor increase -->

    
    <!-- BottomSheet Start -->
    
    <div class="bottom-sheet-overlay" id="bottomSheetOverlay" onclick="closeBottomSheet()"></div>

<div class="bottom-sheet" id="bottomSheet">
    <div class="bottom-sheet-header">
        
        <div onclick="closeBottomSheet()">✖</div>
    </div>
    <img id="bottomSheetImage" class="bottom-sheet-image" src="https://i.ibb.co.com/ZHBmQ8H/output-onlinegiftools.gif" alt="Task Image">
    <h2 style="font-weight:bold;">Tap Power</h2>
    <div>
        <div class="title-bs"><strong></strong><span id="task-name"></span></div>
        <div class="bottom-sheet-disclaimer">
    Increase your power of tap to increase taping reward amount. Make unlimited tap!
   
        </div>
         <p>+1 power per level</p>
    </div>
    <div class="leveldetailes">
        <img src="https://lionfi.freewebhostmost.com/images/taptap.png" style="pointer-events:none;" height="30px" alt="taptap"></img>
     &nbsp;  <span>100,000(100k) Per Level</span>  
    </div>
  
        <button class="bottom-sheet-button" id="updatetaptap">Upgrade Level</button>
    
</div>

    
    <!-- Per tap scroor increase end -->
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
 <script src="java.js"></script> 
<script src="tg.js"></script>
</body>
</html>
