EchoedWild/index.html at main · max-yt2025/EchoedWild · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>EchoedWild — Protecting Endangered Animals</title>
  <meta name="description" content="EchoedWild — learn about endangered animals, their bios, status, and conservation efforts." />
  <link rel="icon" href="favicon1.ico" />
 <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <script defer src="js/main.js"></script>
</head>
<body>
<div id="cursor-inner"></div>
<div id="cursor-outer"></div>
  <header class="site-header glass">
    <div class="container header-inner">

      <div class="logo">
        <img src="images/favicon.png" alt="EchoedWild Logo" class="logo-img">
     </div>

      <a class="logo" href="index.html"><span class="echo">Echoed</span><span class="wild">Wild</span></a>

      <div class="search-wrap desktop-only">
        <input id="globalSearch" class="search" type="search" placeholder="Search animals, habitats, status..." aria-label="Search animals">
      </div>

      <nav class="nav" id="mainNav" aria-label="Main navigation">
        <ul>
          <li><a class="active" href="index.html">Home</a></li>
          <li><a href="animals.html">Animals</a></li>
          <li><a href="status.html">Status</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>

      <div class="controls">
        <button class="icon-btn" id="searchToggle" title="Open search (mobile)">🔍</button>
        <button class="hamburger" id="hamburger" aria-label="Toggle menu" title="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="container hero-inner">
        <div class="hero-text">
          <h1 class="glow">EchoedWild</h1>
          <p class="muted">Protecting wildlife with knowledge and action. Explore endangered species, read bios, and check the status tracker.</p>
          <div class="hero-cta">
            <a class="btn" href="animals.html">Explore Animals</a>
            <a class="btn ghost" href="status.html">View Status Tracker</a>
          </div>
          <div class="feature-logos">
            <div class="pill">Student Project</div>
            <div class="pill">Data-driven</div>
            <div class="pill">Mobile-first</div>
          </div>
        </div>

        <div class="hero-media">
          <!-- Unsplash query image (no upload needed) -->
          <img src="images/Colla/ge.png" alt="Wild animals collage 'Coming Soon'" loading="lazy">
        </div>
      </div>
    </section>

    <section class="featured container animate-up">
      <h2>Featured Endangered Animals</h2>
      <div id="featuredGrid" class="grid">
        <!-- Cards populated from data/animals.json by js/main.js -->
      </div>
    </section>

<section id="subscriber-counter" style="padding: 20px; background-color: #f9f9f9; text-align: center;">
  <h2 style="font-family: 'Segoe UI', sans-serif; font-size: 1.2rem; margin-bottom: 5px;">
    Support us by following our channel!
  </h2>
  <hr style="width: 60%; margin: 10px auto; border: 0; border-top: 2px solid #ccc;">
  <iframe
    src="https://livecounts.io/embed/youtube-live-subscriber-counter/UCKrBCY6Wy5CvqBCroZ3Heiw"
    width="300px"
    height="80px"
    frameborder="0"
    style="border: 0;">
  </iframe>
</section>


<!-- Contact and Newsletter Section Wrapper -->
<section class="connect-section">
  <div class="container">

<section id="contact" class="contact-section"> <h2>Contact Us</h2> <form action="https://formspree.io/f/movlrqnd" method="POST"> <label for="name">Name</label> <input type="text" name="name" id="name" required> <label for="email">Email</label> <input type="email" name="_replyto" id="email" required> <label for="message">Message</label> <textarea name="message" id="message" rows="5" required></textarea> <button type="submit">Send Message</button> </form> </section>

<section id="newsletter" style="padding: 2em; background-color: #f9f9f9; text-align: center;"> <h2 style="font-size: 2em; margin-bottom: 0.5em;">🌿 Stay Wild with EchoedWild</h2> <p style="font-size: 1.1em; margin-bottom: 1em;"> Subscribe to our newsletter for the latest animal profiles, conservation updates, and digital discoveries. </p> <form action="https://buttondown.email/api/emails/embed-subscribe/EchoedWild" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/EchoedWild', 'popupwindow')"> <input type="email" name="email" id="bd-email" placeholder="Enter your email" required style="padding: 0.6em; width: 250px; max-width: 80%; border: 1px solid #ccc; border-radius: 4px;"> <br><br> <input type="submit" value="Subscribe" style="padding: 0.6em 1.2em; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;"> </form> </section>

    <section class="info container animate-up">
      <h2>Why it matters</h2>
      <p class="muted">Species loss affects ecosystems, food webs, and human livelihoods. EchoedWild helps students learn and share conservation actions.</p>
    </section>
  </main>

  <footer class="site-footer glass">
    <div class="container footer-inner">
      <div class="footer-left">
        <a class="logo small" href="index.html">EchoedWild</a>
        <p class="muted">© <span id="year"></span> EchoedWild — All rights reserved.</p>
      </div>
      <div class="footer-right">
        <nav>
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="tos.html">Terms</a></li>
            <li><a href="privacy.html">Privacy</a></li>
            <li><a href="status.html">Status Tracker</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </footer>

<div class="cookie-popup" id="cookiePopup">
  <div class="cookie-box">
    <span class="close-btn" id="closeCookie">×</span>
    <div class="cookie-emoji">🍪</div>
    <h3>We use cookies</h3>
    <p>We use cookies to personalize your experience and support conservation efforts. Read our <a href="/privacy">Privacy Policy</a>.</p>
    <div class="cookie-actions">
      <button id="acceptCookies">Accept</button>
      <button id="declineCookies">Reject</button>
    </div>
  </div>
</div>
</body>
</html>