StuffSwap/whatIsStuffSwap.html at main · Huomagift/StuffSwap · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>What is Stuff Swap?</title>
  <link rel="stylesheet" href="css/styles.css"/>
  <script src="js/config.js"></script>
  <script src="js/auth.js"></script>
</head>
<body>
  <div class="container">
    <!-- Header -->
    <section class="top-bar">
      <div class="menu-icon" onclick="toggleNav()">☰</div>

          <nav class="nav-links" id="navLinks">
      <a href="dashboard.html">Home</a>
      <a href="whatIsStuffSwap.html">About</a>
      <a href="favorites.html">Favorites</a>
      <a href="cart.html">Cart</a>
      <a href="profile.html">Profile</a>
    </nav>

      <div class="header-left">
        <div class="page-title">About</div>
        <div class="logo"><strong>Stuff</strong> Swap</div>
      </div>

      <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" placeholder="Search | Location">
        <span class="clear-icon">✕</span>
      </div>

      <div class="header-icons">
        <a href="favorites.html" class="icon">❤️</a>
        <a href="cart.html" class="icon">🛒</a>
        <a href="wireframe-version.html" class="icon">🔁</a>
      </div>
    </section>

    <!-- Map Section -->
    <div id="map" class="map-placeholder">
      <div class="map-content">
        <h2>📍 Find Items Near You</h2>
        <p>Enter your ZIP code to discover items in your neighborhood</p>
      </div>
    </div>

    <!-- Intro Section -->
    <div class="intro">
      <h1>Welcome to Stuff Swap</h1>
      <p>Your neighborhood-powered marketplace.</p>
      <p>Instead of throwing things away, trade them with someone just blocks away.</p>
      <p><strong>Stuff Swap</strong> connects you with nearby users by ZIP code who are looking to swap gently-used items - clothes, books, toys, and more.</p>
    </div>

    <!-- Hashtags -->
    <div class="hashtags">
      <span>#Sustainability</span>
      <span>#StuffSwap</span>
      <span>#Eco-friendly</span>
    </div>

    <!-- Search Section -->
    <div class="search-section">
      <input type="text" id="zipInput" placeholder="Enter your zip code"/>
      <button onclick="loadItems()" class="search-btn">Find Items to Swap</button>
    </div>

    <!-- Results Section -->
    <div id="itemsList" class="items-container"></div>
  </div>

  <script src="js/userActions.js"></script>
  <script src="js/whatIsStuffSwapBackend.js"></script>
  <script>
    function toggleNav() {
      document.getElementById("navLinks").classList.toggle("show");
    }
  </script>

  <!-- Footer -->
  <footer class="main-footer">
    <div class="footer-content">
      <!-- Left Section - Branding -->
      <div class="footer-brand">
        <div class="footer-logo">
          <span class="logo-text">STUFF</span>
          <span class="logo-accent">SWAP</span>
        </div>
        <p class="footer-tagline">Thoughtful swapping for growing communities.</p>
        <p class="footer-copyright">© 2024 Stuff Swap. Community Exchange Platform. All Rights Reserved.</p>
      </div>

      <!-- Middle Section - Newsletter -->
      <div class="footer-newsletter">
        <h3>COMMUNITY INSIGHTS FOR CLEVER SWAPPERS</h3>
        <h4>DIRECT TO YOUR INBOX</h4>
        <div class="newsletter-form">
          <input type="email" placeholder="YOUR E-MAIL" class="newsletter-input">
          <button class="newsletter-btn">SUBSCRIBE</button>
        </div>
      </div>

      <!-- Right Section - Social & Contact -->
      <div class="footer-contact">
        <div class="social-section">
          <h3>FOLLOW US</h3>
          <div class="social-icons">
            <a href="#" class="social-icon">📷</a>
            <a href="#" class="social-icon">👥</a>
            <a href="#" class="social-icon">🐦</a>
          </div>
        </div>
        <div class="contact-section">
          <h3>CONTACT US</h3>
          <p class="contact-info">support@stuffswap.com</p>
        </div>
      </div>
    </div>

    <!-- Bottom Legal Links -->
    <div class="footer-legal">
      <a href="#" class="legal-link">PRIVACY POLICY</a>
      <a href="#" class="legal-link">TERMS AND CONDITIONS</a>
    </div>
  </footer>
</body>
</html>