-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhow-it-works.html
More file actions
315 lines (305 loc) · 15.5 KB
/
how-it-works.html
File metadata and controls
315 lines (305 loc) · 15.5 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>How TruthWeb Works | TruthWeb</title>
<!-- TailwindCSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<!-- Google Fonts: Poppins -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"/>
<style>
:root {
--primary-color: #000000;
--secondary-color: #FFFFFF;
--highlight-color: #CCCCCC;
--text-color: #FFFFFF;
--button-bg-color: #000000;
--button-text-color: #FFFFFF;
--button-hover-bg-color: #FFFFFF;
--button-hover-text-color: #000000;
--background-color: #FFFFFF;
}
body {
background: var(--background-color);
color: var(--primary-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
.hero {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border: 2px solid var(--highlight-color);
padding: 1rem;
background: var(--primary-color);
animation: fadeIn 1.5s ease-in-out;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
opacity: 0.5;
animation: float 6s infinite ease-in-out, pulseGlow 3s infinite alternate;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes pulseGlow { 0% { opacity: 0.5; } 100% { opacity: 0.8; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.glow-text {
font-size: 2rem;
font-weight: bold;
color: var(--text-color);
text-shadow: 0 0 10px var(--highlight-color), 0 0 20px var(--highlight-color);
animation: glow 2s infinite alternate, bounce 3s infinite ease-in-out;
}
@keyframes glow { 0% { text-shadow: 0 0 10px var(--highlight-color), 0 0 20px var(--highlight-color); } 100% { text-shadow: 0 0 20px var(--highlight-color), 0 0 30px var(--highlight-color); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.btn {
background: var(--button-bg-color);
color: var(--button-text-color);
padding: 0.75rem 1.5rem;
border: 2px solid var(--highlight-color);
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
animation: pulse 2s infinite;
display: inline-block;
text-align: center;
text-decoration: none;
}
.btn:hover {
background: var(--button-hover-bg-color);
color: var(--button-hover-text-color);
transform: scale(1.1) rotate(3deg);
}
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
footer {
background: var(--primary-color);
color: var(--text-color);
text-align: center;
padding: 2rem;
animation: fadeIn 1.5s ease-in-out;
}
html { scroll-behavior: smooth; }
.sticky-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--primary-color);
color: var(--text-color);
transition: background 0.3s ease, color 0.3s ease;
animation: slideDown 1s ease-in-out;
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
padding: 0 1rem;
}
.sticky-header.scrolled {
background: var(--secondary-color);
color: var(--primary-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.sticky-header .logo-text {
font-size: 1.5rem;
font-weight: 700;
transition: font-size 0.3s ease;
}
.sticky-header.scrolled .logo-text {
font-size: 1.25rem;
}
.sticky-header .icon { color: inherit; }
@keyframes slideDown { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
.nav-item {
transition: transform 0.3s ease;
animation: fadeInUp 0.5s ease-in-out forwards;
}
.nav-item:hover { transform: scale(1.1) translateY(-5px); }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.nav-item:nth-child(1) { animation-delay: 0.1s; }
.nav-item:nth-child(2) { animation-delay: 0.2s; }
.nav-item:nth-child(3) { animation-delay: 0.3s; }
.nav-item:nth-child(4) { animation-delay: 0.4s; }
.nav-item:nth-child(5) { animation-delay: 0.5s; }
.nav-item:nth-child(6) { animation-delay: 0.6s; }
.nav-item:nth-child(7) { animation-delay: 0.7s; }
.floating-effect { transition: transform 0.3s ease; }
.floating-effect:hover { transform: translateY(-5px) rotate(5deg); }
.section { padding: 4rem 2rem; max-width: 900px; margin: 0 auto; }
.section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.section h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
.section p, .section ul { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
.section ul { list-style: disc; padding-left: 2rem; }
</style>
</head>
<body>
<!-- Sticky Header -->
<header class="sticky-header">
<div class="flex items-center">
<a class="text-inherit mr-4 flex items-center" href="index.html">
<span class="logo-text ml-2">TruthWeb</span>
</a>
</div>
<div class="flex items-center">
<a class="mr-4 icon floating-effect" href="marketplace.html"><i class="fas fa-shopping-cart text-xl sm:text-2xl"></i></a>
<a class="mr-4 icon floating-effect" href="profile.html"><i class="fas fa-user text-xl sm:text-2xl"></i></a>
<a class="icon floating-effect" href="walletdashboard.html"><i class="fas fa-wallet text-xl sm:text-2xl"></i></a>
</div>
</header>
<!-- Navigation Bar -->
<nav class="bg-[var(--primary-color)] py-4">
<ul class="flex flex-wrap justify-center space-x-4">
<li class="nav-item"><a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="index.html">Home</a></li>
<li class="nav-item"><a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="marketplace.html">Marketplace</a></li>
<li class="nav-item"><a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="profile.html">Profile</a></li>
<li class="nav-item"><a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="walletdashboard.html">Wallet</a></li>
<li class="nav-item"><a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="community.html">Community</a></li>
<li class="nav-item"><a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="developers.html">Developers</a></li>
<li class="nav-item"><a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="about.html">About</a></li>
</ul>
</nav>
<!-- Hero Section -->
<div class="hero flex flex-col items-center justify-center">
<h1 class="glow-text fade-in text-5xl md:text-7xl font-bold">How TruthWeb Works</h1>
<p class="text-xl mt-4 text-center fade-in" style="animation-delay: 0.5s; color: var(--text-color);">
Understanding Our Platform and Monetization
</p>
</div>
<!-- How It Works Content -->
<section class="section">
<h2>1. Overview</h2>
<p>
TruthWeb is a decentralized web app launched on March 5, 2025, designed to empower Pi Network Pioneers with a hub for trading, community engagement, and wallet management. Built on the Pi Network’s blockchain, TruthWeb facilitates secure, efficient, and transparent interactions using Pi cryptocurrency.
</p>
</section>
<section class="section">
<h2>2. How TruthWeb Works</h2>
<h3>2.1 User Experience</h3>
<p>
Pioneers access TruthWeb via a responsive web interface, where they can:
</p>
<ul>
<li><strong>Create Profiles:</strong> Customize profiles to connect with the community (<a href="profile.html">profile.html</a>).</li>
<li><strong>Link Pi Wallets:</strong> Send, receive, and manage Pi funds seamlessly (<a href="walletdashboard.html">walletdashboard.html</a>).</li>
<li><strong>Trade in Marketplace:</strong> Buy and sell digital products, goods, services, and courses using Pi (<a href="marketplace.html">marketplace.html</a>).</li>
<li><strong>Engage in P2P Trading:</strong> Execute fast peer-to-peer trades with escrow protection.</li>
<li><strong>Monitor Activity:</strong> Track transactions in real-time via the dashboard.</li>
</ul>
<h3>2.2 Technical Flow</h3>
<p>
The platform operates as follows:
</p>
<ul>
<li><strong>Frontend:</strong> Built with HTML, CSS, JavaScript, and TailwindCSS for a user-friendly experience.</li>
<li><strong>Pi Integration:</strong> Connects to the Pi Network blockchain via APIs for wallet and transaction processing.</li>
<li><strong>Escrow System:</strong> Holds Pi payments until buyer confirmation, ensuring fraud protection.</li>
<li><strong>Future Backend:</strong> Planned Node.js and Express integration for dynamic features (Q2 2025).</li>
</ul>
</section>
<section class="section">
<h2>3. Platform Income</h2>
<p>
TruthWeb generates income through sustainable monetization strategies that support platform growth while remaining accessible to Pioneers.
</p>
<h3>3.1 Revenue Streams</h3>
<ul>
<li><strong>Transaction Fees:</strong> A small percentage (e.g., 1-2%) of each marketplace and P2P trade is collected in Pi, shared between platform maintenance and developers.</li>
<li><strong>Premium Listings:</strong> Sellers can pay a fee (e.g., 5 Pi) to feature their products or services prominently in the marketplace.</li>
<li><strong>Subscription Plans:</strong> Optional premium accounts (e.g., 10 Pi/month) offer benefits like enhanced profile visibility or priority support.</li>
<li><strong>Developer Contributions:</strong> Donations or grants from the Pi community and third-party developers for open-source enhancements.</li>
</ul>
</section>
<section class="section">
<h2>4. Transparency in Developer Income</h2>
<p>
TruthWeb is committed to transparency regarding how income is distributed, particularly to developers who maintain and enhance the platform.
</p>
<h3>4.1 Income Allocation</h3>
<ul>
<li><strong>Developer Pool:</strong> 50% of transaction fees and premium listing revenue is allocated to a developer fund, distributed based on contribution metrics (e.g., GitHub commits, feature implementations).</li>
<li><strong>Platform Operations:</strong> 30% supports hosting, security, and administrative costs.</li>
<li><strong>Community Reinvestment:</strong> 20% funds community initiatives (e.g., events, bounties for new features).</li>
</ul>
<h3>4.2 Public Reporting</h3>
<p>
Income and distribution details are published quarterly on a public dashboard (<a href="developers.html#income">developers.html#income</a>), including:
</p>
<ul>
<li>Total Pi earned from fees and subscriptions.</li>
<li>Breakdown of developer payouts with anonymized contributor IDs.</li>
<li>Expenditure on operational costs and community projects.</li>
</ul>
</section>
<section class="section">
<h2>5. Monetization Strategy</h2>
<p>
TruthWeb’s monetization balances profitability with accessibility, ensuring the platform remains valuable for all Pioneers.
</p>
<h3>5.1 Current Model</h3>
<p>
As of launch (March 5, 2025), monetization is minimal, relying on voluntary transaction fees and community donations to bootstrap development. The focus is on building a robust user base.
</p>
<h3>5.2 Future Plans</h3>
<ul>
<li><strong>Q2 2025:</strong> Introduce transaction fees (1-2%) and premium listings to fund backend development.</li>
<li><strong>Q3 2025:</strong> Launch subscription plans and developer APIs, expanding revenue while enabling third-party integrations.</li>
<li><strong>Q4 2025:</strong> Implement a community governance model where Pioneers vote on fee structures and income allocation.</li>
</ul>
<p>
All monetization updates will be detailed in the whitepaper and reflected in public reports for transparency.
</p>
</section>
<!-- Call to Action -->
<section class="section">
<div class="text-center">
<h2 class="text-2xl font-semibold mb-4">Get Involved</h2>
<p class="text-lg text-gray-600 mb-6 max-w-2xl mx-auto">
Learn more about TruthWeb and contribute to its growth.
</p>
<a href="about.html" class="btn mr-4">About Us</a>
<a href="developers.html" class="btn">Join Developers</a>
<a href="whitepaper.html" class="btn">Read Whitepaper</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-[var(--primary-color)] py-8">
<div class="container mx-auto text-center">
<div class="mb-4">
<a class="text-[var(--text-color)] mx-2 floating-effect" href="https://www.facebook.com/reimaginetruthofficial/" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="text-[var(--text-color)] mx-2 floating-effect" href="https://x.com/reimagine_truth" target="_blank"><i class="fab fa-twitter"></i></a>
<a class="text-[var(--text-color)] mx-2 floating-effect" href="https://t.me/TruthWebOfficial" target="_blank"><i class="fab fa-telegram"></i></a>
<a class="text-[var(--text-color)] mx-2 floating-effect" href="https://www.youtube.com/@ReimagineTruth" target="_blank"><i class="fab fa-youtube"></i></a>
<a class="text-[var(--text-color)] mx-2 floating-effect" href="https://github.com/username/TruthWeb" target="_blank"><i class="fab fa-github"></i></a>
</div>
<p class="text-[var(--text-color)] mb-4">© 2025 TruthWeb. All rights reserved.</p>
<div class="text-[var(--text-color)] text-sm">
<a href="about.html" class="mx-2 hover:text-[var(--highlight-color)]">About Us</a> |
<a href="terms.html" class="mx-2 hover:text-[var(--highlight-color)]">Terms & Conditions</a> |
<a href="privacy.html" class="mx-2 hover:text-[var(--highlight-color)]">Privacy Policy</a> |
<a href="contact.html" class="mx-2 hover:text-[var(--highlight-color)]">Contact</a>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
window.addEventListener('scroll', function() {
const header = document.querySelector('.sticky-header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
</body>
</html>