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/Examples/index.html

6601 lines
114 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/Examples/">
<link rel="prev" href="../NocoDB/">
<link rel="next" href="../Get%20Site%20Online/">
<link rel="icon" href="../../../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.14">
<title>Example Political Apps - 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="Example Political Apps - 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/Examples.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/Examples/" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="Example Political Apps - 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/Examples.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="#example-political-apps" 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>
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">
Example Political Apps
</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 md-tabs__item--active">
<a href="../../../" class="md-tabs__link">
Archive
</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/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 md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" 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_3" id="__nav_3_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3">
<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_3_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_3_2" id="__nav_3_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_3_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3_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_3_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_3_2_7" id="__nav_3_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_3_2_7_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3_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">
<a href="../Code%20Snippets/" class="md-nav__link">
<span class="md-ellipsis">
Code Snippets
</span>
</a>
</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 md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<a href="./" class="md-nav__link md-nav__link--active">
<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_3_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_3_2_8" id="__nav_3_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_3_2_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_2_8_5" >
<label class="md-nav__link" for="__nav_3_2_8_5" id="__nav_3_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_3_2_8_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_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_3_3" id="__nav_3_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_3_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_4" >
<label class="md-nav__link" for="__nav_3_3_4" id="__nav_3_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_3_3_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_4_14" >
<label class="md-nav__link" for="__nav_3_3_4_14" id="__nav_3_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_3_3_4_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_5" >
<label class="md-nav__link" for="__nav_3_3_5" id="__nav_3_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_3_3_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_6" >
<label class="md-nav__link" for="__nav_3_3_6" id="__nav_3_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_3_3_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_6_2" >
<label class="md-nav__link" for="__nav_3_3_6_2" id="__nav_3_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_3_3_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_7" >
<label class="md-nav__link" for="__nav_3_3_7" id="__nav_3_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_3_3_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_8" >
<label class="md-nav__link" for="__nav_3_3_8" id="__nav_3_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_3_3_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_9" >
<label class="md-nav__link" for="__nav_3_3_9" id="__nav_3_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_3_3_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10" >
<label class="md-nav__link" for="__nav_3_3_10" id="__nav_3_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_3_3_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_1" >
<label class="md-nav__link" for="__nav_3_3_10_1" id="__nav_3_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_3_3_10_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_2" >
<label class="md-nav__link" for="__nav_3_3_10_2" id="__nav_3_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_3_3_10_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_3" >
<label class="md-nav__link" for="__nav_3_3_10_3" id="__nav_3_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_3_3_10_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_4" >
<label class="md-nav__link" for="__nav_3_3_10_4" id="__nav_3_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_3_3_10_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_4_4" >
<label class="md-nav__link" for="__nav_3_3_10_4_4" id="__nav_3_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_3_3_10_4_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_4_5" >
<label class="md-nav__link" for="__nav_3_3_10_4_5" id="__nav_3_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_3_3_10_4_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_4_6" >
<label class="md-nav__link" for="__nav_3_3_10_4_6" id="__nav_3_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_3_3_10_4_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_3_10_4_7" >
<label class="md-nav__link" for="__nav_3_3_10_4_7" id="__nav_3_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_3_3_10_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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_3_4" >
<label class="md-nav__link" for="__nav_3_4" id="__nav_3_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_3_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_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>
</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">
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="example-political-apps">Example Political Apps<a class="headerlink" href="#example-political-apps" title="Permanent link">&para;</a></h1>
<p>In addition to Change Maker, bnkops has already completed development on plugins for newsletters, email targeting, and micro sites. These technologies are also highly customizable, free to deploy, and actively maintained by bnkops. </p>
<p>bnkops will bake these plugins directly into the installation process for Change Maker (V4 here we come). For now, manuals for installation, hosting, and deployment can be found at <a href="https://repo.bnkops.com/Free%20Office%20Software%20Stack%20%F0%9F%A4%AF/The%20Bunker%20Ops%20Server%20Build-Out.html">repo.bnkops.com</a>. </p>
<h1 id="email-button">Email Button<a class="headerlink" href="#email-button" title="Permanent link">&para;</a></h1>
<p>Insert a counter button to email local council members in Edmonton. Example: </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-counter {
font-size: 24px;
font-weight: bold;
color: #ffc107;
transition: all 0.3s ease;
padding: 10px 20px;
border-radius: 8px;
background: #2a2d31;
border: 2px solid #ffc107;
min-width: 200px;
text-align: center;
}
#edmonton-council-emailer .ece-counter.animate {
transform: scale(1.1);
background: #ffc107;
color: #000;
}
#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: 999999;
}
#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;
}
}
</style>
<div class="ece-button-container">
<button class="ece-button" onclick="ECE.openModal()">Email Your Councillor</button>
<div class="ece-counter" id="ece-counter">0 emails sent</div>
</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: 0,
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';
},
animateCount: function(from, to) {
const counter = document.getElementById('ece-counter');
const duration = 1000; // 1 second animation
const steps = 20;
const increment = (to - from) / steps;
let current = from;
let step = 0;
counter.classList.add('animate');
const interval = setInterval(() => {
current += increment;
step++;
if (step >= steps) {
clearInterval(interval);
current = to;
setTimeout(() => {
counter.classList.remove('animate');
}, 300);
}
counter.textContent = `${Math.round(current)} emails sent`;
}, duration / steps);
},
emailCouncillor: function(councillor) {
const oldCount = this.count;
this.count++;
this.animateCount(oldCount, this.count);
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 -->
<p><a class="md-button" href="../Code%20Snippets/">See Code Snippets For More</a></p>
<h1 id="embed-any-iframe">Embed Any iframe<a class="headerlink" href="#embed-any-iframe" title="Permanent link">&para;</a></h1>
<p>Any iframe embedding will work and render on site allowing for adding audio/visuals from thousands of different sources. For example: </p>
<!DOCTYPE html>
<html>
<head>
<style>
.playlist-container {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
border-radius: 16px;
padding: 2rem;
color: #e0e0e0;
font-family: system-ui, -apple-system, sans-serif;
margin: 1rem 0;
position: relative;
overflow: hidden;
}
.playlist-frame {
position: relative;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
padding: 1px;
z-index: 1;
}
.playlist-frame::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #FFD700, transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.playlist-quote {
text-align: center;
margin-top: 1.5rem;
font-style: italic;
color: #FFD700;
font-size: 1.2rem;
opacity: 0;
transform: translateY(10px);
animation: fadeIn 0.5s ease forwards 0.5s;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.musical-note {
display: inline-block;
animation: float 3s ease-in-out infinite;
}
.musical-note:nth-child(2) {
animation-delay: 0.2s;
}
.musical-note:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.magical-sparkle {
position: absolute;
pointer-events: none;
animation: sparkle 2s linear infinite;
color: #FFD700;
opacity: 0;
font-size: 1.2rem;
}
@keyframes sparkle {
0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
50% { opacity: 1; }
100% { transform: translate(var(--tx), var(--ty)) rotate(360deg); opacity: 0; }
}
.musical-decoration {
position: absolute;
font-size: 2rem;
opacity: 0.15;
pointer-events: none;
}
.top-left-music {
top: 10px;
left: 10px;
animation: pulse 3s ease-in-out infinite;
}
.bottom-right-music {
bottom: 10px;
right: 10px;
animation: pulse 3s ease-in-out infinite 1.5s;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.15; }
50% { transform: scale(1.1); opacity: 0.3; }
}
@media (max-width: 600px) {
.playlist-container {
padding: 1rem;
}
.playlist-quote {
font-size: 1rem;
flex-wrap: wrap;
}
.musical-decoration {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="playlist-container">
<div class="musical-decoration top-left-music">🎼</div>
<div class="musical-decoration bottom-right-music">🎵</div>
<div class="playlist-frame">
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/playlist/5ZY7xLj2TqX5DUrMW89zfq?utm_source=generator&theme=0"
width="100%"
height="352"
frameBorder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy">
</iframe>
</div>
<div class="playlist-quote">
<span class="musical-note">🎵</span>
The revolution will be sung before it is written
<span class="musical-note">✨</span>
</div>
</div>
<script>
function createSparkle() {
const container = document.querySelector('.playlist-container');
const sparkle = document.createElement('div');
sparkle.className = 'magical-sparkle';
sparkle.textContent = ['✨', '🎵', '🎶'][Math.floor(Math.random() * 3)];
const x = Math.random() * container.offsetWidth;
const y = Math.random() * container.offsetHeight;
const tx = (Math.random() - 0.5) * 100;
const ty = -100 - Math.random() * 50;
sparkle.style.left = `${x}px`;
sparkle.style.top = `${y}px`;
sparkle.style.setProperty('--tx', `${tx}px`);
sparkle.style.setProperty('--ty', `${ty}px`);
container.appendChild(sparkle);
setTimeout(() => sparkle.remove(), 2000);
}
// Create sparkles periodically
setInterval(createSparkle, 500);
</script>
</body>
</html>
<h2 id="newsletter">Newsletter<a class="headerlink" href="#newsletter" title="Permanent link">&para;</a></h2>
<p>bnkops uses <a href="https://listmonk.app/">listmonk</a> for its newsletter management. An example deployment: </p>
<!DOCTYPE html>
<html>
<head>
<style>
.newsletter-container {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
border-radius: 16px;
padding: 2rem;
color: #e0e0e0;
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
max-width: 600px;
margin: 2rem auto;
position: relative;
overflow: hidden;
}
.newsletter-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #FFD700, transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.form-title {
color: #FFD700;
font-size: 1.5rem;
margin-bottom: 1.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.form-title-icon {
font-size: 1.8rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
color: #FFD700;
font-size: 0.9rem;
}
.form-input {
width: 100%;
padding: 0.8rem;
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #FFD700;
box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.checkbox-group {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 1rem 0;
}
.checkbox-input {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
position: relative;
}
.checkbox-input:checked::before {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFD700;
font-size: 14px;
}
.checkbox-label {
color: #e0e0e0;
font-size: 0.9rem;
}
.submit-button {
width: 100%;
padding: 1rem;
background: #FFD700;
color: #1a1a1a;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-button:hover {
background: #ffd900;
transform: translateY(-2px);
}
@media (max-width: 480px) {
.newsletter-container {
padding: 1.5rem;
}
.form-title {
font-size: 1.3rem;
}
}
</style>
</head>
<body>
<div class="newsletter-container">
<h3 class="form-title">
<span class="form-title-icon">📫</span>
Subscribe for Updates
</h3>
<form method="post" action="https://listmonk.bnkops.com/subscription/form">
<input type="hidden" name="nonce" />
<div class="form-group">
<label class="form-label" for="email">Email Address</label>
<input
type="email"
id="email"
name="email"
class="form-input"
placeholder="your@email.com"
required
/>
</div>
<div class="form-group">
<label class="form-label" for="name">Name (Optional)</label>
<input
type="text"
id="name"
name="name"
class="form-input"
placeholder="Your name"
/>
</div>
<div class="checkbox-group">
<input
type="checkbox"
id="updates"
name="l"
class="checkbox-input"
checked
value="038eb469-e141-435d-86eb-2ab4df20cf9c"
/>
<label class="checkbox-label" for="updates">
Periodic Updates (~1 Weekly)
</label>
</div>
<button type="submit" class="submit-button">
Subscribe
</button>
</form>
</div>
</body>
</html>
<h2 id="simple-target">Simple Target<a class="headerlink" href="#simple-target" title="Permanent link">&para;</a></h2>
<p>Simple Target is a bnkops app that facilitates a email campaign pointed at a inbox. These can be embedded with ease. </p>
<iframe width="800" height="2000" frameborder="0" allow="clipboard-write;camera;geolocation;fullscreen" src="https://budibase.bnkops.com/embed/simple-target-latest"></iframe>
</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">
<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"], "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