-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathproduct-grant.html
More file actions
250 lines (236 loc) · 13.3 KB
/
product-grant.html
File metadata and controls
250 lines (236 loc) · 13.3 KB
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR9SSJEHM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RTR9SSJEHM');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planning Technology Handbook and Planning Through the Black Mirror Card Game</title>
<!--
--------------------------------------------------------------------------------
| Thanks for checking out this page's source! |
| If you've made it this far, you should consider contributing to the |
| urban-and-regional-planning-resources GitHub repository. We'd love |
| your help in continuing to make this available for planners! |
--------------------------------------------------------------------------------
-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="https://apa-technology-division.github.io/css/pagestyles.css">
<!-- <link rel="stylesheet" href="css/pagestyles.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.1.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"Tech Division GitHub"});
});
</script>
<!-- Darkmode Google Analytics Pop-up -->
<script type="text/plain" data-cookie-consent="functionality" async src="https://www.googletagmanager.com/gtag/js?id=G-RTR9SSJEHM"></script>
<script type="text/plain" data-cookie-consent="functionality">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RTR9SSJEHM');
</script>
<!-- end of Darkmode Google Analytics Pop-up-->
<noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed</a></noscript>
<!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<!-- Navbar Import -->
<div id="navbar-container"></div>
<!-- Main Card -->
<div style="background-color:white;border-radius:25px; ">
<div class="card" id="overview" style="padding-left: 10%; padding-right: 10%; padding-top:30px; padding-bottom:50px; border:transparent">
<div class="container">
<button id="back-to-top" title="Back to Top">⇧</button>
<script>
let backToTopButton = document.getElementById("back-to-top");
window.onscroll = function () { scrollFunction(); };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
}
backToTopButton.addEventListener("click", function () {
window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>
<h1 class="text-left mt-5"><b>Planning Technology Handbook + <br> Planning Through the Black Mirror Card Game</b></h1>
<br><br>
<p><b>Last Updated:</b> March 2026</p>
<a href="https://github.com/APA-Technology-Division/planning-black-mirror-assets/blob/main/Planning%20with%20Black%20Mirror%20Instructions.pdf" target="_blank" style="
display: inline-block;
margin-bottom: 24px;
padding: 14px 28px;
background-color: #dbf436;
color: black;
font-family: 'Courier New', monospace;
font-size: 18px;
font-weight: bold;
text-decoration: none;
border: 3px solid black;
box-shadow: 4px 4px 0px black;
transition: box-shadow 0.1s ease, transform 0.1s ease;
letter-spacing: 0.03em;
width:100%;
text-align:center;
"
onmouseover="this.style.boxShadow='1px 1px 0px black'; this.style.transform='translate(3px,3px)';"
onmouseout="this.style.boxShadow='4px 4px 0px black'; this.style.transform='translate(0,0)';"
>▶ View Gameplay Instructions</a>
<p class="text-left">Engage with the Technology Division and share your knowledge with others in the planning profession through this initiative made possible with the support of the 2024 American Planning Association's Product Development Grant. This grant will allow the Technology Division to develop a planning technology handbook and a refined version of the "Planning Through the Black Mirror" card game, which together aim to provide accessible, centralized guidance on technology strategy, applications, and ethics in planning practice, while engaging planners in real-world scenarios and best practices.</p>
<div class="flourish-embed flourish-cards" data-src="visualisation/18863080"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<hr>
<h2>Resources</h2>
<p>Explore the project outputs and supporting materials:</p>
<div style="display:flex; flex-direction:column; gap:14px; margin-bottom:32px;">
<a href="https://www.planning.org/blog/9322137/planning-through-the-black-mirror/" target="_blank" style="
display:inline-flex; align-items:center; gap:12px;
padding: 14px 20px;
background-color: white;
color: black;
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 3px solid black;
box-shadow: 4px 4px 0px black;
transition: box-shadow 0.1s ease, transform 0.1s ease;
width: 100%;"
onmouseover="this.style.boxShadow='1px 1px 0px black'; this.style.transform='translate(3px,3px)';"
onmouseout="this.style.boxShadow='4px 4px 0px black'; this.style.transform='translate(0,0)';">
<i class="fas fa-pen-nib" style="font-size:22px;"></i> APA Blog Post
</a>
<a href="https://github.com/APA-Technology-Division/planning-black-mirror-assets" target="_blank" style="
display:inline-flex; align-items:center; gap:12px;
padding: 14px 20px;
background-color: white;
color: black;
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 3px solid black;
box-shadow: 4px 4px 0px black;
transition: box-shadow 0.1s ease, transform 0.1s ease;
width: 100%;"
onmouseover="this.style.boxShadow='1px 1px 0px black'; this.style.transform='translate(3px,3px)';"
onmouseout="this.style.boxShadow='4px 4px 0px black'; this.style.transform='translate(0,0)';">
<i class="fab fa-github" style="font-size:22px;"></i> Card Game Repository
</a>
<a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vSIEeOLnEVU0rFLLm-0vXV-7phxRm-q7gaAP05-lC531e-iIi1p-dsGSsuGwtKneqd2isG3UnxJPzBY/pubhtml" target="_blank" style="
display:inline-flex; align-items:center; gap:12px;
padding: 14px 20px;
background-color: white;
color: black;
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 3px solid black;
box-shadow: 4px 4px 0px black;
transition: box-shadow 0.1s ease, transform 0.1s ease;
width: 100%;"
onmouseover="this.style.boxShadow='1px 1px 0px black'; this.style.transform='translate(3px,3px)';"
onmouseout="this.style.boxShadow='4px 4px 0px black'; this.style.transform='translate(0,0)';">
<i class="fas fa-table" style="font-size:22px;"></i> Card Image Generation Prompts (Google Sheet)
</a>
<a href="http://tech.planning.org" target="_blank" style="
display:inline-flex; align-items:center; gap:12px;
padding: 14px 20px;
background-color: white;
color: black;
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 3px solid black;
box-shadow: 4px 4px 0px black;
transition: box-shadow 0.1s ease, transform 0.1s ease;
width: 100%;"
onmouseover="this.style.boxShadow='1px 1px 0px black'; this.style.transform='translate(3px,3px)';"
onmouseout="this.style.boxShadow='4px 4px 0px black'; this.style.transform='translate(0,0)';">
<i class="fas fa-globe" style="font-size:22px;"></i> APA Technology Division Website
</a>
</div>
<hr>
<!-- Timeline clickable thumbnail -->
<h2>Grant Project Timeline</h2>
<p>Click the timeline to view a full project summary.</p>
<div style="cursor:pointer; display:block; border: 3px solid black; box-shadow: 4px 4px 0px black; margin-bottom: 28px;"
data-toggle="modal" data-target="#timelineModal"
title="Click to expand timeline">
<object type="image/svg+xml" data="assets/grant-project-timeline.svg"
style="width:100%; display:block; pointer-events:none;"></object>
</div>
<!-- Timeline Modal -->
<div class="modal fade" id="timelineModal" tabindex="-1" role="dialog" aria-labelledby="timelineModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content" style="border: 3px solid black; border-radius: 0; font-family: 'Courier New', monospace;">
<div class="modal-header" style="border-bottom: 2px solid black;">
<h5 class="modal-title" id="timelineModalLabel" style="font-family: 'Courier New', monospace; font-weight:bold;">Grant Project Timeline & Summary</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<object type="image/svg+xml" data="assets/grant-project-timeline.svg" style="width:100%; margin-bottom:28px; display:block;"></object>
<hr>
<h3 style="font-size:16px; font-weight:bold; margin-bottom:16px;">Project Summary</h3>
<ul style="line-height:2; padding-left: 20px;">
<li><b>Summer 2024</b> — Launched project website; recruited and selected two research assistants and subject matter expert reviewers.</li>
<li><b>Fall 2024</b> — RAs conducted research and developed case study scenarios; began playtesting with APA New York and at NPC 2024 in Minneapolis.</li>
<li><b>Early 2025</b> — Finalized 72-card deck, Black Swan rules, and card images; completed editor review; printed cards for NPC 2025.</li>
<li><b>March 2025</b> — Featured session at NPC 2025 in Denver (~60 attendees, 1.5 CM credits).</li>
<li><b>Spring–Summer 2025</b> — Submitted reimbursements; continued handbook development; virtual playtesting with university students.</li>
<li><b>Fall 2025</b> — Playtested at APA Washington conference; launched game rules on APA GitHub; explored chapter distribution.</li>
<li><b>Late 2025–Early 2026</b> — Commissioned print run; resolved printing defects; published blog post on APA website.</li>
</ul>
</div>
<div class="modal-footer" style="border-top: 2px solid black;">
<button type="button" class="btn" data-dismiss="modal"
style="font-family:'Courier New',monospace; font-weight:bold; background-color:#dbf436; border:2px solid black; box-shadow:3px 3px 0 black;">Close</button>
</div>
</div>
</div>
</div>
<br><br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://apa-technology-division.github.io/scripts/image-it-scripts.js"></script>
<script src="https://apa-technology-division.github.io/scripts/gallery.js"></script>
<!-- Custom JS -->
<script src="scripts/ALAP.js" defer></script>
<script>
fetch('assets/navbar.html')
.then(response => response.text())
.then(data => {
document.getElementById('navbar-container').innerHTML = data;
});
</script>
</body>
<footer>
<br>
<p style="text-align:center"><a href="https://github.com/lianplass">lianplass</a> | 2026</p>
<br>
<p style="text-align:center"><a href="#" id="open_preferences_center">Update cookies preferences</a></p>
</footer>
</html>