-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpitrack.html
More file actions
150 lines (145 loc) · 10.6 KB
/
pitrack.html
File metadata and controls
150 lines (145 loc) · 10.6 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>PiTrack | 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">PiTrack</h1>
<p class="text-xl mt-4 text-center fade-in" style="animation-delay: 0.5s; color: var(--text-color);">
Monitor Your Pi Activity
</p>
</div>
<!-- PiTrack Section -->
<section id="pitrack" class="py-16 px-4 bg-[var(--primary-color)] text-[var(--text-color)]">
<h2 class="text-3xl font-bold text-center mb-8">PiTrack 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="wallet" class="card bg-[var(--secondary-color)] text-[var(--primary-color)]">
<i class="fas fa-chart-bar text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Track Your Pi</h3>
<p class="mb-4">Monitor your wallet balance and transaction history in real-time with detailed insights.</p>
<a href="walletdashboard.html" class="btn">View Wallet</a>
</div>
<div id="history" class="card bg-[var(--secondary-color)] text-[var(--primary-color)]">
<i class="fas fa-history text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Transaction Insights</h3>
<p class="mb-4">Get real-time updates and analytics on your Pi activity across TruthWeb.</p>
<a href="history.html" class="btn">Check History</a>
</div>
<div id="metrics" class="card bg-[var(--secondary-color)] text-[var(--primary-color)]">
<i class="fas fa-tachometer-alt text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Ecosystem Metrics</h3>
<p class="mb-4">Track TruthWeb’s Pi usage trends and see how the ecosystem is growing.</p>
<a href="metrics.html" class="btn">See Stats</a>
</div>
</div>
<div class="text-center mt-8">
<p class="text-lg mb-4">Stay on top of your Pi with PiTrack. Connect your wallet to get started!</p>
<a href="wallet.html" class="btn">Connect 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>