# Content & editing guide — CYBER CIBIL DPDP website Everything you need to edit lives in **one file**: `assets/js/content.js`. Anything you leave as `[BRACKETED PLACEHOLDER]` renders on the site with a dashed amber underline, so unfinished edits are easy to spot (and hard to ship by accident). This guide lists every placeholder and how to update the legal facts. --- ## 1. Company placeholders (content.js → `company`) | Placeholder | Where it appears | Notes | |---|---|---| | `[COMPANY NAME]` | Header, footer, titles, copy everywhere | Also update the `` tags in the 8 HTML files if you want the brand in the tab title. | | `[LOGO]` | Header/footer brand mark | Put your file at e.g. `assets/img/logo.svg`, then set `company.logoSrc`. Until then a built-in shield mark is shown. | | `[BRAND COLORS]` | Entire palette | Edit the CSS custom properties at the top of `assets/css/styles.css` (`:root`). Navy, cyan, violet and amber tokens drive everything. | | `[CONTACT EMAIL]` / `[CONTACT PHONE]` / `[CITY, INDIA]` | Contact section, footer | `company.contact.*`. The email link auto-builds a `mailto:` once filled. | | `[BOOKING LINK]` | Every CTA button | `company.bookingLink`. While it stays a bracket placeholder, CTAs point to the contact form instead — no dead links. | | `[FORM ENDPOINT]` | Inquiry form | `company.formEndpoint`. Must accept a JSON `POST` and return 2xx. While it is a placeholder, the form honestly reports that it is not connected and offers the email address — it never fakes success. | | `[SERVICE DESCRIPTIONS]` | Services page cards | `services` array: edit problem/deliverables per card. Cards are drafts until you remove the draft banner (`servicesDraftNote`). | | `[CLIENT PROOF]` | Home “Client proof” card | Add **only real, permissioned** case studies, logos or metrics. Never invent proof. | | `[ABOUT …]` | Home “What we do” | `company.aboutBlurb`. | ## 2. Legal facts & “Last verified” (content.js → `legal`, `timeline`, `lastVerified`) Current verified state (as of **25 September 2026**): - **In force since 13 Nov 2025** — Act ss. 1(2), 2, 18–26, 35, 38–43, 44(1)&(3) + Rules 1, 2, 17–21 (Board machinery). - **13 Nov 2026** — s. 6(9), s. 27(1)(d) + Rule 4 (Consent Manager framework). - **13 May 2027** — ss. 3–17, 27–34, 36–37, 44(2) + Rules 3, 5–16, 22–23 (main duties & penalties). To update after a new notification: 1. Edit the `timeline` array (dates, titles, text, `status`: `"past"`, `"live"` or `"scheduled"`). 2. Update `lastVerified` and `lastVerifiedISO` — this date drives the “last verified” chips on every page and the “You are here” marker on the timeline. 3. Re-check the claims in `actTopics`, `penaltiesNotes` and `faqs` against the official sources, and update if the law has moved. Primary sources (also linked in the footer and Resources page): - DPDP Act, 2023 — https://www.indiacode.nic.in/bitstream/123456789/22037/2/a2023-22.pdf - Commencement notification G.S.R. 843(E) — https://egazette.gov.in/WriteReadData/2025/267647.pdf - DPDP Rules, 2025 G.S.R. 846(E) — https://www.meity.gov.in/static/uploads/2025/11/53450e6e5dc0bfa85ebd78686cadad39.pdf - MeitY/PIB statements — https://www.pib.gov.in/PressReleasePage.aspx?PRID=2261823&lang=1®=3 ## 3. Editing sector examples & penalties - `sectors[]` — one entry per tab: flows, illustrative scenario, duty text, penalty category id, draft add-on, and `examples` (per violation category) used by the penalties explorer's sector filter. Keep scenarios labelled illustrative; never imply sector-specific penalty rates. - `penalties[]` — the five statutory maximums from the Act's Schedule. The required disclaimer lives in `penaltiesDisclaimer`. Do not sum categories or present a leak as proof of inadequate safeguards. - `scheduleExtra` — the Data-Principal-duties (₹10,000) and voluntary-undertaking rows shown beside the full Schedule link. ## 4. Editing the self-assessment `assessment[]` — each question maps to a journey step (`step` index 0–4) and an `action` that appears in the generated checklist when the answer is not “Yes”. Keep the output a practical checklist — never a compliance score or fine prediction (the page says so, and it should stay true). ## 5. Privacy notice `privacyNotice` — a draft template for this website's own data handling. Replace bracketed parts and have it reviewed before publishing; update `privacyNotice.updated`. ## 6. Site structure ``` index.html Home (animated data-flow hero, stats, teasers) the-act.html Understand the Act — 12 clickable explainers timeline.html Phased commencement + filters + "You are here" services.html Draft service cards sectors.html Sector tabs (supports ?sector=bfsi deep links) penalties.html Filters, bar chart, Schedule extras readiness.html 5-step stepper + self-assessment checklist resources.html FAQ, sources panel, inquiry form, privacy notice assets/css/styles.css Design system ([BRAND COLORS] at the top) assets/js/content.js ← everything editable assets/js/app.js Rendering + interactions assets/img/favicon.svg Favicon ``` No build step, no dependencies. Open `index.html` directly or serve the folder with any static server. ## 7. Pre-publication checklist - [ ] Replace every `[BRACKETED]` placeholder in `content.js` (search for `[`). - [ ] Confirm or rewrite the draft service cards; remove the draft banner. - [ ] Connect `[FORM ENDPOINT]` (test it sends) or rely on email/booking. - [ ] Have the privacy notice reviewed; set its date. - [ ] Re-verify legal facts against the three primary sources and update `lastVerified`. - [ ] Optional: add real client proof, og-image, analytics with consent. ## Visual readiness report The readiness assessment has 30 checks: the original 10 DPDP checks in `assets/js/content.js`, plus 10 cybersecurity and 10 IT operations checks in `assets/js/readiness-report.js`. Edit their question and action pairs together. The report counts Yes as in place, Partly/unsure and No as needing attention, and excludes N/A from the in-place percentage. It is self-reported, not a compliance or credit score. The visual download is a standalone HTML file containing its own SVG chart and styles; open it and choose Print / Save PDF to export a PDF. Answers remain in page memory and reset on reload. Illustrations are local SVG files in `assets/img/`. ## ICN branding and responsive layouts The original ICN logo is in `assets/img/icn-logo.jpeg` and appears in all page headers and footers. `assets/js/report-brand.js` embeds the same image for offline reports. If replacing the logo, update both files. Report headers and footers include www.icn3.com. Navigation switches to a menu below 1280px; the home hero stacks at 1050px. Long badges wrap, and assessment answer buttons use two columns on phones. ## Query delivery The query form uses https://formsubmit.co/ajax/info@icn3.com. Before launch, submit a test query and confirm the activation email in info@icn3.com (check spam). After activation, test receipt in that mailbox and check Reply goes to the entered visitor email. The service sends the email; the visitor address is Reply-To, not an authenticated From address. No SMTP password is placed in the website. Contact location: Kolkata, West Bengal. Third-party delivery is disclosed beside the form and in the privacy notice. JavaScript-disabled visitors use the standard FormSubmit POST action. ### Submission verification fix FormSubmit submissions now use a validated native POST rather than cross-origin AJAX, allowing its CAPTCHA and activation pages to display. The hidden `_url` is the hosted page URL, with https://cybercibil.site.je/resources.html as the local-file/local-preview fallback. Update that fallback if the production domain changes. The visitor email populates `_replyto`. Verify receipt after completing inbox activation; a navigation to FormSubmit alone does not prove email delivery. ## Cyber Insurance readiness group The assessment now contains 40 checks in four groups of ten. The additional Cyber Insurance questions cover risk decisions, policy records, coverage review, limits and deductibles, proposal accuracy, security conditions, incident notification, response approvals, claim evidence and renewal changes. These are preparedness checks, not coverage or claim-eligibility determinations. Use N/A for policy-specific questions where there is no policy. The group is included automatically in report summaries, actions and the answer audit; chart totals and progress use the actual question count. ## Home penalties infographic The homepage penalty explorer sits immediately after the live countdown. It reads the same `SITE.penalties` entries as the full penalties page. Five equal arcs represent categories, not proportional amounts. Click an arc or category button to update the amount and explanation; arrow keys switch categories. Presentation and interactions live in `assets/js/home-penalties.js`. The full penalties page retains its detailed sector filters.