Free ‘Right’s For Your Pocket’ Printable/Shareable Guide

<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Institutional Architecture Paradox</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="/_sdk/element_sdk.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; }

.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-body { font-family: 'DM Sans', system-ui, sans-serif; }

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

@keyframes drawLine {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}

.animate-fade { animation: fadeIn 0.6s ease-out forwards; }
.animate-fade-delay-1 { animation: fadeIn 0.6s ease-out 0.1s forwards; opacity: 0; }
.animate-fade-delay-2 { animation: fadeIn 0.6s ease-out 0.2s forwards; opacity: 0; }
.animate-fade-delay-3 { animation: fadeIn 0.6s ease-out 0.3s forwards; opacity: 0; }

.institution-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.institution-card:hover {
transform: translateY(-8px);
}

.institution-card.active {
transform: scale(1.02);
}

.connection-line {
stroke-dasharray: 1000;
animation: drawLine 2s ease-out forwards;
}

.feature-dot {
transition: all 0.3s ease;
}

.feature-dot:hover {
transform: scale(1.3);
}

.tooltip {
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

.tooltip.visible {
opacity: 1;
}

.nav-item {
position: relative;
}

.nav-item::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: #1e3a5f;
transition: width 0.3s ease;
}

.nav-item:hover::after,
.nav-item.active::after {
width: 100%;
}

.diagram-container {
position: relative;
}

.diagram-node {
transition: all 0.4s ease;
cursor: pointer;
}

.diagram-node:hover {
filter: brightness(1.1);
}
</style>
<style>body { box-sizing: border-box; }</style>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
</head>
<body class="h-full font-body bg-slate-50 text-slate-800 overflow-auto">
<div id="app" class="w-full min-h-full" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);">
<header class="w-full py-6 px-8 border-b border-slate-200 bg-white/80 backdrop-blur-sm">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="animate-fade">
<h1 id="main-title" class="font-display text-3xl font-bold text-slate-900">The Institutional Blueprint</h1>
<p id="subtitle" class="text-slate-500 mt-1">Exploring Architectural & Systemic Parallels</p>
</div>
<nav class="flex gap-8 text-sm font-medium"><button class="nav-item active" data-view="overview">Overview</button> <button class="nav-item" data-view="compare">Compare</button> <button class="nav-item" data-view="timeline">Timeline</button> <button class="nav-item" data-view="analysis">Analysis</button>
</nav>
</div>
</header>
<main class="max-w-7xl mx-auto px-8 py-10">
<section id="overview-section" class="view-section">
<div class="text-center mb-12 animate-fade-delay-1">
<h2 class="font-display text-2xl text-slate-800 mb-4">The Paradox of Control</h2>
<p class="text-slate-600 max-w-2xl mx-auto leading-relaxed">Three institutions designed for different purposes share remarkably similar architectures, schedules, and control mechanisms. Explore the connections that reveal a deeper systemic pattern.</p>
</div>
<div class="diagram-container relative h-96 mb-12 animate-fade-delay-2">
<svg class="w-full h-full" viewbox="0 0 800 350" preserveaspectratio="xMidYMid meet"> <defs>
<lineargradient id="line-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#1e3a5f;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#1e3a5f;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#1e3a5f;stop-opacity:0.3" />
</lineargradient>
</defs>  <path class="connection-line" d="M 200 100 L 600 100" stroke="url(#line-grad)" stroke-width="2" fill="none" /> <path class="connection-line" d="M 600 100 L 400 280" stroke="url(#line-grad)" stroke-width="2" fill="none" style="animation-delay: 0.3s" /> <path class="connection-line" d="M 400 280 L 200 100" stroke="url(#line-grad)" stroke-width="2" fill="none" style="animation-delay: 0.6s" />  <text x="400" y="165" text-anchor="middle" class="font-body text-sm fill-slate-500">
Shared Design Principles
</text>  <circle cx="400" cy="140" r="4" fill="#1e3a5f" class="feature-dot" data-feature="surveillance" /> <circle cx="380" cy="160" r="4" fill="#1e3a5f" class="feature-dot" data-feature="schedules" /> <circle cx="420" cy="160" r="4" fill="#1e3a5f" class="feature-dot" data-feature="hierarchy" />
</svg>
<div class="absolute top-4 left-8 w-64">
<div class="institution-card bg-white rounded-2xl p-6 shadow-lg border border-slate-100 cursor-pointer" data-institution="school">
<div class="flex items-center gap-4 mb-4">
<div class="w-14 h-14 rounded-xl bg-blue-50 flex items-center justify-center">
<svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
</svg>
</div>
<div>
<h3 class="font-display text-lg font-semibold text-slate-800">Schools</h3>
<p class="text-xs text-slate-500">Education System</p>
</div>
</div>
<p class="text-sm text-slate-600">Bell schedules, hall passes, standardized testing, assigned seating</p>
</div>
</div>
<div class="absolute top-4 right-8 w-64">
<div class="institution-card bg-white rounded-2xl p-6 shadow-lg border border-slate-100 cursor-pointer" data-institution="factory">
<div class="flex items-center gap-4 mb-4">
<div class="w-14 h-14 rounded-xl bg-amber-50 flex items-center justify-center">
<svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<div>
<h3 class="font-display text-lg font-semibold text-slate-800">Factories</h3>
<p class="text-xs text-slate-500">Industrial System</p>
</div>
</div>
<p class="text-sm text-slate-600">Shift work, time clocks, assembly lines, production quotas</p>
</div>
</div>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-64">
<div class="institution-card bg-white rounded-2xl p-6 shadow-lg border border-slate-100 cursor-pointer" data-institution="prison">
<div class="flex items-center gap-4 mb-4">
<div class="w-14 h-14 rounded-xl bg-slate-100 flex items-center justify-center">
<svg class="w-7 h-7 text-slate-600" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<div>
<h3 class="font-display text-lg font-semibold text-slate-800">Prisons</h3>
<p class="text-xs text-slate-500">Correctional System</p>
</div>
</div>
<p class="text-sm text-slate-600">Cell blocks, count times, work programs, behavioral compliance</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-fade-delay-3">
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-lg transition-shadow">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-rose-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</div>
<h4 class="font-display font-semibold text-slate-800 mb-2">Panoptic Surveillance</h4>
<p class="text-sm text-slate-600">Central observation points, cameras, monitoring systems designed to see without being seen</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-lg transition-shadow">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h4 class="font-display font-semibold text-slate-800 mb-2">Temporal Regulation</h4>
<p class="text-sm text-slate-600">Bells, schedules, and strict time management controlling movement and activity</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-lg transition-shadow">
<div class="w-10 h-10 rounded-lg bg-violet-50 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-violet-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<h4 class="font-display font-semibold text-slate-800 mb-2">Hierarchical Control</h4>
<p class="text-sm text-slate-600">Clear power structures, uniforms, and systems of reward and punishment</p>
</div>
</div>
</section>
<section id="compare-section" class="view-section hidden">
<h2 class="font-display text-2xl text-slate-800 mb-8 text-center">Side-by-Side Comparison</h2>
<div class="bg-white rounded-2xl shadow-lg border border-slate-100 overflow-hidden">
<div class="grid grid-cols-4 border-b border-slate-100">
<div class="p-4 bg-slate-50 font-semibold text-slate-700">
Feature
</div>
<div class="p-4 bg-blue-50 font-semibold text-blue-700 text-center">
Schools
</div>
<div class="p-4 bg-amber-50 font-semibold text-amber-700 text-center">
Factories
</div>
<div class="p-4 bg-slate-100 font-semibold text-slate-700 text-center">
Prisons
</div>
</div>
<div class="comparison-row grid grid-cols-4 border-b border-slate-50 hover:bg-slate-50 transition-colors">
<div class="p-4 text-sm font-medium text-slate-700">
Time Signal
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Class bells
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Shift whistles
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Count times
</div>
</div>
<div class="comparison-row grid grid-cols-4 border-b border-slate-50 hover:bg-slate-50 transition-colors">
<div class="p-4 text-sm font-medium text-slate-700">
Movement Control
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Hall passes
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Badge access
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Escort required
</div>
</div>
<div class="comparison-row grid grid-cols-4 border-b border-slate-50 hover:bg-slate-50 transition-colors">
<div class="p-4 text-sm font-medium text-slate-700">
Architecture
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Long corridors
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Assembly floors
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Cell blocks
</div>
</div>
<div class="comparison-row grid grid-cols-4 border-b border-slate-50 hover:bg-slate-50 transition-colors">
<div class="p-4 text-sm font-medium text-slate-700">
Surveillance
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Admin offices
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Floor managers
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Guard towers
</div>
</div>
<div class="comparison-row grid grid-cols-4 border-b border-slate-50 hover:bg-slate-50 transition-colors">
<div class="p-4 text-sm font-medium text-slate-700">
Grouping
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Grade levels
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Departments
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Security levels
</div>
</div>
<div class="comparison-row grid grid-cols-4 border-b border-slate-50 hover:bg-slate-50 transition-colors">
<div class="p-4 text-sm font-medium text-slate-700">
Uniform Policy
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Dress codes
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Safety gear
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Prison uniforms
</div>
</div>
<div class="comparison-row grid grid-cols-4 hover:bg-slate-50 transition-colors">
<div class="p-4 text-sm font-medium text-slate-700">
Compliance System
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Grades & detention
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Pay & termination
</div>
<div class="p-4 text-sm text-slate-600 text-center">
Privileges & solitary
</div>
</div>
</div>
</section>
<section id="timeline-section" class="view-section hidden">
<h2 class="font-display text-2xl text-slate-800 mb-8 text-center">Historical Evolution</h2>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-slate-200 via-slate-300 to-slate-200 rounded-full"></div>
<div class="space-y-12">
<div class="relative flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white rounded-xl p-5 shadow-sm border border-slate-100 inline-block max-w-sm"><span class="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded">1780s</span>
<h4 class="font-display font-semibold text-slate-800 mt-2">Industrial Revolution Begins</h4>
<p class="text-sm text-slate-600 mt-1">Factories establish time-based discipline and hierarchical management structures</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full border-4 border-white shadow"></div>
<div class="w-1/2 pl-8"></div>
</div>
<div class="relative flex items-center">
<div class="w-1/2 pr-8"></div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-slate-500 rounded-full border-4 border-white shadow"></div>
<div class="w-1/2 pl-8">
<div class="bg-white rounded-xl p-5 shadow-sm border border-slate-100 inline-block max-w-sm"><span class="text-xs font-semibold text-slate-600 bg-slate-100 px-2 py-1 rounded">1790s</span>
<h4 class="font-display font-semibold text-slate-800 mt-2">Bentham's Panopticon</h4>
<p class="text-sm text-slate-600 mt-1">Jeremy Bentham designs the "all-seeing" prison architecture model</p>
</div>
</div>
</div>
<div class="relative flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white rounded-xl p-5 shadow-sm border border-slate-100 inline-block max-w-sm"><span class="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-1 rounded">1830s</span>
<h4 class="font-display font-semibold text-slate-800 mt-2">Horace Mann's Reforms</h4>
<p class="text-sm text-slate-600 mt-1">Public education adopts factory-style age grading and bell schedules</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-emerald-500 rounded-full border-4 border-white shadow"></div>
<div class="w-1/2 pl-8"></div>
</div>
<div class="relative flex items-center">
<div class="w-1/2 pr-8"></div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full border-4 border-white shadow"></div>
<div class="w-1/2 pl-8">
<div class="bg-white rounded-xl p-5 shadow-sm border border-slate-100 inline-block max-w-sm"><span class="text-xs font-semibold text-amber-600 bg-amber-50 px-2 py-1 rounded">1900s</span>
<h4 class="font-display font-semibold text-slate-800 mt-2">Scientific Management</h4>
<p class="text-sm text-slate-600 mt-1">Taylor's efficiency principles spread across all three institutions</p>
</div>
</div>
</div>
<div class="relative flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white rounded-xl p-5 shadow-sm border border-slate-100 inline-block max-w-sm"><span class="text-xs font-semibold text-rose-600 bg-rose-50 px-2 py-1 rounded">Today</span>
<h4 class="font-display font-semibold text-slate-800 mt-2">Digital Surveillance Era</h4>
<p class="text-sm text-slate-600 mt-1">Modern technology amplifies historical control mechanisms</p>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-rose-500 rounded-full border-4 border-white shadow"></div>
<div class="w-1/2 pl-8"></div>
</div>
</div>
</div>
</section>
<section id="analysis-section" class="view-section hidden">
<h2 class="font-display text-2xl text-slate-800 mb-8 text-center">The Systemic Connection</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-2xl p-8 shadow-sm border border-slate-100">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 class="font-display text-xl font-semibold text-slate-800">The Design Intent</h3>
</div>
<p class="text-slate-600 leading-relaxed mb-4">These institutions share a common design philosophy: creating "docile bodies" trained for compliance, punctuality, and hierarchical authority. Michel Foucault identified this as the <em>disciplinary society</em>.</p>
<p class="text-slate-600 leading-relaxed">The architecture itself teaches submission through constant visibility, regulated movement, and standardized routines that prepare individuals for their role in industrial capitalism.</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-sm border border-slate-100">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="font-display text-xl font-semibold text-slate-800">The Paradox</h3>
</div>
<p class="text-slate-600 leading-relaxed mb-4">Schools promise liberation through education, yet employ the same control mechanisms as institutions of confinement. This creates a fundamental tension between stated goals and structural reality.</p>
<p class="text-slate-600 leading-relaxed">The result: individuals are simultaneously "educated" and conditioned for compliance, creativity is bounded by standardization, and freedom exists within strict institutional constraints.</p>
</div>
</div>
<div class="mt-8 bg-gradient-to-r from-slate-800 to-slate-900 rounded-2xl p-8 text-white">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<div>
<h4 class="font-display text-lg font-semibold mb-2">Key Insight</h4>
<p class="text-slate-300 leading-relaxed">Understanding these parallels isn't about condemning institutions, but recognizing how design choices shape behavior. Awareness of these patterns opens possibilities for reimagining spaces that truly serve human flourishing.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t border-slate-200 py-8 px-8 mt-12 bg-white/50">
<div class="max-w-7xl mx-auto text-center">
<p class="text-sm text-slate-500">Click on institution cards to explore connections • Navigate sections above</p>
<p class="text-xs text-slate-400 mt-2">Based on architectural and sociological research</p>
</div>
</footer>
</div>
<div id="tooltip" class="tooltip fixed bg-slate-900 text-white text-xs px-3 py-2 rounded-lg shadow-lg z-50 max-w-xs"></div>
<script>
// Default configuration
const defaultConfig = {
main_title: "The Institutional Blueprint",
subtitle: "Exploring Architectural & Systemic Parallels",
background_color: "#f8fafc",
surface_color: "#ffffff",
text_color: "#1e293b",
primary_action_color: "#1e3a5f",
secondary_action_color: "#64748b",
font_family: "DM Sans",
font_size: 16
};

// Initialize Element SDK
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange: async (config) => {
// Update title
const titleEl = document.getElementById('main-title');
if (titleEl) titleEl.textContent = config.main_title || defaultConfig.main_title;

// Update subtitle
const subtitleEl = document.getElementById('subtitle');
if (subtitleEl) subtitleEl.textContent = config.subtitle || defaultConfig.subtitle;

// Apply colors
const bgColor = config.background_color || defaultConfig.background_color;
const surfaceColor = config.surface_color || defaultConfig.surface_color;
const textColor = config.text_color || defaultConfig.text_color;
const primaryColor = config.primary_action_color || defaultConfig.primary_action_color;
const secondaryColor = config.secondary_action_color || defaultConfig.secondary_action_color;

document.getElementById('app').style.background = `linear-gradient(135deg, ${bgColor} 0%, #e2e8f0 50%, ${bgColor} 100%)`;

document.querySelectorAll('.institution-card, .bg-white').forEach(el => {
el.style.backgroundColor = surfaceColor;
});

document.querySelectorAll('.font-display, h1, h2, h3, h4').forEach(el => {
el.style.color = textColor;
});

document.querySelectorAll('.nav-item').forEach(el => {
el.style.setProperty('--nav-color', primaryColor);
});

// Apply font
const fontFamily = config.font_family || defaultConfig.font_family;
const baseFontStack = 'system-ui, sans-serif';
document.body.style.fontFamily = `${fontFamily}, ${baseFontStack}`;

// Apply font size
const fontSize = config.font_size || defaultConfig.font_size;
document.body.style.fontSize = `${fontSize}px`;
},
mapToCapabilities: (config) => ({
recolorables: [
{
get: () => config.background_color || defaultConfig.background_color,
set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); }
},
{
get: () => config.surface_color || defaultConfig.surface_color,
set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); }
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); }
},
{
get: () => config.primary_action_color || defaultConfig.primary_action_color,
set: (v) => { config.primary_action_color = v; window.elementSdk.setConfig({ primary_action_color: v }); }
},
{
get: () => config.secondary_action_color || defaultConfig.secondary_action_color,
set: (v) => { config.secondary_action_color = v; window.elementSdk.setConfig({ secondary_action_color: v }); }
}
],
borderables: [],
fontEditable: {
get: () => config.font_family || defaultConfig.font_family,
set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); }
},
fontSizeable: {
get: () => config.font_size || defaultConfig.font_size,
set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); }
}
}),
mapToEditPanelValues: (config) => new Map([
["main_title", config.main_title || defaultConfig.main_title],
["subtitle", config.subtitle || defaultConfig.subtitle]
])
});
}

// Navigation functionality
const navItems = document.querySelectorAll('.nav-item');
const sections = document.querySelectorAll('.view-section');

navItems.forEach(item => {
item.addEventListener('click', () => {
const view = item.dataset.view;

// Update nav active state
navItems.forEach(nav => nav.classList.remove('active'));
item.classList.add('active');

// Show corresponding section
sections.forEach(section => {
section.classList.add('hidden');
if (section.id === `${view}-section`) {
section.classList.remove('hidden');
}
});
});
});

// Institution card interactions
const institutionCards = document.querySelectorAll('.institution-card');
const tooltip = document.getElementById('tooltip');

const institutionDetails = {
school: {
title: "Educational System",
details: "Designed in the 1840s to mirror factory production, creating standardized citizens ready for industrial work."
},
factory: {
title: "Industrial System",
details: "The original model: time-based discipline, hierarchical management, and spatial organization for maximum efficiency."
},
prison: {
title: "Correctional System",
details: "Bentham's panopticon principles influenced both factory and school design for constant surveillance."
}
};

institutionCards.forEach(card => {
card.addEventListener('mouseenter', (e) => {
const institution = card.dataset.institution;
const info = institutionDetails[institution];

tooltip.innerHTML = `<strong>${info.title}</strong><br>${info.details}`;
tooltip.classList.add('visible');

card.classList.add('active');
});

card.addEventListener('mousemove', (e) => {
tooltip.style.left = `${e.clientX + 15}px`;
tooltip.style.top = `${e.clientY + 15}px`;
});

card.addEventListener('mouseleave', () => {
tooltip.classList.remove('visible');
card.classList.remove('active');
});
});

// Feature dots in diagram
const featureDots = document.querySelectorAll('.feature-dot');
const featureInfo = {
surveillance: "Central observation: principals, supervisors, guards",
schedules: "Bells and time blocks controlling daily rhythm",
hierarchy: "Clear chains of command and authority"
};

featureDots.forEach(dot => {
dot.addEventListener('mouseenter', (e) => {
const feature = dot.dataset.feature;
tooltip.textContent = featureInfo[feature];
tooltip.classList.add('visible');
});

dot.addEventListener('mousemove', (e) => {
tooltip.style.left = `${e.clientX + 15}px`;
tooltip.style.top = `${e.clientY + 15}px`;
});

dot.addEventListener('mouseleave', () => {
tooltip.classList.remove('visible');
});
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9d90a6b576e61437',t:'MTc3Mjk2MDQ0My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>

Account

Wear the conversation…Sometimes the Rally of 1 makes the most MOVEMENT!

Free ‘Right’s For Your Pocket’ Printable/Shareable Guide