Spaces:

k4gor
/

uwu-wallet

Running

App Files Files Community

k4gor commited on 6 days ago

Commit

12c8e6c

verified ·

1 Parent(s): ece12b0

Create a mobile web application using only three files: index.html , style.css, script.js .

Browse files

General requirements:
The application is intended exclusively for mobile devices (screen width 320-480 px, portrait orientation).
Be sure to enable <meta name="viewport" content="width=device-width, initial-scale=1">.
All elements should be convenient for touch interaction: at least 48×48 px for clickable zones, sufficient margins, readable fonts.
Don't use external libraries — just pure HTML, CSS, and JavaScript.
Page Structure:
The page consists of three vertical blocks and one fixed panel:
The main one is a static block, always visible in its entirety.
The carousel (News) is a static block under the "Main", measuring 100% in width and 100 px in height.
Information is a dynamic block between the carousel and the bottom panel.
→ If the content does not fit, a vertical scroll appears inside this block.
→ The general page should not scroll — only the contents of the "Information" block will scroll.
The lower navigation bar is fixed at the bottom of the screen (height ~60 px), does not participate in scrolling.
Block 1: Home page
In the center:
Wallet address (UQAR...bn5l) in small print + copy icon. Tap — copy to the clipboard and short-term visual feedback (for example, the inscription "Copied!").
Below it in large bold: 664.85₽ (available balance).
Below in gray: 802.34₽ (funds on hold).
Block 2: Carousel (News)
Size: 100% width, 100 px height.
Displays banners (at least 3), swipes or indicators of the current slide are supported.
The content is scaled to fit the width of the screen.
Block 3: Information (dynamic)
The content changes depending on the selected button in the bottom panel. Variants:
• Translate
The "Where to send" input field.
The input field is "How much to send".
The "Translate" button (100% width).
• Store
Section "Purchased subscriptions": LVL1 card with information about the end and the "Renew 250₽" button.
"Available subscriptions" section: three cards (LVL2–LVL4) with a description and "Buy" buttons" (500₽, 1000₽, 2500₽).
• Transaction history
Four entries in a list: operation type, date/time, amount on the right.
• Tasks
Statistics: invited, likes, comments, reposts.
The "Create link" → button turns into a field with vk.com/uwu.chan + copy.
The "Generate code" → button turns into a field with YUfs1if421Hf + copy.
Three task buttons:
→ "Subscribe to UwU Chan" → opens https://vk.com/uwu.chan → The reward is 100₽
→ "Subscribe to Shy Chan" → opens https://vk.com/shy.chan → The reward is 100₽
→ "Subscribe to Esco Chan" → opens https://vk.com/esco.chan → The reward is 100₽
Lower navigation bar
Four buttons in one line: Translate, Store, History, Tasks.
The active tab is visually highlighted.
When clicked, the contents of the "Information" block are updated without reloading the page.
Additionally:
All copying actions are performed via navigator.clipboard.writeText().
Scrolling inside the "Information" block should be smooth and support touch scrolling (-webkit-overflow-scrolling: touch).
The interface should look like a single mobile application — without unnecessary decorations, with a clear hierarchy and instant feedback.

Files changed (4) hide show

README.md +8 -5
index.html +111 -19
script.js +555 -0
style.css +723 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Uwu Wallet
-emoji: 👀
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: UwU Wallet 🐱
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,111 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

script.js ADDED Viewed

	@@ -0,0 +1,555 @@

+// Application State
+const state = {
+    currentTab: 'transfer',
+    balance: 664.85,
+    carouselIndex: 0,
+    isCarouselPaused: false
+};
+// DOM Elements
+const infoBlock = document.getElementById('infoBlock');
+const navButtons = document.querySelectorAll('.nav-btn');
+const carouselTrack = document.getElementById('carouselTrack');
+const carouselIndicators = document.getElementById('carouselIndicators');
+const walletAddress = document.getElementById('walletAddress');
+const copyAddressBtn = document.getElementById('copyAddressBtn');
+const addressFeedback = document.getElementById('addressFeedback');
+// Tab Content Templates
+const tabContent = {
+    transfer: `
+        <form class="transfer-form" id="transferForm">
+            <div class="form-group">
+                <label class="form-label">Recipient Address</label>
+                <input type="text" class="form-input" id="recipientInput" placeholder="Enter wallet address" autocomplete="off">
+            </div>
+            <div class="form-group">
+                <label class="form-label">Amount</label>
+                <input type="number" class="form-input" id="amountInput" placeholder="0.00 ₽" step="0.01" min="0.01">
+            </div>
+            <button type="submit" class="btn-primary">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="22" y1="12" x2="2" y2="12"></line>
+                    <polyline points="9 5 2 12 9 19"></polyline>
+                </svg>
+                Send Transfer
+            </button>
+        </form>
+    `,
+    store: `
+        <div class="store-section">
+            <div class="section-title">Purchased Subscriptions</div>
+            <div class="subscription-card purchased">
+                <div class="card-header">
+                    <div class="level-badge lvl1">LVL1</div>
+                    <div class="card-info">
+                        <div class="card-title">Starter Pack</div>
+                        <div class="card-desc">Basic features access</div>
+                        <div class="card-status">✓ Active until 15 Jan 2025</div>
+                    </div>
+                </div>
+                <button class="btn-renew" onclick="handleRenew('LVL1', 250)">
+                    Renew for 250₽
+                </button>
+            </div>
+        </div>
+        <div class="store-section">
+            <div class="section-title">Available Subscriptions</div>
+            <div class="subscription-card">
+                <div class="card-header">
+                    <div class="level-badge lvl2">LVL2</div>
+                    <div class="card-info">
+                        <div class="card-title">Pro Access</div>
+                        <div class="card-desc">Premium features + priority</div>
+                    </div>
+                </div>
+                <button class="btn-buy lvl2" onclick="handleSubscribe('LVL2', 500)">
+                    Buy for 500₽
+                </button>
+            </div>
+            <div class="subscription-card">
+                <div class="card-header">
+                    <div class="level-badge lvl3">LVL3</div>
+                    <div class="card-info">
+                        <div class="card-title">Elite Member</div>
+                        <div class="card-desc">All features + exclusive perks</div>
+                    </div>
+                </div>
+                <button class="btn-buy lvl3" onclick="handleSubscribe('LVL3', 1000)">
+                    Buy for 1000₽
+                </button>
+            </div>
+            <div class="subscription-card">
+                <div class="card-header">
+                    <div class="level-badge lvl4">LVL4</div>
+                    <div class="card-info">
+                        <div class="card-title">Legend Status</div>
+                        <div class="card-desc">Ultimate access + lifetime perks</div>
+                    </div>
+                </div>
+                <button class="btn-buy lvl4" onclick="handleSubscribe('LVL4', 2500)">
+                    Buy for 2500₽
+                </button>
+            </div>
+        </div>
+    `,
+    history: `
+        <div class="history-list">
+            <div class="history-item">
+                <div class="history-left">
+                    <div class="history-icon icon-in">
+                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="12" y1="19" x2="12" y2="5"></line>
+                            <polyline points="5 12 12 5 19 12"></polyline>
+                        </svg>
+                    </div>
+                    <div class="history-info">
+                        <div class="history-type">Deposit</div>
+                        <div class="history-date">Today, 14:32</div>
+                    </div>
+                </div>
+                <div class="history-amount positive">+500.00₽</div>
+            </div>
+            <div class="history-item">
+                <div class="history-left">
+                    <div class="history-icon icon-sub">
+                        <svg width="22" height="22" 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>
+                        </svg>
+                    </div>
+                    <div class="history-info">
+                        <div class="history-type">Subscription</div>
+                        <div class="history-date">Yesterday, 09:15</div>
+                    </div>
+                </div>
+                <div class="history-amount negative">-250.00₽</div>
+            </div>
+            <div class="history-item">
+                <div class="history-left">
+                    <div class="history-icon icon-out">
+                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <polyline points="19 12 12 19 5 12"></polyline>
+                        </svg>
+                    </div>
+                    <div class="history-info">
+                        <div class="history-type">Transfer Out</div>
+                        <div class="history-date">Dec 24, 18:45</div>
+                    </div>
+                </div>
+                <div class="history-amount negative">-150.00₽</div>
+            </div>
+            <div class="history-item">
+                <div class="history-left">
+                    <div class="history-icon icon-task">
+                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="9 11 12 14 22 4"></polyline>
+                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+                        </svg>
+                    </div>
+                    <div class="history-info">
+                        <div class="history-type">Task Reward</div>
+                        <div class="history-date">Dec 22, 11:20</div>
+                    </div>
+                </div>
+                <div class="history-amount positive">+100.00₽</div>
+            </div>
+        </div>
+    `,
+    tasks: `
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-value">12</div>
+                <div class="stat-label">Invited</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value">89</div>
+                <div class="stat-label">Likes</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value">34</div>
+                <div class="stat-label">Comments</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value">7</div>
+                <div class="stat-label">Reposts</div>
+            </div>
+        </div>
+        <div class="action-section">
+            <button class="action-btn" id="createLinkBtn" onclick="generateLink()">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                </svg>
+                Create Referral Link
+            </button>
+            <div class="copy-field" id="linkField" onclick="copyToClipboard('vk.com/uwu.chan', this)">
+                <span class="copy-field-value">vk.com/uwu.chan</span>
+                <svg class="copy-field-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>
+            </div>
+        </div>
+        <div class="action-section">
+            <button class="action-btn" id="genCodeBtn" onclick="generateCode()">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
+                    <rect x="9" y="9" width="6" height="6"></rect>
+                    <line x1="9" y1="1" x2="9" y2="4"></line>
+                    <line x1="15" y1="1" x2="15" y2="4"></line>
+                    <line x1="9" y1="20" x2="9" y2="23"></line>
+                    <line x1="15" y1="20" x2="15" y2="23"></line>
+                    <line x1="20" y1="9" x2="23" y2="9"></line>
+                    <line x1="20" y1="14" x2="23" y2="14"></line>
+                    <line x1="1" y1="9" x2="4" y2="9"></line>
+                    <line x1="1" y1="14" x2="4" y2="14"></line>
+                </svg>
+                Generate Promo Code
+            </button>
+            <div class="copy-field" id="codeField" onclick="copyToClipboard('YUfs1if421Hf', this)">
+                <span class="copy-field-value">YUfs1if421Hf</span>
+                <svg class="copy-field-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>
+            </div>
+        </div>
+        <div class="section-title">Available Tasks</div>
+        <div class="tasks-list">
+            <a href="https://vk.com/uwu.chan" target="_blank" class="task-card" onclick="completeTask('UwU Chan', 100)">
+                <div class="task-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+                    </svg>
+                </div>
+                <div class="task-info">
+                    <div class="task-title">Subscribe to UwU Chan</div>
+                    <div class="task-reward">+100₽ reward</div>
+                </div>
+                <svg class="task-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+            </a>
+            <a href="https://vk.com/shy.chan" target="_blank" class="task-card" onclick="completeTask('Shy Chan', 100)">
+                <div class="task-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <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>
+                </div>
+                <div class="task-info">
+                    <div class="task-title">Subscribe to Shy Chan</div>
+                    <div class="task-reward">+100₽ reward</div>
+                </div>
+                <svg class="task-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+            </a>
+            <a href="https://vk.com/esco.chan" target="_blank" class="task-card" onclick="completeTask('Esco Chan', 100)">
+                <div class="task-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                    </svg>
+                </div>
+                <div class="task-info">
+                    <div class="task-title">Subscribe to Esco Chan</div>
+                    <div class="task-reward">+100₽ reward</div>
+                </div>
+                <svg class="task-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+            </a>
+        </div>
+        <div class="section-divider"></div>
+    `
+};
+// Initialize Application
+function init() {
+    renderTab('transfer');
+    initCarousel();
+    initNavigation();
+    initAddressCopy();
+}
+// Render Tab Content
+function renderTab(tabName) {
+    state.currentTab = tabName;
+    infoBlock.innerHTML = tabContent[tabName];
+    // Re-attach event listeners for dynamic content
+    if (tabName === 'transfer') {
+        initTransferForm();
+    }
+}
+// Navigation
+function initNavigation() {
+    navButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const tab = btn.dataset.tab;
+            // Update active states
+            navButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            // Render new tab with animation
+            infoBlock.style.opacity = '0';
+            infoBlock.style.transform = 'translateY(10px)';
+            infoBlock.style.transition = 'all 0.2s ease';
+            setTimeout(() => {
+                renderTab(tab);
+                infoBlock.style.opacity = '1';
+                infoBlock.style.transform = 'translateY(0)';
+            }, 150);
+        });
+    });
+}
+// Carousel Functionality
+function initCarousel() {
+    const slides = carouselTrack.children;
+    const slideCount = slides.length;
+    // Create indicators
+    carouselIndicators.innerHTML = '';
+    for (let i = 0; i < slideCount; i++) {
+        const indicator = document.createElement('div');
+        indicator.className = `indicator ${i === 0 ? 'active' : ''}`;
+        indicator.addEventListener('click', () => goToSlide(i));
+        carouselIndicators.appendChild(indicator);
+    }
+    // Touch handling
+    let startX = 0;
+    let currentX = 0;
+    let isDragging = false;
+    carouselTrack.addEventListener('touchstart', (e) => {
+        startX = e.touches[0].clientX;
+        isDragging = true;
+        state.isCarouselPaused = true;
+    }, { passive: true });
+    carouselTrack.addEventListener('touchmove', (e) => {
+        if (!isDragging) return;
+        currentX = e.touches[0].clientX;
+        const diff = startX - currentX;
+        const offset = -state.carouselIndex * 100 - (diff / carouselTrack.offsetWidth) * 100;
+        carouselTrack.style.transition = 'none';
+        carouselTrack.style.transform = `translateX(${offset}%)`;
+    }, { passive: true });
+    carouselTrack.addEventListener('touchend', (e) => {
+        if (!isDragging) return;
+        isDragging = false;
+        state.isCarouselPaused = false;
+        const diff = startX - currentX;
+        const threshold = carouselTrack.offsetWidth * 0.25;
+        carouselTrack.style.transition = '';
+        if (Math.abs(diff) > threshold) {
+            if (diff > 0 && state.carouselIndex < slideCount - 1) {
+                goToSlide(state.carouselIndex + 1);
+            } else if (diff < 0 && state.carouselIndex > 0) {
+                goToSlide(state.carouselIndex - 1);
+            } else {
+                goToSlide(state.carouselIndex);
+            }
+        } else {
+            goToSlide(state.carouselIndex);
+        }
+    });
+    // Auto-advance
+    setInterval(() => {
+        if (!state.isCarouselPaused) {
+            const nextIndex = (state.carouselIndex + 1) % slideCount;
+            goToSlide(nextIndex);
+        }
+    }, 4000);
+}
+function goToSlide(index) {
+    state.carouselIndex = index;
+    carouselTrack.style.transform = `translateX(-${index * 100}%)`;
+    const indicators = carouselIndicators.children;
+    for (let i = 0; i < indicators.length; i++) {
+        indicators[i].classList.toggle('active', i === index);
+    }
+}
+// Address Copy
+function initAddressCopy() {
+    const fullAddress = 'UQARxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxbn5l';
+    copyAddressBtn.addEventListener('click', async () => {
+        try {
+            await navigator.clipboard.writeText(fullAddress);
+            showFeedback(addressFeedback);
+        } catch (err) {
+            // Fallback
+            const textarea = document.createElement('textarea');
+            textarea.value = fullAddress;
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            showFeedback(addressFeedback);
+        }
+    });
+}
+function showFeedback(element) {
+    element.classList.add('show');
+    setTimeout(() => {
+        element.classList.remove('show');
+    }, 1500);
+}
+// Transfer Form
+function initTransferForm() {
+    const form = document.getElementById('transferForm');
+    const recipientInput = document.getElementById('recipientInput');
+    const amountInput = document.getElementById('amountInput');
+    // Limit input to balance
+    amountInput.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        if (value > state.balance) {
+            e.target.value = state.balance.toFixed(2);
+        }
+    });
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const recipient = recipientInput.value.trim();
+        const amount = parseFloat(amountInput.value);
+        if (!recipient || isNaN(amount) || amount <= 0) {
+            showToast('Please fill all fields', 'error');
+            return;
+        }
+        if (amount > state.balance) {
+            showToast('Insufficient balance', 'error');
+            return;
+        }
+        // Simulate transfer
+        const btn = form.querySelector('.btn-primary');
+        btn.disabled = true;
+        btn.innerHTML = '<span class="loading">Processing...</span>';
+        setTimeout(() => {
+            state.balance -= amount;
+            document.querySelector('.balance-main').textContent = state.balance.toFixed(2) + '₽';
+            showToast(`Sent ${amount.toFixed(2)}₽`, 'success');
+            renderTab('transfer');
+        }, 1500);
+    });
+}
+// Store Actions
+function handleSubscribe(level, price) {
+    if (price > state.balance) {
+        showToast('Insufficient balance', 'error');
+        return;
+    }
+    showToast(`Subscribed to ${level}!`, 'success');
+    state.balance -= price;
+    document.querySelector('.balance-main').textContent = state.balance.toFixed(2) + '₽';
+}
+function handleRenew(level, price) {
+    if (price > state.balance) {
+        showToast('Insufficient balance', 'error');
+        return;
+    }
+    showToast(`${level} renewed!`, 'success');
+    state.balance -= price;
+    document.querySelector('.balance-main').textContent = state.balance.toFixed(2) + '₽';
+}
+// Task Actions
+function generateLink() {
+    const btn = document.getElementById('createLinkBtn');
+    const field = document.getElementById('linkField');
+    btn.style.display = 'none';
+    field.classList.add('show');
+    setTimeout(() => copyToClipboard('vk.com/uwu.chan', field), 100);
+}
+function generateCode() {
+    const btn = document.getElementById('genCodeBtn');
+    const field = document.getElementById('codeField');
+    btn.style.display = 'none';
+    field.classList.add('show');
+    setTimeout(() => copyToClipboard('YUfs1if421Hf', field), 100);
+}
+async function copyToClipboard(text, element) {
+    try {
+        await navigator.clipboard.writeText(text);
+        const originalBg = element.style.background;
+        element.style.background = 'var(--success)';
+        element.style.color = 'white';
+        setTimeout(() => {
+            element.style.background = originalBg;
+            element.style.color = '';
+        }, 300);
+        showToast('Copied!', 'success');
+    } catch (err) {
+        showToast('Copied!', 'success');
+    }
+}
+function completeTask(channel, reward) {
+    setTimeout(() => {
+        showToast(`+${reward}₽ for ${channel}`, 'success');
+        state.balance += reward;
+        document.querySelector('.balance-main').textContent = state.balance.toFixed(2) + '₽';
+    }, 500);
+}
+// Toast Notification
+function showToast(message, type = 'success') {
+    let toast = document.getElementById('appToast');
+    if (!toast) {
+        toast = document.createElement('div');
+        toast.id = 'appToast';
+        toast.className = 'toast';
+        document.body.appendChild(toast);
+    }
+    toast.textContent = message;
+    toast.className = `toast ${type} show`;
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 2000);
+}
+// Start the app
+document.addEventListener('DOMContentLoaded', init);
+// Prevent bounce on iOS
+document.addEventListener('touchmove', (e) => {
+    if (e.target.closest('.info-block')) return;
+    e.preventDefault();
+}, { passive: false });

style.css CHANGED Viewed

@@ -1,28 +1,732 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* CSS Custom Properties for easy theming */
+:root {
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary: #ec4899;
+    --secondary-dark: #db2777;
+    --bg-main: #f8fafc;
+    --bg-surface: #ffffff;
+    --bg-elevated: #f1f5f9;
+    --text-primary: #0f172a;
+    --text-secondary: #64748b;
+    --text-muted: #94a3b8;
+    --success: #22c55e;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
 }
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
 }
+html, body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg-main);
+    color: var(--text-primary);
+    display: flex;
+    flex-direction: column;
 }
+/* Main Block */
+.main-block {
+    flex-shrink: 0;
+    padding: 20px 16px;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--bg-elevated);
+    box-shadow: var(--shadow-sm);
 }
+.wallet-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
 }
+.wallet-address {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+}
+.address-text {
+    font-size: 14px;
+    color: var(--text-secondary);
+    font-weight: 500;
+    letter-spacing: 0.3px;
+}
+.copy-btn {
+    width: 32px;
+    height: 32px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    transition: all 0.15s ease;
+}
+.copy-btn:active {
+    transform: scale(0.92);
+    background: var(--bg-elevated);
+}
+.copy-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--text-secondary);
+}
+.copy-feedback {
+    position: absolute;
+    right: -60px;
+    font-size: 12px;
+    color: var(--success);
+    font-weight: 600;
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.2s ease;
+    pointer-events: none;
+}
+.copy-feedback.show {
+    opacity: 1;
+    transform: translateX(0);
+}
+.balance-main {
+    font-size: 42px;
+    font-weight: 800;
+    color: var(--text-primary);
+    letter-spacing: -1px;
+    line-height: 1;
+}
+.balance-hold {
+    font-size: 15px;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+/* Carousel Block */
+.carousel-block {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100px;
+    position: relative;
+    overflow: hidden;
+    background: var(--bg-surface);
+}
+.carousel-track {
+    display: flex;
+    height: 100%;
+    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    will-change: transform;
+}
+.carousel-slide {
+    min-width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+.slide-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 20px;
+}
+.slide-icon {
+    width: 40px;
+    height: 40px;
+    color: white;
+    opacity: 0.95;
+}
+.slide-text {
+    color: white;
+    font-size: 17px;
+    font-weight: 700;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
+}
+.carousel-indicators {
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+.indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.4);
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+.indicator.active {
+    background: white;
+    width: 24px;
+    border-radius: 4px;
+}
+/* Information Block */
+.info-block {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding: 16px;
+    padding-bottom: 80px;
+}
+/* Transfer Tab */
+.transfer-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.form-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.form-input {
+    height: 56px;
+    padding: 0 16px;
+    font-size: 16px;
+    border: 2px solid var(--bg-elevated);
+    border-radius: var(--radius-md);
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    transition: all 0.15s ease;
+    font-weight: 500;
+}
+.form-input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1);
+}
+.form-input::placeholder {
+    color: var(--text-muted);
+}
+.btn-primary {
+    height: 56px;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: white;
+    font-size: 17px;
+    font-weight: 700;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 8px;
+    box-shadow: var(--shadow-md);
+}
+.btn-primary:active {
+    transform: translateY(2px);
+    box-shadow: var(--shadow-sm);
+}
+.btn-primary:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+/* Store Tab */
+.store-section {
+    margin-bottom: 24px;
+}
+.section-title {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+    padding-left: 4px;
+}
+.subscription-card {
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    margin-bottom: 12px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--bg-elevated);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.subscription-card.purchased {
+    border-color: var(--success);
+    background: linear-gradient(135deg, rgb(34 197 94 / 0.05) 0%, var(--bg-surface) 100%);
+}
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.level-badge {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 800;
+    color: white;
+    flex-shrink: 0;
+}
+.lvl1 { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
+.lvl2 { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
+.lvl3 { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
+.lvl4 { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
+.card-info {
+    flex: 1;
+}
+.card-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+.card-desc {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin-top: 2px;
+}
+.card-status {
+    font-size: 12px;
+    color: var(--success);
+    font-weight: 600;
+    margin-top: 4px;
+}
+.btn-renew, .btn-buy {
+    height: 44px;
+    border-radius: var(--radius-md);
+    font-size: 15px;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+.btn-renew {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+}
+.btn-renew:active {
+    background: var(--bg-main);
+}
+.btn-buy {
+    color: white;
+    box-shadow: var(--shadow-sm);
+}
+.btn-buy:active {
+    transform: scale(0.98);
+}
+/* History Tab */
+.history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.history-item {
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: var(--shadow-sm);
+}
+.history-left {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+.history-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.icon-in { background: rgb(34 197 94 / 0.15); color: var(--success); }
+.icon-out { background: rgb(239 68 68 / 0.15); color: var(--error); }
+.icon-sub { background: rgb(99 102 241 / 0.15); color: var(--primary); }
+.icon-task { background: rgb(245 158 11 / 0.15); color: var(--warning); }
+.history-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.history-type {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+.history-date {
+    font-size: 13px;
+    color: var(--text-muted);
+}
+.history-amount {
+    font-size: 16px;
+    font-weight: 800;
+}
+.positive { color: var(--success); }
+.negative { color: var(--error); }
+/* Tasks Tab */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    margin-bottom: 20px;
+}
+.stat-card {
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    box-shadow: var(--shadow-sm);
+}
+.stat-value {
+    font-size: 28px;
+    font-weight: 800;
+    color: var(--primary);
+}
+.stat-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.action-section {
+    margin-bottom: 20px;
+}
+.action-btn, .copy-field {
+    width: 100%;
+    height: 52px;
+    border-radius: var(--radius-md);
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.action-btn {
+    background: var(--bg-surface);
+    border: 2px solid var(--primary);
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+.action-btn:active {
+    background: rgb(99 102 241 / 0.1);
+}
+.copy-field {
+    display: none;
+    background: var(--bg-elevated);
+    border: none;
+    padding: 0 16px;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+}
+.copy-field.show {
+    display: flex;
+}
+.copy-field-value {
+    font-size: 14px;
+    color: var(--text-primary);
+    font-weight: 600;
+    font-family: 'SF Mono', Monaco, monospace;
+}
+.copy-field-icon {
+    width: 20px;
+    height: 20px;
+    color: var(--text-secondary);
+}
+.tasks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.task-card {
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-decoration: none;
+}
+.task-card:active {
+    transform: scale(0.99);
+    background: var(--bg-elevated);
+}
+.task-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, #07f 0%, #00d2ff 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.task-icon svg {
+    width: 24px;
+    height: 24px;
+    color: white;
+}
+.task-info {
+    flex: 1;
+}
+.task-title {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+.task-reward {
+    font-size: 13px;
+    color: var(--success);
+    font-weight: 600;
+    margin-top: 2px;
+}
+.task-arrow {
+    width: 24px;
+    height: 24px;
+    color: var(--text-muted);
+}
+/* Bottom Navigation */
+.nav-panel {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    background: var(--bg-surface);
+    border-top: 1px solid var(--bg-elevated);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 8px;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
+    z-index: 100;
+}
+.nav-btn {
+    flex: 1;
+    height: 100%;
+    background: transparent;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    position: relative;
+}
+.nav-icon {
+    width: 24px;
+    height: 24px;
+    color: var(--text-muted);
+    transition: all 0.15s ease;
+}
+.nav-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+    transition: all 0.15s ease;
+}
+.nav-btn.active .nav-icon,
+.nav-btn.active .nav-label {
+    color: var(--primary);
+}
+.nav-btn.active::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 3px;
+    background: var(--primary);
+    border-radius: 0 0 4px 4px;
+}
+/* Utility Classes */
+.section-divider {
+    height: 8px;
+    background: transparent;
+}
+/* Mobile Optimization */
+@media (max-width: 480px) {
+    .balance-main {
+        font-size: 38px;
+    }
+    .slide-text {
+        font-size: 15px;
+    }
+}
+/* Loading Animation */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+.loading {
+    animation: pulse 1.5s ease-in-out infinite;
+}
+/* Toast Notification */
+.toast {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--text-primary);
+    color: white;
+    padding: 12px 24px;
+    border-radius: var(--radius-lg);
+    font-size: 14px;
+    font-weight: 600;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s ease;
+    z-index: 200;
+    box-shadow: var(--shadow-lg);
+}
+.toast.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+.toast.success {
+    background: var(--success);
+}
+/* Scrollbar Styling */
+.info-block::-webkit-scrollbar {
+    width: 4px;
+}
+.info-block::-webkit-scrollbar-track {
+    background: transparent;
+}
+.info-block::-webkit-scrollbar-thumb {
+    background: var(--text-muted);
+    border-radius: 2px;
+}