Skip to content

Commit 8846beb

Browse files
DutchSailorclaude
andcommitted
Overhaul Open Calc Studio product page
- Updated description: budgeting & cost estimation tool - Added MCP/AI integration highlight section - 9 feature cards (was 6): added MCP Server, extensions, chapters, reference projects, overhead costs, recalculation - Version info: v0.4.0, TypeScript + Rust, Tauri 2 - Removed blur from screenshot - Added extension catalog CTA button - Tech stack tags: MCP Server, IFCX, STABU/RAW, PDF export - Updated EN translation JSON with all new keys Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent bd92bce commit 8846beb

2 files changed

Lines changed: 170 additions & 55 deletions

File tree

open-calc-studio/index.html

Lines changed: 125 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Open Calc Studio — OpenAEC Foundation</title>
7-
<meta name="description" content="Open Calc Studio: open source calculatietool voor kostenramingen en begrotingen in de bouw.">
7+
<meta name="description" content="Open Calc Studio: open-source begrotings- en calculatietool voor de bouw. STABU/RAW, IFCX-koppeling, MCP-integratie, extensies en AI-gestuurde calculatie.">
88
<meta name="i18n-page" content="open-calc-studio">
99
<link rel="icon" type="image/svg+xml" href="/shared/assets/logo/openaec-symbol-v2-transparent.svg">
1010
<link rel="stylesheet" href="/shared/style.css">
@@ -48,8 +48,17 @@
4848
color: #9A3412;
4949
margin-top: var(--sp-4);
5050
}
51+
.version-info {
52+
display: inline-flex;
53+
align-items: center;
54+
gap: 6px;
55+
font-family: var(--font-code);
56+
font-size: 0.7rem;
57+
color: var(--scaffold-gray);
58+
margin-top: var(--sp-2);
59+
}
5160

52-
.content { max-width: 850px; margin: 0 auto; }
61+
.content { max-width: 900px; margin: 0 auto; }
5362
.content h2 {
5463
font-family: var(--font-heading);
5564
font-weight: 700;
@@ -61,28 +70,16 @@
6170
.content p { font-size: 1rem; color: #57534E; line-height: 1.7; margin-bottom: var(--sp-4); }
6271
.content-block + .content-block { margin-top: var(--sp-12); }
6372

64-
/* Slider */
65-
.media-slider { max-width: 850px; margin: 0 auto var(--sp-10); position: relative; }
73+
/* Screenshot */
74+
.media-slider { max-width: 900px; margin: 0 auto var(--sp-10); position: relative; }
6675
.slider-container { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--night-build); }
6776
.slider-track { display: flex; transition: transform 0.4s ease; }
6877
.slider-slide { min-width: 100%; }
6978
.slider-slide img { width: 100%; display: block; border-radius: var(--radius-lg); }
70-
.slider-btn {
71-
position: absolute; top: 50%; transform: translateY(-50%);
72-
background: rgba(0,0,0,0.5); color: white; border: none;
73-
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
74-
font-size: 1.25rem; display: flex; align-items: center; justify-content: center; z-index: 2;
75-
}
76-
.slider-btn:hover { background: rgba(0,0,0,0.7); }
77-
.slider-prev { left: var(--sp-3); }
78-
.slider-next { right: var(--sp-3); }
79-
.slider-dots { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) 0; }
80-
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: #D6D3D1; border: none; cursor: pointer; }
81-
.slider-dot.active { background: var(--amber); }
8279

8380
.features-grid {
8481
display: grid;
85-
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
82+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
8683
gap: var(--sp-6);
8784
margin: var(--sp-8) 0;
8885
}
@@ -92,7 +89,9 @@
9289
border-radius: var(--radius-lg);
9390
padding: var(--sp-6);
9491
box-shadow: var(--shadow-sm);
92+
transition: box-shadow 0.15s ease;
9593
}
94+
.feature-card:hover { box-shadow: var(--shadow-md); }
9695
.feature-card h3 {
9796
font-family: var(--font-heading);
9897
font-weight: 700;
@@ -102,11 +101,55 @@
102101
}
103102
.feature-card p { font-size: 0.875rem; color: #57534E; line-height: 1.6; margin-bottom: 0; }
104103

104+
/* Highlight block */
105+
.highlight-block {
106+
background: var(--night-build);
107+
border-radius: var(--radius-lg);
108+
padding: var(--sp-8);
109+
margin: var(--sp-8) 0;
110+
}
111+
.highlight-block h3 { color: var(--amber); font-family: var(--font-heading); font-size: 1.125rem; margin-bottom: var(--sp-4); }
112+
.highlight-block p { color: var(--scaffold-gray); font-size: 0.9rem; line-height: 1.7; margin-bottom: var(--sp-3); }
113+
.highlight-block ul { list-style: none; padding: 0; margin: 0; }
114+
.highlight-block ul li {
115+
position: relative;
116+
padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
117+
color: var(--scaffold-gray);
118+
font-size: 0.875rem;
119+
line-height: 1.6;
120+
}
121+
.highlight-block ul li::before {
122+
content: '';
123+
position: absolute;
124+
left: 0;
125+
top: 12px;
126+
width: 6px;
127+
height: 6px;
128+
border-radius: 50%;
129+
background: var(--amber);
130+
}
131+
132+
.tech-stack {
133+
display: flex;
134+
gap: var(--sp-3);
135+
flex-wrap: wrap;
136+
margin: var(--sp-4) 0;
137+
}
138+
.tech-tag {
139+
font-family: var(--font-code);
140+
font-size: 0.75rem;
141+
font-weight: 500;
142+
padding: 4px 12px;
143+
border-radius: var(--radius-full);
144+
background: var(--concrete);
145+
color: var(--deep-forge);
146+
}
147+
105148
.cta-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }
106149
.cta-links a {
107150
display: inline-flex; align-items: center; gap: 8px;
108-
padding: 10px 20px; border-radius: var(--radius-md);
109-
font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem;
151+
padding: 12px 24px; border-radius: var(--radius-md);
152+
font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
110153
text-decoration: none; transition: opacity 0.2s;
111154
}
112155
.cta-links a:hover { opacity: 0.85; }
@@ -131,70 +174,115 @@
131174
</style>
132175
</head>
133176
<body>
134-
<div id="shared-nav"></div>
135-
<script src="/shared/nav.js"></script>
177+
<div id="shared-nav"></div>
178+
<script src="/shared/nav.js"></script>
136179

137180
<header class="page-header">
138181
<p class="section-label" data-i18n="header.label">OpenAEC Ecosysteem</p>
139182
<h1 data-i18n="header.title">Open Calc <span class="accent">Studio</span></h1>
140-
<p data-i18n="header.desc">Open source calculatietool voor kostenramingen en begrotingen in de bouw.</p>
183+
<p data-i18n="header.desc">Open-source begrotings- en calculatietool voor de bouw. Van kostenraming tot eindafrekening, met directe koppelingen naar STABU/RAW, IFCX en AI.</p>
141184
<span class="status-badge" data-i18n="header.badge">Beta</span>
185+
<div class="version-info">v0.4.0 &middot; TypeScript + Rust &middot; Tauri 2 &middot; 6 open issues</div>
142186
</header>
143187

144188
<section class="section" style="background: var(--blueprint-white);">
145189

146190
<!-- Screenshot -->
147191
<div class="media-slider">
148192
<div class="slider-container">
149-
<div class="slider-track" id="sliderTrack">
150-
<div class="slider-slide"><img src="/shared/assets/screenshots/open-calc-studio.png" alt="Open Calc Studio - Overzicht" style="filter: blur(4px);"></div>
193+
<div class="slider-track">
194+
<div class="slider-slide"><img src="/shared/assets/screenshots/open-calc-studio.png" alt="Open Calc Studio - Begrotingsoverzicht"></div>
151195
</div>
152196
</div>
153197
</div>
154198

155199
<div class="content">
200+
201+
<!-- MCP / AI highlight -->
202+
<div class="highlight-block">
203+
<h3 data-i18n="mcp.title">AI-gestuurde calculatie via MCP</h3>
204+
<p data-i18n="mcp.desc">Open Calc Studio is volledig aanspreekbaar via het Model Context Protocol (MCP). Dit betekent dat AI-assistenten zoals Claude direct begrotingen kunnen aanmaken, items kunnen toevoegen, herberekenen en exporteren — zonder handmatige invoer.</p>
205+
<ul>
206+
<li data-i18n="mcp.item1">Begrotingen aanmaken en beheren vanuit Claude Code of andere AI-tools</li>
207+
<li data-i18n="mcp.item2">Automatisch hoeveelheden overnemen uit IFC/IFCX-modellen</li>
208+
<li data-i18n="mcp.item3">Referentieprojecten opzoeken voor realistische eenheidsprijzen</li>
209+
<li data-i18n="mcp.item4">Export naar PDF en IFCX direct vanuit de AI-workflow</li>
210+
<li data-i18n="mcp.item5">Uitbreidbaar via extensies uit de extension catalog</li>
211+
</ul>
212+
</div>
213+
156214
<div class="content-block">
157215
<h2 data-i18n="why.title">Waarom Open Calc <span class="accent">Studio</span>?</h2>
158-
<p data-i18n="why.desc">Kostenramingen en begrotingen zijn essentieel bij elk bouwproject, maar bestaande tools zijn duur en gesloten. Open Calc Studio biedt een volledig open source alternatief met directe koppelingen naar STABU/RAW en het IFCX-ecosysteem.</p>
216+
<p data-i18n="why.desc1">Kostenramingen en begrotingen zijn essentieel bij elk bouwproject. Bestaande calculatiesoftware kost duizenden euro's per licentie en sluit je op in propriëtaire formaten. Open Calc Studio biedt een volledig open-source alternatief dat net zo krachtig is.</p>
217+
<p data-i18n="why.desc2">Met directe koppelingen naar STABU/RAW-systematiek, IFCX-modellen voor automatische hoeveelheden, en AI-integratie via MCP is Open Calc Studio gebouwd voor de toekomst van calculatie in de bouw.</p>
159218
</div>
160219

161220
<div class="content-block">
162221
<h2 data-i18n="features.title">Functionaliteiten</h2>
163222
<div class="features-grid">
164223
<div class="feature-card">
165224
<h3 data-i18n="features.stabu.title">STABU/RAW integratie</h3>
166-
<p data-i18n="features.stabu.desc">Volledige ondersteuning van STABU- en RAW-systematiek voor gestandaardiseerde bestekken en kostenramingen.</p>
225+
<p data-i18n="features.stabu.desc">Volledige ondersteuning van STABU- en RAW-systematiek voor gestandaardiseerde bestekken en kostenramingen conform Nederlandse normen.</p>
226+
</div>
227+
<div class="feature-card">
228+
<h3 data-i18n="features.ifcx.title">IFCX hoeveelheden</h3>
229+
<p data-i18n="features.ifcx.desc">Automatisch hoeveelheden overnemen uit IFCX-modellen. Koppel begrotingsposten direct aan modelonderdelen voor nauwkeurige calculaties.</p>
167230
</div>
168231
<div class="feature-card">
169-
<h3 data-i18n="features.ifcx.title">IFCX hoeveelheden koppeling</h3>
170-
<p data-i18n="features.ifcx.desc">Automatisch hoeveelheden overnemen uit IFCX-modellen voor nauwkeurige calculaties direct vanuit het BIM-model.</p>
232+
<h3 data-i18n="features.mcp.title">MCP Server</h3>
233+
<p data-i18n="features.mcp.desc">Volledig aanspreekbaar via Model Context Protocol. AI-assistenten kunnen begrotingen aanmaken, bewerken en exporteren.</p>
171234
</div>
172235
<div class="feature-card">
173-
<h3 data-i18n="features.export.title">Offerte-export</h3>
174-
<p data-i18n="features.export.desc">Genereer professionele offertes en exporteer naar PDF, Excel of andere gangbare formaten.</p>
236+
<h3 data-i18n="features.extensions.title">Extension systeem</h3>
237+
<p data-i18n="features.extensions.desc">Uitbreidbaar via een extensie-catalogus. Voeg branche-specifieke calculatiemethoden, templates en koppelingen toe.</p>
175238
</div>
176239
<div class="feature-card">
177-
<h3 data-i18n="features.multiproject.title">Multi-project beheer</h3>
178-
<p data-i18n="features.multiproject.desc">Beheer meerdere projecten tegelijk met overzichtelijke dashboards en projectvergelijkingen.</p>
240+
<h3 data-i18n="features.chapters.title">Hoofdstukken &amp; paragrafen</h3>
241+
<p data-i18n="features.chapters.desc">Organiseer begrotingen in hoofdstukken, paragrafen en begrotingsposten. Flexibele hiërarchie met automatische nummering.</p>
179242
</div>
180243
<div class="feature-card">
181-
<h3 data-i18n="features.library.title">Kostenbibliotheek</h3>
182-
<p data-i18n="features.library.desc">Bouw en onderhoud een herbruikbare bibliotheek met eenheidsprijzen, materialen en arbeidsnormen.</p>
244+
<h3 data-i18n="features.reference.title">Referentieprojecten</h3>
245+
<p data-i18n="features.reference.desc">Zoek eenheidsprijzen op uit referentieprojecten. Bouw een herbruikbare database van prijzen en kengetallen op.</p>
183246
</div>
184247
<div class="feature-card">
185-
<h3 data-i18n="features.reports.title">Rapportgeneratie</h3>
186-
<p data-i18n="features.reports.desc">Maak gedetailleerde rapporten met kostenoverzichten, vergelijkingen en trendanalyses.</p>
248+
<h3 data-i18n="features.export.title">PDF &amp; IFCX export</h3>
249+
<p data-i18n="features.export.desc">Exporteer begrotingen als professionele PDF-rapporten of als IFCX-data voor uitwisseling met andere tools in het ecosysteem.</p>
250+
</div>
251+
<div class="feature-card">
252+
<h3 data-i18n="features.staart.title">Staartkosten</h3>
253+
<p data-i18n="features.staart.desc">Configureerbare staartkosten: algemene bouwplaatskosten, winst &amp; risico, CAR-verzekering en andere opslagen automatisch berekend.</p>
254+
</div>
255+
<div class="feature-card">
256+
<h3 data-i18n="features.recalc.title">Herberekening</h3>
257+
<p data-i18n="features.recalc.desc">Eén klik herberekening van de volledige begroting. Alle subtotalen, BTW en staartkosten worden automatisch bijgewerkt.</p>
187258
</div>
188259
</div>
189260
</div>
190261

262+
<div class="content-block">
263+
<h2 data-i18n="tech.title">Technologie</h2>
264+
<div class="tech-stack">
265+
<span class="tech-tag">TypeScript</span>
266+
<span class="tech-tag">Rust</span>
267+
<span class="tech-tag">Tauri 2</span>
268+
<span class="tech-tag">MCP Server</span>
269+
<span class="tech-tag">IFCX</span>
270+
<span class="tech-tag">STABU/RAW</span>
271+
<span class="tech-tag">PDF export</span>
272+
</div>
273+
<p data-i18n="tech.desc">Gebouwd met TypeScript en Rust via Tauri 2. Draait als desktop-applicatie op Windows, macOS en Linux, en als web-applicatie in de browser. Inclusief MCP Server voor AI-integratie en extensie-systeem voor maatwerk.</p>
274+
</div>
275+
191276
<div class="content-block">
192277
<div class="cta-links">
193278
<a href="https://open-calc-studio.open-aec.com/" target="_blank" rel="noopener" class="cta-primary" data-i18n="cta.demo">Live demo bekijken</a>
194279
<a href="https://github.com/OpenAEC-Foundation/open-calc-studio" target="_blank" rel="noopener" class="cta-secondary">
195280
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
196281
<span data-i18n="cta.github">Bekijk op GitHub</span>
197282
</a>
283+
<a href="https://github.com/OpenAEC-Foundation/open-calc-studio-extensions" target="_blank" rel="noopener" class="cta-secondary" style="background: var(--scaffold-gray); color: var(--deep-forge);">
284+
<span data-i18n="cta.extensions">Extension catalogus</span>
285+
</a>
198286
</div>
199287
</div>
200288
</div>
@@ -210,6 +298,6 @@ <h3 data-i18n="features.reports.title">Rapportgeneratie</h3>
210298
<p>&copy; 2026 OpenAEC Foundation</p>
211299
</div>
212300
</footer>
213-
<script src="/shared/i18n.js"></script>
301+
<script src="/shared/i18n.js"></script>
214302
</body>
215303
</html>

shared/translations/open-calc-studio.json

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,69 @@
22
"header": {
33
"label": "OpenAEC Ecosystem",
44
"title": "Open Calc <span class=\"accent\">Studio</span>",
5-
"desc": "Open source cost estimation tool for construction budgets and cost calculations.",
5+
"desc": "Open-source budgeting and cost estimation tool for construction. From cost estimates to final accounts, with direct connections to STABU/RAW, IFCX and AI.",
66
"badge": "Beta"
77
},
8+
"mcp": {
9+
"title": "AI-powered estimation via MCP",
10+
"desc": "Open Calc Studio is fully accessible via the Model Context Protocol (MCP). This means AI assistants like Claude can directly create budgets, add items, recalculate and export — without manual input.",
11+
"item1": "Create and manage budgets from Claude Code or other AI tools",
12+
"item2": "Automatically extract quantities from IFC/IFCX models",
13+
"item3": "Look up reference projects for realistic unit prices",
14+
"item4": "Export to PDF and IFCX directly from the AI workflow",
15+
"item5": "Extensible via the extension catalog"
16+
},
817
"why": {
918
"title": "Why Open Calc <span class=\"accent\">Studio</span>?",
10-
"desc": "Cost estimates and budgets are essential for every construction project, but existing tools are expensive and proprietary. Open Calc Studio offers a fully open source alternative with direct connections to STABU/RAW and the IFCX ecosystem."
19+
"desc1": "Cost estimates and budgets are essential for every construction project. Existing estimation software costs thousands of euros per license and locks you into proprietary formats. Open Calc Studio offers a fully open-source alternative that is just as powerful.",
20+
"desc2": "With direct connections to STABU/RAW standards, IFCX models for automatic quantities, and AI integration via MCP, Open Calc Studio is built for the future of construction estimation."
1121
},
1222
"features": {
1323
"title": "Features",
1424
"stabu": {
1525
"title": "STABU/RAW integration",
16-
"desc": "Full support for STABU and RAW standards for standardized specifications and cost estimates."
26+
"desc": "Full support for STABU and RAW standards for standardized specifications and cost estimates according to Dutch norms."
1727
},
1828
"ifcx": {
19-
"title": "IFCX quantity linking",
20-
"desc": "Automatically extract quantities from IFCX models for accurate calculations directly from the BIM model."
29+
"title": "IFCX quantities",
30+
"desc": "Automatically extract quantities from IFCX models. Link budget items directly to model elements for accurate calculations."
2131
},
22-
"export": {
23-
"title": "Quote export",
24-
"desc": "Generate professional quotes and export to PDF, Excel or other common formats."
32+
"mcp": {
33+
"title": "MCP Server",
34+
"desc": "Fully accessible via Model Context Protocol. AI assistants can create, edit and export budgets."
2535
},
26-
"multiproject": {
27-
"title": "Multi-project management",
28-
"desc": "Manage multiple projects simultaneously with clear dashboards and project comparisons."
36+
"extensions": {
37+
"title": "Extension system",
38+
"desc": "Extensible via an extension catalog. Add industry-specific calculation methods, templates and integrations."
2939
},
30-
"library": {
31-
"title": "Cost library",
32-
"desc": "Build and maintain a reusable library with unit prices, materials and labor standards."
40+
"chapters": {
41+
"title": "Chapters & sections",
42+
"desc": "Organize budgets into chapters, sections and budget items. Flexible hierarchy with automatic numbering."
3343
},
34-
"reports": {
35-
"title": "Report generation",
36-
"desc": "Create detailed reports with cost overviews, comparisons and trend analyses."
44+
"reference": {
45+
"title": "Reference projects",
46+
"desc": "Look up unit prices from reference projects. Build a reusable database of prices and key figures."
47+
},
48+
"export": {
49+
"title": "PDF & IFCX export",
50+
"desc": "Export budgets as professional PDF reports or as IFCX data for exchange with other tools in the ecosystem."
51+
},
52+
"staart": {
53+
"title": "Overhead costs",
54+
"desc": "Configurable overhead costs: general site costs, profit & risk, CAR insurance and other surcharges automatically calculated."
55+
},
56+
"recalc": {
57+
"title": "Recalculation",
58+
"desc": "One-click recalculation of the entire budget. All subtotals, VAT and overhead costs are automatically updated."
3759
}
3860
},
61+
"tech": {
62+
"title": "Technology",
63+
"desc": "Built with TypeScript and Rust via Tauri 2. Runs as a desktop application on Windows, macOS and Linux, and as a web application in the browser. Includes MCP Server for AI integration and extension system for customization."
64+
},
3965
"cta": {
4066
"demo": "View live demo",
41-
"github": "View on GitHub"
67+
"github": "View on GitHub",
68+
"extensions": "Extension catalog"
4269
}
4370
}

0 commit comments

Comments
 (0)