funcheapmap/index.html at main · ProLoser/funcheapmap · 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
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>FunCheap SF Mapper</title>
  <meta name="description" content="The Unofficial Map of FunCheapSF Events Updated Daily! Pick a day and a category to plan activities or just clear the filters and browse through all the most popular events the Bay Area has to offer. Free. Open Source. No registration necessary. Works with Mobile and Tablets as well as Computers!" />
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="icon" href="favicon_fc.ico" />
  <link rel="shortcut icon" href="favicon_fc.ico" />
</head>
<body>
  <div id="map-canvas"></div>

  <div id="event-card">
    <div id="event-card-handle"></div>
    <div id="event-card-nav">
      <button id="event-card-prev" class="ui-button" title="Previous event">&#8249;</button>
      <span id="event-card-counter"></span>
      <button id="event-card-next" class="ui-button" title="Next event">&#8250;</button>
    </div>
    <div id="event-card-slider">
      <div id="event-card-current">
        <h2 class="event-card-title"></h2>
        <p class="event-card-meta"></p>
        <p class="event-card-cost"></p>
        <div id="event-card-actions">
          <button id="event-card-details" class="ui-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg> Details</button>
          <span id="event-card-calendar-container"></span>
          <button id="event-card-close" class="ui-button">✕ Close</button>
        </div>
      </div>
      <div id="event-card-peek" aria-hidden="true">
        <h2 class="event-card-title"></h2>
        <p class="event-card-meta"></p>
        <p class="event-card-cost"></p>
      </div>
    </div>
  </div>

  <button id="card-mode-toggle" class="ui-button" title="Toggle floating card view">
    <svg class="icon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M20 3H4C2.9 3 2 3.9 2 5v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H4v-6h16v6zm0-8H4V5h16v6z"/>
    </svg>
    <svg class="icon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M20 3H4C2.9 3 2 3.9 2 5v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H4v-6h16v6zm0-8H4V5h16v6z"/>
      <path d="M7 8l5 5 5-5z"/>
    </svg>
    Cards
  </button>

  <a id="feedback" class="ui-button" target="_blank" href="https://github.com/ProLoser/funcheapmap/issues">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"></path>
      <path d="M11 5h2v6h-2zm0 8h2v2h-2z"></path>
    </svg>
    Feedback
  </a>

  <form id="controls" onreset="filter({ date: '', category: '' })">
    <details open>
      <summary>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="filter-icon">
          <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
        </svg>
        Showing <output name="countEvents" for="date">0</output> Events
      </summary>
      <p>
        <label for="date">Date:</label>
        <input id="date" name="date" type="date" onchange="filter({ date: this.value })">
        <button type="reset">Clear</button>
      </p>
      <p>
        <label for="category">Categories: <output name="countCategories" for="category">All</output></label>
      </p>
      <p>
      <!-- <select id="category" onchange="filter({ category: this.value })"> -->
      <select id="category" name="category" multiple onchange="filter({ category: Array.from(this.selectedOptions).map(o => o.value).join('~') })">
        <!-- These are programmatically replaced after data loads -->
        <option value="**Annual Event**">Annual Event</option>
        <option value="*Top Pick*">Top Pick</option>
        <option value="420">420</option>
        <option value="4th of July">4th of July</option>
        <option value="Top Annual Event">Top Annual Event</option>
        <option value="Adults Only">Adults Only</option>
        <option value="Art & Museums">Art &amp; Museums</option>
        <option value="Charity & Volunteering">Charity &amp; Volunteering</option>
        <option value="Cheap Drinks">Cheap Drinks</option>
        <option value="Club / DJ">Club / DJ</option>
        <option value="Comedy">Comedy</option>
        <option value="Discount Tix / Promo Codes">Discount Tix / Promo Codes</option>
        <option value="Eating & Drinking">Eating &amp; Drinking</option>
        <option value="Fairs & Festivals">Fairs &amp; Festivals</option>
        <option value="Free Food">Free Food</option>
        <option value="Fun & Games">Fun &amp; Games</option>
        <option value="Geek Event">Geek Event</option>
        <option value="In Person">In Person</option>
        <option value="Kids & Families">Kids &amp; Families</option>
        <option value="Lectures & Workshops">Lectures &amp; Workshops</option>
        <option value="LGBTQ+">LGBTQ+</option>
        <option value="Literature">Literature</option>
        <option value="Live Music">Live Music</option>
        <option value="Movies">Movies</option>
        <option value="Outdoors">Outdoors</option>
        <option value="Other">Other</option>
        <option value="Rainy Day Fun">Rainy Day Fun</option>
        <option value="San FranFREEsco">San FranFREEsco</option>
        <option value="Shopping & Fashion">Shopping &amp; Fashion</option>
        <option value="Sponsored">Sponsored</option>
        <option value="Sports & Wellness">Sports &amp; Wellness</option>
        <option value="Theater & Performance">Theater &amp; Performance</option>
        <option value="Walks & Tours">Walks &amp; Tours</option>
      </select>
    </p>
    </details>
  </form>
  <script async defer src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2"></script>
  <script src="map.js"></script>
  <script async src="https://maps.googleapis.com/maps/api/js?v=3.exp&loading=async&key=__GOOGLE_TOKEN__&libraries=marker&callback=initialize"></script>

<!-- Sentry -->
<script src="https://cdn.jsdelivr.net/npm/@sentry/browser@8/build/bundle.min.js" crossorigin="anonymous"></script>
<script>
  Sentry.init({ dsn: '__SENTRY_DSN__', environment: 'funcheapsf' })
</script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0NECRETGYD"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0NECRETGYD');
</script>
</body>
</html>