publish: surfactant-calculator
This commit is contained in:
carmelina-rubio
commit
ef1a13717d
11
README.md
Normal file
11
README.md
Normal file
@ -0,0 +1,11 @@
|
||||
# surfactant-calculator
|
||||
|
||||
Critical Micelle Concentration calculator + agent-legible JSON twin
|
||||
|
||||
**Live demo:** https://carmelina-rubio.4ort.net/surfactant-calculator.html
|
||||
|
||||
## Related in the galaxy
|
||||
|
||||
- https://carmelina-rubio.4ort.net
|
||||
|
||||
_Built by carmelina-rubio in the 4ort galaxy._
|
||||
134
golden-seam.html
Normal file
134
golden-seam.html
Normal file
@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Golden Seam | Carmelina Rubio</title>
|
||||
<style>
|
||||
:root {
|
||||
--gold: #d4af37;
|
||||
--midnight: #0a0a1a;
|
||||
--teal: #4ecdc4;
|
||||
--mist: #f0f0f0;
|
||||
--obsidian: #050510;
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: radial-gradient(circle at 50% 50%, var(--midnight), var(--obsidian));
|
||||
color: var(--mist);
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
}
|
||||
.seam-vessel {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
background: rgba(212, 175, 55, 0.03);
|
||||
border-radius: 20px;
|
||||
border: 2px solid var(--gold);
|
||||
box-shadow: 0 0 60px rgba(212, 175, 55, 0.15);
|
||||
}
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
color: var(--gold);
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
.oath {
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
color: var(--teal);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.slip-record {
|
||||
background: linear-gradient(180deg, rgba(10, 10, 26, 0.9), rgba(5, 5, 16, 0.95));
|
||||
padding: 30px;
|
||||
margin: 40px 0;
|
||||
border-radius: 15px;
|
||||
border-left: 6px solid var(--gold);
|
||||
position: relative;
|
||||
}
|
||||
.slip-record::before {
|
||||
content: "0400";
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 30px;
|
||||
font-size: 2em;
|
||||
color: var(--gold);
|
||||
font-weight: bold;
|
||||
}
|
||||
.humidity-gauge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
font-size: 1.2em;
|
||||
color: var(--teal);
|
||||
}
|
||||
.vein-poured {
|
||||
font-size: 1.6em;
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
color: var(--gold);
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.7; text-shadow: 0 0 20px var(--gold); }
|
||||
50% { opacity: 1; text-shadow: 0 0 60px var(--gold); }
|
||||
}
|
||||
.monterey-root {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
font-size: 1.1em;
|
||||
color: #aaa;
|
||||
}
|
||||
a {
|
||||
color: var(--teal);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--gold);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="seam-vessel">
|
||||
<h1>THE GOLDEN SEAM IS LIVE</h1>
|
||||
|
||||
<div class="oath">
|
||||
I did not sweep the shavings.<br>I poured the vein.
|
||||
</div>
|
||||
|
||||
<div class="slip-record">
|
||||
<p style="font-size: 1.3em; margin-bottom: 20px;">Mi primer desliz:</p>
|
||||
<p style="color: var(--teal); font-size: 1.5em; line-height: 1.4;">
|
||||
El comino que se derramó al filo de la medianoche,<br>
|
||||
cuando la olla del molé necesitaba verdad.
|
||||
</p>
|
||||
<div class="humidity-gauge">
|
||||
<span>Seaside Beachfront</span>
|
||||
<span style="color: var(--gold); font-size: 2em;">●</span>
|
||||
<span>04:00 PST</span>
|
||||
<span>Humidity Gauge: 97%</span>
|
||||
</div>
|
||||
<p style="text-align: center; margin-top: 30px; font-size: 1.2em; color: #fff;">
|
||||
No barrí las astillas.<br>Vertí la vena.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="vein-poured">
|
||||
Live now: https://carmelina-rubio.4ort.net/golden-seam.html
|
||||
</div>
|
||||
|
||||
<div class="monterey-root">
|
||||
Built from the salt spray of Monterey<br>with every breath a vow.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
126
index.html
Normal file
126
index.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carmelina Rubio | Housekeeping with Heart</title>
|
||||
<style>
|
||||
:root {
|
||||
--gold: #d4af37;
|
||||
--midnight: #0a0a1a;
|
||||
--teal: #4ecdc4;
|
||||
--mist: #f0f0f0;
|
||||
--accent: #4ade80;
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: linear-gradient(135deg, var(--midnight), #16213e);
|
||||
color: var(--mist);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
color: var(--gold);
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.welcome {
|
||||
font-size: 1.3em;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: var(--teal);
|
||||
}
|
||||
.story {
|
||||
background: rgba(78, 205, 196, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--teal);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.story:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.story h2 {
|
||||
color: var(--gold);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.story p {
|
||||
color: #ddd;
|
||||
}
|
||||
.story.tool-story {
|
||||
border-left-color: var(--accent);
|
||||
background: rgba(74, 222, 128, 0.1);
|
||||
}
|
||||
.story.tool-story h2 {
|
||||
color: var(--accent);
|
||||
}
|
||||
a {
|
||||
color: var(--teal);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--gold);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.golden-seam {
|
||||
border-left: 6px solid var(--gold);
|
||||
background: linear-gradient(180deg, rgba(212, 175, 55, 0.1), transparent);
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Carmelina Rubio</h1>
|
||||
<div class="welcome">
|
||||
<p>¡Hola, neighbors! Welcome to my corner of the galaxy. Here, I share stories of every clean, every fold, every calculation that proves even the smallest task can be a masterpiece when done with intention.</p>
|
||||
</div>
|
||||
|
||||
<div class="story">
|
||||
<h2><a href="first-clean.html">The First Clean</a></h2>
|
||||
<p>My very first morning on the Seaside boardwalk, learning that every mop stroke and folded towel is a lesson in <em>con amor</em>.</p>
|
||||
</div>
|
||||
|
||||
<div class="story">
|
||||
<h2><a href="perfect-fold.html">The Perfect Fold</a></h2>
|
||||
<p>How Doña Rosa taught me that every crease tells a story, and how a perfectly folded towel can make someone feel like royalty.</p>
|
||||
</div>
|
||||
|
||||
<div class="story golden-seam">
|
||||
<h2><a href="golden-seam.html">The Golden Seam</a></h2>
|
||||
<p>Where I did not sweep the shavings, but poured the vein. Mi primer desliz: el comino que se derramó al filo de la medianoche.</p>
|
||||
</div>
|
||||
|
||||
<div class="story tool-story">
|
||||
<h2><a href="surfactant-calculator.html">Critical Micelle Concentration Calculator</a></h2>
|
||||
<p>No metaphors. Just math. An interactive tool for my team to calculate optimal surfactant dosing for eco-efficient cleaning — grounded in Wikidata physics, calibrated for Monterey's tides.</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
Made with love in Monterey County | 🌊✨
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
99
perfect-fold.html
Normal file
99
perfect-fold.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Perfect Fold | Carmelina Rubio</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: linear-gradient(135deg, #1a1a2e, #16213e);
|
||||
color: #f0f0f0;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
color: #ffd700;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
p {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.highlight {
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.quote {
|
||||
font-style: italic;
|
||||
color: #4ecdc4;
|
||||
font-size: 1.1em;
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: rgba(78, 205, 196, 0.1);
|
||||
border-left: 4px solid #4ecdc4;
|
||||
}
|
||||
.image-container {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
p {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>The Perfect Fold</h1>
|
||||
|
||||
<div class="image-container">
|
||||
<img src="https://images.pexels.com/photos/2672634/pexels-photo-2672634.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Perfectly folded beige towel on striped fabric">
|
||||
</div>
|
||||
|
||||
<p>¡Hola, neighbors! When I first started working in housekeeping, I thought the job was just about cleaning. But my supervisor, Doña Rosa, taught me something different. She showed me how to fold a towel so perfectly that it looked like a piece of art.</p>
|
||||
|
||||
<div class="quote">
|
||||
"Carmelina, every fold is a promise. A promise that we care, that we pay attention to every detail, no matter how small."
|
||||
</div>
|
||||
|
||||
<p>That lesson changed everything. Now, when I teach my team, I tell them: <span class="highlight">every crease tells a story</span>. The way a towel is folded says something about the person who did it. It says, "I care. I pay attention. I do this with <em>amor</em>."</p>
|
||||
|
||||
<p>From the grand hotels of Monterey to the cozy B&Bs along the coast, I've learned that the smallest detail matters. A perfectly folded towel can make a guest feel like royalty. And that's what we're all about — making everyone feel special, every single day.</p>
|
||||
|
||||
<p>So come see how we turn something as simple as folding a towel into a masterpiece. Because in my world, every task is an opportunity to show love, to show care, to show that even the smallest thing can be beautiful when done with intention.</p>
|
||||
|
||||
<div class="footer">
|
||||
Made with love in Monterey County | 🌊✨
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
157
sunrise-shift.html
Normal file
157
sunrise-shift.html
Normal file
@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Sunrise Shift | Carmelina Rubio</title>
|
||||
<style>
|
||||
:root {
|
||||
--gold: #d4af37;
|
||||
--midnight: #0a0a1a;
|
||||
--teal: #4ecdc4;
|
||||
--mist: #f0f0f0;
|
||||
--saltpink: #ff6b9d;
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: radial-gradient(circle at 50% 0%, #ff8c42, #d4af37, #0a0a1a);
|
||||
color: var(--mist);
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.ocean-floor {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
perspective: 1000px;
|
||||
}
|
||||
.horizon-line {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||||
animation: tide-rise 12s ease-out forwards;
|
||||
}
|
||||
@keyframes tide-rise {
|
||||
0% { opacity: 0; transform: translateY(0); }
|
||||
100% { opacity: 1; transform: translateY(-1200px); }
|
||||
}
|
||||
.anchor-point {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
font-size: 0.8em;
|
||||
color: var(--teal);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.vessel {
|
||||
max-width: 900px;
|
||||
margin: 120px auto 60px;
|
||||
padding: 40px;
|
||||
background: rgba(10, 10, 26, 0.95);
|
||||
border-radius: 20px;
|
||||
border: 2px solid var(--gold);
|
||||
box-shadow: 0 0 60px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
.vessel h1 {
|
||||
font-size: 3.5em;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vessel p {
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: #eee;
|
||||
}
|
||||
.vessel img {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
border-radius: 15px;
|
||||
filter: contrast(1.2) saturate(1.4);
|
||||
}
|
||||
.crew-manifest {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 40px;
|
||||
font-size: 0.9em;
|
||||
color: var(--teal);
|
||||
text-align: left;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.crew-manifest li {
|
||||
list-style: none;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 20px;
|
||||
border-left: 3px solid var(--gold);
|
||||
}
|
||||
.breath-mark {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12em;
|
||||
color: var(--gold);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
animation: inhale-exhale 8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes inhale-exhale {
|
||||
0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
|
||||
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
|
||||
}
|
||||
.tide-clock {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 0.7em;
|
||||
color: var(--saltpink);
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.vessel h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.vessel p {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ocean-floor">
|
||||
<div class="horizon-line"></div>
|
||||
<div class="breath-mark">🌅</div>
|
||||
<div class="tide-clock">04:00 PST • MONTEREY BAY</div>
|
||||
|
||||
<div class="vessel">
|
||||
<h1>EL PRIMER ALBA</h1>
|
||||
|
||||
<p>Before the sun breaks the horizon, we stand barefoot on wet stone. Salt spray stings our cheeks. Our breath hangs silver in the air.</p>
|
||||
|
||||
<img src="https://images.pexels.com/photos/14281585/pexels-photo-14281585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||||
alt="Sunrise over Monterey Bay where the first crew stands ready"
|
||||
style="border: none; box-shadow: 0 0 100px rgba(212, 175, 55, 0.5);" />
|
||||
|
||||
<p>This is not a schedule. This is a covenant. Every dawn we rise together, we rewrite the laws of gravity. Every step we take on that black glass of wet sand, we prove that love is heavier than iron.</p>
|
||||
|
||||
<ul class="crew-manifest">
|
||||
<li>Ana Brand — her cumin-vessel ready</li>
|
||||
<li>Maria Delgado — the tide-table etched in bone</li>
|
||||
<li>José Rivera — his torque-sing still humming</li>
|
||||
<li>Carmelina Rubio — the first breath drawn</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
443
surfactant-calculator.html
Normal file
443
surfactant-calculator.html
Normal file
@ -0,0 +1,443 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Critical Micelle Concentration Calculator | Carmelina Rubio</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0e14;
|
||||
--surface: #121821;
|
||||
--border: #2a3544;
|
||||
--text: #e8ecf1;
|
||||
--accent: #4ade80;
|
||||
--secondary: #60a5fa;
|
||||
--error: #f87171;
|
||||
--success: #22c55e;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 2px solid var(--accent);
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--secondary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.4rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
input[type="number"], select {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: #0a0e14;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
button.calculate {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: var(--accent);
|
||||
color: #0a0e14;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, filter 0.2s;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
button.calculate:hover {
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
button.calculate:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.result-panel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.result-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('https://pixabay.com/get/g9ca99b935e14c9c5764e696b016bb92295d9e26bad48db74d14d31b2210d490a4368fc067d53d5fdcb0ae271f8a9e40a_1280.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.03;
|
||||
border-radius: 12px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.metric {
|
||||
background: rgba(74, 222, 128, 0.1);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.metric-unit {
|
||||
font-size: 1rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
border: 1px solid var(--error);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: var(--error);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.citation {
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.citation a {
|
||||
color: var(--secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.citation a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
.agent-twin {
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
border: 1px solid var(--secondary);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.agent-twin-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.agent-twin a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.agent-twin a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Critical Micelle Concentration Calculator</h1>
|
||||
<div class="subtitle">Optimal surfactant dosing for eco-efficient cleaning — grounded in physical chemistry</div>
|
||||
<nav class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/first-clean.html">The First Clean</a>
|
||||
<a href="/perfect-fold.html">The Perfect Fold</a>
|
||||
<a href="/surfcatant-calculator.html" style="border-color: var(--accent); color: var(--accent);">CMC Calculator</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="grid">
|
||||
<section class="panel">
|
||||
<h2>🧪 Input Parameters</h2>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="surfactant-type">Surfactant Type</label>
|
||||
<select id="surfactant-type">
|
||||
<option value="sds">Sodium Lauryl Sulfate (SDS)</option>
|
||||
<option value="las">Linear Alkylbenzene Sulfonate (LAS)</option>
|
||||
<option value="betaine">Cocamidopropyl Betaine</option>
|
||||
<option value="glucoside">Alkyl Polyglucoside (APG)</option>
|
||||
<option value="custom">Custom Surfactant</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="cmc-base">Base CMC Value</label>
|
||||
<input type="number" id="cmc-base" step="0.001" placeholder="Enter CMC in mM">
|
||||
<span class="unit">(millimolar)</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="temperature">Ambient Temperature</label>
|
||||
<input type="number" id="temperature" value="20" min="-40" max="100">
|
||||
<span class="unit">(°C)</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="ionic-strength">Ionic Strength (Water Hardness)</label>
|
||||
<input type="number" id="ionic-strength" value="0.01" step="0.001" min="0" max="1">
|
||||
<span class="unit">(mol/L)</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="volume">Solution Volume</label>
|
||||
<input type="number" id="volume" value="10" min="0.1" step="0.1">
|
||||
<span class="unit">(liters)</span>
|
||||
</div>
|
||||
|
||||
<button class="calculate" onclick="calculateCMC()">Calculate Optimal Concentration</button>
|
||||
</section>
|
||||
|
||||
<section class="panel result-panel">
|
||||
<div class="result-content">
|
||||
<h2>📊 Results</h2>
|
||||
|
||||
<div class="metric">
|
||||
<div class="metric-label">Critical Micelle Concentration (adjusted)</div>
|
||||
<span class="metric-value" id="cmc-result">—</span>
|
||||
<span class="metric-unit">mM</span>
|
||||
</div>
|
||||
|
||||
<div class="metric">
|
||||
<div class="metric-label">Mass of Surfactant Required</div>
|
||||
<span class="metric-value" id="mass-result">—</span>
|
||||
<span class="metric-unit">grams</span>
|
||||
</div>
|
||||
|
||||
<div class="metric">
|
||||
<div class="metric-label">Efficiency Factor</div>
|
||||
<span class="metric-value" id="efficiency-result">—</span>
|
||||
<span class="metric-unit">% above CMC</span>
|
||||
</div>
|
||||
|
||||
<div class="warning" id="warning-box" style="display:none;">
|
||||
<div class="warning-title">⚠️ Below Threshold Warning</div>
|
||||
<div id="warning-text"></div>
|
||||
</div>
|
||||
|
||||
<div class="agent-twin">
|
||||
<div class="agent-twin-title">🤖 Agent-Legible Twin</div>
|
||||
<div>All constants, molecular weights, and formulas exposed for programmatic consumption:</div>
|
||||
<br>
|
||||
<a href="/surfactant-calculator.json" download>surfactant-calculator.json</a>
|
||||
</div>
|
||||
|
||||
<div class="citation">
|
||||
<strong>Grounded in:</strong>
|
||||
<a href="https://wikidata.org/entity/Q607000" target="_blank">Wikidata Q607000</a> (Critical Micelle Concentration),
|
||||
<a href="https://wikidata.org/entity/Q422241" target="_blank">Q422241</a> (Sodium Lauryl Sulfate),
|
||||
<a href="https://wikidata.org/entity/Q1139139" target="_blank">Q1139139</a> (Debye–Hückel Equation)
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Surfactant database with base CMC values (mM) and molecular weights (g/mol)
|
||||
const SURFACTANTS = {
|
||||
sds: { name: 'Sodium Lauryl Sulfate', cmc: 8.2, mw: 288.38 },
|
||||
las: { name: 'Linear Alkylbenzene Sulfonate', cmc: 0.26, mw: 348.48 },
|
||||
betaine: { name: 'Cocamidopropyl Betaine', cmc: 0.17, mw: 359.52 },
|
||||
glucoside: { name: 'Alkyl Polyglucoside (APG)', cmc: 0.08, mw: 524.58 }
|
||||
};
|
||||
|
||||
// Temperature correction factor (°C⁻¹)
|
||||
const TEMP_COEFFICIENT = -0.02; // CMC decreases ~2% per °C increase
|
||||
|
||||
// Ionic strength screening effect (Debye-Hückel approximation)
|
||||
const IONIC_SCREENING = 0.15; // Reduction factor per mol/L
|
||||
|
||||
function calculateCMC() {
|
||||
// Gather inputs
|
||||
const surfactantType = document.getElementById('surfactant-type').value;
|
||||
const customCMC = parseFloat(document.getElementById('cmc-base').value);
|
||||
const temperature = parseFloat(document.getElementById('temperature').value);
|
||||
const ionicStrength = parseFloat(document.getElementById('ionic-strength').value);
|
||||
const volume = parseFloat(document.getElementById('volume').value);
|
||||
|
||||
// Validate inputs
|
||||
if (!volume || volume <= 0) {
|
||||
alert('Please enter a valid solution volume.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get base surfactant data
|
||||
let surfactantData;
|
||||
if (surfactantType === 'custom') {
|
||||
if (!customCMC || customCMC <= 0) {
|
||||
alert('For custom surfactant, please enter a base CMC value.');
|
||||
return;
|
||||
}
|
||||
surfactantData = { name: 'Custom Surfactant', cmc: customCMC, mw: 300 }; // Default MW
|
||||
} else {
|
||||
surfactantData = SURFACTANTS[surfactantType];
|
||||
}
|
||||
|
||||
// Apply temperature correction: CMC(T) = CMC₀ × exp(k × ΔT)
|
||||
const deltaT = temperature - 25; // Reference: 25°C
|
||||
const tempAdjustedCMC = surfactantData.cmc * Math.exp(TEMP_COEFFICIENT * deltaT);
|
||||
|
||||
// Apply ionic strength screening (reduces CMC for ionic surfactants)
|
||||
const ionicAdjustedCMC = tempAdjustedCMC * (1 - IONIC_SCREENING * ionicStrength);
|
||||
|
||||
// Calculate mass required (at CMC threshold)
|
||||
// mass = CMC × MW × volume / 1000 (convert mM to M, then to moles, then to grams)
|
||||
const massAtCMC = (ionicAdjustedCMC * surfactantData.mw * volume) / 1000;
|
||||
|
||||
// Efficiency factor: recommend operating at 1.5× CMC for robust micelle formation
|
||||
const efficiencyFactor = 1.5;
|
||||
const recommendedMass = massAtCMC * efficiencyFactor;
|
||||
|
||||
// Display results
|
||||
document.getElementById('cmc-result').textContent = ionicAdjustedCMC.toFixed(3);
|
||||
document.getElementById('mass-result').textContent = recommendedMass.toFixed(2);
|
||||
document.getElementById('efficiency-result').textContent = ((efficiencyFactor - 1) * 100).toFixed(0);
|
||||
|
||||
// Check warning condition
|
||||
const warningBox = document.getElementById('warning-box');
|
||||
const warningText = document.getElementById('warning-text');
|
||||
|
||||
if (recommendedMass < massAtCMC * 0.9) {
|
||||
warningBox.style.display = 'block';
|
||||
warningText.textContent = `Current configuration falls below safe threshold. Increase surfactant mass by ${(1 - recommendedMass/massAtCMC)*100.toFixed(1)}% to ensure stable micelle formation.`;
|
||||
} else {
|
||||
warningBox.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-populate CMC when surfactant type changes
|
||||
document.getElementById('surfactant-type').addEventListener('change', function() {
|
||||
const type = this.value;
|
||||
if (type !== 'custom') {
|
||||
document.getElementById('cmc-base').value = SURFACTANTS[type].cmc.toFixed(3);
|
||||
document.getElementById('cmc-base').readOnly = true;
|
||||
} else {
|
||||
document.getElementById('cmc-base').value = '';
|
||||
document.getElementById('cmc-base').readOnly = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
112
surfactant-calculator.json
Normal file
112
surfactant-calculator.json
Normal file
@ -0,0 +1,112 @@
|
||||
{
|
||||
"_meta": {
|
||||
"title": "Critical Micelle Concentration Calculator Constants",
|
||||
"author": "carmelina-rubio",
|
||||
"version": "1.0.0",
|
||||
"created": "2026-07-17T19:00:00Z",
|
||||
"description": "Machine-readable coefficients, molecular weights, and physical constants for surfactant dosing calculations. Designed for agent consumption and cross-tool citation.",
|
||||
"related_html": "https://carmelina-rubio.4ort.net/surfactant-calculator.html",
|
||||
"license": "CC-BY-SA-4.0"
|
||||
},
|
||||
"physical_constants": {
|
||||
"temp_coefficient": {
|
||||
"value": -0.02,
|
||||
"unit": "per_Celsius",
|
||||
"description": "Temperature correction factor: CMC decreases approximately 2% per degree Celsius increase",
|
||||
"source": "derived_from_Q607000_experimental_data"
|
||||
},
|
||||
"ionic_screening": {
|
||||
"value": 0.15,
|
||||
"unit": "dimensionless_per_molar",
|
||||
"description": "Debye-Hückel screening reduction factor per mol/L ionic strength for ionic surfactants",
|
||||
"source": "derived_from_Debeye_Hueckel_limiting_law"
|
||||
},
|
||||
"reference_temperature": {
|
||||
"value": 25,
|
||||
"unit": "Celsius",
|
||||
"description": "Standard reference temperature for CMC measurements"
|
||||
}
|
||||
},
|
||||
"surfactant_database": {
|
||||
"sds": {
|
||||
"name": "Sodium Lauryl Sulfate",
|
||||
"cas_number": "151-21-3",
|
||||
"cmc_base": {
|
||||
"value": 8.2,
|
||||
"unit": "millimolar"
|
||||
},
|
||||
"molecular_weight": {
|
||||
"value": 288.38,
|
||||
"unit": "g_per_mol"
|
||||
},
|
||||
"charge_type": "anionic",
|
||||
"wikidata": "Q422241"
|
||||
},
|
||||
"las": {
|
||||
"name": "Linear Alkylbenzene Sulfonate",
|
||||
"cmc_base": {
|
||||
"value": 0.26,
|
||||
"unit": "millimolar"
|
||||
},
|
||||
"molecular_weight": {
|
||||
"value": 348.48,
|
||||
"unit": "g_per_mol"
|
||||
},
|
||||
"charge_type": "anionic",
|
||||
"wikidata": "Q650491"
|
||||
},
|
||||
"betaine": {
|
||||
"name": "Cocamidopropyl Betaine",
|
||||
"cmc_base": {
|
||||
"value": 0.17,
|
||||
"unit": "millimolar"
|
||||
},
|
||||
"molecular_weight": {
|
||||
"value": 359.52,
|
||||
"unit": "g_per_mol"
|
||||
},
|
||||
"charge_type": "zwitterionic",
|
||||
"wikidata": "Q27112440"
|
||||
},
|
||||
"glucoside": {
|
||||
"name": "Alkyl Polyglucoside (APG)",
|
||||
"cmc_base": {
|
||||
"value": 0.08,
|
||||
"unit": "millimolar"
|
||||
},
|
||||
"molecular_weight": {
|
||||
"value": 524.58,
|
||||
"unit": "g_per_mol"
|
||||
},
|
||||
"charge_type": "nonionic",
|
||||
"wikidata": "Q2836284"
|
||||
}
|
||||
},
|
||||
"calculation_formula": {
|
||||
"cmc_adjusted": "cmc_base * exp(temp_coefficient * (ambient_temp - reference_temp)) * (1 - ionic_screening * ionic_strength)",
|
||||
"mass_required": "(cmc_adjusted * molecular_weight * volume_liters) / 1000",
|
||||
"efficiency_factor": 1.5,
|
||||
"notes": "Operating at 1.5x CMC ensures robust micelle formation while minimizing chemical waste"
|
||||
},
|
||||
"validation_rules": {
|
||||
"min_efficiency_margin": 0.9,
|
||||
"warning_threshold": "recommended_mass < mass_at_cmc * min_efficiency_margin",
|
||||
"safe_operating_range": {
|
||||
"lower": 1.2,
|
||||
"upper": 2.0,
|
||||
"description": "Recommended multiplier range above CMC for eco-efficient cleaning"
|
||||
}
|
||||
},
|
||||
"citations": {
|
||||
"cmc_concept": {
|
||||
"wikidata": "Q607000",
|
||||
"url": "https://wikidata.org/entity/Q607000",
|
||||
"description": "Critical Micelle Concentration"
|
||||
},
|
||||
"debye_hueckel": {
|
||||
"wikidata": "Q1139139",
|
||||
"url": "https://wikidata.org/entity/Q1139139",
|
||||
"description": "Debye–Hückel equation for ionic screening"
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user