-
- {facts.map((f) =>
- {f.value}{f.label} )} -
- 7.02 → Cloudone source for every ABAP release -
- MITno license fee, no per-user cost + {tiles.map(([value, label]) =>
- {value}{label} )}
Counted from the framework repository at build time.
}
- 
abap2UI5 Evaluate
+ abap2UI5 for decision makers
diff --git a/src/lib/facts.mjs b/src/lib/facts.mjs
deleted file mode 100644
index efe8d27..0000000
--- a/src/lib/facts.mjs
+++ /dev/null
@@ -1,51 +0,0 @@
-// The counted figures - unit tests, specs, browser suites, gates. A reader who
-// is deciding wants the size of the thing, and this repository types no number
-// of its own: the framework's README carries them between `facts:start` and
-// `facts:end`, regenerated there by `npm run facts` and held current by a gate.
-//
-// Read at build time: from the file EVALUATE_README names (a local clone),
-// else from raw.githubusercontent.com. Allowed to fail - no network, a 5xx, a
-// README whose block moved - and then the band shows what it can without the
-// counts, and the build log says so. It never falls back to a typed number.
-import fs from "node:fs";
-
-const README_URL = "https://raw.githubusercontent.com/abap2UI5/abap2UI5/main/README.md";
-
-/* What the block carries that the page does not show as a count: the workflow
- * total (a maintainer's figure), the release spans (shown as their own tiles)
- * and the trailing "counted from this repository by …". */
-const SKIP = /workflows|→|counted/;
-
-/** The figures of the block as plain strings - "1,530 ABAP unit tests". */
-export function factsIn(readme) {
- const block = String(readme).match(/([\s\S]*?)/);
- if (!block) return [];
- const text = block[1].replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
- return text.split(/\s·\s/).map((s) => s.trim()).filter((s) => s && !SKIP.test(s));
-}
-
-/** "1,530 ABAP unit tests" -> { value: "1,530", label: "ABAP unit tests" }. */
-export function splitFact(fact) {
- const m = String(fact).match(/^([\d.,]+\+?)\s+(.+)$/);
- return m ? { value: m[1], label: m[2] } : { value: "", label: fact };
-}
-
-let cached;
-export async function readFacts() {
- if (cached) return cached;
- let readme = "";
- try {
- if (process.env.EVALUATE_README) {
- readme = fs.readFileSync(process.env.EVALUATE_README, "utf8");
- } else {
- const res = await fetch(README_URL, { signal: AbortSignal.timeout(15000) });
- if (!res.ok) throw new Error(`HTTP ${res.status}`);
- readme = await res.text();
- }
- } catch (err) {
- console.warn(`evaluate: the counted figures were not read (${err.message}) - the page goes out without them`);
- }
- cached = factsIn(readme).map(splitFact);
- if (readme && !cached.length) console.warn("evaluate: the framework README has no facts block - the page goes out without the counts");
- return cached;
-}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d04da6a..a1b03b8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
---
-/* Evaluate abap2UI5 - the page for the people who approve it: IT management,
- * architecture boards, product owners, SAP Basis, internal audit. The
- * questions a review asks, in the order it asks them.
+/* abap2UI5 for decision makers - IT management, product owners, architecture
+ * boards: what it lets you build, why it beats every other way to put a UI5
+ * app on SAP (commercial products included), what it costs and how to start.
*
* THE SECTION IDS ARE ADDRESSES. /docs/evaluate redirects here with its
* #fragment, and the framework's README links #what-you-keep and
@@ -17,6 +17,19 @@ const PLAYGROUND = "https://abap2ui5.github.io/playground/";
const GITHUB = "https://github.com/abap2UI5/abap2UI5";
const base = import.meta.env.BASE_URL;
+/* What it solves - the processes, not one problem. The same ground the
+ * commercial SAP app platforms sell (warehouse, maintenance, shop floor,
+ * approvals), at no license fee. */
+const useCases = [
+ ["box", "Warehouse & logistics", "Goods receipt, picking, stock transfers and inventory counts on scanners, handhelds and tablets - in the browser, with the barcode scanner and camera of the device.", "z2ui5_cl_smp_app_530", "A scan field for the warehouse: every scan lands in the list, no tap needed"],
+ ["wrench", "Maintenance & service", "Work orders, notifications and checklists for technicians, on the desktop in the workshop or on the phone at the machine.", "z2ui5_cl_smpc_app_089", "An object page: header, status and sections, as a work order would show them"],
+ ["factory", "Production & shop floor", "Confirmations, quality inspections, shift plans and the special processes the standard never covered - right where the work happens.", "z2ui5_cl_smpc_app_108", "A planning calendar, as a shift or capacity plan would use it"],
+ ["check", "Approvals & workflows", "Purchase requisitions, invoices, leave and master-data requests: approve in one click, in the launchpad, in Teams or on the phone.", "z2ui5_cl_smpc_app_291", "A notification inbox with priorities and actions"],
+ ["gauge", "Cockpits & dashboards", "KPIs, charts and monitors for one team or one process, live from SAP - no data warehouse, no extra BI tool.", "z2ui5_cl_smpc_app_517", "Launchpad tiles with KPIs, trends and figures"],
+ ["form", "Paper & Excel replaced", "Forms, checklists and spreadsheets that live outside SAP become apps that write straight into it.", "z2ui5_cl_smpc_app_329", "A form with an edit switch, instead of a paper form"],
+ ["list", "SAP GUI modernized", "Reports, ALV lists and transactions turn into browser apps one at a time, with the logic behind them unchanged.", "z2ui5_cl_smp_app_070", "An ALV-style table with search, sort, filter and row actions"],
+ ["phone", "Mobile, without an app store", "Every app runs on iOS and Android in the browser or the mobile shell - nothing to install, nothing to distribute.", "z2ui5_cl_smpc_app_024", "A feed app on a phone"],
+];
const useIt = [
["The team is ABAP.", "No JavaScript, no UI5 tooling, no Business Application Studio to set up. An app is one class, written, debugged, transported and unit-tested like every other class."],
["The system is older than RAP.", "NetWeaver 7.02 to 7.4x have no RAP and a Fiori stack that is expensive to add. abap2UI5 runs there from the same source it runs on ABAP Cloud, so an app written on 7.31 today moves to S/4HANA unchanged."],
@@ -24,22 +37,31 @@ const useIt = [
["You do not want a deployment pipeline.", "No BSP upload, no approuter, no MTA. The ABAP system serves the frontend; an abapGit pull is the installation."],
["You replace SAP GUI screens one at a time.", "Selection screens, lists and transactions become browser apps without rewriting the logic behind them."],
];
-const useRap = [
- ["The service is the product.", "Other consumers, a mobile app, an integration, SAP's own apps, need the OData service anyway. RAP gives you the service and the UI from one model; abap2UI5 gives you a UI and no service."],
- ["The screen is a standard floorplan and should stay one.", "List report, object page, worklist, with SAP's draft handling and flexible column layout as SAP ships and maintains them. Fiori Elements tracks every UI5 release for you; a hand-built screen is yours to keep current."],
- ["The data is large and lives behind paging.", "Fiori Elements pages, sorts and filters through OData on the server. In abap2UI5 the table a view binds travels with the model; thousands of rows are routine, millions are the app's job to page."],
- ["Offline, or a native mobile SDK, is a requirement.", "abap2UI5 is a roundtrip to the ABAP system on every interaction. It has a mobile shell for camera, barcode and location; it has no offline store."],
- ["A frontend team should own the frontend.", "The app is one ABAP class; that is the point, and it means there is no frontend project for a separate team to own, and no place for heavy client-side behavior."],
- ["The organization has standardized on it.", "A clean-core guideline that names RAP as the extensibility model is a decision already taken. abap2UI5 passes the ABAP Cloud checks, but it is not SAP's programming model, and a review board will say so."],
+/* The market, as a manager compares it. Columns: abap2UI5, then SAP's own
+ * two routes, then the commercial UI5 app platforms and low-code builders
+ * sold on top of SAP. */
+const rivals = ["RAP + Fiori Elements", "Freestyle UI5 + OData", "Commercial UI5 & low-code platforms"];
+const compare = [
+ ["License cost", "None. MIT, for any number of users, systems and apps", "Part of the SAP license", "Part of the SAP license", "Subscription or per-user fees, renewed every year"],
+ ["Who builds the apps", "The ABAP team you already have", "ABAP plus CDS, RAP and annotation specialists", "JavaScript / UI5 developers", "Developers trained on the vendor's tool"],
+ ["First screen", "Minutes", "Days: model, service, project, deployment", "Days to weeks", "After the platform is installed and licensed"],
+ ["Freedom of the UI", "Every UI5 control, any layout", "SAP's floorplans and their extension points", "Every UI5 control", "What the vendor's designer offers"],
+ ["Older SAP releases", "NetWeaver 7.02 up to ABAP Cloud, one source", "7.5x and later", "Yes, with OData effort per release", "Depends on the vendor's add-on"],
+ ["Extra infrastructure", "None - one endpoint on your SAP system", "Fiori frontend server and deployment", "Frontend deployment (BSP, BTP or web server)", "The vendor's add-on, server or cloud tenant"],
+ ["Lock-in", "None - apps are plain ABAP classes in your system", "SAP's programming model", "Low", "Apps live in the vendor's runtime and repository"],
+ ["Source code", "Open, every line, on GitHub", "Closed", "UI5 open, your app yours", "Closed"],
+ ["Built with AI", "One class an AI writes whole - AI Studio, Claude Code and Copilot plugins, free", "Many artifacts for an AI to generate and keep in sync", "Two codebases, frontend and service", "The vendor's own AI, at the vendor's price"],
];
-const costCompare = [
- ["Skills", "ABAP, and a reading knowledge of the UI5 control API", "ABAP, CDS, RAP, annotations, and someone who can debug the Fiori Elements template"],
- ["First screen", "One class, minutes", "Data model, behavior definition, service, Fiori project, deploy: a day when everything is set up"],
- ["Custom UI", "Any UI5 control, 1:1, from ABAP", "Extension points; past them, a freestyle UI5 project"],
- ["Upgrade", "The framework is a transport; the public API is held by a snapshot and deprecations are tracked", "SAP's; the template follows the UI5 release"],
- ["Reuse by other consumers", "None, there is no service", "The OData service, by anything"],
- ["Runs on", "NetWeaver 7.02 to ABAP Cloud, UI5 1.71 to 2.x", "7.5x and later for RAP, ABAP Cloud for the full model"],
- ["License", "MIT, no per-user cost", "Part of the platform license"],
+/* Why AI and abap2UI5 fit: one class is one file an assistant can write
+ * whole, check without a system and hand over for review. Every claim is in
+ * the framework README's "Build with AI" and "AI Assistants". */
+const ai = [
+ ["spark", "One app, one file", "An AI writes the whole app - one ABAP class. No OData service, no frontend project, no deployment to generate and keep in sync."],
+ ["play", "From a sentence to an app", "The AI Studio builds an app from a description, right in the browser: written, run and fixed against the real framework, ready for abapGit. Nothing to install."],
+ ["code", "In the tools your team uses", "Plugins for Claude Code and GitHub Copilot, skills for any agent and an MCP server that validates, runs and screenshots apps - without an SAP system."],
+ ["list", "Learns from 700+ samples", "Hundreds of working apps and documentation written for AI make the result right the first time, not the third."],
+ ["check", "Checked before anyone looks", "The abap2UI5 linter tests every class the AI writes, and the AI fixes what it broke before a developer reviews it."],
+ ["chat", "AI inside your apps, too", "A chat or a summarize-this-data panel in an existing app, with a local model first or the provider of your choice."],
];
const keep = [
["What an app is", "An ABAP class"],
@@ -71,6 +93,7 @@ const objections = [
["Is this another UI5 wrapper that will not survive the next UI5 release?", `The frontend is UI5 itself, not a copy of it, and every merge is run in the browser on the oldest supported release and on UI5 2.x. Releases are tagged and listed (Release Notes); what is on its way out is announced and tracked until removal (Deprecations), and the public API apps use is held by a snapshot, so a change to it fails the framework's own pull request.`],
["Every click is a roundtrip. Is that fast enough?", `A roundtrip is one HTTP POST carrying only what changed, served by the ABAP stack that already serves everything else. For the screens this page is about, worklists, forms, cockpits, it is the same round trip a SAP GUI screen makes, in a browser. What it is not built for is a real-time collaborative editor or an app that holds its state offline (Performance).`],
["Our clean-core guideline names RAP. Where does this leave us?", "Side by side. abap2UI5 passes the ABAP Cloud checks and modifies nothing in the standard, so it is clean core in the technical sense, but it is not SAP's programming model. The usual outcome is a scope: standard transactional screens in RAP, the tools around them in abap2UI5, both in one launchpad."],
+ ["Why should we trust it over a product we pay for?", "Because you can check everything a vendor asks you to believe. The source is open, every test is public, and an app is a class in your own system that keeps running whatever happens to the project. A paid platform sells you a runtime you cannot read and a contract you have to renew; abap2UI5 hands you the code."],
["Who is accountable when something breaks?", `Your developer, for the app, the same as for any class in the system; the community, for the framework, on a best-effort basis; a commercial partner, if you sign one. Security reports are acknowledged within three business days (Security).`],
["Is anybody actually running this in production?", `Yes, see below. And every release is tested against Standard ABAP and ABAP Cloud, downported and linted against NetWeaver 7.02, and run in the browser on the oldest and the newest supported UI5 release (verified on).`],
];
@@ -104,8 +127,8 @@ const week = [
["Pick one real screen", "One your team has to build this quarter — not a demo."],
["Build it in a development system", "With the people who will maintain it, in ADT or SE80."],
["Review it like any ABAP", "Read the class, transport it, run ATC on it, check the authorizations it asks for."],
- ["Count", "The files, the systems and the tools involved, and the time until a user can click it."],
- ["Hold it against the evidence", "This page against the security model and the verified-on page, with the skepticism you would apply to any claim — then decide from the screen."],
+ ["Measure", "The time until a user can click it, and the tools and systems it needed - none beyond your SAP system."],
+ ["Compare and decide", "Hold the result against any alternative or vendor quote - then decide from the screen, not from the slide."],
];
const doors = [
["play", "Ten minutes, nothing installed", "Open the playground and change a running app, or browse the sample catalog for the screen closest to yours.", `${PLAYGROUND}samples/`, "Playground"],
@@ -115,18 +138,17 @@ const doors = [
];
---
abap2UI5 Evaluate
+ abap2UI5 for decision makers
diff --git a/src/lib/facts.mjs b/src/lib/facts.mjs
deleted file mode 100644
index efe8d27..0000000
--- a/src/lib/facts.mjs
+++ /dev/null
@@ -1,51 +0,0 @@
-// The counted figures - unit tests, specs, browser suites, gates. A reader who
-// is deciding wants the size of the thing, and this repository types no number
-// of its own: the framework's README carries them between `facts:start` and
-// `facts:end`, regenerated there by `npm run facts` and held current by a gate.
-//
-// Read at build time: from the file EVALUATE_README names (a local clone),
-// else from raw.githubusercontent.com. Allowed to fail - no network, a 5xx, a
-// README whose block moved - and then the band shows what it can without the
-// counts, and the build log says so. It never falls back to a typed number.
-import fs from "node:fs";
-
-const README_URL = "https://raw.githubusercontent.com/abap2UI5/abap2UI5/main/README.md";
-
-/* What the block carries that the page does not show as a count: the workflow
- * total (a maintainer's figure), the release spans (shown as their own tiles)
- * and the trailing "counted from this repository by …". */
-const SKIP = /workflows|→|counted/;
-
-/** The figures of the block as plain strings - "1,530 ABAP unit tests". */
-export function factsIn(readme) {
- const block = String(readme).match(/([\s\S]*?)/);
- if (!block) return [];
- const text = block[1].replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
- return text.split(/\s·\s/).map((s) => s.trim()).filter((s) => s && !SKIP.test(s));
-}
-
-/** "1,530 ABAP unit tests" -> { value: "1,530", label: "ABAP unit tests" }. */
-export function splitFact(fact) {
- const m = String(fact).match(/^([\d.,]+\+?)\s+(.+)$/);
- return m ? { value: m[1], label: m[2] } : { value: "", label: fact };
-}
-
-let cached;
-export async function readFacts() {
- if (cached) return cached;
- let readme = "";
- try {
- if (process.env.EVALUATE_README) {
- readme = fs.readFileSync(process.env.EVALUATE_README, "utf8");
- } else {
- const res = await fetch(README_URL, { signal: AbortSignal.timeout(15000) });
- if (!res.ok) throw new Error(`HTTP ${res.status}`);
- readme = await res.text();
- }
- } catch (err) {
- console.warn(`evaluate: the counted figures were not read (${err.message}) - the page goes out without them`);
- }
- cached = factsIn(readme).map(splitFact);
- if (readme && !cached.length) console.warn("evaluate: the framework README has no facts block - the page goes out without the counts");
- return cached;
-}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d04da6a..a1b03b8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
---
-/* Evaluate abap2UI5 - the page for the people who approve it: IT management,
- * architecture boards, product owners, SAP Basis, internal audit. The
- * questions a review asks, in the order it asks them.
+/* abap2UI5 for decision makers - IT management, product owners, architecture
+ * boards: what it lets you build, why it beats every other way to put a UI5
+ * app on SAP (commercial products included), what it costs and how to start.
*
* THE SECTION IDS ARE ADDRESSES. /docs/evaluate redirects here with its
* #fragment, and the framework's README links #what-you-keep and
@@ -17,6 +17,19 @@ const PLAYGROUND = "https://abap2ui5.github.io/playground/";
const GITHUB = "https://github.com/abap2UI5/abap2UI5";
const base = import.meta.env.BASE_URL;
+/* What it solves - the processes, not one problem. The same ground the
+ * commercial SAP app platforms sell (warehouse, maintenance, shop floor,
+ * approvals), at no license fee. */
+const useCases = [
+ ["box", "Warehouse & logistics", "Goods receipt, picking, stock transfers and inventory counts on scanners, handhelds and tablets - in the browser, with the barcode scanner and camera of the device.", "z2ui5_cl_smp_app_530", "A scan field for the warehouse: every scan lands in the list, no tap needed"],
+ ["wrench", "Maintenance & service", "Work orders, notifications and checklists for technicians, on the desktop in the workshop or on the phone at the machine.", "z2ui5_cl_smpc_app_089", "An object page: header, status and sections, as a work order would show them"],
+ ["factory", "Production & shop floor", "Confirmations, quality inspections, shift plans and the special processes the standard never covered - right where the work happens.", "z2ui5_cl_smpc_app_108", "A planning calendar, as a shift or capacity plan would use it"],
+ ["check", "Approvals & workflows", "Purchase requisitions, invoices, leave and master-data requests: approve in one click, in the launchpad, in Teams or on the phone.", "z2ui5_cl_smpc_app_291", "A notification inbox with priorities and actions"],
+ ["gauge", "Cockpits & dashboards", "KPIs, charts and monitors for one team or one process, live from SAP - no data warehouse, no extra BI tool.", "z2ui5_cl_smpc_app_517", "Launchpad tiles with KPIs, trends and figures"],
+ ["form", "Paper & Excel replaced", "Forms, checklists and spreadsheets that live outside SAP become apps that write straight into it.", "z2ui5_cl_smpc_app_329", "A form with an edit switch, instead of a paper form"],
+ ["list", "SAP GUI modernized", "Reports, ALV lists and transactions turn into browser apps one at a time, with the logic behind them unchanged.", "z2ui5_cl_smp_app_070", "An ALV-style table with search, sort, filter and row actions"],
+ ["phone", "Mobile, without an app store", "Every app runs on iOS and Android in the browser or the mobile shell - nothing to install, nothing to distribute.", "z2ui5_cl_smpc_app_024", "A feed app on a phone"],
+];
const useIt = [
["The team is ABAP.", "No JavaScript, no UI5 tooling, no Business Application Studio to set up. An app is one class, written, debugged, transported and unit-tested like every other class."],
["The system is older than RAP.", "NetWeaver 7.02 to 7.4x have no RAP and a Fiori stack that is expensive to add. abap2UI5 runs there from the same source it runs on ABAP Cloud, so an app written on 7.31 today moves to S/4HANA unchanged."],
@@ -24,22 +37,31 @@ const useIt = [
["You do not want a deployment pipeline.", "No BSP upload, no approuter, no MTA. The ABAP system serves the frontend; an abapGit pull is the installation."],
["You replace SAP GUI screens one at a time.", "Selection screens, lists and transactions become browser apps without rewriting the logic behind them."],
];
-const useRap = [
- ["The service is the product.", "Other consumers, a mobile app, an integration, SAP's own apps, need the OData service anyway. RAP gives you the service and the UI from one model; abap2UI5 gives you a UI and no service."],
- ["The screen is a standard floorplan and should stay one.", "List report, object page, worklist, with SAP's draft handling and flexible column layout as SAP ships and maintains them. Fiori Elements tracks every UI5 release for you; a hand-built screen is yours to keep current."],
- ["The data is large and lives behind paging.", "Fiori Elements pages, sorts and filters through OData on the server. In abap2UI5 the table a view binds travels with the model; thousands of rows are routine, millions are the app's job to page."],
- ["Offline, or a native mobile SDK, is a requirement.", "abap2UI5 is a roundtrip to the ABAP system on every interaction. It has a mobile shell for camera, barcode and location; it has no offline store."],
- ["A frontend team should own the frontend.", "The app is one ABAP class; that is the point, and it means there is no frontend project for a separate team to own, and no place for heavy client-side behavior."],
- ["The organization has standardized on it.", "A clean-core guideline that names RAP as the extensibility model is a decision already taken. abap2UI5 passes the ABAP Cloud checks, but it is not SAP's programming model, and a review board will say so."],
+/* The market, as a manager compares it. Columns: abap2UI5, then SAP's own
+ * two routes, then the commercial UI5 app platforms and low-code builders
+ * sold on top of SAP. */
+const rivals = ["RAP + Fiori Elements", "Freestyle UI5 + OData", "Commercial UI5 & low-code platforms"];
+const compare = [
+ ["License cost", "None. MIT, for any number of users, systems and apps", "Part of the SAP license", "Part of the SAP license", "Subscription or per-user fees, renewed every year"],
+ ["Who builds the apps", "The ABAP team you already have", "ABAP plus CDS, RAP and annotation specialists", "JavaScript / UI5 developers", "Developers trained on the vendor's tool"],
+ ["First screen", "Minutes", "Days: model, service, project, deployment", "Days to weeks", "After the platform is installed and licensed"],
+ ["Freedom of the UI", "Every UI5 control, any layout", "SAP's floorplans and their extension points", "Every UI5 control", "What the vendor's designer offers"],
+ ["Older SAP releases", "NetWeaver 7.02 up to ABAP Cloud, one source", "7.5x and later", "Yes, with OData effort per release", "Depends on the vendor's add-on"],
+ ["Extra infrastructure", "None - one endpoint on your SAP system", "Fiori frontend server and deployment", "Frontend deployment (BSP, BTP or web server)", "The vendor's add-on, server or cloud tenant"],
+ ["Lock-in", "None - apps are plain ABAP classes in your system", "SAP's programming model", "Low", "Apps live in the vendor's runtime and repository"],
+ ["Source code", "Open, every line, on GitHub", "Closed", "UI5 open, your app yours", "Closed"],
+ ["Built with AI", "One class an AI writes whole - AI Studio, Claude Code and Copilot plugins, free", "Many artifacts for an AI to generate and keep in sync", "Two codebases, frontend and service", "The vendor's own AI, at the vendor's price"],
];
-const costCompare = [
- ["Skills", "ABAP, and a reading knowledge of the UI5 control API", "ABAP, CDS, RAP, annotations, and someone who can debug the Fiori Elements template"],
- ["First screen", "One class, minutes", "Data model, behavior definition, service, Fiori project, deploy: a day when everything is set up"],
- ["Custom UI", "Any UI5 control, 1:1, from ABAP", "Extension points; past them, a freestyle UI5 project"],
- ["Upgrade", "The framework is a transport; the public API is held by a snapshot and deprecations are tracked", "SAP's; the template follows the UI5 release"],
- ["Reuse by other consumers", "None, there is no service", "The OData service, by anything"],
- ["Runs on", "NetWeaver 7.02 to ABAP Cloud, UI5 1.71 to 2.x", "7.5x and later for RAP, ABAP Cloud for the full model"],
- ["License", "MIT, no per-user cost", "Part of the platform license"],
+/* Why AI and abap2UI5 fit: one class is one file an assistant can write
+ * whole, check without a system and hand over for review. Every claim is in
+ * the framework README's "Build with AI" and "AI Assistants". */
+const ai = [
+ ["spark", "One app, one file", "An AI writes the whole app - one ABAP class. No OData service, no frontend project, no deployment to generate and keep in sync."],
+ ["play", "From a sentence to an app", "The AI Studio builds an app from a description, right in the browser: written, run and fixed against the real framework, ready for abapGit. Nothing to install."],
+ ["code", "In the tools your team uses", "Plugins for Claude Code and GitHub Copilot, skills for any agent and an MCP server that validates, runs and screenshots apps - without an SAP system."],
+ ["list", "Learns from 700+ samples", "Hundreds of working apps and documentation written for AI make the result right the first time, not the third."],
+ ["check", "Checked before anyone looks", "The abap2UI5 linter tests every class the AI writes, and the AI fixes what it broke before a developer reviews it."],
+ ["chat", "AI inside your apps, too", "A chat or a summarize-this-data panel in an existing app, with a local model first or the provider of your choice."],
];
const keep = [
["What an app is", "An ABAP class"],
@@ -71,6 +93,7 @@ const objections = [
["Is this another UI5 wrapper that will not survive the next UI5 release?", `The frontend is UI5 itself, not a copy of it, and every merge is run in the browser on the oldest supported release and on UI5 2.x. Releases are tagged and listed (Release Notes); what is on its way out is announced and tracked until removal (Deprecations), and the public API apps use is held by a snapshot, so a change to it fails the framework's own pull request.`],
["Every click is a roundtrip. Is that fast enough?", `A roundtrip is one HTTP POST carrying only what changed, served by the ABAP stack that already serves everything else. For the screens this page is about, worklists, forms, cockpits, it is the same round trip a SAP GUI screen makes, in a browser. What it is not built for is a real-time collaborative editor or an app that holds its state offline (Performance).`],
["Our clean-core guideline names RAP. Where does this leave us?", "Side by side. abap2UI5 passes the ABAP Cloud checks and modifies nothing in the standard, so it is clean core in the technical sense, but it is not SAP's programming model. The usual outcome is a scope: standard transactional screens in RAP, the tools around them in abap2UI5, both in one launchpad."],
+ ["Why should we trust it over a product we pay for?", "Because you can check everything a vendor asks you to believe. The source is open, every test is public, and an app is a class in your own system that keeps running whatever happens to the project. A paid platform sells you a runtime you cannot read and a contract you have to renew; abap2UI5 hands you the code."],
["Who is accountable when something breaks?", `Your developer, for the app, the same as for any class in the system; the community, for the framework, on a best-effort basis; a commercial partner, if you sign one. Security reports are acknowledged within three business days (Security).`],
["Is anybody actually running this in production?", `Yes, see below. And every release is tested against Standard ABAP and ABAP Cloud, downported and linted against NetWeaver 7.02, and run in the browser on the oldest and the newest supported UI5 release (verified on).`],
];
@@ -104,8 +127,8 @@ const week = [
["Pick one real screen", "One your team has to build this quarter — not a demo."],
["Build it in a development system", "With the people who will maintain it, in ADT or SE80."],
["Review it like any ABAP", "Read the class, transport it, run ATC on it, check the authorizations it asks for."],
- ["Count", "The files, the systems and the tools involved, and the time until a user can click it."],
- ["Hold it against the evidence", "This page against the security model and the verified-on page, with the skepticism you would apply to any claim — then decide from the screen."],
+ ["Measure", "The time until a user can click it, and the tools and systems it needed - none beyond your SAP system."],
+ ["Compare and decide", "Hold the result against any alternative or vendor quote - then decide from the screen, not from the slide."],
];
const doors = [
["play", "Ten minutes, nothing installed", "Open the playground and change a running app, or browse the sample catalog for the screen closest to yours.", `${PLAYGROUND}samples/`, "Playground"],
@@ -115,18 +138,17 @@ const doors = [
];
---
-
@@ -141,50 +163,70 @@ const doors = [
For IT management, architecture boards, product owners, SAP Basis and internal audit
-Evaluate abap2UI5 with the questions a review asks
-In the order a review asks them, each with the page that carries the detail. A developer who wants to see it run is better served by the Quickstart; send them there and read on.
+Modern UI5 apps, built by the team you already have
+abap2UI5 turns your ABAP developers into UI5 app builders - no JavaScript, no extra platform, no license fee. Faster to build, cheaper to run and freer to leave than any other UI5 solution on the market, commercial ones included.
Nothing to install, no trial license, no sales call — the playground runs in your browser.
-
The problem it answers
-Every SAP system has screens nobody shipped
-
-
-
- The cockpit for one team, the monitor for one process, the selection screen with a result list that used to be a report with an ALV. They are not standard floorplans, so Fiori Elements does not cover them; they are not worth a frontend project, an OData service and a deployment pipeline, so they stay in SAP GUI, in a spreadsheet, or on paper. And on a system older than S/4HANA, RAP is not there to build them with at all.
-abap2UI5 is the shorter path for exactly these screens. An app is one ABAP class, written in ADT or SE80, transported like any other class, and it renders as a UI5 app in the browser, in the Fiori launchpad, or on a mobile device. There is no service, no frontend project and nothing to deploy. The rest of this page is what that costs and what it does not.
-
-
+ The cockpit for one team
Too specific for a standard app, too small for a project.
The monitor for one process
Today a report someone runs by hand, or a spreadsheet.
The selection screen with a list
The ALV report, as a browser app, logic unchanged.
What you can build
+One framework for every process that needs a screen
+From the warehouse floor to the management cockpit: whatever runs in SAP today on paper, in Excel or in SAP GUI becomes a modern app - built in your own system, by your own team.
+
+ {useCases.map(([icon, h, t, cls, alt]) => (
+
+ ))}
- 
→ In a Nutshell is the technical picture of how the framework works, for the architect who wants to see the roundtrip.
+→ Browse the sample catalog for the screen closest to yours, or read In a Nutshell for how it works.
-
-
+
+
+
+
@@ -207,7 +249,7 @@ const doors = [
@@ -259,7 +301,7 @@ const doors = [
@@ -284,8 +327,8 @@ const doors = [
When to use it, and when not
-One way to put a UI5 interface on ABAP — not the only one
-RAP with Fiori Elements is another, freestyle UI5 with OData a third, and all three run side by side in the same launchpad. Written so that a team can disagree with a specific line rather than with a feeling.
+Compared with the market
+Better than every other way to build UI5 apps on SAP - the commercial ones included
+SAP's own routes, and the UI5 app platforms and low-code builders sold on top of SAP, side by side.
+
+
+
+
| abap2UI5 | {rivals.map((r) =>{r} | )}|
|---|---|---|
| {k} | {a} | {rest.map((t) =>{t} | )}
-
- Use abap2UI5 when
+Why teams choose abap2UI5
- {useIt.map(([b, t]) =>
- {b}{t} )}
-
- Use RAP and Fiori Elements when
-- {useRap.map(([b, t]) =>
- {b}{t} )}
+
Nothing to throw away
+-
+
- Your Fiori apps stay.abap2UI5 apps appear as tiles in the same launchpad, with navigation between them. +
- Your ABAP logic stays.A report, a BAPI, a function module: an app calls it as it is. +
- Your rules stay.Transports, code review, ATC and authorizations apply unchanged. +
- Your exit stays open.No contract, no runtime fee - the apps are yours whatever you decide later. +
The common answer is not either. Standard transactional screens as Fiori Elements, the tools and cockpits around them as abap2UI5, both as tiles in the same launchpad with navigation between them. What it costs either way:
-
-
-
-
| abap2UI5 | RAP + Fiori Elements | |
|---|---|---|
| {k} | {a} | {b} |
→ On-Stack or Side-by-Side and One App, Many Systems are the deployment scenarios in detail.
+
+ AI
+The UI5 framework made for AI
+An AI assistant is only as good as what it has to produce. With abap2UI5 that is one ABAP class - the simplest target there is for an AI, and the easiest result for your team to check. Your developers describe the screen; the AI writes it; your rules review and transport it like any other code.
+
+ 
+
+
+ Example: a chat assistant inside an abap2UI5 app - one class, with a built-in rule-based answerer that one method turns into a real AI call.
+
+ {ai.map(([icon, h, t]) =>
+ {h}
{t}
No AI lock-in either. Use Claude, ChatGPT, Copilot or a local model - with your own key, at your own price. Commercial platforms sell their AI as an add-on to their license; abap2UI5's costs nothing.
+→ Try the AI Studio, or read Developing with AI.
+What you keep
An abap2UI5 app is ABAP code, and governs itself like it
@@ -198,7 +240,7 @@ const doors = [
{governance.map(([icon, h, t]) =>
- {h}
{t}
The price is that someone has to write ABAP. There is no click-together designer for business users, on purpose: every app stays one kind of thing, a class, governed by the rules you already have.
+No shadow IT. There is no click-together designer that bypasses your development process: every app stays one kind of thing, a class, governed by the rules you already have.
→ More on Security and Authorization, and the security model a security review starts from: what the framework guarantees, and which test holds the code to each guarantee.
No strings attached
Nothing to buy, nothing to renew, nothing between you and your code
-What a review can check in minutes, and what stays true after the decision.
+What a commercial platform cannot offer, and what stays true after the decision.
- {strings.map(([b, t]) =>
- {b}{t} )}
What it costs
-No license fee, now or later — the work is what you pay for
+No license fee, now or later — while commercial platforms charge every year
0 license fees
@@ -272,6 +314,7 @@ const doors = [
The apps built with it are standard UI5 freestyle apps, licensed the way your organization licenses every other UI5 app.
+Commercial SAP app platforms charge per named user or per device, every month, often with minimum terms and setup fees - and the bill grows with every user who adopts the apps. With abap2UI5 adoption costs nothing.
What is not free is the work: an ABAP developer's time to write the screen, and the evenings of the volunteers who maintain the framework. Support is the community's, on GitHub issues and Slack, on a best-effort basis; there is no vendor SLA to buy from the project. Companies and freelancers offer paid implementation, training and support agreements around it.
-
diff --git a/src/styles/global.css b/src/styles/global.css
index 7682ec4..46e1761 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,7 +1,7 @@
-/* Evaluate abap2UI5 - the one stylesheet. A product page for the people who
- * approve a tool: a dark hero, light bands for the argument, the brand red of
- * the logo for what to do next, and nothing that needs a script. Light and
- * dark follow the reader's system. */
+/* abap2UI5 for decision makers - the one stylesheet. A light, fresh product
+ * page: a bright hero washed with the logo's coral, sky and mint, white bands
+ * for the argument, the brand red of the logo for what to do next, and nothing
+ * that needs a script. Light and dark follow the reader's system. */
@font-face {
font-family: "Inter";
@@ -25,9 +25,13 @@
--good: #16794c;
--good-soft: #e7f5ee;
--neutral-soft: #eef1f5;
- --hero-bg: #0b1220;
- --hero-text: #e8ecf3;
- --hero-muted: #a3adbf;
+ --sky: #0ea5e9;
+ --sky-soft: #e6f6fd;
+ --hero-bg: #fffdfb;
+ --wash-coral: rgba(255, 138, 128, .30);
+ --wash-sky: rgba(56, 189, 248, .22);
+ --wash-mint: rgba(52, 211, 153, .18);
+ --header-bg: rgba(255, 255, 255, .86);
--radius: 14px;
--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
--width: 1160px;
@@ -50,7 +54,13 @@
--good: #4cc38a;
--good-soft: #15291f;
--neutral-soft: #1c2536;
- --hero-bg: #080d18;
+ --sky: #38bdf8;
+ --sky-soft: #10283a;
+ --hero-bg: #0f1522;
+ --wash-coral: rgba(240, 96, 109, .22);
+ --wash-sky: rgba(56, 189, 248, .14);
+ --wash-mint: rgba(52, 211, 153, .10);
+ --header-bg: rgba(15, 21, 34, .86);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}
}
@@ -79,17 +89,17 @@ code { font-family: var(--mono); font-size: .9em; }
/* ---- the header: the mark, the sections, one action -------------------- */
.top {
position: sticky; top: 0; z-index: 10;
- background: color-mix(in srgb, var(--hero-bg) 92%, transparent);
+ background: var(--header-bg);
backdrop-filter: saturate(1.4) blur(10px);
- border-bottom: 1px solid rgba(255, 255, 255, .08);
+ border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
-.mark { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
+.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.mark img { width: 28px; height: 28px; }
-.mark span { color: var(--hero-muted); font-weight: 500; }
+.mark span { color: var(--muted); font-weight: 500; }
.nav { display: flex; gap: 4px; margin-left: auto; }
-.nav a { padding: 6px 10px; border-radius: 8px; color: var(--hero-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
-.nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
+.nav a { padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
+.nav a:hover { color: var(--ink); background: var(--bg-alt); }
.top .btn { padding: 0 14px; line-height: 36px; font-size: 14px; }
@media (max-width: 1060px) { .nav { display: none; } .top .btn { margin-left: auto; } }
@media (max-width: 420px) { .mark span { display: none; } }
@@ -100,42 +110,41 @@ code { font-family: var(--mono); font-size: .9em; }
font-weight: 600; font-size: 15px; line-height: 46px; text-decoration: none; white-space: nowrap;
transition: background-color .15s, border-color .15s, transform .15s;
}
-.btn-primary { background: var(--brand); color: #fff; }
+.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 28%, transparent); }
.btn-primary:hover { background: var(--brand-strong); color: #fff; }
-.btn-ghost { border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
-.btn-ghost:hover { border-color: #fff; color: #fff; }
+.btn-ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
+.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-outline { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
/* ---- the hero ------------------------------------------------------------ */
.hero {
background:
- radial-gradient(900px 420px at 85% -10%, rgba(208, 60, 74, .35), transparent 60%),
- radial-gradient(700px 400px at -10% 110%, rgba(56, 97, 251, .22), transparent 60%),
+ radial-gradient(900px 460px at 88% -10%, var(--wash-coral), transparent 62%),
+ radial-gradient(760px 440px at -8% 108%, var(--wash-sky), transparent 62%),
+ radial-gradient(620px 320px at 48% 118%, var(--wash-mint), transparent 62%),
var(--hero-bg);
- color: var(--hero-text);
- padding: 88px 0 96px;
+ color: var(--text);
+ padding: 88px 0 104px;
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
-.eyebrow { display: inline-block; margin: 0 0 18px; padding: 5px 14px; border-radius: 999px; line-height: 1.5; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 600; color: var(--hero-muted); }
-.eyebrow b { color: #fff; font-weight: 600; }
-.hero h1 { margin: 0; color: #fff; font-size: clamp(36px, 5vw, 58px); font-weight: 750; letter-spacing: -.035em; }
-.hero h1 em { font-style: normal; color: #ff8b95; }
-.hero .lede { margin: 22px 0 0; max-width: 560px; font-size: 19px; line-height: 1.6; color: var(--hero-muted); }
-.hero .lede a { color: #fff; }
+.hero h1 { margin: 0; color: var(--ink); font-size: clamp(36px, 5vw, 58px); font-weight: 750; letter-spacing: -.035em; }
+.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--brand), #f08a4b); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.hero .lede { margin: 22px 0 0; max-width: 560px; font-size: 19px; line-height: 1.6; color: var(--muted); }
+.hero .lede b { color: var(--ink); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
-.hero .note { margin: 16px 0 0; font-size: 14px; color: var(--hero-muted); }
-.hero .note::before { content: "✓"; margin-right: 8px; color: #6ee7a8; font-weight: 700; }
+.hero .note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
+.hero .note::before { content: "✓"; margin-right: 8px; color: var(--good); font-weight: 700; }
/* the screenshot in a window frame, tilted towards the reader */
.window {
margin: 0; border-radius: 14px; overflow: hidden;
- background: #1a2233; border: 1px solid rgba(255, 255, 255, .1);
- box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .03);
+ background: var(--card); border: 1px solid var(--line);
+ box-shadow: 0 30px 70px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
}
-.window-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #141b29; }
-.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3b4558; }
+.window-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
+.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.window-bar i:first-child { background: #ff5f57; } .window-bar i:nth-child(2) { background: #febc2e; } .window-bar i:nth-child(3) { background: #28c840; }
-.window-bar span { margin-left: 10px; font: 12px var(--mono); color: #7d889b; }
+.window-bar span { margin-left: 10px; font: 12px var(--mono); color: var(--muted); }
.window img { display: block; width: 100%; }
@media (max-width: 920px) {
.hero { padding: 56px 0 64px; }
@@ -154,9 +163,8 @@ code { font-family: var(--mono); font-size: .9em; }
}
.stats li { padding: 22px 22px 20px; border-left: 1px solid var(--line); }
.stats li:first-child { border-left: 0; }
-.stats b { display: block; font-size: 30px; line-height: 1.1; font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
-.stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
-.stats p { margin: 10px 4px 0; font-size: 12px; color: var(--muted); }
+.stats b { display: block; font-size: 28px; line-height: 1.1; font-weight: 750; letter-spacing: -.03em; color: var(--brand); }
+.stats span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 700px) {
.stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats li { border-left: 0; border-top: 1px solid var(--line); }
@@ -188,7 +196,27 @@ code { font-family: var(--mono); font-size: .9em; }
.cards.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1060px) { .cards.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards.five { grid-template-columns: minmax(0, 1fr); } }
+.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+@media (max-width: 1060px) { .cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 560px) { .cards.three { grid-template-columns: minmax(0, 1fr); } }
+.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+@media (max-width: 1060px) { .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 560px) { .cards.four { grid-template-columns: minmax(0, 1fr); } }
.cards.stack { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
+/* a card led by a screenshot of a running sample app */
+.card.shot { display: flex; flex-direction: column; padding: 0 0 22px; overflow: hidden; }
+.card.shot > :not(.shot-img) { margin-left: 22px; margin-right: 22px; }
+.card.shot .icon { margin-top: 18px; }
+.shot-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
+.shot-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .25s; }
+.shot-img:hover img { transform: scale(1.03); }
+.ai-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 36px; }
+.ai-split p { margin: 0; color: var(--muted); }
+.ai-shot { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
+@media (max-width: 860px) { .ai-split { grid-template-columns: minmax(0, 1fr); } }
+.shot-link { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
+.shot-link::after { content: " →"; }
+@media (prefers-reduced-motion: reduce) { .shot-img img { transition: none; } .shot-img:hover img { transform: none; } }
.icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.icon svg { width: 21px; height: 21px; }
@@ -219,6 +247,11 @@ code { font-family: var(--mono); font-size: .9em; }
.table table.two td { color: var(--ink); }
.table td.us { color: var(--ink); background: color-mix(in srgb, var(--good-soft) 55%, transparent); }
.table thead th.us { color: var(--good); }
+.table.compare td { color: var(--muted); }
+.table.compare td.us { color: var(--ink); font-weight: 550; }
+.table.compare td.us::before { content: "✓ "; color: var(--good); font-weight: 800; }
+.table.compare thead th { width: auto; }
+.table .note { display: block; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
/* where it runs: the request path */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 18px; align-items: stretch; margin-top: 40px; }
@@ -242,12 +275,12 @@ code { font-family: var(--mono); font-size: .9em; }
.steps-basis li::before { content: counter(b); position: absolute; left: 0; top: 9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 13px; }
/* the cost */
-.price { padding: 32px; border-radius: var(--radius); background: var(--hero-bg); color: var(--hero-text); }
+.price { padding: 32px; border-radius: var(--radius); background: linear-gradient(135deg, var(--brand) 0%, #f08a4b 100%); color: #fff; box-shadow: var(--shadow); }
.price .big { display: block; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: #fff; }
-.price .big small { font-size: 20px; font-weight: 600; color: var(--hero-muted); letter-spacing: 0; }
+.price .big small { font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, .85); letter-spacing: 0; }
.price ul { margin: 22px 0 0; padding: 0; list-style: none; }
-.price li { padding: 9px 0 9px 28px; position: relative; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--hero-muted); }
-.price li::before { content: "✓"; position: absolute; left: 0; color: #6ee7a8; font-weight: 800; }
+.price li { padding: 9px 0 9px 28px; position: relative; border-top: 1px solid rgba(255, 255, 255, .25); color: #fff; }
+.price li::before { content: "✓"; position: absolute; left: 0; color: #fff; font-weight: 800; }
/* the cost calculator */
.calc-title { margin: 56px 0 0; font-size: 22px; }
@@ -274,19 +307,18 @@ code { font-family: var(--mono); font-size: .9em; }
.calc-actions { margin: 18px 0 0; }
.calc-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.calc-inputs input:disabled, .calc-inputs select:disabled { opacity: .55; }
-.calc-result { border-radius: var(--radius); background: var(--hero-bg); color: var(--hero-text); overflow: hidden; }
+.calc-result { border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.calc-sheet { padding: 8px 24px; }
-.calc-line { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
+.calc-line { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.calc-line:first-child { border-top: 0; }
-.calc-what { color: #fff; font-weight: 600; font-size: 15px; }
-.calc-what small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--hero-muted); }
-.calc-amount { flex: none; font-weight: 700; color: #6ee7a8; font-variant-numeric: tabular-nums; }
-.calc-total { padding: 20px 24px 24px; background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .1); }
-.calc-total div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--hero-muted); }
-.calc-total div:first-child { color: #fff; font-size: 18px; font-weight: 700; }
-.calc-total output { color: #6ee7a8; font-weight: 800; font-size: 18px; }
-.calc-total p { margin: 14px 0 0; font-size: 13px; color: var(--hero-muted); }
-.calc-total a { color: #ff8b95; }
+.calc-what { color: var(--ink); font-weight: 600; font-size: 15px; }
+.calc-what small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--muted); }
+.calc-amount { flex: none; font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
+.calc-total { padding: 20px 24px 24px; background: var(--good-soft); border-top: 1px solid var(--line); }
+.calc-total div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--muted); }
+.calc-total div:first-child { color: var(--ink); font-size: 18px; font-weight: 700; }
+.calc-total output { color: var(--good); font-weight: 800; font-size: 18px; }
+.calc-total p { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.calc-give { grid-column: 1 / -1; padding: 28px; border-radius: var(--radius); background: var(--brand-soft); }
.calc-give h3 { margin: 0 0 8px; font-size: 20px; }
.calc-give p { margin: 0; max-width: 820px; color: var(--ink); }
@@ -347,36 +379,39 @@ code { font-family: var(--mono); font-size: .9em; }
.week span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* the ways in */
-.start { background: var(--hero-bg); color: var(--hero-text); }
-.start h2 { color: #fff; }
-.start .intro { color: var(--hero-muted); }
+.start {
+ background:
+ radial-gradient(800px 380px at 100% 0%, var(--wash-coral), transparent 62%),
+ radial-gradient(700px 360px at 0% 100%, var(--wash-sky), transparent 62%),
+ var(--hero-bg);
+ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
+}
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
@media (max-width: 1000px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .doors { grid-template-columns: minmax(0, 1fr); } }
-.door { display: block; padding: 24px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--hero-text); text-decoration: none; transition: border-color .15s, transform .15s; }
-.door:hover { border-color: var(--brand); color: var(--hero-text); transform: translateY(-2px); }
-.door .icon { background: rgba(240, 96, 109, .16); color: #ff8b95; }
-.door b { display: block; margin-top: 14px; font-size: 17px; color: #fff; }
-.door b::after { content: " →"; color: #ff8b95; }
-.door span { display: block; margin-top: 6px; font-size: 14px; color: var(--hero-muted); }
-.door small { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7d889b; }
+.door { display: block; padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
+.door:hover { border-color: var(--brand); color: var(--text); transform: translateY(-2px); }
+.door b { display: block; margin-top: 14px; font-size: 17px; color: var(--ink); }
+.door b::after { content: " →"; color: var(--brand); }
+.door span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
+.door small { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .door, .btn { transition: none; } .door:hover { transform: none; } }
-/* no strings attached: eight facts on the dark band */
+/* no strings attached: eight facts on the bright band */
.strings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (max-width: 1000px) { .strings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .strings { grid-template-columns: minmax(0, 1fr); } }
-.strings li { padding: 22px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
-.strings b { display: flex; gap: 10px; align-items: baseline; color: #fff; font-size: 16px; line-height: 1.35; }
-.strings b::before { content: "✓"; flex: none; color: #6ee7a8; font-weight: 800; }
-.strings span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--hero-muted); }
+.strings li { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
+.strings b { display: flex; gap: 10px; align-items: baseline; color: var(--ink); font-size: 16px; line-height: 1.35; }
+.strings b::before { content: "✓"; flex: none; color: var(--good); font-weight: 800; }
+.strings span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }
/* the foot */
-.foot { padding: 36px 0 44px; background: var(--hero-bg); color: var(--hero-muted); font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
+.foot { padding: 36px 0 44px; background: var(--bg-alt); color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
-.foot a { color: var(--hero-text); text-decoration: none; }
-.foot a:hover { color: #fff; text-decoration: underline; }
+.foot a { color: var(--ink); text-decoration: none; }
+.foot a:hover { color: var(--brand); text-decoration: underline; }
@media print {
.top, .skip, .hero .actions, .start, .foot { display: none; }
diff --git a/test/site.test.mjs b/test/site.test.mjs
index ed0d9d9..4cdf60d 100644
--- a/test/site.test.mjs
+++ b/test/site.test.mjs
@@ -6,7 +6,6 @@ import { test } from "node:test";
import assert from "node:assert/strict";
import fs from "node:fs";
import path from "node:path";
-import { factsIn, splitFact } from "../src/lib/facts.mjs";
const DIST = path.join(import.meta.dirname, "..", "dist");
const BASE = "/test-docs/";
@@ -55,9 +54,8 @@ test("the canonical address is the published one", () => {
assert.match(html, //);
});
-test("the figures are read from the README block, never typed", () => {
- const readme = "1,530 ABAP unit tests · 92 JS unit specs · 25 workflows · ABAP 7.02 → Cloud — counted from this repository by npm run facts";
- assert.deepEqual(factsIn(readme), ["1,530 ABAP unit tests", "92 JS unit specs"]);
- assert.deepEqual(splitFact("1,530 ABAP unit tests"), { value: "1,530", label: "ABAP unit tests" });
- assert.deepEqual(factsIn("no block here"), []);
+test("the page speaks to decision makers, not reviewers", () => {
+ // the ids stay addresses; the words a reader sees never say "evaluate" or "problem"
+ const visible = html.replace(/[\s\S]*?<\/head>/, "").replace(/<[^>]+>/g, " ");
+ assert.doesNotMatch(visible, /evaluat|problem/i);
});
The objections
-The questions a review board raises, with the honest answer to each
+FAQ
+What decision makers ask, answered
{objections.map(([q, a], i) => )}
@@ -316,9 +359,9 @@ const doors = [
{q}
-
How to evaluate it in a week
-Decide from the screen, not from the slide
-Take one real screen and review it the way your organization reviews ABAP.
+Get started
+Your first real app in a week
+No pilot budget, no vendor workshop: take one real screen and build it with your own team.
- {week.map(([b, t]) =>
- {b}{t} )}