uwu-wallet / index.html
k4gor's picture
Create a mobile web application using only three files: index.html , style.css, script.js .
12c8e6c verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UwU Wallet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main Block -->
<div class="main-block">
<div class="wallet-container">
<div class="wallet-address" id="walletAddress">
<span class="address-text">UQAR...bn5l</span>
<button class="copy-btn" id="copyAddressBtn" aria-label="Copy address">
<svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
<span class="copy-feedback" id="addressFeedback">Copied!</span>
</div>
<div class="balance-main">664.85₽</div>
<div class="balance-hold">802.34₽ on hold</div>
</div>
</div>
<!-- Carousel Block -->
<div class="carousel-block">
<div class="carousel-track" id="carouselTrack">
<div class="carousel-slide" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<div class="slide-content">
<svg class="slide-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
<span class="slide-text">Welcome Bonus +500₽</span>
</div>
</div>
<div class="carousel-slide" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<div class="slide-content">
<svg class="slide-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10"></polygon>
</svg>
<span class="slide-text">Level Up & Earn More!</span>
</div>
</div>
<div class="carousel-slide" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<div class="slide-content">
<svg class="slide-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span class="slide-text">Invite Friends +100₽ Each</span>
</div>
</div>
</div>
<div class="carousel-indicators" id="carouselIndicators"></div>
</div>
<!-- Information Block -->
<div class="info-block" id="infoBlock">
<!-- Content will be dynamically inserted here -->
</div>
<!-- Bottom Navigation -->
<div class="nav-panel">
<button class="nav-btn active" data-tab="transfer" aria-label="Transfer">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 19l7-7 3 3-7 7-3-3z"></path>
<path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
<path d="M2 2l7.586 7.586"></path>
<circle cx="11" cy="11" r="2"></circle>
</svg>
<span class="nav-label">Transfer</span>
</button>
<button class="nav-btn" data-tab="store" aria-label="Store">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 0 1-8 0"></path>
</svg>
<span class="nav-label">Store</span>
</button>
<button class="nav-btn" data-tab="history" aria-label="History">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<span class="nav-label">History</span>
</button>
<button class="nav-btn" data-tab="tasks" aria-label="Tasks">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
<span class="nav-label">Tasks</span>
</button>
</div>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>