test/contact.html at development · ReimagineTruth/test · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Contact | 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); } }
      .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); }
      /* Custom styles for contact section */
      #contact input, #contact textarea { background: var(--secondary-color); color: var(--primary-color); border: 2px solid var(--highlight-color); }
      #contact button { background: var(--button-bg-color); color: var(--button-text-color); border: 2px solid var(--highlight-color); }
      #contact button:hover { background: var(--button-hover-bg-color); color: var(--button-hover-text-color); }
      #contact a { color: var(--highlight-color); }
      #contact a:hover { color: var(--secondary-color); }
    </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">Contact Us</h1>
      <p class="text-xl mt-4 text-center fade-in" style="animation-delay: 0.5s; color: var(--text-color);">
        Get in Touch with TruthWeb
      </p>
    </div>

    <!-- Contact Section -->
    <section class="bg-[var(--primary-color)] text-[var(--text-color)] py-16 px-8" id="contact">
      <h2 class="text-3xl font-bold mb-8 text-center">Contact Us</h2>
      <p class="text-lg mb-4 text-center">We'd love to hear from you! Whether you have questions, feedback, or need assistance, feel free to reach out.</p>

      <div class="contact-info mb-8 text-center">
        <h3 class="text-2xl font-semibold mb-4">Email</h3>
        <p class="text-lg mb-4">For any inquiries, please email us at:</p>
        <p class="text-lg font-semibold"><a href="mailto:reimaginetruth@gmail.com" class="text-[var(--highlight-color)] hover:text-[var(--secondary-color)]"> support@truthweb.com</a></p>
      </div>

      <div class="contact-form max-w-2xl mx-auto">
        <h3 class="text-2xl font-semibold mb-4 text-center">Send a Message</h3>
        <form action="https://formspree.io/f/mrbbqdgl" method="POST">
          <label for="name" class="block text-lg mb-2">Your Name:</label>
          <input type="text" id="name" name="name" class="w-full p-3 mb-4 border border-[var(--highlight-color)] rounded-lg" required>

          <label for="email" class="block text-lg mb-2">Your Email:</label>
          <input type="email" id="email" name="email" class="w-full p-3 mb-4 border border-[var(--highlight-color)] rounded-lg" required>

          <label for="message" class="block text-lg mb-2">Your Message:</label>
          <textarea id="message" name="message" class="w-full p-3 mb-4 border border-[var(--highlight-color)] rounded-lg text-black" rows="4" required></textarea>

          <button type="submit" class="bg-[var(--button-bg-color)] text-[var(--button-text-color)] py-2 px-6 rounded-lg border-2 border-[var(--highlight-color)] hover:bg-[var(--button-hover-bg-color)] hover:text-[var(--button-hover-text-color)]">Send Message</button>
        </form>
      </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>