-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpitrade.html
More file actions
150 lines (145 loc) · 10.4 KB
/
pitrade.html
File metadata and controls
150 lines (145 loc) · 10.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Pi Trade | TruthWeb</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<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: 60vh; 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); } }
.card { background: var(--secondary-color); border: 2px solid var(--highlight-color); border-radius: 10px; padding: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; animation: slideIn 1s ease-in-out; }
.card:hover { transform: translateY(-10px) rotate(2deg); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); }
@keyframes slideIn { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } }
.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; }
.floating-effect { transition: transform 0.3s ease; }
.floating-effect:hover { transform: translateY(-5px) rotate(5deg); }
</style>
</head>
<body>
<!-- Header Section -->
<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="wallet.html"><i class="fas fa-wallet text-xl sm:text-2xl"></i></a>
</div>
</header>
<!-- Navigation Section -->
<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="wallet.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>
</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">Pi Trade</h1>
<p class="text-xl mt-4 text-center fade-in" style="animation-delay: 0.5s; color: var(--text-color);">
Trade Pi with Ease
</p>
</div>
<!-- Pi Trade Section -->
<section id="pitrade" class="py-16 px-4">
<h2 class="text-3xl font-bold text-center mb-8">Pi Trade Features</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div id="p2p" class="card">
<i class="fas fa-handshake text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">P2P Trading</h3>
<p class="mb-4">Trade Pi directly with other Pioneers in a secure, peer-to-peer environment.</p>
<a href="p2p.html" class="btn">Start Trading</a>
</div>
<div id="trends" class="card">
<i class="fas fa-chart-line text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Market Trends</h3>
<p class="mb-4">View real-time Pi value trends within the TruthWeb ecosystem to make informed decisions.</p>
<a href="trends.html" class="btn">Check Trends</a>
</div>
<div id="dashboard" class="card">
<i class="fas fa-exchange-alt text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Trade Dashboard</h3>
<p class="mb-4">Manage your trade offers, track history, and monitor performance from a single dashboard.</p>
<a href="pitradedashboard.html" class="btn">Open Dashboard</a>
</div>
</div>
<div class="text-center mt-8">
<p class="text-lg mb-4">Ready to dive into Pi trading? Explore these features and more!</p>
<a href="wallet.html" class="btn">Connect Your Wallet</a>
</div>
</section>
<!-- Footer Section -->
<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>