Mainstreet/index.html at main · cloud-post-code/Mainstreet · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "vs6z0vw6fn");
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main St. – Shop Profiles</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header class="site-header">
    <div class="header-left">
      <a href="#" class="logo-link" id="logo-link" aria-label="Main St. Home">
        <span class="header-title">MAIN ST.</span>
      </a>
    </div>
    <div class="header-actions">
      <a href="directory.html" class="header-btn header-btn--shop-local"><span class="material-icons" aria-hidden="true">storefront</span><span class="header-btn-label">Shop local</span></a>
      <a href="contact.html" class="header-btn contact-link">Contact</a>
      <div class="auth-wrap">
        <button type="button" class="header-btn auth-trigger" id="auth-trigger" aria-haspopup="true" aria-expanded="false" aria-label="Sign in">
          <span class="material-icons">person</span>
          <span class="header-btn-label" id="auth-trigger-label">Sign In</span>
        </button>
        <div class="auth-panel" id="auth-panel" role="dialog" aria-label="Sign in or create account" aria-hidden="true">
          <div class="auth-signed-out" id="auth-signed-out">
            <div class="auth-tabs">
              <button type="button" class="auth-tab active" data-tab="login">Sign in</button>
              <button type="button" class="auth-tab" data-tab="register">Create account</button>
            </div>
            <form class="auth-form auth-login-form" id="auth-login-form">
              <label for="auth-login-input">Email or username</label>
              <input type="text" id="auth-login-input" name="email_or_username" autocomplete="username" required>
              <label for="auth-login-password">Password</label>
              <input type="password" id="auth-login-password" name="password" autocomplete="current-password" required>
              <button type="submit" class="auth-submit">Sign in</button>
            </form>
            <form class="auth-form auth-register-form" id="auth-register-form" hidden>
              <label for="auth-register-email">Email</label>
              <input type="email" id="auth-register-email" name="email" autocomplete="email" required>
              <label for="auth-register-username">Username</label>
              <input type="text" id="auth-register-username" name="username" autocomplete="username" required>
              <label for="auth-register-password">Password</label>
              <input type="password" id="auth-register-password" name="password" autocomplete="new-password" required>
              <label class="auth-checkbox-label">
                <input type="checkbox" id="auth-subscribe-emails" name="subscribe_emails" value="1">
                Subscribe to great emails
              </label>
              <button type="submit" class="auth-submit">Create account</button>
            </form>
            <p class="auth-error" id="auth-error" role="alert" hidden></p>
          </div>
          <div class="auth-signed-in" id="auth-signed-in" hidden>
            <p class="auth-user-line"><strong>Username:</strong> <span id="auth-display-username"></span></p>
            <p class="auth-user-line"><strong>Email:</strong> <span id="auth-display-email"></span></p>
            <div class="auth-admin-actions" id="auth-admin-actions" hidden>
              <button type="button" class="auth-seed-btn" id="auth-seed-btn">Sync shop data</button>
              <span class="auth-seed-status" id="auth-seed-status"></span>
            </div>
            <button type="button" class="auth-signout" id="auth-signout">Sign out</button>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="map-journey-wrapper" id="map-journey-wrapper">
    <div class="map-journey-bg" aria-hidden="true" id="map-journey-bg"></div>
    <main class="main-content">
    <section class="controls">
      <div class="search-wrap">
        <span class="search-icon material-icons" aria-hidden="true">search</span>
        <label for="search-input" class="visually-hidden">Search by name</label>
        <input type="search" id="search-input" class="search-input" placeholder="Search by name" autocomplete="off">
      </div>
      <div class="filters street-sign-filters" role="group" aria-label="Shop category filters">
        <button type="button" class="filter-btn street-sign active" data-filter="all"><span class="street-sign-text">Main Street</span></button>
        <button type="button" class="filter-btn street-sign" data-filter="Clothing Boutique"><span class="street-sign-text">Apparel Avenue</span></button>
        <button type="button" class="filter-btn street-sign" data-filter="Gifts"><span class="street-sign-text">Present Parkway</span></button>
        <button type="button" class="filter-btn street-sign" data-filter="Vintage / Thrift"><span class="street-sign-text">Secondhand Street</span></button>
        <button type="button" class="filter-btn street-sign" data-filter="Stationary"><span class="street-sign-text">Letter Lane</span></button>
        <button type="button" class="filter-btn street-sign" data-filter="Home Good"><span class="street-sign-text">Decor Detour</span></button>
      </div>
    </section>

    <div class="shop-grid" id="shop-grid"></div>
    <div class="scroll-sentinel" id="scroll-sentinel" aria-hidden="true"></div>
    <p class="loading-indicator" id="loading-indicator" hidden>Loading more shops…</p>
    <p class="no-results" id="no-results" hidden>No shops match your search or filters.</p>
  </main>
  </div>

  <!-- Share modal (per-card: Copy link = shop link, optional Share via) -->
  <div class="share-modal-overlay" id="share-modal-overlay" aria-hidden="true">
    <div class="share-modal" role="dialog" aria-label="Share options">
      <button type="button" class="share-modal-close" id="share-modal-close" aria-label="Close">
        <span class="material-icons">close</span>
      </button>
      <h3 class="share-modal-title">Share this shop</h3>
      <div class="share-modal-actions">
        <button type="button" class="share-copy-btn" id="share-copy-btn">Copy link</button>
        <button type="button" class="share-via-btn" id="share-via-btn" style="display:none">Share via…</button>
      </div>
    </div>
  </div>

  <!-- Comment sidebar -->
  <div class="comment-sidebar-overlay" id="comment-sidebar-overlay" aria-hidden="true"></div>
  <aside class="comment-sidebar" id="comment-sidebar" aria-label="Comments">
    <div class="comment-sidebar-header">
      <h3 class="comment-sidebar-title" id="comment-sidebar-title">Comments</h3>
      <button type="button" class="comment-sidebar-close" id="comment-sidebar-close" aria-label="Close">
        <span class="material-icons">close</span>
      </button>
    </div>
    <div class="comment-list" id="comment-list"></div>
    <form class="comment-form" id="comment-form">
      <textarea id="comment-input" class="comment-input" placeholder="Write a comment…" rows="3" required></textarea>
      <button type="submit" class="comment-submit">Submit</button>
    </form>
  </aside>

  <footer class="site-footer" role="contentinfo">
    <p class="site-footer-inner"><a href="public/privacy.html">Privacy Policy</a> · <a href="public/terms.html">Terms &amp; Conditions</a></p>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
  <script src="js/auth.js"></script>
  <script src="js/app.js"></script>
  <script src="js/map-journey.js"></script>
</body>
</html>