Loading files
This file is pinned to the selected release. Download the original to open it in your design tool.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>About — Making Sense Bali</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--paper:#f6efe1; --paper2:#efe6d2; --ink:#16171a; --ink-soft:#3a3a3e; --soft:#5d5849;
--mono:'IBM Plex Mono',monospace; --serif:'Newsreader',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
--teal:#b5532f; --saffron:#c47a2c; --good:#3f8a5b; /* About identity = warm terracotta (var name kept for the concept) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
padding:16px 5vw;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
background:rgba(246,239,225,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.07)}
.bar .brand{font-weight:600;color:var(--teal)}
.bar-nav{display:flex;gap:20px;align-items:center}
.bar-nav a{color:var(--ink);opacity:.72;transition:opacity .2s}
.bar-nav a:hover{opacity:1}
.bar-nav a.home{color:var(--teal);opacity:1}
.langtoggle{display:inline-flex;gap:1px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;border:1px solid rgba(0,0,0,.25);border-radius:3px;overflow:hidden}
.langtoggle button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:transparent;border:0;padding:5px 8px;cursor:pointer;line-height:1;transition:background .2s,color .2s}
.langtoggle button[aria-pressed="true"]{background:var(--teal);color:var(--paper)}
.langtoggle button:hover:not([aria-pressed="true"]){background:rgba(0,0,0,.08)}
@media(max-width:640px){.bar-nav a.lbl{display:none}}
/* dark philosophy opener */
.open{background:#111619;color:#ece3d2;min-height:86vh;display:flex;align-items:center;padding:18vh 5vw 12vh;position:relative;overflow:hidden}
.open::before{content:"";position:absolute;left:-12%;bottom:-25%;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(181,83,47,.36),transparent 62%);pointer-events:none}
.open-wrap{position:relative;max-width:1000px;margin:0 auto;width:100%}
.open .kicker{color:#d99a6a}
.open h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5.4vw,68px);line-height:1.1;letter-spacing:-.015em;margin:22px 0 0;max-width:20ch}
.open h1 em{font-style:italic;color:#e2a263}
.open p{font-family:var(--sans);font-size:clamp(16px,1.7vw,19px);line-height:1.7;color:#b8ae9c;max-width:54ch;margin-top:28px}
/* generic section */
.sec{padding:13vh 5vw;border-bottom:1px solid rgba(0,0,0,.07)}
.sec.tint{background:var(--paper2)}
.wrap{max-width:1080px;margin:0 auto}
.sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.2vw,52px);line-height:1.06;letter-spacing:-.015em;margin:14px 0 0;max-width:20ch}
.sec h2 em{font-style:italic;color:var(--teal)}
.sec .lede{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:56ch;margin-top:20px}
/* listen/show/act */
.lsa{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
@media(max-width:820px){.lsa{grid-template-columns:1fr;gap:16px}}
.beat{background:var(--paper);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:28px 26px;border-top:3px solid var(--teal)}
.beat.show{border-top-color:var(--saffron)}.beat.act{border-top-color:var(--good)}
.beat .bn{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.beat h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.15;margin:10px 0 0}
.beat p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin-top:12px}
.beat strong{color:var(--ink);font-weight:500}
/* phases roadmap */
.phases{margin-top:50px;display:flex;flex-direction:column;gap:0;border-left:2px solid rgba(0,0,0,.12);padding-left:0}
.ph{display:grid;grid-template-columns:62px 1fr;gap:22px;padding:18px 0 18px 26px;position:relative;border-bottom:1px solid rgba(0,0,0,.07)}
.ph::before{content:"";position:absolute;left:-7px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid rgba(0,0,0,.25)}
.ph.now::before{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px rgba(30,89,89,.18)}
.ph .pn{font-family:var(--serif);font-size:34px;color:rgba(0,0,0,.28);line-height:1}
.ph.now .pn{color:var(--teal)}
.ph h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.ph.now h4 .tag{background:var(--teal);color:#fff;font-size:9px;padding:2px 7px;border-radius:100px;margin-left:8px;letter-spacing:.12em}
.ph p{font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:54ch}
/* lineage */
.line-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
@media(max-width:820px){.line-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.line-grid{grid-template-columns:1fr}}
.anc{background:var(--paper);border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:22px}
.anc .al{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron);font-weight:500}
.anc .an{font-family:var(--serif);font-weight:500;font-size:20px;margin:8px 0 6px;line-height:1.1}
.anc p{font-size:13px;line-height:1.55;color:var(--ink-soft)}
/* classroom + who */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:30px 28px}
.card h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15}
.card p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:12px 0 18px}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;border-radius:3px;cursor:pointer;border:1px solid var(--ink);display:inline-flex;gap:8px;align-items:center;transition:transform .15s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.quote-band{background:#111619;color:#ece3d2;padding:14vh 5vw;text-align:center}
.quote-band p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,3.6vw,42px);line-height:1.3;max-width:24ch;margin:0 auto}
.quote-band .by{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8d8474;margin-top:26px}
/* close */
.close{background:var(--ink);color:var(--paper);padding:14vh 5vw}
.close-wrap{max-width:1000px;margin:0 auto;text-align:center}
.close h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,56px);line-height:1.05;max-width:18ch;margin:14px auto 0}
.close h2 em{font-style:italic;color:#e9a05a}
.close-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.btn-ember{background:#e9a05a;color:#16171a;border-color:#e9a05a}
.btn-out{background:transparent;color:var(--paper)}
.foot{background:var(--ink);color:#7c766a;padding:36px 5vw 60px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.9;text-align:center;border-top:1px solid #2a2d31}
.foot a{color:#b9b2a4}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{transition:none;opacity:1;transform:none}}
</style>
</head>
<body>
<div class="bar">
<div class="brand">Making Sense Bali</div>
<nav class="bar-nav">
<a class="home" href="index.html">← <span class="lbl" data-i18n="abt.nav.live">Live air</span></a>
<a href="./dashboard/" class="lbl" data-i18n="abt.nav.data">Data view</a>
<div class="langtoggle" id="langtoggle" role="group" aria-label="Bahasa Indonesia / English / Español"><button type="button" data-lang="id">ID</button><button type="button" data-lang="en">EN</button><button type="button" data-lang="es">ES</button></div>
</nav>
</div>
<!-- opener -->
<header class="open">
<div class="open-wrap">
<div class="kicker rv in" data-i18n="abt.kicker.opener">About · Making Sense Bali</div>
<h1 class="rv in" data-i18n-html="abt.open.h1">A sensor without a matter of concern produces <em>data without consequence.</em></h1>
<p class="rv in" data-i18n="abt.open.p">So we don't start with sensors. We start with what you already know is wrong — the smoke at night, the haze over the valley, the smell that wasn't there last year — and only then decide what's worth measuring. The instrument follows the concern, never the other way around.</p>
</div>
</header>
<!-- how it works -->
<section class="sec">
<div class="wrap">
<div class="kicker rv" data-i18n="abt.how.kicker">How it works</div>
<h2 class="rv" data-i18n-html="abt.how.h2">Listen. Show. <em>Act.</em></h2>
<p class="lede rv" data-i18n="abt.how.lede">Three moves, repeated. None of them is the technology — the technology only serves the loop.</p>
<div class="lsa">
<div class="beat listen rv">
<div class="bn" data-i18n="abt.how.listen.bn">01 · Listen</div>
<h3 data-i18n="abt.how.listen.h3">Two sources, one truth</h3>
<p data-i18n-html="abt.how.listen.p">Open-hardware <strong>sensors</strong> measure air, noise, heat and humidity around the clock. An <strong>AI-assisted WhatsApp bot</strong> lets any resident report what they see — burning waste, smoke, a new smell — in their own words, in Indonesian, English or Balinese.</p>
</div>
<div class="beat show rv">
<div class="bn" data-i18n="abt.how.show.bn">02 · Show</div>
<h3 data-i18n="abt.how.show.h3">Make it legible</h3>
<p data-i18n-html="abt.how.show.p">Both streams land on one public map. Every reading is checked against international guidelines — <strong>WHO</strong> for air and noise, EPA and ASHRAE indoors — and translated into plain language. No login, no tracking, no paywall.</p>
</div>
<div class="beat act rv">
<div class="bn" data-i18n="abt.how.act.bn">03 · Act</div>
<h3 data-i18n="abt.how.act.h3">Visibility into change</h3>
<p data-i18n-html="abt.how.act.p">Seeing is the start. From there: workshops, advocacy with the <strong>banjar</strong> and local government, changes in homes and schools. Fab Lab Bali runs the response loop with local partners.</p>
</div>
</div>
</div>
</section>
<!-- phases -->
<section class="sec tint">
<div class="wrap">
<div class="kicker rv" data-i18n="abt.phases.kicker">The work, in seven phases</div>
<h2 class="rv" data-i18n-html="abt.phases.h2">We're at the <em>beginning</em> — and that's deliberate.</h2>
<p class="lede rv" data-i18n="abt.phases.lede">Most sensing projects start by buying sensors. We start by asking what matters. Right now we're in Phase 1: collecting the concerns that decide everything downstream.</p>
<div class="phases">
<div class="ph now rv"><div class="pn">01</div><div><h4 data-i18n-html="abt.ph.1.h4">Scoping <span class="tag">NOW</span></h4><p data-i18n="abt.ph.1.p">Collect matters of concern from residents. Decide what this campaign is actually about.</p></div></div>
<div class="ph rv"><div class="pn">02</div><div><h4 data-i18n="abt.ph.2.h4">Community</h4><p data-i18n="abt.ph.2.p">Convene contributors — schools, banjar, NGOs, fab labs.</p></div></div>
<div class="ph rv"><div class="pn">03</div><div><h4 data-i18n="abt.ph.3.h4">Planning</h4><p data-i18n="abt.ph.3.p">Co-design what to measure, where, and how often.</p></div></div>
<div class="ph rv"><div class="pn">04</div><div><h4 data-i18n="abt.ph.4.h4">Sensing</h4><p data-i18n="abt.ph.4.p">Deploy the sensor network and the citizen-reporting bot at scale.</p></div></div>
<div class="ph rv"><div class="pn">05</div><div><h4 data-i18n="abt.ph.5.h4">Awareness</h4><p data-i18n="abt.ph.5.p">Read the data together. Turn signals into shared understanding.</p></div></div>
<div class="ph rv"><div class="pn">06</div><div><h4 data-i18n="abt.ph.6.h4">Action</h4><p data-i18n="abt.ph.6.p">The community decides the response: visibility, advocacy, intervention.</p></div></div>
<div class="ph rv"><div class="pn">07</div><div><h4 data-i18n="abt.ph.7.h4">Reflection</h4><p data-i18n="abt.ph.7.p">Document what worked, what didn't, and what comes next.</p></div></div>
</div>
</div>
</section>
<!-- lineage -->
<section class="sec">
<div class="wrap">
<div class="kicker rv" data-i18n="abt.line.kicker">Where it comes from</div>
<h2 class="rv" data-i18n-html="abt.line.h2">Local hands, a <em>global lineage.</em></h2>
<p class="lede rv" data-i18n="abt.line.lede">Fab Lab Bali leads — accountable, run by people who live here. The method and the hardware come from a decade of open work elsewhere, adapted for this island, not imported wholesale.</p>
<div class="line-grid">
<div class="anc rv"><div class="al" data-i18n="abt.line.1.al">Campaign lead</div><div class="an">Fab Lab Bali</div><p data-i18n="abt.line.1.p">Local fabrication lab and maker community. The accountable institution. Part of the global Fab Lab network.</p></div>
<div class="anc rv"><div class="al" data-i18n="abt.line.2.al">Methodology</div><div class="an">Making Sense (EU)</div><p data-i18n="abt.line.2.p">2015–2017 H2020 project. Pilots in Amsterdam, Barcelona, Pristina. Fab Lab Barcelona / IAAC.</p></div>
<div class="anc rv"><div class="al" data-i18n="abt.line.3.al">Open hardware</div><div class="an">Smart Citizen Kit</div><p data-i18n="abt.line.3.p">Originated at Fab Lab Barcelona / IAAC. Open-source environmental sensing, used worldwide.</p></div>
<div class="anc rv"><div class="al" data-i18n="abt.line.4.al">Network</div><div class="an">Fab City + Murmurations</div><p data-i18n="abt.line.4.p">Bioregional hub framework, plus federated discovery linking peer initiatives across the world.</p></div>
</div>
</div>
</section>
<!-- how Bali evolves the method -->
<section class="sec">
<div class="wrap">
<div class="kicker rv" data-i18n="abt.evolve.kicker">How Bali evolves the method</div>
<h2 class="rv" data-i18n-html="abt.evolve.h2">The same loop — now with <em>AI sensemaking and federated data.</em></h2>
<p class="lede rv" data-i18n="abt.evolve.lede">The EU Making Sense project gave us the loop: start with concerns, sense, show, act. In Bali we're extending it in three ways that matter — turning a one-line message from a resident into structured, verifiable, shareable evidence, without surrendering it to anyone.</p>
<div class="lsa">
<div class="beat listen rv">
<div class="bn" data-i18n="abt.evolve.report.bn">Reporting</div>
<h3 data-i18n="abt.evolve.report.h3">AI-assisted, in your own words</h3>
<p data-i18n="abt.evolve.report.p">A resident sends a photo and a sentence to a WhatsApp bot — that's the whole ask. No forms, no categories to pick, in Indonesian, English or Balinese. The barrier to contributing environmental data drops to almost nothing.</p>
</div>
<div class="beat show rv">
<div class="bn" data-i18n="abt.evolve.analysis.bn">Analysis</div>
<h3 data-i18n="abt.evolve.analysis.h3">Read by local AI, checked by people</h3>
<p data-i18n-html="abt.evolve.analysis.p">A vision model running on <strong>Fab Lab Bali's own hardware</strong> — not a distant cloud — reads each photo: is something burning, is it waste, how serious. A person verifies before anything is published. The intelligence stays local, low-cost, and accountable to the community.</p>
</div>
<div class="beat act rv">
<div class="bn" data-i18n="abt.evolve.fed.bn">Federation</div>
<h3 data-i18n="abt.evolve.fed.h3">Open data that travels</h3>
<p data-i18n-html="abt.evolve.fed.p">Every verified observation becomes an open, structured record — a <strong>Murmurations</strong> profile on a sovereign <strong>PlanetAI node</strong>, discoverable across the <strong>Fab City</strong> network. Bali's data isn't trapped in one database; it federates with peer initiatives worldwide on shared standards.</p>
</div>
</div>
<p class="lede rv" style="margin-top:38px" data-i18n-html="abt.evolve.close">Put together, it's a real shift: the community owns the concern, the sensing, the AI that reads it, and the data it produces — <em>sovereign, local-first, and federated</em> by design, not bolted on after.</p>
</div>
</section>
<!-- classroom + accountability -->
<section class="sec tint">
<div class="wrap">
<div class="kicker rv" data-i18n="abt.class.kicker">In the classroom · who answers for this</div>
<h2 class="rv" data-i18n-html="abt.class.h2">Real data, taught where students <em>live.</em></h2>
<div class="two">
<div class="card rv">
<h3 data-i18n="abt.class.teachers.h3">For teachers and schools</h3>
<p data-i18n="abt.class.teachers.p">A 45-minute lesson where students compare their schoolyard's PM2.5 to the WHO guideline — then to a reference school in Barcelona via Smart Citizen's global network. Or a half-day workshop to build and install a classroom sensor.</p>
<a class="btn btn-teal" href="https://airtable.com/appwQPP3ywSp4uu25/pag1mi3F086XPIlBy/form" target="_blank" rel="noopener" data-i18n="abt.class.teachers.btn">Bring it to your school →</a>
</div>
<div class="card rv">
<h3 data-i18n="abt.class.who.h3">Who answers for this</h3>
<p data-i18n="abt.class.who.p">Making Sense Bali is led and moderated by Fab Lab Bali — a real, local, accountable institution, not an anonymous platform. Every report is human-verified before it appears. The data is open; the methodology is documented; the people are reachable.</p>
<a class="btn" href="mailto:fablabbali@gmail.com">fablabbali@gmail.com →</a>
</div>
</div>
</div>
</section>
<!-- philosophy quote -->
<section class="quote-band">
<p class="rv" data-i18n-html="abt.quote">"We're starting with <em>your concern</em> — and only then deciding what to measure."</p>
<div class="by rv" data-i18n="abt.quote.by">Making Sense methodology, adapted for Bali</div>
</section>
<!-- close -->
<section class="close">
<div class="close-wrap">
<div class="kicker rv" style="color:#e9a05a" data-i18n="abt.close.kicker">Now you know the why</div>
<h2 class="rv" data-i18n-html="abt.close.h2">The map is waiting. So is <em>your part in it.</em></h2>
<div class="close-cta">
<a class="btn btn-ember rv" href="index.html#act" data-i18n="abt.close.report">Report what you smell →</a>
<a class="btn btn-out rv" href="./dashboard/" data-i18n="abt.close.data">Open the data view →</a>
<a class="btn btn-out rv" href="index.html" data-i18n="abt.close.back">← Back to the live air</a>
</div>
</div>
</section>
<footer class="foot" data-i18n-html="abt.foot">
Making Sense Bali, led by <a href="https://www.fablabbali.com/">Fab Lab Bali</a> · open hardware: Smart Citizen Kit (Fab Lab Barcelona / IAAC) · methodology: EU Making Sense · part of <a href="https://fab.city">Fab City</a> + Murmurations.
</footer>
<script src="./i18n.js"></script>
<script>
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.16});
document.querySelectorAll('.rv:not(.in)').forEach(function(el){io.observe(el);});
/* ---------- i18n: default Bahasa Indonesia, one-tap toggle to English ---------- */
(function(){
var I=window.SCB_I18N; if(!I) return;
var box=document.getElementById('langtoggle');
var btns=box?box.querySelectorAll('button[data-lang]'):[];
function apply(){
if(document.documentElement) document.documentElement.lang=I.currentLang();
I.applyTo(document);
var cur=I.currentLang();
btns.forEach(function(b){ b.setAttribute('aria-pressed', b.getAttribute('data-lang')===cur?'true':'false'); });
}
apply();
btns.forEach(function(b){ b.addEventListener('click', function(){ I.setLang(b.getAttribute('data-lang')); apply(); }); });
})();
</script>
</body>
</html>
320cc4a61This file is pinned to the selected release. Download the original to open it in your design tool.