-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (146 loc) · 7.37 KB
/
index.html
File metadata and controls
157 lines (146 loc) · 7.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Telos Zero Names - Premium Name Auctions</title>
<link rel="stylesheet" href="styles.css?v=11">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- Header -->
<header class="header">
<div class="container">
<h1 class="logo">
<img src="assets/telos-zero-light-gradient.png" alt="Telos Zero" class="brand-logo-img" width="359" height="80">
<span class="gradient-text">Names</span>
</h1>
<div class="header-actions">
<button id="connectWallet" class="btn btn-primary">
<span id="walletText">Connect Wallet</span>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main">
<div class="container">
<!-- Hero Section -->
<section class="hero">
<h2>Secure Your Premium Telos Zero Account Name</h2>
<p>Bid on short account names (<12 characters) through the official Telos Zero auction system</p>
</section>
<!-- How It Works -->
<section class="how-it-works">
<h3>How It Works</h3>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-text"><strong>Connect Your Wallet</strong><br>Link your Telos Zero account using Anchor Wallet</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-text"><strong>Search for a Name</strong><br>Find any short name (1–11 characters). If it's not taken and not being bid on, it's yours to claim</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-text"><strong>Place Your Bid</strong><br>Minimum first bid is 10 TLOS. Each new bid must be at least 10% higher than the current highest</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-text"><strong>Win After 24 Hours</strong><br>If no one outbids you within 24 hours of the last bid, you win the name and can create the account</div>
</div>
</div>
</section>
<!-- Search Section -->
<section class="search-section">
<div class="search-label">🔍 Find Your Name</div>
<div class="search-hint">Enter 1–11 characters (a-z, 1-5 only). Check if it's available and start bidding.</div>
<div class="search-container">
<input type="text" id="nameSearch" placeholder="e.g. telos, bob, nft..." maxlength="11">
<button id="searchBtn" class="btn btn-secondary">Search</button>
</div>
<div id="searchResult" class="search-result"></div>
</section>
<!-- Navigation Tabs -->
<nav class="tabs">
<button class="tab-btn active" data-tab="browse">Browse Active Bids</button>
<button class="tab-btn" data-tab="mybids">My Bids</button>
<button class="tab-btn" data-tab="history">Bid History</button>
</nav>
<!-- Content Sections -->
<div class="content">
<!-- Browse Active Bids -->
<section id="browse" class="tab-content active">
<div class="section-header">
<h3>Active Name Auctions</h3>
<button id="refreshBids" class="btn btn-outline">Refresh</button>
</div>
<div id="activeBids" class="bids-grid">
<div class="loading">Loading active bids...</div>
</div>
</section>
<!-- My Bids -->
<section id="mybids" class="tab-content">
<div class="section-header">
<h3>My Active Bids</h3>
</div>
<div id="myBidsList" class="bids-grid">
<div class="empty-state">Connect your wallet to see your bids</div>
</div>
</section>
<!-- Bid History -->
<section id="history" class="tab-content">
<div class="section-header">
<h3>Bid History</h3>
<input type="text" id="historySearch" placeholder="Enter account name" maxlength="11">
<button id="historySearchBtn" class="btn btn-secondary">Search History</button>
</div>
<div id="bidHistory" class="history-list">
<div class="empty-state">Search for a name to see its bid history</div>
</div>
</section>
</div>
</div>
</main>
<!-- Bid Modal -->
<div id="bidModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Place Bid for <span id="modalNameDisplay"></span></h3>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<div class="bid-info">
<div class="info-row">
<span>Current Highest Bid:</span>
<span id="currentBid">-</span>
</div>
<div class="info-row">
<span>Minimum Next Bid (10% higher):</span>
<span id="minimumBid">-</span>
</div>
<div class="info-row">
<span>Time Remaining:</span>
<span id="timeRemaining">-</span>
</div>
</div>
<div class="bid-form">
<label for="bidAmount">Your Bid Amount (TLOS)</label>
<input type="number" id="bidAmount" step="0.0001" min="0" placeholder="Enter bid amount">
<button id="submitBid" class="btn btn-primary full-width">Place Bid</button>
</div>
</div>
</div>
</div>
<!-- Overlay -->
<div id="overlay" class="overlay"></div>
<!-- Status Messages -->
<div id="statusContainer" class="status-container"></div>
</div>
<!-- Scripts -->
<script src="wallet.js?v=1"></script>
<script src="app.js?v=8"></script>
</body>
</html>