-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (166 loc) · 10.4 KB
/
index.html
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Not Poutine, FYI.</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i&display=swap" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="a running collection of menu items which claim to be poutine, but aren't.">
<meta http-equiv="last-modified" content="2022-12-13T22:43:18.222Z">
<link rel="apple-touch-icon" sizes="180x180" href="https://ahoylemon.github.io/notpoutine.fyi/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://ahoylemon.github.io/notpoutine.fyi/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://ahoylemon.github.io/notpoutine.fyi/favicon-16x16.png">
<link rel="manifest" href="https://ahoylemon.github.io/notpoutine.fyi/site.webmanifest">
<link rel="mask-icon" href="https://ahoylemon.github.io/notpoutine.fyi/safari-pinned-tab.svg" color="#d12222">
<link rel="shortcut icon" href="https://ahoylemon.github.io/notpoutine.fyi/favicon.ico">
<meta name="msapplication-config" content="https://ahoylemon.github.io/notpoutine.fyi/browserconfig.xml">
<meta name="msapplication-TileColor" content="#d12222">
<meta name="theme-color" content="#efedd0">
<!-- Twitter-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@AhoyLemon">
<meta name="twitter:title" content="Not Poutine, FYI.">
<meta name="twitter:description" content="a running collection of menu items which claim to be poutine, but aren't.">
<meta name="twitter:image" content="https://ahoylemon.github.io/notpoutine.fyi/og-wide.png">
<meta name="twitter:url" content="https://ahoylemon.github.io/notpoutine.fyi">
<meta property="og:title" content="Not Poutine, FYI.">
<meta property="og:type" content="website">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="a running collection of menu items which claim to be poutine, but aren't.">
<meta property="og:url" content="https://ahoylemon.github.io/notpoutine.fyi">
<meta property="og:image" content="https://ahoylemon.github.io/notpoutine.fyi/og-wide.png">
</head>
<body>
<div id="app" v-cloak>
<header class="site-header">
<h1>Not Poutine, FYI</h1>
<nav class="questions"><a @click="showScores = !showScores">Scores</a><a id="Confused" @click="scrollToAnchor('#Explainer')" onClick="sendEvent('click','Confused?','explainer')">Confused?</a></nav>
</header>
<main class="crimes">
<template v-for="(crime, index) in crimes">
<article class="crime add-a-crime" v-if="index == Math.floor( (crimes.length / 2) )">
<div class="details">
<h2 class="name"> <a href="https://forms.gle/1zV1dYj7vh8t81wT9" onClick="sendEvent('click','form','https://forms.gle/1zV1dYj7vh8t81wT9')">Report A Crime</a></h2>
<div class="price"></div>
<figure style="background-image:url(img/crimes/police-poutine.jpg)"></figure>
<div class="description">
<p class="empty" style="font-style:normal">Are you aware of a poutine crime which you'd like to report here? Great! <a href="https://forms.gle/1zV1dYj7vh8t81wT9" onClick="sendEvent('click','form','https://forms.gle/1zV1dYj7vh8t81wT9')">Use this form</a>. Your crime report will be considered for addition to the site.</p>
</div>
</div>
</article>
<article class="crime" :crime-name="crime.name" :crime-place="crime.place" :crime-city="crime.city" :crime-country="crime.country"><a v-if="crime.place" :name="crime.place"></a>
<div class="details">
<h2 class="name">{{crime.name}}</h2>
<div class="price"> <abbr title="all prices listed in Canadian dollars."> <sup>$</sup><span>{{crime.price.toFixed(2)}} </span></abbr></div>
<figure><img :src="'img/crimes/'+crime.pic" loading="lazy"></figure>
<div class="description">
<p class="empty" v-if="!crime.description">no description given</p>
<p v-if="crime.description">{{crime.description}}</p>
</div>
<ul class="requirements">
<li class="yes" v-if="crime.requirements.fries">fries</li>
<li class="no" v-if="!crime.requirements.fries" title="poutine must have french fries (not tots or potato wedges)"> <span>fries</span></li>
<li class="yes" v-if="crime.requirements.curds">curds</li>
<li class="no" v-if="!crime.requirements.curds" title="poutine must have fresh (not fried) cheese curds"> <span>curds</span></li>
<li class="yes" v-if="crime.requirements.gravy">gravy</li>
<li class="no" v-if="!crime.requirements.gravy" title="poutine must have brown gravy"> <span>gravy</span></li>
</ul>
</div>
<div class="location">
<div class="place-name">{{crime.place}} </div>
<div class="region" v-if="crime.city && crime.state"><span class="city">{{crime.city}}, </span><span class="state">{{crime.state}}</span></div>
<div class="region" v-else-if="crime.city && crime.country"><span class="city">{{crime.city}}, </span><span class="country">{{crime.country}}</span></div>
<div class="region" v-else-if="crime.city"><span class="city">{{crime.city}}</span></div>
<div class="region" v-else-if="crime.country"><span class="city">{{crime.country}}</span></div>
</div>
</article>
</template>
</main>
<aside class="explainer" id="Explainer">
<p>
Originating from Quebec, <strong>poutine</strong> is a simple dish made with french fries, brown gravy and cheese curds. Sometimes people add other things to their poutine, such as scallions or pork belly
or pickled onion or kimchi and <i>that is totally fine.</i> As long as the three basic ingredients are covered, it's poutine.
</p>
<p>This website is an archive of things that self-describe as poutine, which, just so you know, aren't.</p>
<p>This website was done by <a href="https://ahoylemon.xyz" onClick="sendEvent('click','website','ahoylemon.xyz')">Lemon</a>, who has done a number of other websites of similar value, such as <a href="https://damn.dog" onClick="sendEvent('click','website','damn.dog')">damn.dog</a> and <a href="https://kinda.fun/sisyphus" onClick="sendEvent('click','website','ahoylemon.xyz')">Sisyphus Clicker</a>.</p>
<p>Want to add your own poutine crime? <i>That's great! </i><a href="https://forms.gle/1zV1dYj7vh8t81wT9" onClick="sendEvent('click','form','https://forms.gle/1zV1dYj7vh8t81wT9')">Use this form </a> and it will be considered for the collection.</p>
</aside>
<div class="scorecard-outer" v-if="showScores">
<div class="scorecard"><a class="close" @click="showScores = false">x</a>
<div class="header-line"><span>{{crimes.length}} crimes reported so far.</span></div>
<table class="requirements">
<thead>
<tr>
<th> </th>
<th class="good">Pass</th>
<th class="bad">Fail</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="requirement-name">Fries</div>
<div class="rule">many varieties of fries are acceptable, however potato wedges, tater tots, cottage fries or home fries are not.</div>
</td>
<td class="good"><span>{{computedScores.fries.good}}</span></td>
<td class="bad"><span>{{computedScores.fries.bad}}</span></td>
</tr>
<tr>
<td>
<div class="requirement-name">Curds</div>
<div class="rule">typically cheddar, although that is negotiable. However, the curds should be fresh (not fried), and should be curds. Shredded mozzarella is not cheese curds.</div>
</td>
<td class="good"><span>{{computedScores.curds.good}}</span></td>
<td class="bad"><span>{{computedScores.curds.bad}}</span></td>
</tr>
<tr>
<td>
<div class="requirement-name">Gravy</div>
<div class="rule">some type of brown gravy needs to be present. This can be made in many different ways and can be called "demi-glace" if you feel like it. Cream sauce is not brown gravy.</div>
</td>
<td class="good"><span>{{computedScores.gravy.good}}</span></td>
<td class="bad"><span>{{computedScores.gravy.bad}}</span></td>
</tr>
</tbody>
</table>
<dl class="list">
<dt>Represented Countries</dt>
<dd><span v-for="country in computedScores.countryList">{{country}}</span></dd>
</dl>
<dl class="figure">
<dt>Average price</dt>
<dd><span class="big-number">{{'$'+computedScores.averagePrice.toFixed(2)}}</span>
<div class="footnote">all prices are listed in Canadian Dollars, converted at the time of posting.</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="javascripts">
<script src="js/libraries/vue.min.js"></script>
<script>
const testing = false;
</script>
<script src="js/min/site.min.js?updated2022-12-13T22:43:18.222Z"></script>
<!-- Global site tag (gtag.js) - Google Analytics-->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-15129990-34"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-15129990-34');
</script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script>
TrackJS.install({
token: "9947e081831c42b8aeb3a5fb81a152c4",
application: "notPoutineFYI"
// for more configuration options, see https://docs.trackjs.com
});
</script>
</div>
</body>
</html>