bnkops/bnkops.changemaker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
bnkops.changemaker/mkdocs/site/archive/cm.archive/manuals/Code Snippets/index.html
admin a6c19168d4 Wesbite Updates
2025-05-17 08:31:15 -06:00

7097 lines
213 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Documentation for The Bunker Operations, a community-driven project focused on creating a self-hosted, open-source platform for personal and community use.">
<meta name="author" content="Bunker Ops">
<link rel="canonical" href="http://docs.bnkops.org/archive/cm.archive/manuals/Code%20Snippets/">
<link rel="prev" href="../obsidian/">
<link rel="next" href="../Customize%20Your%20Landing%20Page/">
<link rel="icon" href="../../../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.14">
<title>Code Snippets - BNKops Documentation & Repository</title>
<link rel="stylesheet" href="../../../../assets/stylesheets/main.342714a4.min.css">
<link rel="stylesheet" href="../../../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../../../stylesheets/extra.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="../../../../stylesheets/extra-cm-archive.css">
<link rel="stylesheet" href="../../../../stylesheets/home.css">
<script>__md_scope=new URL("../../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="Code Snippets - BNKops Documentation & Repository" >
<meta property="og:description" content="Documentation for The Bunker Operations, a community-driven project focused on creating a self-hosted, open-source platform for personal and community use." >
<meta property="og:image" content="http://docs.bnkops.org/assets/images/social/archive/cm.archive/manuals/Code Snippets.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="http://docs.bnkops.org/archive/cm.archive/manuals/Code%20Snippets/" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="Code Snippets - BNKops Documentation & Repository" >
<meta name="twitter:description" content="Documentation for The Bunker Operations, a community-driven project focused on creating a self-hosted, open-source platform for personal and community use." >
<meta name="twitter:image" content="http://docs.bnkops.org/assets/images/social/archive/cm.archive/manuals/Code Snippets.png" >
</head>
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="deep-purple" data-md-color-accent="amber">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#code-snippets" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
<aside class="md-banner">
<div class="md-banner__inner md-grid md-typeset">
<a href="https://homepage.bnkops.com" class="login-button">Login</a>
<a href="https://bnkops.com" class="login-button">Lander</a>
New website! Heck yeah!
</div>
</aside>
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../../.." title="BNKops Documentation &amp; Repository" class="md-header__button md-logo" aria-label="BNKops Documentation & Repository" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
BNKops Documentation & Repository
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Code Snippets
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../../../cm/" class="md-tabs__link">
Changemaker
</a>
</li>
<li class="md-tabs__item">
<a href="../../../../blog/" class="md-tabs__link">
Blog
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../../../" class="md-tabs__link">
Archive
</a>
</li>
<li class="md-tabs__item">
<a href="../../../../notes/" class="md-tabs__link">
Quick Note
</a>
</li>
<li class="md-tabs__item">
<a href="https://answer.bnkops.com/" class="md-tabs__link">
Q&A
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../../.." title="BNKops Documentation &amp; Repository" class="md-nav__button md-logo" aria-label="BNKops Documentation & Repository" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
BNKops Documentation & Repository
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<div class="md-nav__link md-nav__container">
<a href="../../../../cm/" class="md-nav__link ">
<span class="md-ellipsis">
Changemaker
</span>
</a>
<label class="md-nav__link " for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Changemaker
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../../cm/readme/" class="md-nav__link">
<span class="md-ellipsis">
Get Started
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_3" >
<div class="md-nav__link md-nav__container">
<a href="../../../../cm/apps/" class="md-nav__link ">
<span class="md-ellipsis">
Applications
</span>
</a>
<label class="md-nav__link " for="__nav_2_3" id="__nav_2_3_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_3">
<span class="md-nav__icon md-icon"></span>
Applications
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../../cm/apps/homepage/" class="md-nav__link">
<span class="md-ellipsis">
Homepage Dashboard
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/code-server/" class="md-nav__link">
<span class="md-ellipsis">
Code Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/flatnotes/" class="md-nav__link">
<span class="md-ellipsis">
Flatnotes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/listmonk/" class="md-nav__link">
<span class="md-ellipsis">
Listmonk
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/nocodb/" class="md-nav__link">
<span class="md-ellipsis">
NocoDB
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/mkdocs-material/" class="md-nav__link">
<span class="md-ellipsis">
MkDocs Material
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/excalidraw/" class="md-nav__link">
<span class="md-ellipsis">
Excalidraw
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/gitea/" class="md-nav__link">
<span class="md-ellipsis">
Gitea
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/openwebui/" class="md-nav__link">
<span class="md-ellipsis">
OpenWebUI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/monica-crm/" class="md-nav__link">
<span class="md-ellipsis">
Monica CRM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/answer/" class="md-nav__link">
<span class="md-ellipsis">
Answer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/ferdium/" class="md-nav__link">
<span class="md-ellipsis">
Ferdium
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/rocketchat/" class="md-nav__link">
<span class="md-ellipsis">
Rocket.Chat
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/portainer/" class="md-nav__link">
<span class="md-ellipsis">
Portainer (Docker UI)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/apps/n8n/" class="md-nav__link">
<span class="md-ellipsis">
n8n (Workflow Automation)
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_4" >
<div class="md-nav__link md-nav__container">
<a href="../../../../cm/guides/" class="md-nav__link ">
<span class="md-ellipsis">
Guides
</span>
</a>
<label class="md-nav__link " for="__nav_2_4" id="__nav_2_4_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_4">
<span class="md-nav__icon md-icon"></span>
Guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../../cm/guides/authoring-content/" class="md-nav__link">
<span class="md-ellipsis">
Authoring Content
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/guides/listmonk/" class="md-nav__link">
<span class="md-ellipsis">
Listmonk
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../../cm/guides/ollama-vscode/" class="md-nav__link">
<span class="md-ellipsis">
Using Ollama in VS Code
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../../quick-commands/" class="md-nav__link">
<span class="md-ellipsis">
Quick Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../../blog/" class="md-nav__link">
<span class="md-ellipsis">
Blog
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
<div class="md-nav__link md-nav__container">
<a href="../../../" class="md-nav__link ">
<span class="md-ellipsis">
Archive
</span>
</a>
<label class="md-nav__link " for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Archive
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" checked>
<div class="md-nav__link md-nav__container">
<a href="../../" class="md-nav__link ">
<span class="md-ellipsis">
Change Maker Archive
</span>
</a>
<label class="md-nav__link " for="__nav_4_2" id="__nav_4_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
Change Maker Archive
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Why%20Change%20Maker/" class="md-nav__link">
<span class="md-ellipsis">
Why Change Maker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Feature%20Tracking/" class="md-nav__link">
<span class="md-ellipsis">
Feature Tracking
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Free%28ish%29/" class="md-nav__link">
<span class="md-ellipsis">
Free(ish)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Who%20is%20bnkops/" class="md-nav__link">
<span class="md-ellipsis">
Who is bnkops
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../known%20bugs/" class="md-nav__link">
<span class="md-ellipsis">
Known Bugs
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2_7" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
Install & Manuals
</span>
</a>
<label class="md-nav__link " for="__nav_4_2_7" id="__nav_4_2_7_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_2_7_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4_2_7">
<span class="md-nav__icon md-icon"></span>
Install & Manuals
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../prerequisites/" class="md-nav__link">
<span class="md-ellipsis">
Prerequisites
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Installation/" class="md-nav__link">
<span class="md-ellipsis">
Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Build%20Site/" class="md-nav__link">
<span class="md-ellipsis">
Reset & Build
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Backend%20%26%20Editor/" class="md-nav__link">
<span class="md-ellipsis">
Backend & Editor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Simple%20Markdown%20Guide/" class="md-nav__link">
<span class="md-ellipsis">
Simple Markdown Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../button/" class="md-nav__link">
<span class="md-ellipsis">
Simple Button
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Commands/" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../obsidian/" class="md-nav__link">
<span class="md-ellipsis">
Use Obsidian as Site Editor
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Code Snippets
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Code Snippets
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#email-button" class="md-nav__link">
<span class="md-ellipsis">
Email Button
</span>
</a>
<nav class="md-nav" aria-label="Email Button">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-email-structure" class="md-nav__link">
<span class="md-ellipsis">
Basic Email Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#how-to-modify-the-template" class="md-nav__link">
<span class="md-ellipsis">
How to Modify the Template
</span>
</a>
<nav class="md-nav" aria-label="How to Modify the Template">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-changing-the-subject-line" class="md-nav__link">
<span class="md-ellipsis">
1. Changing the Subject Line
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-modifying-the-email-body" class="md-nav__link">
<span class="md-ellipsis">
2. Modifying the Email Body
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-available-variables" class="md-nav__link">
<span class="md-ellipsis">
3. Available Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-special-characters-and-formatting" class="md-nav__link">
<span class="md-ellipsis">
4. Special Characters and Formatting
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#example-templates" class="md-nav__link">
<span class="md-ellipsis">
Example Templates
</span>
</a>
<nav class="md-nav" aria-label="Example Templates">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#general-inquiry-template" class="md-nav__link">
<span class="md-ellipsis">
General Inquiry Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#specific-issue-template" class="md-nav__link">
<span class="md-ellipsis">
Specific Issue Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#meeting-request-template" class="md-nav__link">
<span class="md-ellipsis">
Meeting Request Template
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#implementation-tips" class="md-nav__link">
<span class="md-ellipsis">
Implementation Tips
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#technical-notes" class="md-nav__link">
<span class="md-ellipsis">
Technical Notes
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../Customize%20Your%20Landing%20Page/" class="md-nav__link">
<span class="md-ellipsis">
Customize Your Landing Page
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../listmonk/" class="md-nav__link">
<span class="md-ellipsis">
Listmonk
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../NocoDB/" class="md-nav__link">
<span class="md-ellipsis">
NocoDB
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Examples/" class="md-nav__link">
<span class="md-ellipsis">
Example Political Apps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Get%20Site%20Online/" class="md-nav__link">
<span class="md-ellipsis">
Get Online
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2_8" >
<div class="md-nav__link md-nav__container">
<a href="../../blog/" class="md-nav__link ">
<span class="md-ellipsis">
Blog
</span>
</a>
<label class="md-nav__link " for="__nav_4_2_8" id="__nav_4_2_8_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_2_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2_8">
<span class="md-nav__icon md-icon"></span>
Blog
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../blog/posts/Admin%20Log/" class="md-nav__link">
<span class="md-ellipsis">
Admin Log
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/Newsletter%201.0/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.0
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/The%20Revolution%20Will%20Not%20Get%20Likes/" class="md-nav__link">
<span class="md-ellipsis">
The Revolution Will Not Get Likes
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2_8_5" >
<label class="md-nav__link" for="__nav_4_2_8_5" id="__nav_4_2_8_5_label" tabindex="0">
<span class="md-ellipsis">
Updates
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_2_8_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2_8_5">
<span class="md-nav__icon md-icon"></span>
Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../blog/posts/Update%201/" class="md-nav__link">
<span class="md-ellipsis">
Update 1
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/Update%202/" class="md-nav__link">
<span class="md-ellipsis">
Update 2
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/Update%203/" class="md-nav__link">
<span class="md-ellipsis">
Update 3
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/Update%204/" class="md-nav__link">
<span class="md-ellipsis">
Update 4
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/Update%205/" class="md-nav__link">
<span class="md-ellipsis">
Update 5
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/Update%206/" class="md-nav__link">
<span class="md-ellipsis">
Update 6
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/Update%207/" class="md-nav__link">
<span class="md-ellipsis">
Update 7
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../blog/posts/myfirst/" class="md-nav__link">
<span class="md-ellipsis">
My First
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="https://repo.bnkops.com/Home.html" class="md-nav__link">
<span class="md-ellipsis">
External Resources
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" >
<div class="md-nav__link md-nav__container">
<a href="../../../repo.archive/" class="md-nav__link ">
<span class="md-ellipsis">
Repo Archive
</span>
</a>
<label class="md-nav__link " for="__nav_4_3" id="__nav_4_3_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3">
<span class="md-nav__icon md-icon"></span>
Repo Archive
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/How%20to%20Navigate%20the%20Repo%20%F0%9F%A4%94/" class="md-nav__link">
<span class="md-ellipsis">
Navigation Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/What%20is%20a%20Repo%20and%20Why%20Make%20One%20%F0%9F%92%AD%20%F0%9F%8D%84/" class="md-nav__link">
<span class="md-ellipsis">
What is a Repo
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_4" >
<label class="md-nav__link" for="__nav_4_3_4" id="__nav_4_3_4_label" tabindex="0">
<span class="md-ellipsis">
Admin Log
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_3_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_4">
<span class="md-nav__icon md-icon"></span>
Admin Log
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-09-16/" class="md-nav__link">
<span class="md-ellipsis">
2024-09-16
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-09-20/" class="md-nav__link">
<span class="md-ellipsis">
2024-09-20
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-09-23/" class="md-nav__link">
<span class="md-ellipsis">
2024-09-23
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-09-24/" class="md-nav__link">
<span class="md-ellipsis">
2024-09-24
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-09-26/" class="md-nav__link">
<span class="md-ellipsis">
2024-09-26
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-09-27/" class="md-nav__link">
<span class="md-ellipsis">
2024-09-27
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-10-02/" class="md-nav__link">
<span class="md-ellipsis">
2024-10-02
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-10-04/" class="md-nav__link">
<span class="md-ellipsis">
2024-10-04
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-10-05/" class="md-nav__link">
<span class="md-ellipsis">
2024-10-05
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-10-09/" class="md-nav__link">
<span class="md-ellipsis">
2024-10-09
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-10-16/" class="md-nav__link">
<span class="md-ellipsis">
2024-10-16
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-10-18/" class="md-nav__link">
<span class="md-ellipsis">
2024-10-18
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/2024-10-21/" class="md-nav__link">
<span class="md-ellipsis">
2024-10-21
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_4_14" >
<label class="md-nav__link" for="__nav_4_3_4_14" id="__nav_4_3_4_14_label" tabindex="0">
<span class="md-ellipsis">
Newsletters
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_3_4_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_4_14">
<span class="md-nav__icon md-icon"></span>
Newsletters
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/Newsletter%201.0/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.0
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/Newsletter%201.1/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.1
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/Newsletter%201.2/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.2
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/Newsletter%201.3/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.3
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/Newsletter%201.4/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.4
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Admin%20Log%20%E2%8F%AD/Newsletter%201.5/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.5
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_5" >
<label class="md-nav__link" for="__nav_4_3_5" id="__nav_4_3_5_label" tabindex="0">
<span class="md-ellipsis">
Clippings
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_3_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_5">
<span class="md-nav__icon md-icon"></span>
Clippings
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/Bot%20campaign%20backing%20Pierre%20Poilievre%20looks%20the%20work%20of%20an%20amateur%2C%20experts%20say%20%20CBC%20News/" class="md-nav__link">
<span class="md-ellipsis">
Bot campaign
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/Bots%20on%20X%20worse%20than%20ever%20according%20to%20analysis%20of%201m%20tweets%20during%20first%20Republican%20primary%20debate/" class="md-nav__link">
<span class="md-ellipsis">
Bots on X
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/DO%20YOU%20KNOW%20MUSHROOMS%20CAN%20TALK%20TO%20EACH%20OTHER/" class="md-nav__link">
<span class="md-ellipsis">
Mushrooms Talk
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/Elon%20Musk%20Fires%20Twitter%20Employees%20Who%20Criticized%20Him%20%28Published%202022%29/" class="md-nav__link">
<span class="md-ellipsis">
Elon Musk Fires Twitter Employees
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/NationBuilder%20-%20Wikipedia/" class="md-nav__link">
<span class="md-ellipsis">
NationBuilder
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/Neo-Nazis%2C%20Antisemites%2C%20and%20the%20N-Word%20Twitter%20Just%20Hours%20Under%20Elon%20Musk/" class="md-nav__link">
<span class="md-ellipsis">
Neo-Nazis on Twitter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/Phone%20security%20for%20activists%20%20Activist%20Handbook/" class="md-nav__link">
<span class="md-ellipsis">
Phone Security
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/Saudi%20infiltration%20of%20Twitter%20-%20Wikipedia/" class="md-nav__link">
<span class="md-ellipsis">
Saudi infiltration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/The%20majority%20of%20traffic%20from%20Elon%20Musk%27s%20X%20may%20have%20been%20fake%20during%20the%20Super%20Bowl%2C%20report%20suggests/" class="md-nav__link">
<span class="md-ellipsis">
X Fake Traffic
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/The%20right-wing%20lurch%20of%20X%20under%20Elon%20Musk/" class="md-nav__link">
<span class="md-ellipsis">
X Right-Wing Lurch
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/Under%20Elon%20Musk%2C%20Twitter%20has%20approved%2083%25%20of%20censorship%20requests%20by%20authoritarian%20governments/" class="md-nav__link">
<span class="md-ellipsis">
X Censorship
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/What%20Is%20Technofeudalism/" class="md-nav__link">
<span class="md-ellipsis">
Technofeudalism
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Clippings%20%E2%9C%82/amiskwaciy-w%C3%A2skahikan%20%28Edmonton%29%20History%20%20%E2%80%94%20Edmonton%20%26%20Area%20Land%20Trust/" class="md-nav__link">
<span class="md-ellipsis">
Edmonton History
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_6" >
<label class="md-nav__link" for="__nav_4_3_6" id="__nav_4_3_6_label" tabindex="0">
<span class="md-ellipsis">
Daisy AI
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_3_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_6">
<span class="md-nav__icon md-icon"></span>
Daisy AI
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Daisy%20AI%20%F0%9F%8C%BB/Daisy/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_6_2" >
<label class="md-nav__link" for="__nav_4_3_6_2" id="__nav_4_3_6_2_label" tabindex="0">
<span class="md-ellipsis">
Further Reading
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_3_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_6_2">
<span class="md-nav__icon md-icon"></span>
Further Reading
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Daisy%20AI%20%F0%9F%8C%BB/Further%20Reading%20on%20AI/Bnkops%20Artificial%20Intelligence%20Thoughts%20%26%20Policies/" class="md-nav__link">
<span class="md-ellipsis">
AI Thoughts & Policies
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Daisy%20AI%20%F0%9F%8C%BB/Further%20Reading%20on%20AI/How%20To%20Prompt/" class="md-nav__link">
<span class="md-ellipsis">
How To Prompt
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Daisy%20AI%20%F0%9F%8C%BB/Further%20Reading%20on%20AI/When%20A.I.%27s%20Output%20Is%20a%20Threat%20to%20A.I.%20Itself/" class="md-nav__link">
<span class="md-ellipsis">
AI Threats
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_7" >
<label class="md-nav__link" for="__nav_4_3_7" id="__nav_4_3_7_label" tabindex="0">
<span class="md-ellipsis">
Free Office Software
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_3_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_7">
<span class="md-nav__icon md-icon"></span>
Free Office Software
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Free%20Office%20Software%20Stack%20%F0%9F%A4%AF/Newsletter%20%2B%20Database/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter + Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Free%20Office%20Software%20Stack%20%F0%9F%A4%AF/The%20Bunker%20Ops%20Server%20Build-Out/" class="md-nav__link">
<span class="md-ellipsis">
Server Build-Out
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Free%20Office%20Software%20Stack%20%F0%9F%A4%AF/The%20Stack/" class="md-nav__link">
<span class="md-ellipsis">
The Stack
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_8" >
<label class="md-nav__link" for="__nav_4_3_8" id="__nav_4_3_8_label" tabindex="0">
<span class="md-ellipsis">
Website Manuals
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_3_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_8">
<span class="md-nav__icon md-icon"></span>
Website Manuals
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Budibase%20-%20Form%20Builder%20%26%20Database/" class="md-nav__link">
<span class="md-ellipsis">
Budibase
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Cloudflare%20Guide/" class="md-nav__link">
<span class="md-ellipsis">
Cloudflare Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Customizing%20Your%20Listmonk%20Subscription%20Form/" class="md-nav__link">
<span class="md-ellipsis">
Listmonk Form
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/How%20to%20Add%20to%20the%20Repo/" class="md-nav__link">
<span class="md-ellipsis">
Add to Repo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/How%20to%20Replicate%20this%20Repo/" class="md-nav__link">
<span class="md-ellipsis">
Replicate Repo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Repo%20Live%20Generation/" class="md-nav__link">
<span class="md-ellipsis">
Repo Live Generation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Repo%20Theory/" class="md-nav__link">
<span class="md-ellipsis">
Repo Theory
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Simple%20Markdown%20Manual/" class="md-nav__link">
<span class="md-ellipsis">
Markdown Manual
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Simple%20Target%20Manual/" class="md-nav__link">
<span class="md-ellipsis">
Target Manual
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Syntax%2C%20Embedding%2C%20HTML%2C%20and%20Other%20Code/" class="md-nav__link">
<span class="md-ellipsis">
Syntax & Code
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/Updated%20Website%20Install%20Guide/" class="md-nav__link">
<span class="md-ellipsis">
Website Install Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/bnkops%20Simple%20Targeter/" class="md-nav__link">
<span class="md-ellipsis">
Simple Targeter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Website%20Manuals%20%F0%9F%A4%93/note_test/" class="md-nav__link">
<span class="md-ellipsis">
Note Test
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_9" >
<label class="md-nav__link" for="__nav_4_3_9" id="__nav_4_3_9_label" tabindex="0">
<span class="md-ellipsis">
Zines We Like
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_3_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_9">
<span class="md-nav__icon md-icon"></span>
Zines We Like
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/Bounty%20Hunters%20%26%20Child%20Predators/" class="md-nav__link">
<span class="md-ellipsis">
Bounty Hunters & Child Predators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/Defending%20The%20Camp/" class="md-nav__link">
<span class="md-ellipsis">
Defending The Camp
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/Doxcare/" class="md-nav__link">
<span class="md-ellipsis">
Doxcare
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/Mobile%20Phone%20Security%20for%20Activists/" class="md-nav__link">
<span class="md-ellipsis">
Mobile Phone Security
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/Security%20%26%20Counter-Surveillance/" class="md-nav__link">
<span class="md-ellipsis">
Security & Counter-Surveillance
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/Turn%20Off%20Your%20Phone/" class="md-nav__link">
<span class="md-ellipsis">
Turn Off Your Phone
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/What%20Is%20Security%20Culture%20%E2%98%A0/" class="md-nav__link">
<span class="md-ellipsis">
Security Culture
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/Zines%20We%20Like%20%F0%9F%98%8E/Who%20Wrote%20That/" class="md-nav__link">
<span class="md-ellipsis">
Who Wrote That
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10" >
<label class="md-nav__link" for="__nav_4_3_10" id="__nav_4_3_10_label" tabindex="0">
<span class="md-ellipsis">
User Contributions
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_3_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10">
<span class="md-nav__icon md-icon"></span>
User Contributions
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_1" >
<label class="md-nav__link" for="__nav_4_3_10_1" id="__nav_4_3_10_1_label" tabindex="0">
<span class="md-ellipsis">
indoctrinationmachine
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_3_10_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_1">
<span class="md-nav__icon md-icon"></span>
indoctrinationmachine
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/indoctrinationmachine/Hello%2C%20is%20it%20me%20you%27re%20looking%20foooooor%3F/" class="md-nav__link">
<span class="md-ellipsis">
Hello
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/indoctrinationmachine/My%20Sad%20Drive%20to%20Work/" class="md-nav__link">
<span class="md-ellipsis">
Sad Drive
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/indoctrinationmachine/The%20Revolution%20must%20center%20pleasure%20%28and%20other%20cool%20wallpapers%29/" class="md-nav__link">
<span class="md-ellipsis">
Revolution & Pleasure
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_2" >
<label class="md-nav__link" for="__nav_4_3_10_2" id="__nav_4_3_10_2_label" tabindex="0">
<span class="md-ellipsis">
mygenderdisdad
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_3_10_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_2">
<span class="md-nav__icon md-icon"></span>
mygenderdisdad
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/mygenderdisdad/mygenderisdad/organizing/" class="md-nav__link">
<span class="md-ellipsis">
organizing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/mygenderdisdad/mygenderisdad/prairie/" class="md-nav__link">
<span class="md-ellipsis">
prairie
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/mygenderdisdad/mygenderisdad/radical/" class="md-nav__link">
<span class="md-ellipsis">
radical
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/mygenderdisdad/mygenderisdad/school/" class="md-nav__link">
<span class="md-ellipsis">
school
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/mygenderdisdad/mygenderisdad/youth/" class="md-nav__link">
<span class="md-ellipsis">
youth
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_3" >
<label class="md-nav__link" for="__nav_4_3_10_3" id="__nav_4_3_10_3_label" tabindex="0">
<span class="md-ellipsis">
strategicallydum
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_3_10_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_3">
<span class="md-nav__icon md-icon"></span>
strategicallydum
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/strategicallydum/Resource%20%26%20Tools%20for%20Research/" class="md-nav__link">
<span class="md-ellipsis">
Research Tools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/strategicallydum/What%20is%20Audience%20Research%3F/" class="md-nav__link">
<span class="md-ellipsis">
Audience Research
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/strategicallydum/Homelessness/Messaging%20Research%20Drop/" class="md-nav__link">
<span class="md-ellipsis">
Homelessness Research
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_4" >
<label class="md-nav__link" for="__nav_4_3_10_4" id="__nav_4_3_10_4_label" tabindex="0">
<span class="md-ellipsis">
thatreallyblondehuman
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_3_10_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_4">
<span class="md-nav__icon md-icon"></span>
thatreallyblondehuman
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Trans-human/" class="md-nav__link">
<span class="md-ellipsis">
Trans-human
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/stats/" class="md-nav__link">
<span class="md-ellipsis">
Stats
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/whomst/" class="md-nav__link">
<span class="md-ellipsis">
Whomst
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_4_4" >
<label class="md-nav__link" for="__nav_4_3_10_4_4" id="__nav_4_3_10_4_4_label" tabindex="0">
<span class="md-ellipsis">
Art
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="5" aria-labelledby="__nav_4_3_10_4_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_4_4">
<span class="md-nav__icon md-icon"></span>
Art
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Art/Creature%2C%20Drink/" class="md-nav__link">
<span class="md-ellipsis">
Creature Drink
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Art/Fuck%20Neo%20Nazi%27s/" class="md-nav__link">
<span class="md-ellipsis">
Neo Nazis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Art/Guillotine%20Special/" class="md-nav__link">
<span class="md-ellipsis">
Guillotine Special
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Art/They%20Who%20Act/" class="md-nav__link">
<span class="md-ellipsis">
They Who Act
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_4_5" >
<label class="md-nav__link" for="__nav_4_3_10_4_5" id="__nav_4_3_10_4_5_label" tabindex="0">
<span class="md-ellipsis">
Demos
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="5" aria-labelledby="__nav_4_3_10_4_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_4_5">
<span class="md-nav__icon md-icon"></span>
Demos
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Demos/Charli%20XCX%20Fan%20Site/" class="md-nav__link">
<span class="md-ellipsis">
Charli XCX Fan Site
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Demos/Generated%20Report/" class="md-nav__link">
<span class="md-ellipsis">
Generated Report
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Demos/Simple%20Target%20Testing/" class="md-nav__link">
<span class="md-ellipsis">
Simple Target Testing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Demos/Test%20Demo/" class="md-nav__link">
<span class="md-ellipsis">
Test Demo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Demos/Workflow/" class="md-nav__link">
<span class="md-ellipsis">
Workflow
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_4_6" >
<label class="md-nav__link" for="__nav_4_3_10_4_6" id="__nav_4_3_10_4_6_label" tabindex="0">
<span class="md-ellipsis">
Pride Corner
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="5" aria-labelledby="__nav_4_3_10_4_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_4_6">
<span class="md-nav__icon md-icon"></span>
Pride Corner
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Pride%20Corner/Pride%20Corner%20-%20Preachers/" class="md-nav__link">
<span class="md-ellipsis">
Preachers
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Pride%20Corner/Pride%20Corner%20History/" class="md-nav__link">
<span class="md-ellipsis">
History
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Pride%20Corner/Pride%20Corner/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3_10_4_7" >
<label class="md-nav__link" for="__nav_4_3_10_4_7" id="__nav_4_3_10_4_7_label" tabindex="0">
<span class="md-ellipsis">
Thoughts
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="5" aria-labelledby="__nav_4_3_10_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3_10_4_7">
<span class="md-nav__icon md-icon"></span>
Thoughts
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/Analyzing%20The%20Matrix/" class="md-nav__link">
<span class="md-ellipsis">
Matrix Analysis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/Budgeting/" class="md-nav__link">
<span class="md-ellipsis">
Budgeting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/Deep%20Diving%20-%20The%20Coming%20Age%20of%20Digital%20Connection/" class="md-nav__link">
<span class="md-ellipsis">
Digital Connection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/Distributed%20Digital%20Organizing%20is%20The%20Way%20Out/" class="md-nav__link">
<span class="md-ellipsis">
Digital Organizing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/First%20They%20Came%20For%20The%20Trannies/" class="md-nav__link">
<span class="md-ellipsis">
First They Came
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/How%20not%20to%20get%20got%20making%20content%20v2/" class="md-nav__link">
<span class="md-ellipsis">
Content Safety
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/If%20you%20do%20politics%20who%20is%20reading%20your%20secrets%20-%20why%20you%20should%20de-corp%20your%20software%20stack/" class="md-nav__link">
<span class="md-ellipsis">
De-corp Software
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/Newsletter%201.7/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter 1.7
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/The%20Revolution%20Will%20Not%20Get%20Likes/" class="md-nav__link">
<span class="md-ellipsis">
Revolution & Likes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/The%20Rise%20of%20Industrial%20Advocacy%20-%20Why%20You%20Should%20Quit%20Nationbuilder/" class="md-nav__link">
<span class="md-ellipsis">
Industrial Advocacy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/They%20Live%20Recut/" class="md-nav__link">
<span class="md-ellipsis">
They Live Recut
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/Twitter%20is%20Dead%2C%20Long%20Live%20X%20---%20Why%20You%20Should%20Abandon%20X/" class="md-nav__link">
<span class="md-ellipsis">
Abandon X
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../repo.archive/thatreallyblondehuman/Thoughts%20%F0%9F%A4%94/Venus%20Wars/" class="md-nav__link">
<span class="md-ellipsis">
Venus Wars
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_4" >
<label class="md-nav__link" for="__nav_4_4" id="__nav_4_4_label" tabindex="0">
<span class="md-ellipsis">
Apps
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_4">
<span class="md-nav__icon md-icon"></span>
Apps
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../../cm/apps/ollama/" class="md-nav__link">
<span class="md-ellipsis">
Ollama
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../../notes/" class="md-nav__link">
<span class="md-ellipsis">
Quick Note
</span>
</a>
</li>
<li class="md-nav__item">
<a href="https://answer.bnkops.com/" class="md-nav__link">
<span class="md-ellipsis">
Q&A
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#email-button" class="md-nav__link">
<span class="md-ellipsis">
Email Button
</span>
</a>
<nav class="md-nav" aria-label="Email Button">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-email-structure" class="md-nav__link">
<span class="md-ellipsis">
Basic Email Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#how-to-modify-the-template" class="md-nav__link">
<span class="md-ellipsis">
How to Modify the Template
</span>
</a>
<nav class="md-nav" aria-label="How to Modify the Template">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-changing-the-subject-line" class="md-nav__link">
<span class="md-ellipsis">
1. Changing the Subject Line
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-modifying-the-email-body" class="md-nav__link">
<span class="md-ellipsis">
2. Modifying the Email Body
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-available-variables" class="md-nav__link">
<span class="md-ellipsis">
3. Available Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-special-characters-and-formatting" class="md-nav__link">
<span class="md-ellipsis">
4. Special Characters and Formatting
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#example-templates" class="md-nav__link">
<span class="md-ellipsis">
Example Templates
</span>
</a>
<nav class="md-nav" aria-label="Example Templates">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#general-inquiry-template" class="md-nav__link">
<span class="md-ellipsis">
General Inquiry Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#specific-issue-template" class="md-nav__link">
<span class="md-ellipsis">
Specific Issue Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#meeting-request-template" class="md-nav__link">
<span class="md-ellipsis">
Meeting Request Template
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#implementation-tips" class="md-nav__link">
<span class="md-ellipsis">
Implementation Tips
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#technical-notes" class="md-nav__link">
<span class="md-ellipsis">
Technical Notes
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="code-snippets">Code Snippets<a class="headerlink" href="#code-snippets" title="Permanent link">&para;</a></h1>
<p>Find below a list of code snippets that can be used in your projects. These are all snippets that we already use in our projects and are tested.</p>
<h2 id="email-button">Email Button<a class="headerlink" href="#email-button" title="Permanent link">&para;</a></h2>
<p>A simple email button that allows users to email their selected city councillor.</p>
<!-- Begin Edmonton Council Emailer -->
<div id="edmonton-council-emailer" class="ece-container">
<style>
#edmonton-council-emailer,
#edmonton-council-emailer * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: inherit;
}
#edmonton-council-emailer.ece-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 20px auto;
padding: 30px;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #fff;
background: #1e2124;
border-radius: 12px;
isolation: isolate;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
#edmonton-council-emailer .ece-button-container {
display: flex;
align-items: center;
gap: 20px;
background: #2a2d31;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#edmonton-council-emailer .ece-button {
padding: 15px 30px;
font-size: 18px;
background-color: #ffc107;
color: #000;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
#edmonton-council-emailer .ece-button:hover {
background-color: #ffcd38;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}
#edmonton-council-emailer .ece-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
z-index: 2147483647; /* Set to maximum value */
}
#edmonton-council-emailer .ece-modal-content {
position: relative;
background-color: #1e2124;
margin: 5% auto;
padding: 30px;
width: 80%;
max-width: 1200px;
max-height: 80vh;
overflow-y: auto;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
border: 1px solid #ffc107;
}
#edmonton-council-emailer .ece-close {
position: absolute;
right: 20px;
top: 20px;
font-size: 28px;
cursor: pointer;
color: #ffc107;
text-decoration: none;
line-height: 1;
transition: all 0.3s ease;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #2a2d31;
}
#edmonton-council-emailer .ece-close:hover {
background: #ffc107;
color: #000;
transform: rotate(90deg);
}
#edmonton-council-emailer .ece-councillor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
#edmonton-council-emailer .ece-councillor-card {
border: 1px solid #2a2d31;
border-radius: 12px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
background-color: #2a2d31;
}
#edmonton-council-emailer .ece-councillor-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
border-color: #ffc107;
}
#edmonton-council-emailer .ece-councillor-card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
transition: all 0.3s ease;
}
#edmonton-council-emailer .ece-councillor-card:hover img {
transform: scale(1.02);
}
#edmonton-council-emailer .ece-councillor-card h3 {
margin: 15px 0 5px;
color: #fff;
font-size: 1.2em;
font-weight: bold;
}
#edmonton-council-emailer .ece-councillor-card p {
margin: 5px 0;
color: #ffc107;
font-size: 1em;
}
#edmonton-council-emailer .ece-modal h2 {
color: #ffc107;
font-size: 2em;
margin-bottom: 30px;
font-weight: bold;
text-align: center;
}
@keyframes countUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
#edmonton-council-emailer {
position: static; /* Remove any positioning if unnecessary */
z-index: auto; /* Reset z-index */
}
</style>
<div class="ece-button-container">
<button class="ece-button" onclick="ECE.openModal()">Email Your Councillor</button>
</div>
<div class="ece-modal" id="ece-modal">
<div class="ece-modal-content">
<span class="ece-close" onclick="ECE.closeModal()">&times;</span>
<h2>Select Your City Councillor</h2>
<div class="ece-councillor-grid" id="ece-councillor-grid"></div>
</div>
</div>
<script>
const ECE = {
count: 154,
councillors: [
{
name: "Mayor Amarjeet Sohi",
title: "City-Wide Mayor",
email: "mayorsoffice@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Mayor-Sohi-800x494.jpg",
ward: "City-Wide"
},
{
name: "Councillor Erin Rutherford",
title: "Ward Anirniq Councillor",
email: "erin.rutherford@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Anirniq-councillor_800x494.jpg",
ward: "Anirniq"
},
{
name: "Councillor Aaron Paquette",
title: "Ward Dene Councillor",
email: "aaron.paquette@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Dene-councillor_800x494.jpg",
ward: "Dene"
},
{
name: "Councillor Jennifer Rice",
title: "Ward Ipiihkoohkanipiaohtsi Councillor",
email: "jennifer.rice@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Ipiihkoohkanipiaohtsi-councillor_800x494.jpg",
ward: "Ipiihkoohkanipiaohtsi"
},
{
name: "Councillor Keren Tang",
title: "Ward Karhiio Councillor",
email: "keren.tang@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Karhiio-councillor_800x494.jpg",
ward: "Karhiio"
},
{
name: "Councillor Ashley Salvador",
title: "Ward Métis Councillor",
email: "ashley.salvador@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Métis-councillor_800x494.jpg",
ward: "Métis"
},
{
name: "Councillor Andrew Knack",
title: "Ward Nakota Isga Councillor",
email: "andrew.knack@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Nakota-Isga-councillor_800x494.jpg",
ward: "Nakota Isga"
},
{
name: "Councillor Anne Stevenson",
title: "Ward O-day'min Councillor",
email: "anne.stevenson@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/O-day'min-councillor_800x494.jpg",
ward: "O-day'min"
},
{
name: "Councillor Michael Janz",
title: "Ward papastew Councillor",
email: "michael.janz@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/papastew-councillor_800x494.jpg",
ward: "papastew"
},
{
name: "Councillor Tim Cartmell",
title: "Ward pihêsiwin Councillor",
email: "tim.cartmell@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/pihêsiwin-councillor_800x494.jpg",
ward: "pihêsiwin"
},
{
name: "Councillor Sarah Hamilton",
title: "Ward sipiwiyiniwak Councillor",
email: "sarah.hamilton@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/sipiwiyiniwak-councillor_800x494.jpg",
ward: "sipiwiyiniwak"
},
{
name: "Councillor Jo-Anne Wright",
title: "Ward Sspomitapi Councillor",
email: "jo-anne.wright@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/Sspomitapi-councillor_800x494.jpg",
ward: "Sspomitapi"
},
{
name: "Councillor Karen Principe",
title: "Ward tastawiyiniwak Councillor",
email: "karen.principe@edmonton.ca",
image: "https://www.edmonton.ca/sites/default/files/public-files/feature-images/tastawiyiniwak-councillor_800x494.jpg",
ward: "tastawiyiniwak"
}
],
init: function() {
if (window.ECEInitialized) return;
window.ECEInitialized = true;
document.getElementById('ece-modal').addEventListener('click', function(event) {
if (event.target === this) {
ECE.closeModal();
}
});
},
createCouncillorCards: function() {
const grid = document.getElementById('ece-councillor-grid');
if (!grid) return;
this.councillors.forEach(councillor => {
const card = document.createElement('div');
card.className = 'ece-councillor-card';
card.innerHTML = `
<img src="${councillor.image}" alt="${councillor.name}">
<h3>${councillor.name}</h3>
<p>${councillor.ward}</p>
`;
card.onclick = () => this.emailCouncillor(councillor);
grid.appendChild(card);
});
},
openModal: function() {
const modal = document.getElementById('ece-modal');
if (!modal) return;
modal.style.display = 'block';
if (!document.getElementById('ece-councillor-grid').children.length) {
this.createCouncillorCards();
}
},
closeModal: function() {
const modal = document.getElementById('ece-modal');
if (modal) modal.style.display = 'none';
},
emailCouncillor: function(councillor) {
this.closeModal();
const subject = "Constituent Feedback - [Your Issue]";
const body = `Dear ${councillor.name},
I am a constituent in ${councillor.ward} and I am writing to you regarding [describe your issue].
[Describe how this issue affects you and your community]
I would appreciate if you could [describe your requested action].
Thank you for your time and consideration.
Sincerely,
[Your Name]
[Your Address]
[Your Phone Number]`;
const encodedSubject = encodeURIComponent(subject);
const encodedBody = encodeURIComponent(body);
window.location.href = `mailto:${councillor.email}?subject=${encodedSubject}&body=${encodedBody}`;
}
};
// Initialize the component when the document is ready
document.addEventListener('DOMContentLoaded', function() {
ECE.init();
});
</script>
</div>
<!-- End Edmonton Council Emailer -->
<h3 id="basic-email-structure">Basic Email Structure<a class="headerlink" href="#basic-email-structure" title="Permanent link">&para;</a></h3>
<p>The email template is defined in the <code>emailCouncillor</code> function using two main components:
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">subject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Constituent Feedback - [Your Issue]&quot;</span><span class="p">;</span>
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">body</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`Dear </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">,</span>
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="sb">// ... rest of the email content</span>
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="sb">`</span><span class="p">;</span>
</code></pre></div></p>
<h3 id="how-to-modify-the-template">How to Modify the Template<a class="headerlink" href="#how-to-modify-the-template" title="Permanent link">&para;</a></h3>
<h4 id="1-changing-the-subject-line">1. Changing the Subject Line<a class="headerlink" href="#1-changing-the-subject-line" title="Permanent link">&para;</a></h4>
<p>Locate the <code>subject</code> constant in the <code>emailCouncillor</code> function:
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">subject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Constituent Feedback - [Your Issue]&quot;</span><span class="p">;</span>
</code></pre></div>
Replace the text inside the quotes with your desired subject line.</p>
<h4 id="2-modifying-the-email-body">2. Modifying the Email Body<a class="headerlink" href="#2-modifying-the-email-body" title="Permanent link">&para;</a></h4>
<p>Find the <code>body</code> template string (marked with backticks `) and modify its content:
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">body</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`Dear </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">,</span>
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a>
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="sb">Your new email template goes here...`</span><span class="p">;</span>
</code></pre></div></p>
<h4 id="3-available-variables">3. Available Variables<a class="headerlink" href="#3-available-variables" title="Permanent link">&para;</a></h4>
<p>The following variables are available for use in your template:
- <code>${councillor.name}</code> - Councillor's full name
- <code>${councillor.ward}</code> - Ward name
- <code>${councillor.title}</code> - Councillor's title
- <code>${councillor.email}</code> - Councillor's email address</p>
<h4 id="4-special-characters-and-formatting">4. Special Characters and Formatting<a class="headerlink" href="#4-special-characters-and-formatting" title="Permanent link">&para;</a></h4>
<ul>
<li>Use <code>\n</code> for line breaks</li>
<li>Avoid using special characters like <code>"</code> or <code>'</code> directly - escape them if needed</li>
<li>Remember that HTML formatting will not work in email clients</li>
</ul>
<h3 id="example-templates">Example Templates<a class="headerlink" href="#example-templates" title="Permanent link">&para;</a></h3>
<h4 id="general-inquiry-template">General Inquiry Template<a class="headerlink" href="#general-inquiry-template" title="Permanent link">&para;</a></h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">subject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;General Inquiry from Constituent&quot;</span><span class="p">;</span>
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">body</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`Dear </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">,</span>
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a>
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="sb">I am a constituent from </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">ward</span><span class="si">}</span><span class="sb"> seeking information about...`</span><span class="p">;</span>
</code></pre></div>
<h4 id="specific-issue-template">Specific Issue Template<a class="headerlink" href="#specific-issue-template" title="Permanent link">&para;</a></h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">subject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Urgent: Traffic Safety Concern&quot;</span><span class="p">;</span>
<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">body</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`Dear </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">,</span>
<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a>
<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="sb">I am writing regarding a safety concern at the intersection of...`</span><span class="p">;</span>
</code></pre></div>
<h4 id="meeting-request-template">Meeting Request Template<a class="headerlink" href="#meeting-request-template" title="Permanent link">&para;</a></h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">subject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Meeting Request from ${councillor.ward} Constituent&quot;</span><span class="p">;</span>
<a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">body</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`Dear </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">,</span>
<a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a>
<a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="sb">I would like to schedule a meeting to discuss...`</span><span class="p">;</span>
</code></pre></div>
<h3 id="implementation-tips">Implementation Tips<a class="headerlink" href="#implementation-tips" title="Permanent link">&para;</a></h3>
<ol>
<li>Keep subject lines concise and specific</li>
<li>Include clear calls to action in the body</li>
<li>Maintain professional formatting</li>
<li>Test the template with various email clients</li>
<li>Consider mobile device compatibility</li>
</ol>
<h3 id="technical-notes">Technical Notes<a class="headerlink" href="#technical-notes" title="Permanent link">&para;</a></h3>
<ul>
<li>The template uses <code>encodeURIComponent()</code> to properly encode special characters</li>
<li>Maximum email length may vary by email client</li>
<li>Some email clients may have limitations on mailto link functionality</li>
</ul>
<details>
<summary>Edmonton Council Emailer Code</summary>
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="cm">&lt;!-- Begin Edmonton Council Emailer --&gt;</span>
<a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;edmonton-council-emailer&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ece-container&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="o">,</span>
<a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-6-7" name="__codelineno-6-7" href="#__codelineno-6-7"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-6-8" name="__codelineno-6-8" href="#__codelineno-6-8"></a><span class="w"> </span><span class="k">box-sizing</span><span class="p">:</span><span class="w"> </span><span class="kc">border-box</span><span class="p">;</span>
<a id="__codelineno-6-9" name="__codelineno-6-9" href="#__codelineno-6-9"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="kc">inherit</span><span class="p">;</span>
<a id="__codelineno-6-10" name="__codelineno-6-10" href="#__codelineno-6-10"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-11" name="__codelineno-6-11" href="#__codelineno-6-11"></a>
<a id="__codelineno-6-12" name="__codelineno-6-12" href="#__codelineno-6-12"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="p">.</span><span class="nc">ece-container</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-13" name="__codelineno-6-13" href="#__codelineno-6-13"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
<a id="__codelineno-6-14" name="__codelineno-6-14" href="#__codelineno-6-14"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-6-15" name="__codelineno-6-15" href="#__codelineno-6-15"></a><span class="w"> </span><span class="k">max-width</span><span class="p">:</span><span class="w"> </span><span class="mi">1200</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-16" name="__codelineno-6-16" href="#__codelineno-6-16"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span>
<a id="__codelineno-6-17" name="__codelineno-6-17" href="#__codelineno-6-17"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-18" name="__codelineno-6-18" href="#__codelineno-6-18"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">Arial</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span>
<a id="__codelineno-6-19" name="__codelineno-6-19" href="#__codelineno-6-19"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-20" name="__codelineno-6-20" href="#__codelineno-6-20"></a><span class="w"> </span><span class="k">line-height</span><span class="p">:</span><span class="w"> </span><span class="mf">1.5</span><span class="p">;</span>
<a id="__codelineno-6-21" name="__codelineno-6-21" href="#__codelineno-6-21"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
<a id="__codelineno-6-22" name="__codelineno-6-22" href="#__codelineno-6-22"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#1e2124</span><span class="p">;</span>
<a id="__codelineno-6-23" name="__codelineno-6-23" href="#__codelineno-6-23"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-24" name="__codelineno-6-24" href="#__codelineno-6-24"></a><span class="w"> </span><span class="k">isolation</span><span class="p">:</span><span class="w"> </span><span class="kc">isolate</span><span class="p">;</span>
<a id="__codelineno-6-25" name="__codelineno-6-25" href="#__codelineno-6-25"></a><span class="w"> </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="w"> </span><span class="mi">32</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.2</span><span class="p">);</span>
<a id="__codelineno-6-26" name="__codelineno-6-26" href="#__codelineno-6-26"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-27" name="__codelineno-6-27" href="#__codelineno-6-27"></a>
<a id="__codelineno-6-28" name="__codelineno-6-28" href="#__codelineno-6-28"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-button-container</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-29" name="__codelineno-6-29" href="#__codelineno-6-29"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span>
<a id="__codelineno-6-30" name="__codelineno-6-30" href="#__codelineno-6-30"></a><span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-6-31" name="__codelineno-6-31" href="#__codelineno-6-31"></a><span class="w"> </span><span class="k">gap</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-32" name="__codelineno-6-32" href="#__codelineno-6-32"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#2a2d31</span><span class="p">;</span>
<a id="__codelineno-6-33" name="__codelineno-6-33" href="#__codelineno-6-33"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-34" name="__codelineno-6-34" href="#__codelineno-6-34"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-35" name="__codelineno-6-35" href="#__codelineno-6-35"></a><span class="w"> </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">4</span><span class="kt">px</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.1</span><span class="p">);</span>
<a id="__codelineno-6-36" name="__codelineno-6-36" href="#__codelineno-6-36"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-37" name="__codelineno-6-37" href="#__codelineno-6-37"></a>
<a id="__codelineno-6-38" name="__codelineno-6-38" href="#__codelineno-6-38"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-button</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-39" name="__codelineno-6-39" href="#__codelineno-6-39"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-40" name="__codelineno-6-40" href="#__codelineno-6-40"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-41" name="__codelineno-6-41" href="#__codelineno-6-41"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ffc107</span><span class="p">;</span>
<a id="__codelineno-6-42" name="__codelineno-6-42" href="#__codelineno-6-42"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
<a id="__codelineno-6-43" name="__codelineno-6-43" href="#__codelineno-6-43"></a><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-6-44" name="__codelineno-6-44" href="#__codelineno-6-44"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-45" name="__codelineno-6-45" href="#__codelineno-6-45"></a><span class="w"> </span><span class="k">cursor</span><span class="p">:</span><span class="w"> </span><span class="kc">pointer</span><span class="p">;</span>
<a id="__codelineno-6-46" name="__codelineno-6-46" href="#__codelineno-6-46"></a><span class="w"> </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="kc">all</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease</span><span class="p">;</span>
<a id="__codelineno-6-47" name="__codelineno-6-47" href="#__codelineno-6-47"></a><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span>
<a id="__codelineno-6-48" name="__codelineno-6-48" href="#__codelineno-6-48"></a><span class="w"> </span><span class="k">text-transform</span><span class="p">:</span><span class="w"> </span><span class="kc">uppercase</span><span class="p">;</span>
<a id="__codelineno-6-49" name="__codelineno-6-49" href="#__codelineno-6-49"></a><span class="w"> </span><span class="k">letter-spacing</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-50" name="__codelineno-6-50" href="#__codelineno-6-50"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-51" name="__codelineno-6-51" href="#__codelineno-6-51"></a>
<a id="__codelineno-6-52" name="__codelineno-6-52" href="#__codelineno-6-52"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-button</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-53" name="__codelineno-6-53" href="#__codelineno-6-53"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ffcd38</span><span class="p">;</span>
<a id="__codelineno-6-54" name="__codelineno-6-54" href="#__codelineno-6-54"></a><span class="w"> </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translateY</span><span class="p">(</span><span class="mi">-2</span><span class="kt">px</span><span class="p">);</span>
<a id="__codelineno-6-55" name="__codelineno-6-55" href="#__codelineno-6-55"></a><span class="w"> </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">4</span><span class="kt">px</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="w"> </span><span class="mi">193</span><span class="p">,</span><span class="w"> </span><span class="mi">7</span><span class="p">,</span><span class="w"> </span><span class="mf">0.3</span><span class="p">);</span>
<a id="__codelineno-6-56" name="__codelineno-6-56" href="#__codelineno-6-56"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-57" name="__codelineno-6-57" href="#__codelineno-6-57"></a>
<a id="__codelineno-6-58" name="__codelineno-6-58" href="#__codelineno-6-58"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-modal</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-59" name="__codelineno-6-59" href="#__codelineno-6-59"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-6-60" name="__codelineno-6-60" href="#__codelineno-6-60"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">fixed</span><span class="p">;</span>
<a id="__codelineno-6-61" name="__codelineno-6-61" href="#__codelineno-6-61"></a><span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-6-62" name="__codelineno-6-62" href="#__codelineno-6-62"></a><span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-6-63" name="__codelineno-6-63" href="#__codelineno-6-63"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-6-64" name="__codelineno-6-64" href="#__codelineno-6-64"></a><span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-6-65" name="__codelineno-6-65" href="#__codelineno-6-65"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mf">0.8</span><span class="p">);</span>
<a id="__codelineno-6-66" name="__codelineno-6-66" href="#__codelineno-6-66"></a><span class="w"> </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">2147483647</span><span class="p">;</span><span class="w"> </span><span class="c">/* Set to maximum value */</span>
<a id="__codelineno-6-67" name="__codelineno-6-67" href="#__codelineno-6-67"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-68" name="__codelineno-6-68" href="#__codelineno-6-68"></a>
<a id="__codelineno-6-69" name="__codelineno-6-69" href="#__codelineno-6-69"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-modal-content</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-70" name="__codelineno-6-70" href="#__codelineno-6-70"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
<a id="__codelineno-6-71" name="__codelineno-6-71" href="#__codelineno-6-71"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#1e2124</span><span class="p">;</span>
<a id="__codelineno-6-72" name="__codelineno-6-72" href="#__codelineno-6-72"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">%</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span>
<a id="__codelineno-6-73" name="__codelineno-6-73" href="#__codelineno-6-73"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-74" name="__codelineno-6-74" href="#__codelineno-6-74"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">80</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-6-75" name="__codelineno-6-75" href="#__codelineno-6-75"></a><span class="w"> </span><span class="k">max-width</span><span class="p">:</span><span class="w"> </span><span class="mi">1200</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-76" name="__codelineno-6-76" href="#__codelineno-6-76"></a><span class="w"> </span><span class="k">max-height</span><span class="p">:</span><span class="w"> </span><span class="mi">80</span><span class="kt">vh</span><span class="p">;</span>
<a id="__codelineno-6-77" name="__codelineno-6-77" href="#__codelineno-6-77"></a><span class="w"> </span><span class="k">overflow-y</span><span class="p">:</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span>
<a id="__codelineno-6-78" name="__codelineno-6-78" href="#__codelineno-6-78"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-79" name="__codelineno-6-79" href="#__codelineno-6-79"></a><span class="w"> </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="w"> </span><span class="mi">32</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.4</span><span class="p">);</span>
<a id="__codelineno-6-80" name="__codelineno-6-80" href="#__codelineno-6-80"></a><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#ffc107</span><span class="p">;</span>
<a id="__codelineno-6-81" name="__codelineno-6-81" href="#__codelineno-6-81"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-82" name="__codelineno-6-82" href="#__codelineno-6-82"></a>
<a id="__codelineno-6-83" name="__codelineno-6-83" href="#__codelineno-6-83"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-close</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-84" name="__codelineno-6-84" href="#__codelineno-6-84"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
<a id="__codelineno-6-85" name="__codelineno-6-85" href="#__codelineno-6-85"></a><span class="w"> </span><span class="k">right</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-86" name="__codelineno-6-86" href="#__codelineno-6-86"></a><span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-87" name="__codelineno-6-87" href="#__codelineno-6-87"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">28</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-88" name="__codelineno-6-88" href="#__codelineno-6-88"></a><span class="w"> </span><span class="k">cursor</span><span class="p">:</span><span class="w"> </span><span class="kc">pointer</span><span class="p">;</span>
<a id="__codelineno-6-89" name="__codelineno-6-89" href="#__codelineno-6-89"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ffc107</span><span class="p">;</span>
<a id="__codelineno-6-90" name="__codelineno-6-90" href="#__codelineno-6-90"></a><span class="w"> </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<a id="__codelineno-6-91" name="__codelineno-6-91" href="#__codelineno-6-91"></a><span class="w"> </span><span class="k">line-height</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">;</span>
<a id="__codelineno-6-92" name="__codelineno-6-92" href="#__codelineno-6-92"></a><span class="w"> </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="kc">all</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease</span><span class="p">;</span>
<a id="__codelineno-6-93" name="__codelineno-6-93" href="#__codelineno-6-93"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-94" name="__codelineno-6-94" href="#__codelineno-6-94"></a><span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-95" name="__codelineno-6-95" href="#__codelineno-6-95"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span>
<a id="__codelineno-6-96" name="__codelineno-6-96" href="#__codelineno-6-96"></a><span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-6-97" name="__codelineno-6-97" href="#__codelineno-6-97"></a><span class="w"> </span><span class="k">justify-content</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-6-98" name="__codelineno-6-98" href="#__codelineno-6-98"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-6-99" name="__codelineno-6-99" href="#__codelineno-6-99"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#2a2d31</span><span class="p">;</span>
<a id="__codelineno-6-100" name="__codelineno-6-100" href="#__codelineno-6-100"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-101" name="__codelineno-6-101" href="#__codelineno-6-101"></a>
<a id="__codelineno-6-102" name="__codelineno-6-102" href="#__codelineno-6-102"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-close</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-103" name="__codelineno-6-103" href="#__codelineno-6-103"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#ffc107</span><span class="p">;</span>
<a id="__codelineno-6-104" name="__codelineno-6-104" href="#__codelineno-6-104"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
<a id="__codelineno-6-105" name="__codelineno-6-105" href="#__codelineno-6-105"></a><span class="w"> </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">rotate</span><span class="p">(</span><span class="mi">90</span><span class="kt">deg</span><span class="p">);</span>
<a id="__codelineno-6-106" name="__codelineno-6-106" href="#__codelineno-6-106"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-107" name="__codelineno-6-107" href="#__codelineno-6-107"></a>
<a id="__codelineno-6-108" name="__codelineno-6-108" href="#__codelineno-6-108"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-councillor-grid</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-109" name="__codelineno-6-109" href="#__codelineno-6-109"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="k">grid</span><span class="p">;</span>
<a id="__codelineno-6-110" name="__codelineno-6-110" href="#__codelineno-6-110"></a><span class="w"> </span><span class="k">grid-template-columns</span><span class="p">:</span><span class="w"> </span><span class="nf">repeat</span><span class="p">(</span><span class="kc">auto</span><span class="nv">-fill</span><span class="p">,</span><span class="w"> </span><span class="nf">minmax</span><span class="p">(</span><span class="mi">300</span><span class="kt">px</span><span class="p">,</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="p">));</span>
<a id="__codelineno-6-111" name="__codelineno-6-111" href="#__codelineno-6-111"></a><span class="w"> </span><span class="k">gap</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-112" name="__codelineno-6-112" href="#__codelineno-6-112"></a><span class="w"> </span><span class="k">margin-top</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-113" name="__codelineno-6-113" href="#__codelineno-6-113"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-114" name="__codelineno-6-114" href="#__codelineno-6-114"></a>
<a id="__codelineno-6-115" name="__codelineno-6-115" href="#__codelineno-6-115"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-councillor-card</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-116" name="__codelineno-6-116" href="#__codelineno-6-116"></a><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#2a2d31</span><span class="p">;</span>
<a id="__codelineno-6-117" name="__codelineno-6-117" href="#__codelineno-6-117"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-118" name="__codelineno-6-118" href="#__codelineno-6-118"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-119" name="__codelineno-6-119" href="#__codelineno-6-119"></a><span class="w"> </span><span class="k">cursor</span><span class="p">:</span><span class="w"> </span><span class="kc">pointer</span><span class="p">;</span>
<a id="__codelineno-6-120" name="__codelineno-6-120" href="#__codelineno-6-120"></a><span class="w"> </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="kc">all</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease</span><span class="p">;</span>
<a id="__codelineno-6-121" name="__codelineno-6-121" href="#__codelineno-6-121"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#2a2d31</span><span class="p">;</span>
<a id="__codelineno-6-122" name="__codelineno-6-122" href="#__codelineno-6-122"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-123" name="__codelineno-6-123" href="#__codelineno-6-123"></a>
<a id="__codelineno-6-124" name="__codelineno-6-124" href="#__codelineno-6-124"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-councillor-card</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-125" name="__codelineno-6-125" href="#__codelineno-6-125"></a><span class="w"> </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translateY</span><span class="p">(</span><span class="mi">-5</span><span class="kt">px</span><span class="p">);</span>
<a id="__codelineno-6-126" name="__codelineno-6-126" href="#__codelineno-6-126"></a><span class="w"> </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="w"> </span><span class="mi">24</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="w"> </span><span class="mi">193</span><span class="p">,</span><span class="w"> </span><span class="mi">7</span><span class="p">,</span><span class="w"> </span><span class="mf">0.2</span><span class="p">);</span>
<a id="__codelineno-6-127" name="__codelineno-6-127" href="#__codelineno-6-127"></a><span class="w"> </span><span class="k">border-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ffc107</span><span class="p">;</span>
<a id="__codelineno-6-128" name="__codelineno-6-128" href="#__codelineno-6-128"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-129" name="__codelineno-6-129" href="#__codelineno-6-129"></a>
<a id="__codelineno-6-130" name="__codelineno-6-130" href="#__codelineno-6-130"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-councillor-card</span><span class="w"> </span><span class="nt">img</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-131" name="__codelineno-6-131" href="#__codelineno-6-131"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-6-132" name="__codelineno-6-132" href="#__codelineno-6-132"></a><span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-133" name="__codelineno-6-133" href="#__codelineno-6-133"></a><span class="w"> </span><span class="k">object-fit</span><span class="p">:</span><span class="w"> </span><span class="kc">cover</span><span class="p">;</span>
<a id="__codelineno-6-134" name="__codelineno-6-134" href="#__codelineno-6-134"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-135" name="__codelineno-6-135" href="#__codelineno-6-135"></a><span class="w"> </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="kc">all</span><span class="w"> </span><span class="mf">0.3</span><span class="kt">s</span><span class="w"> </span><span class="kc">ease</span><span class="p">;</span>
<a id="__codelineno-6-136" name="__codelineno-6-136" href="#__codelineno-6-136"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-137" name="__codelineno-6-137" href="#__codelineno-6-137"></a>
<a id="__codelineno-6-138" name="__codelineno-6-138" href="#__codelineno-6-138"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-councillor-card</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="nt">img</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-139" name="__codelineno-6-139" href="#__codelineno-6-139"></a><span class="w"> </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">scale</span><span class="p">(</span><span class="mf">1.02</span><span class="p">);</span>
<a id="__codelineno-6-140" name="__codelineno-6-140" href="#__codelineno-6-140"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-141" name="__codelineno-6-141" href="#__codelineno-6-141"></a>
<a id="__codelineno-6-142" name="__codelineno-6-142" href="#__codelineno-6-142"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-councillor-card</span><span class="w"> </span><span class="nt">h3</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-143" name="__codelineno-6-143" href="#__codelineno-6-143"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-144" name="__codelineno-6-144" href="#__codelineno-6-144"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
<a id="__codelineno-6-145" name="__codelineno-6-145" href="#__codelineno-6-145"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mf">1.2</span><span class="kt">em</span><span class="p">;</span>
<a id="__codelineno-6-146" name="__codelineno-6-146" href="#__codelineno-6-146"></a><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span>
<a id="__codelineno-6-147" name="__codelineno-6-147" href="#__codelineno-6-147"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-148" name="__codelineno-6-148" href="#__codelineno-6-148"></a>
<a id="__codelineno-6-149" name="__codelineno-6-149" href="#__codelineno-6-149"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-councillor-card</span><span class="w"> </span><span class="nt">p</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-150" name="__codelineno-6-150" href="#__codelineno-6-150"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-6-151" name="__codelineno-6-151" href="#__codelineno-6-151"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ffc107</span><span class="p">;</span>
<a id="__codelineno-6-152" name="__codelineno-6-152" href="#__codelineno-6-152"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
<a id="__codelineno-6-153" name="__codelineno-6-153" href="#__codelineno-6-153"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-154" name="__codelineno-6-154" href="#__codelineno-6-154"></a>
<a id="__codelineno-6-155" name="__codelineno-6-155" href="#__codelineno-6-155"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">.</span><span class="nc">ece-modal</span><span class="w"> </span><span class="nt">h2</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-156" name="__codelineno-6-156" href="#__codelineno-6-156"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ffc107</span><span class="p">;</span>
<a id="__codelineno-6-157" name="__codelineno-6-157" href="#__codelineno-6-157"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
<a id="__codelineno-6-158" name="__codelineno-6-158" href="#__codelineno-6-158"></a><span class="w"> </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<a id="__codelineno-6-159" name="__codelineno-6-159" href="#__codelineno-6-159"></a><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span>
<a id="__codelineno-6-160" name="__codelineno-6-160" href="#__codelineno-6-160"></a><span class="w"> </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
<a id="__codelineno-6-161" name="__codelineno-6-161" href="#__codelineno-6-161"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-162" name="__codelineno-6-162" href="#__codelineno-6-162"></a>
<a id="__codelineno-6-163" name="__codelineno-6-163" href="#__codelineno-6-163"></a><span class="w"> </span><span class="p">@</span><span class="k">keyframes</span><span class="w"> </span><span class="nt">countUp</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-164" name="__codelineno-6-164" href="#__codelineno-6-164"></a><span class="w"> </span><span class="nt">from</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-165" name="__codelineno-6-165" href="#__codelineno-6-165"></a><span class="w"> </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translateY</span><span class="p">(</span><span class="mi">20</span><span class="kt">px</span><span class="p">);</span>
<a id="__codelineno-6-166" name="__codelineno-6-166" href="#__codelineno-6-166"></a><span class="w"> </span><span class="k">opacity</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<a id="__codelineno-6-167" name="__codelineno-6-167" href="#__codelineno-6-167"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-168" name="__codelineno-6-168" href="#__codelineno-6-168"></a><span class="w"> </span><span class="nt">to</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-169" name="__codelineno-6-169" href="#__codelineno-6-169"></a><span class="w"> </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translateY</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<a id="__codelineno-6-170" name="__codelineno-6-170" href="#__codelineno-6-170"></a><span class="w"> </span><span class="k">opacity</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">;</span>
<a id="__codelineno-6-171" name="__codelineno-6-171" href="#__codelineno-6-171"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-172" name="__codelineno-6-172" href="#__codelineno-6-172"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-173" name="__codelineno-6-173" href="#__codelineno-6-173"></a>
<a id="__codelineno-6-174" name="__codelineno-6-174" href="#__codelineno-6-174"></a><span class="w"> </span><span class="p">#</span><span class="nn">edmonton-council-emailer</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-175" name="__codelineno-6-175" href="#__codelineno-6-175"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">static</span><span class="p">;</span><span class="w"> </span><span class="c">/* Remove any positioning if unnecessary */</span>
<a id="__codelineno-6-176" name="__codelineno-6-176" href="#__codelineno-6-176"></a><span class="w"> </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span><span class="w"> </span><span class="c">/* Reset z-index */</span>
<a id="__codelineno-6-177" name="__codelineno-6-177" href="#__codelineno-6-177"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-178" name="__codelineno-6-178" href="#__codelineno-6-178"></a><span class="w"> </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-6-179" name="__codelineno-6-179" href="#__codelineno-6-179"></a>
<a id="__codelineno-6-180" name="__codelineno-6-180" href="#__codelineno-6-180"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ece-button-container&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-181" name="__codelineno-6-181" href="#__codelineno-6-181"></a> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ece-button&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;ECE.openModal()&quot;</span><span class="p">&gt;</span>Email Your Councillor<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-6-182" name="__codelineno-6-182" href="#__codelineno-6-182"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-183" name="__codelineno-6-183" href="#__codelineno-6-183"></a>
<a id="__codelineno-6-184" name="__codelineno-6-184" href="#__codelineno-6-184"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ece-modal&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;ece-modal&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-185" name="__codelineno-6-185" href="#__codelineno-6-185"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ece-modal-content&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-186" name="__codelineno-6-186" href="#__codelineno-6-186"></a> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ece-close&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;ECE.closeModal()&quot;</span><span class="p">&gt;</span><span class="ni">&amp;times;</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<a id="__codelineno-6-187" name="__codelineno-6-187" href="#__codelineno-6-187"></a> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Select Your City Councillor<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-6-188" name="__codelineno-6-188" href="#__codelineno-6-188"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ece-councillor-grid&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;ece-councillor-grid&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-189" name="__codelineno-6-189" href="#__codelineno-6-189"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-190" name="__codelineno-6-190" href="#__codelineno-6-190"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-191" name="__codelineno-6-191" href="#__codelineno-6-191"></a>
<a id="__codelineno-6-192" name="__codelineno-6-192" href="#__codelineno-6-192"></a> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-6-193" name="__codelineno-6-193" href="#__codelineno-6-193"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">ECE</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-194" name="__codelineno-6-194" href="#__codelineno-6-194"></a><span class="w"> </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<a id="__codelineno-6-195" name="__codelineno-6-195" href="#__codelineno-6-195"></a><span class="w"> </span><span class="nx">councillors</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-6-196" name="__codelineno-6-196" href="#__codelineno-6-196"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-197" name="__codelineno-6-197" href="#__codelineno-6-197"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Mayor Amarjeet Sohi&quot;</span><span class="p">,</span>
<a id="__codelineno-6-198" name="__codelineno-6-198" href="#__codelineno-6-198"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;City-Wide Mayor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-199" name="__codelineno-6-199" href="#__codelineno-6-199"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;mayorsoffice@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-200" name="__codelineno-6-200" href="#__codelineno-6-200"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Mayor-Sohi-800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-201" name="__codelineno-6-201" href="#__codelineno-6-201"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;City-Wide&quot;</span>
<a id="__codelineno-6-202" name="__codelineno-6-202" href="#__codelineno-6-202"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-203" name="__codelineno-6-203" href="#__codelineno-6-203"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-204" name="__codelineno-6-204" href="#__codelineno-6-204"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Erin Rutherford&quot;</span><span class="p">,</span>
<a id="__codelineno-6-205" name="__codelineno-6-205" href="#__codelineno-6-205"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward Anirniq Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-206" name="__codelineno-6-206" href="#__codelineno-6-206"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;erin.rutherford@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-207" name="__codelineno-6-207" href="#__codelineno-6-207"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Anirniq-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-208" name="__codelineno-6-208" href="#__codelineno-6-208"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Anirniq&quot;</span>
<a id="__codelineno-6-209" name="__codelineno-6-209" href="#__codelineno-6-209"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-210" name="__codelineno-6-210" href="#__codelineno-6-210"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-211" name="__codelineno-6-211" href="#__codelineno-6-211"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Aaron Paquette&quot;</span><span class="p">,</span>
<a id="__codelineno-6-212" name="__codelineno-6-212" href="#__codelineno-6-212"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward Dene Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-213" name="__codelineno-6-213" href="#__codelineno-6-213"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;aaron.paquette@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-214" name="__codelineno-6-214" href="#__codelineno-6-214"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Dene-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-215" name="__codelineno-6-215" href="#__codelineno-6-215"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Dene&quot;</span>
<a id="__codelineno-6-216" name="__codelineno-6-216" href="#__codelineno-6-216"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-217" name="__codelineno-6-217" href="#__codelineno-6-217"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-218" name="__codelineno-6-218" href="#__codelineno-6-218"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Jennifer Rice&quot;</span><span class="p">,</span>
<a id="__codelineno-6-219" name="__codelineno-6-219" href="#__codelineno-6-219"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward Ipiihkoohkanipiaohtsi Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-220" name="__codelineno-6-220" href="#__codelineno-6-220"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;jennifer.rice@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-221" name="__codelineno-6-221" href="#__codelineno-6-221"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Ipiihkoohkanipiaohtsi-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-222" name="__codelineno-6-222" href="#__codelineno-6-222"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ipiihkoohkanipiaohtsi&quot;</span>
<a id="__codelineno-6-223" name="__codelineno-6-223" href="#__codelineno-6-223"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-224" name="__codelineno-6-224" href="#__codelineno-6-224"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-225" name="__codelineno-6-225" href="#__codelineno-6-225"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Keren Tang&quot;</span><span class="p">,</span>
<a id="__codelineno-6-226" name="__codelineno-6-226" href="#__codelineno-6-226"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward Karhiio Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-227" name="__codelineno-6-227" href="#__codelineno-6-227"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;keren.tang@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-228" name="__codelineno-6-228" href="#__codelineno-6-228"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Karhiio-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-229" name="__codelineno-6-229" href="#__codelineno-6-229"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Karhiio&quot;</span>
<a id="__codelineno-6-230" name="__codelineno-6-230" href="#__codelineno-6-230"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-231" name="__codelineno-6-231" href="#__codelineno-6-231"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-232" name="__codelineno-6-232" href="#__codelineno-6-232"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Ashley Salvador&quot;</span><span class="p">,</span>
<a id="__codelineno-6-233" name="__codelineno-6-233" href="#__codelineno-6-233"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward Métis Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-234" name="__codelineno-6-234" href="#__codelineno-6-234"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;ashley.salvador@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-235" name="__codelineno-6-235" href="#__codelineno-6-235"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Métis-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-236" name="__codelineno-6-236" href="#__codelineno-6-236"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Métis&quot;</span>
<a id="__codelineno-6-237" name="__codelineno-6-237" href="#__codelineno-6-237"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-238" name="__codelineno-6-238" href="#__codelineno-6-238"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-239" name="__codelineno-6-239" href="#__codelineno-6-239"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Andrew Knack&quot;</span><span class="p">,</span>
<a id="__codelineno-6-240" name="__codelineno-6-240" href="#__codelineno-6-240"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward Nakota Isga Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-241" name="__codelineno-6-241" href="#__codelineno-6-241"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;andrew.knack@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-242" name="__codelineno-6-242" href="#__codelineno-6-242"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Nakota-Isga-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-243" name="__codelineno-6-243" href="#__codelineno-6-243"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Nakota Isga&quot;</span>
<a id="__codelineno-6-244" name="__codelineno-6-244" href="#__codelineno-6-244"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-245" name="__codelineno-6-245" href="#__codelineno-6-245"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-246" name="__codelineno-6-246" href="#__codelineno-6-246"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Anne Stevenson&quot;</span><span class="p">,</span>
<a id="__codelineno-6-247" name="__codelineno-6-247" href="#__codelineno-6-247"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward O-day&#39;min Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-248" name="__codelineno-6-248" href="#__codelineno-6-248"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;anne.stevenson@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-249" name="__codelineno-6-249" href="#__codelineno-6-249"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/O-day&#39;min-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-250" name="__codelineno-6-250" href="#__codelineno-6-250"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;O-day&#39;min&quot;</span>
<a id="__codelineno-6-251" name="__codelineno-6-251" href="#__codelineno-6-251"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-252" name="__codelineno-6-252" href="#__codelineno-6-252"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-253" name="__codelineno-6-253" href="#__codelineno-6-253"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Michael Janz&quot;</span><span class="p">,</span>
<a id="__codelineno-6-254" name="__codelineno-6-254" href="#__codelineno-6-254"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward papastew Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-255" name="__codelineno-6-255" href="#__codelineno-6-255"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;michael.janz@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-256" name="__codelineno-6-256" href="#__codelineno-6-256"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/papastew-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-257" name="__codelineno-6-257" href="#__codelineno-6-257"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;papastew&quot;</span>
<a id="__codelineno-6-258" name="__codelineno-6-258" href="#__codelineno-6-258"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-259" name="__codelineno-6-259" href="#__codelineno-6-259"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-260" name="__codelineno-6-260" href="#__codelineno-6-260"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Tim Cartmell&quot;</span><span class="p">,</span>
<a id="__codelineno-6-261" name="__codelineno-6-261" href="#__codelineno-6-261"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward pihêsiwin Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-262" name="__codelineno-6-262" href="#__codelineno-6-262"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;tim.cartmell@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-263" name="__codelineno-6-263" href="#__codelineno-6-263"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/pihêsiwin-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-264" name="__codelineno-6-264" href="#__codelineno-6-264"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;pihêsiwin&quot;</span>
<a id="__codelineno-6-265" name="__codelineno-6-265" href="#__codelineno-6-265"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-266" name="__codelineno-6-266" href="#__codelineno-6-266"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-267" name="__codelineno-6-267" href="#__codelineno-6-267"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Sarah Hamilton&quot;</span><span class="p">,</span>
<a id="__codelineno-6-268" name="__codelineno-6-268" href="#__codelineno-6-268"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward sipiwiyiniwak Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-269" name="__codelineno-6-269" href="#__codelineno-6-269"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;sarah.hamilton@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-270" name="__codelineno-6-270" href="#__codelineno-6-270"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/sipiwiyiniwak-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-271" name="__codelineno-6-271" href="#__codelineno-6-271"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;sipiwiyiniwak&quot;</span>
<a id="__codelineno-6-272" name="__codelineno-6-272" href="#__codelineno-6-272"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-273" name="__codelineno-6-273" href="#__codelineno-6-273"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-274" name="__codelineno-6-274" href="#__codelineno-6-274"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Jo-Anne Wright&quot;</span><span class="p">,</span>
<a id="__codelineno-6-275" name="__codelineno-6-275" href="#__codelineno-6-275"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward Sspomitapi Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-276" name="__codelineno-6-276" href="#__codelineno-6-276"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;jo-anne.wright@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-277" name="__codelineno-6-277" href="#__codelineno-6-277"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/Sspomitapi-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-278" name="__codelineno-6-278" href="#__codelineno-6-278"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Sspomitapi&quot;</span>
<a id="__codelineno-6-279" name="__codelineno-6-279" href="#__codelineno-6-279"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-280" name="__codelineno-6-280" href="#__codelineno-6-280"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-281" name="__codelineno-6-281" href="#__codelineno-6-281"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Councillor Karen Principe&quot;</span><span class="p">,</span>
<a id="__codelineno-6-282" name="__codelineno-6-282" href="#__codelineno-6-282"></a><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Ward tastawiyiniwak Councillor&quot;</span><span class="p">,</span>
<a id="__codelineno-6-283" name="__codelineno-6-283" href="#__codelineno-6-283"></a><span class="w"> </span><span class="nx">email</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;karen.principe@edmonton.ca&quot;</span><span class="p">,</span>
<a id="__codelineno-6-284" name="__codelineno-6-284" href="#__codelineno-6-284"></a><span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://www.edmonton.ca/sites/default/files/public-files/feature-images/tastawiyiniwak-councillor_800x494.jpg&quot;</span><span class="p">,</span>
<a id="__codelineno-6-285" name="__codelineno-6-285" href="#__codelineno-6-285"></a><span class="w"> </span><span class="nx">ward</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;tastawiyiniwak&quot;</span>
<a id="__codelineno-6-286" name="__codelineno-6-286" href="#__codelineno-6-286"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-287" name="__codelineno-6-287" href="#__codelineno-6-287"></a><span class="w"> </span><span class="p">],</span>
<a id="__codelineno-6-288" name="__codelineno-6-288" href="#__codelineno-6-288"></a>
<a id="__codelineno-6-289" name="__codelineno-6-289" href="#__codelineno-6-289"></a><span class="w"> </span><span class="nx">init</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-290" name="__codelineno-6-290" href="#__codelineno-6-290"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">ECEInitialized</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="p">;</span>
<a id="__codelineno-6-291" name="__codelineno-6-291" href="#__codelineno-6-291"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">ECEInitialized</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<a id="__codelineno-6-292" name="__codelineno-6-292" href="#__codelineno-6-292"></a>
<a id="__codelineno-6-293" name="__codelineno-6-293" href="#__codelineno-6-293"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;ece-modal&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-294" name="__codelineno-6-294" href="#__codelineno-6-294"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="k">this</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-295" name="__codelineno-6-295" href="#__codelineno-6-295"></a><span class="w"> </span><span class="nx">ECE</span><span class="p">.</span><span class="nx">closeModal</span><span class="p">();</span>
<a id="__codelineno-6-296" name="__codelineno-6-296" href="#__codelineno-6-296"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-297" name="__codelineno-6-297" href="#__codelineno-6-297"></a><span class="w"> </span><span class="p">});</span>
<a id="__codelineno-6-298" name="__codelineno-6-298" href="#__codelineno-6-298"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-299" name="__codelineno-6-299" href="#__codelineno-6-299"></a>
<a id="__codelineno-6-300" name="__codelineno-6-300" href="#__codelineno-6-300"></a><span class="w"> </span><span class="nx">createCouncillorCards</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-301" name="__codelineno-6-301" href="#__codelineno-6-301"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">grid</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;ece-councillor-grid&#39;</span><span class="p">);</span>
<a id="__codelineno-6-302" name="__codelineno-6-302" href="#__codelineno-6-302"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">grid</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="p">;</span>
<a id="__codelineno-6-303" name="__codelineno-6-303" href="#__codelineno-6-303"></a>
<a id="__codelineno-6-304" name="__codelineno-6-304" href="#__codelineno-6-304"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">councillors</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">councillor</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-305" name="__codelineno-6-305" href="#__codelineno-6-305"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">card</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
<a id="__codelineno-6-306" name="__codelineno-6-306" href="#__codelineno-6-306"></a><span class="w"> </span><span class="nx">card</span><span class="p">.</span><span class="nx">className</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;ece-councillor-card&#39;</span><span class="p">;</span>
<a id="__codelineno-6-307" name="__codelineno-6-307" href="#__codelineno-6-307"></a><span class="w"> </span><span class="nx">card</span><span class="p">.</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`</span>
<a id="__codelineno-6-308" name="__codelineno-6-308" href="#__codelineno-6-308"></a><span class="sb"> &lt;img src=&quot;</span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">image</span><span class="si">}</span><span class="sb">&quot; alt=&quot;</span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">&quot;&gt;</span>
<a id="__codelineno-6-309" name="__codelineno-6-309" href="#__codelineno-6-309"></a><span class="sb"> &lt;h3&gt;</span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">&lt;/h3&gt;</span>
<a id="__codelineno-6-310" name="__codelineno-6-310" href="#__codelineno-6-310"></a><span class="sb"> &lt;p&gt;</span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">ward</span><span class="si">}</span><span class="sb">&lt;/p&gt;</span>
<a id="__codelineno-6-311" name="__codelineno-6-311" href="#__codelineno-6-311"></a><span class="sb"> `</span><span class="p">;</span>
<a id="__codelineno-6-312" name="__codelineno-6-312" href="#__codelineno-6-312"></a><span class="w"> </span><span class="nx">card</span><span class="p">.</span><span class="nx">onclick</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">emailCouncillor</span><span class="p">(</span><span class="nx">councillor</span><span class="p">);</span>
<a id="__codelineno-6-313" name="__codelineno-6-313" href="#__codelineno-6-313"></a><span class="w"> </span><span class="nx">grid</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">card</span><span class="p">);</span>
<a id="__codelineno-6-314" name="__codelineno-6-314" href="#__codelineno-6-314"></a><span class="w"> </span><span class="p">});</span>
<a id="__codelineno-6-315" name="__codelineno-6-315" href="#__codelineno-6-315"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-316" name="__codelineno-6-316" href="#__codelineno-6-316"></a>
<a id="__codelineno-6-317" name="__codelineno-6-317" href="#__codelineno-6-317"></a><span class="w"> </span><span class="nx">openModal</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-318" name="__codelineno-6-318" href="#__codelineno-6-318"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">modal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;ece-modal&#39;</span><span class="p">);</span>
<a id="__codelineno-6-319" name="__codelineno-6-319" href="#__codelineno-6-319"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">modal</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="p">;</span>
<a id="__codelineno-6-320" name="__codelineno-6-320" href="#__codelineno-6-320"></a>
<a id="__codelineno-6-321" name="__codelineno-6-321" href="#__codelineno-6-321"></a><span class="w"> </span><span class="nx">modal</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;block&#39;</span><span class="p">;</span>
<a id="__codelineno-6-322" name="__codelineno-6-322" href="#__codelineno-6-322"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;ece-councillor-grid&#39;</span><span class="p">).</span><span class="nx">children</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-323" name="__codelineno-6-323" href="#__codelineno-6-323"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">createCouncillorCards</span><span class="p">();</span>
<a id="__codelineno-6-324" name="__codelineno-6-324" href="#__codelineno-6-324"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-325" name="__codelineno-6-325" href="#__codelineno-6-325"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-326" name="__codelineno-6-326" href="#__codelineno-6-326"></a>
<a id="__codelineno-6-327" name="__codelineno-6-327" href="#__codelineno-6-327"></a><span class="w"> </span><span class="nx">closeModal</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-328" name="__codelineno-6-328" href="#__codelineno-6-328"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">modal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;ece-modal&#39;</span><span class="p">);</span>
<a id="__codelineno-6-329" name="__codelineno-6-329" href="#__codelineno-6-329"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">modal</span><span class="p">)</span><span class="w"> </span><span class="nx">modal</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;none&#39;</span><span class="p">;</span>
<a id="__codelineno-6-330" name="__codelineno-6-330" href="#__codelineno-6-330"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-6-331" name="__codelineno-6-331" href="#__codelineno-6-331"></a>
<a id="__codelineno-6-332" name="__codelineno-6-332" href="#__codelineno-6-332"></a><span class="w"> </span><span class="nx">emailCouncillor</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">councillor</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-333" name="__codelineno-6-333" href="#__codelineno-6-333"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">closeModal</span><span class="p">();</span>
<a id="__codelineno-6-334" name="__codelineno-6-334" href="#__codelineno-6-334"></a>
<a id="__codelineno-6-335" name="__codelineno-6-335" href="#__codelineno-6-335"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">subject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Constituent Feedback - [Your Issue]&quot;</span><span class="p">;</span>
<a id="__codelineno-6-336" name="__codelineno-6-336" href="#__codelineno-6-336"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">body</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`Dear </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">,</span>
<a id="__codelineno-6-337" name="__codelineno-6-337" href="#__codelineno-6-337"></a>
<a id="__codelineno-6-338" name="__codelineno-6-338" href="#__codelineno-6-338"></a><span class="sb">I am a constituent in </span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">ward</span><span class="si">}</span><span class="sb"> and I am writing to you regarding [describe your issue].</span>
<a id="__codelineno-6-339" name="__codelineno-6-339" href="#__codelineno-6-339"></a>
<a id="__codelineno-6-340" name="__codelineno-6-340" href="#__codelineno-6-340"></a><span class="sb">[Describe how this issue affects you and your community]</span>
<a id="__codelineno-6-341" name="__codelineno-6-341" href="#__codelineno-6-341"></a>
<a id="__codelineno-6-342" name="__codelineno-6-342" href="#__codelineno-6-342"></a><span class="sb">I would appreciate if you could [describe your requested action].</span>
<a id="__codelineno-6-343" name="__codelineno-6-343" href="#__codelineno-6-343"></a>
<a id="__codelineno-6-344" name="__codelineno-6-344" href="#__codelineno-6-344"></a><span class="sb">Thank you for your time and consideration.</span>
<a id="__codelineno-6-345" name="__codelineno-6-345" href="#__codelineno-6-345"></a>
<a id="__codelineno-6-346" name="__codelineno-6-346" href="#__codelineno-6-346"></a><span class="sb">Sincerely,</span>
<a id="__codelineno-6-347" name="__codelineno-6-347" href="#__codelineno-6-347"></a><span class="sb">[Your Name]</span>
<a id="__codelineno-6-348" name="__codelineno-6-348" href="#__codelineno-6-348"></a><span class="sb">[Your Address]</span>
<a id="__codelineno-6-349" name="__codelineno-6-349" href="#__codelineno-6-349"></a><span class="sb">[Your Phone Number]`</span><span class="p">;</span>
<a id="__codelineno-6-350" name="__codelineno-6-350" href="#__codelineno-6-350"></a>
<a id="__codelineno-6-351" name="__codelineno-6-351" href="#__codelineno-6-351"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">encodedSubject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">subject</span><span class="p">);</span>
<a id="__codelineno-6-352" name="__codelineno-6-352" href="#__codelineno-6-352"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">encodedBody</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
<a id="__codelineno-6-353" name="__codelineno-6-353" href="#__codelineno-6-353"></a>
<a id="__codelineno-6-354" name="__codelineno-6-354" href="#__codelineno-6-354"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`mailto:</span><span class="si">${</span><span class="nx">councillor</span><span class="p">.</span><span class="nx">email</span><span class="si">}</span><span class="sb">?subject=</span><span class="si">${</span><span class="nx">encodedSubject</span><span class="si">}</span><span class="sb">&amp;body=</span><span class="si">${</span><span class="nx">encodedBody</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>
<a id="__codelineno-6-355" name="__codelineno-6-355" href="#__codelineno-6-355"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-356" name="__codelineno-6-356" href="#__codelineno-6-356"></a><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-6-357" name="__codelineno-6-357" href="#__codelineno-6-357"></a>
<a id="__codelineno-6-358" name="__codelineno-6-358" href="#__codelineno-6-358"></a><span class="w"> </span><span class="c1">// Initialize the component when the document is ready</span>
<a id="__codelineno-6-359" name="__codelineno-6-359" href="#__codelineno-6-359"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-360" name="__codelineno-6-360" href="#__codelineno-6-360"></a><span class="w"> </span><span class="nx">ECE</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<a id="__codelineno-6-361" name="__codelineno-6-361" href="#__codelineno-6-361"></a><span class="w"> </span><span class="p">});</span>
<a id="__codelineno-6-362" name="__codelineno-6-362" href="#__codelineno-6-362"></a><span class="w"> </span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-6-363" name="__codelineno-6-363" href="#__codelineno-6-363"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-364" name="__codelineno-6-364" href="#__codelineno-6-364"></a><span class="cm">&lt;!-- End Edmonton Council Emailer --&gt;</span>
</code></pre></div>
</details>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../obsidian/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Use Obsidian as Site Editor">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Use Obsidian as Site Editor
</div>
</div>
</a>
<a href="../Customize%20Your%20Landing%20Page/" class="md-footer__link md-footer__link--next" aria-label="Next: Customize Your Landing Page">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Customize Your Landing Page
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2024 The Bunker Operations - Built with Change Maker
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../../..", "features": ["navigation.tracking", "navigation.indexes", "navigation.collapse", "navigation.path", "content.code.copy", "navigation.top", "navigation.tabs", "navigation.footer", "navigation.instant", "navigation.top"], "search": "../../../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../../../assets/javascripts/bundle.13a4f30d.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink