clickproof

byparth shah

Build a professional SaaS app called ClickProof — AI Content Analyzer. FEATURES: - Analyze text, images, and public URLs. - Detect spelling, readability, and branding issues. - Suggest improvements and compare original vs improved content. - Save projects, create brand profiles, and export PDF reports. - Secure login, dashboard, and project history. - UPI ID, payment QR code, Pay Now button, and secure payment verification. - Current location using GPS permission, map display, and manual location entry. - Live date and time with automatic timezone detection. PRICING: Free: 5 analyses/month. Pro: ₹199 for 30 days, 100 analyses. Agency: ₹599 for 30 days, 500 analyses. ADMIN: Manage users, plans, and verified payments. DESIGN: Premium dark navy theme, blue-purple accents, modern cards, animations, and mobile-friendly layout. TECHNICAL: Build a working app, not just a landing page. Use secure AI integration, protect API keys and user data, enforce server-side limits, verify payments before activating plans, and never fake results or payments. Identify features requiring external APIs.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for clickproof

1. Introduction

ClickProof — AI Content Analyzer is a professional SaaS application for Indian creators, marketers, agencies, and small brand owners who need verifiable proof that their copy is clean before it ships. The product analyzes text, images, and public URLs to detect spelling, readability, and branding issues, suggests improvements, and presents an original-versus-improved comparison that reads like an audited artefact rather than a chatbot reply. Users save projects, maintain brand profiles, export PDF reports, and manage a monthly analysis quota tied to a Free, Pro, or Agency plan paid via UPI. A secure dashboard, project history, live date/time with automatic timezone detection, and GPS-based location with map display round out the working application.

The audience is practical, price-aware, mobile-first, and slightly sceptical of AI tools. They want visible evidence — a receipt — not a black box. The product therefore never fakes analysis results or payments, enforces analysis limits server-side, protects API keys and user data, and verifies payments before activating any paid plan.

Page 1 of 30

2. System Overview

ClickProof is a working full-stack SaaS application, not a landing page. It comprises:

  • Anonymous entry surfaces — a public Landing page and a Login page that also supports self-service enrollment.
  • Authenticated application surfaces — Dashboard, Analyze, Analysis Results, Project History, Brand Profiles, Plans & Billing, and Location.
  • A role-restricted Admin surface for managing users, plans, and verified payments.
  • A shared backend that owns identity, project and brand-profile persistence, server-side quota enforcement, secure AI integration with protected API keys, payment submission and verification state, and PDF report generation.
  • External integrations — an AI provider for content analysis, a UPI payment collection mechanism (UPI ID, scannable payment QR, Pay Now), a map tile provider for location display, and the browser Geolocation API for GPS.
Page 2 of 30

2a. Product Interpretation and Delivery Boundary

ClickProof is delivered as a first-party web application with application-owned identity. Anonymous visitors can read the Landing page and reach the Login page to sign in or self-enroll; every other destination requires an authenticated session. The Administrator role is the only differentiated access boundary: the Admin surface is restricted to administrators, while all other authenticated surfaces are available to any signed-in user. Analysis, project, brand-profile, and billing state is privately owned by the signed-in user who created it.

Current delivery covers the complete feature set in the authoritative requirement thread: text/image/URL analysis, issue detection, improvement comparison, project saving, brand profiles, PDF export, secure login, dashboard, project history, UPI payment with verification, GPS/map/manual location, live date/time with timezone detection, tiered pricing, and admin management. No future-horizon features are declared by the source; anything not listed here is out of scope for this generation.

Features requiring external APIs (explicitly identified per the source constraint):

FeatureExternal dependency
Content analysis (text, image, URL)AI provider API (server-side only; keys never exposed to the client)
Public URL fetching and text extractionOutbound HTTP fetch of the public URL
Payment collectionUPI payment rail (UPI ID / scannable QR / Pay Now)
Payment verificationAdministrator review of submitted payment evidence (no automated gateway assumed)
Map displayMap tile provider
GPS current locationBrowser Geolocation API with user permission
Timezone detectionBrowser timezone API
Page 3 of 30

2c. Page Content and Component Coverage

Landing

  • Information/state: Anonymous marketing surface explaining ClickProof — AI Content Analyzer, its audience, its analysis capabilities (text, image, public URL), issue detection (spelling, readability, branding), original-vs-improved comparison, projects, brand profiles, PDF export, and the three pricing tiers (Free 5 analyses/month; Pro ₹199 for 30 days with 100 analyses; Agency ₹599 for 30 days with 500 analyses).
  • Primary actions: "Run a free analysis" CTA leading to Login; navigation to Login.
  • Supporting actions: Scroll to pricing band; read feature sections.
  • Domain entities: Plan (display only), feature descriptions.
  • Component responsibilities: Hero block with oversized headline and quoted "AI CONTENT ANALYZER" tag; overlapping analysis-receipt card (illustrative, clearly non-live); hazard-stripe band; pricing band with the three tiers; feature sections with quoted labels.
  • States: Loading (static content, no data fetch required); empty/success/error not applicable to static marketing content; recovery not applicable.
Page 4 of 30

Login

  • Information/state: Anonymous identity-access surface offering sign-in for returning users and self-service enrollment for new users.
  • Primary actions: Sign in with credentials; create a new account.
  • Supporting actions: Switch between sign-in and enrollment modes; view validation errors.
  • Domain entities: User account (email/identifier, credential).
  • Component responsibilities: Credential form, mode toggle, inline validation, submit control.
  • States: Loading (submitting); empty (blank form); success (redirect to Dashboard); error (invalid credentials, duplicate enrollment, validation failure) with inline recovery; recovery (retry, switch mode).

Dashboard

  • Information/state: Authenticated summary of the user's projects and analysis activity, current plan and remaining monthly analyses, live date and time with automatic timezone detection, and a location chip.
  • Primary actions: Start a new analysis (to Analyze); open a project (to Project History / Analysis Results).
  • Supporting actions: Navigate to Brand Profiles, Plans & Billing, Location, Project History.
  • Domain entities: User, Project, Analysis, Plan, quota counters, location.
  • Component responsibilities: Left rail with quoted uppercase nav labels; top bar with live clock, detected timezone, and location chip; project/activity summary cards; quota indicator.
  • States: Loading (fetching summary); empty (no projects yet, with CTA to Analyze); success (populated summary); error (fetch failure with retry); recovery (retry).
Page 5 of 30

Analyze

  • Information/state: Focused submission surface for text, image, or public URL content, with optional brand-profile selection for branding-issue detection, and a visible remaining-quota indicator.
  • Primary actions: Submit content for analysis ("Run analysis").
  • Supporting actions: Choose input type (text / image / URL); attach an image; paste a public URL; select a brand profile.
  • Domain entities: Analysis request, input content, Brand Profile, quota.
  • Component responsibilities: Input-type selector, text area, image upload, URL field, brand-profile selector, quota display, submit control.
  • States: Loading (analysis in progress); empty (no input yet); success (navigate to Analysis Results); error (quota exhausted, invalid URL, unsupported image, AI provider failure) with clear recovery; recovery (adjust input or upgrade plan).
Page 6 of 30

Analysis Results

  • Information/state: Results for a completed analysis: spelling, readability, and branding issues; suggested improvements; original-vs-improved comparison; save-to-project control; PDF export control.
  • Primary actions: Review issues and suggestions; save the analysis to a project; export a PDF report.
  • Supporting actions: Toggle highlighted diff between original and improved halves; navigate back to Analyze.
  • Domain entities: Analysis, Issue (spelling/readability/branding), Suggestion, Project, PDF report.
  • Component responsibilities: Score gauges for spelling/readability/branding; issue list with quoted labels; two-up original/improved comparison panels; save control; export control.
  • States: Loading (fetching results); empty (no issues found — success state); success (results rendered); error (results unavailable, export failure) with retry; recovery (retry fetch or export).

Project History

  • Information/state: List of the user's saved analysis projects with timestamps and status, revisitable to their results.
  • Primary actions: Open a saved project's results.
  • Supporting actions: Filter/sort the list; start a new analysis.
  • Domain entities: Project, Analysis.
  • Component responsibilities: Project list, per-project summary, open action.
  • States: Loading; empty (no saved projects, CTA to Analyze); success (populated list); error (fetch failure with retry); recovery (retry).
Page 7 of 30

Brand Profiles

  • Information/state: The user's brand profiles defining branding standards used in branding-issue detection.
  • Primary actions: Create a brand profile; edit an existing profile.
  • Supporting actions: Select a profile as default for analyses; delete a profile.
  • Domain entities: Brand Profile (name, branding standards).
  • Component responsibilities: Profile list, create/edit form, default selector.
  • States: Loading; empty (no profiles, CTA to create); success (populated); error (save/fetch failure with retry); recovery (retry).

Plans & Billing

  • Information/state: The three plans (Free 5 analyses/month; Pro ₹199 for 30 days with 100 analyses; Agency ₹599 for 30 days with 500 analyses), the user's current plan and remaining analyses, the UPI ID, a scannable payment QR code, a Pay Now button, and the status of any submitted payment (e.g., "PAYMENT PENDING").
  • Primary actions: Select a plan; pay via UPI ID, QR code, or Pay Now; submit payment details for verification.
  • Supporting actions: View current plan and quota; view payment status.
  • Domain entities: Plan, Payment submission, verification status.
  • Component responsibilities: Plan cards, UPI ID display, QR bezel, Pay Now control, payment submission form, status indicator.
  • States: Loading (fetching plan/status); empty (no payment submitted); success (payment submitted, pending verification); error (submission failure) with retry; recovery (resubmit).
Page 8 of 30

Location

  • Information/state: The user's current location via GPS permission, a map display, and a manual location entry option.
  • Primary actions: Request GPS current location; enter a location manually.
  • Supporting actions: View the map; update the location chip shown in the top bar.
  • Domain entities: Location (coordinates or manual entry).
  • Component responsibilities: GPS request control, map view, manual entry field, permission/error messaging.
  • States: Loading (acquiring GPS); empty (no location yet); success (map centered on location); error (permission denied, GPS unavailable) with manual-entry fallback; recovery (manual entry or retry).

Admin

  • Information/state: Role-restricted management surface for users, plans, and submitted payments awaiting verification.
  • Primary actions: Manage users; manage plans; review and verify submitted payments (which activates the corresponding plan).
  • Supporting actions: View payment evidence; view user and plan lists.
  • Domain entities: User, Plan, Payment submission, verification decision.
  • Component responsibilities: User management list, plan management list, payment review queue with verify action.
  • States: Loading; empty (no pending payments); success (verified, plan activated); error (action failure with retry); recovery (retry).
Page 9 of 30

3. Functional Requirements

FR-1 — Analyze text content (explicit) As a Content Analyst, I should submit text content for analysis so that I receive spelling, readability, and branding issue detection.

  • Trigger/input: text entered on Analyze; submit.
  • Observable result: Analysis Results showing detected issues.
  • Access: authenticated.
  • Failure/recovery: AI provider failure surfaces an error with retry; quota exhaustion blocks submission with an upgrade path.
  • Continuation: review results, save to project, or export PDF.

FR-2 — Analyze images (explicit) As a Content Analyst, I should submit an image for analysis so that I receive spelling, readability, and branding issue detection on its content.

  • Trigger/input: image upload on Analyze; submit.
  • Observable result: Analysis Results for the image.
  • Access: authenticated.
  • Failure/recovery: unsupported image or provider failure surfaces an error with retry.
  • Continuation: review, save, or export.
Page 10 of 30

FR-3 — Analyze public URLs (explicit) As a Content Analyst, I should submit a public URL so that ClickProof fetches and analyzes its content.

  • Trigger/input: public URL entered on Analyze; submit.
  • Observable result: Analysis Results for the extracted content.
  • Access: authenticated.
  • Failure/recovery: unreachable or non-public URL surfaces an error with retry.
  • Continuation: review, save, or export.

FR-4 — Detect spelling, readability, and branding issues (explicit) As a Content Analyst, I should see spelling, readability, and branding issues identified in analyzed content so that I know what to fix.

  • Observable result: categorized issue list with quoted labels (SPELLING / READABILITY / BRANDING).
  • Failure/recovery: if no issues are found, an explicit clean-result state is shown (never a fabricated issue).
  • Continuation: proceed to suggested improvements.

FR-5 — Suggest improvements and compare original vs improved (explicit) As a Content Analyst, I should receive suggested improvements and an original-vs-improved comparison so that I can see exactly what changed.

  • Observable result: two-up comparison with removed and inserted copy highlighted.
  • Failure/recovery: if suggestions cannot be generated, an error is shown with retry; no fabricated suggestions.
  • Continuation: save to project or export PDF.
Page 11 of 30

FR-6 — Save projects (explicit) As a Content Analyst, I should save an analysis as a project so that I can revisit it later.

  • Trigger/input: save action on Analysis Results.
  • Observable result: project appears in Project History.
  • Failure/recovery: save failure surfaces an error with retry.
  • Continuation: open from Project History.

FR-7 — Create brand profiles (explicit) As a Brand Manager, I should create and maintain brand profiles defining branding standards so that branding-issue detection stays consistent with the brand.

  • Trigger/input: create/edit form on Brand Profiles.
  • Observable result: profile saved and selectable on Analyze.
  • Failure/recovery: save failure surfaces an error with retry.
  • Continuation: select profile for future analyses.

FR-8 — Export PDF reports (explicit) As a Content Analyst, I should export a PDF report of an analysis so that I have a shareable record.

  • Trigger/input: export action on Analysis Results.
  • Observable result: PDF downloaded containing the analysis.
  • Failure/recovery: export failure surfaces an error with retry.
  • Continuation: share or archive the report.
Page 12 of 30

FR-9 — Secure login and self-service enrollment (required_inference) As any user, I should sign in securely or enroll myself so that I can access my dashboard, projects, and analysis features.

  • Trigger/input: credentials on Login.
  • Observable result: authenticated session; redirect to Dashboard.
  • Access: anonymous entry on Login.
  • Failure/recovery: invalid credentials or duplicate enrollment surfaces an inline error with retry.
  • Continuation: proceed to Dashboard.

FR-10 — Dashboard summary (explicit) As a Content Analyst, I should see a secure dashboard summarizing my projects and analysis activity so that I can orient myself quickly.

  • Observable result: summary cards, quota indicator, live clock, timezone, location chip.
  • Failure/recovery: fetch failure surfaces an error with retry.
  • Continuation: start an analysis or open a project.

FR-11 — Project history (explicit) As a Content Analyst, I should view my project history so that I can revisit past analyses.

  • Observable result: list of saved projects with open action.
  • Failure/recovery: fetch failure surfaces an error with retry.
  • Continuation: open a project's results.
Page 13 of 30

FR-12 — UPI payment initiation (explicit) As a Paying Subscriber, I should see the UPI ID, a scannable payment QR code, and a Pay Now button so that I can pay for a plan.

  • Trigger/input: select plan on Plans & Billing; pay via UPI ID, QR, or Pay Now.
  • Observable result: payment submission recorded with pending status.
  • Failure/recovery: submission failure surfaces an error with retry.
  • Continuation: await administrator verification.

FR-13 — Secure payment verification before activation (explicit + required_inference) As a Paying Subscriber, I should have my plan activated only after my payment is verified so that activation is never faked.

  • Trigger/input: payment submitted; administrator verifies on Admin.
  • Observable result: plan activated; quota updated; status reflects verification.
  • Failure/recovery: rejected payment leaves plan unchanged with a visible status.
  • Continuation: use the activated plan's quota.

FR-14 — Administrator verifies payments (required_inference) As an Administrator, I should review and verify submitted payments so that only genuine payments activate plans.

  • Trigger/input: pending payment in Admin queue; verify action.
  • Observable result: payment marked verified; corresponding plan activated for the user.
  • Failure/recovery: action failure surfaces an error with retry.
  • Continuation: continue managing users and plans.
Page 14 of 30

FR-15 — Administrator manages users (explicit) As an Administrator, I should manage users so that accounts remain accurate.

  • Observable result: user records updated.
  • Failure/recovery: action failure surfaces an error with retry.

FR-16 — Administrator manages plans (explicit) As an Administrator, I should manage plans so that the Free, Pro, and Agency offerings remain accurate.

  • Observable result: plan records updated.
  • Failure/recovery: action failure surfaces an error with retry.

FR-17 — Server-side monthly quota enforcement (required_inference) As the system, I should check the user's monthly analysis quota server-side before each analysis so that limits cannot be bypassed.

  • Observable result: analysis proceeds only if quota remains; otherwise a quota-exhausted error is returned.
  • Failure/recovery: quota-exhausted state offers an upgrade path.

FR-18 — GPS current location with map and manual entry (explicit) As a user, I should see my current location via GPS permission on a map, or enter it manually, so that my location is known.

  • Trigger/input: GPS permission grant on Location; or manual entry.
  • Observable result: map centered on location; location chip updated.
  • Failure/recovery: permission denied or GPS unavailable falls back to manual entry.
  • Continuation: location persists in the top bar.
Page 15 of 30

FR-19 — Live date and time with timezone detection (explicit) As a user, I should see live date and time with automatic timezone detection so that I always know the current local time.

  • Observable result: live clock and detected timezone in the top bar.
  • Failure/recovery: if detection fails, a sensible fallback timezone is shown.

FR-20 — Secure AI integration with protected keys (explicit) As the system, I should call the AI provider server-side with protected API keys so that keys and user data are never exposed to the client.

  • Observable result: analysis results returned without exposing credentials.
  • Failure/recovery: provider failure surfaces an error; no fabricated results.

FR-21 — Never fake results or payments (explicit) As the system, I should never fabricate analysis results or payment success so that users can trust the output.

  • Observable result: results reflect real AI output; plan activation reflects real verification.

4. User Personas

Page 16 of 30

Content Analyst (end user)

  • Product context: Analyzes text, images, and public URLs to detect spelling, readability, and branding issues, reviews suggested improvements with an original-vs-improved comparison, and saves projects and exports PDF reports. Works within a monthly analysis quota tied to their plan and keeps project history in a dashboard.
  • Primary goal: Ship clean copy with visible proof of what changed.
  • Distinct responsibilities: Submitting content for analysis; reviewing issues and suggestions; saving projects; exporting PDF reports; monitoring quota.
  • Inputs/decisions: Input type (text/image/URL), content, whether to save or export.
  • Interactions: With the AI provider (indirectly, via the system); with the Administrator (indirectly, via plan activation).
  • Observable success: Analysis Results rendered with real issues and a comparison; project saved; PDF downloaded.
Page 17 of 30

Brand Manager

  • Product context: Creates and maintains brand profiles that define the branding standards used when analyzing content, so recurring analyses stay consistent with the brand. Uses the same analysis and project workflows as other users but owns the brand-profile setup.
  • Primary goal: Keep branding-issue detection aligned with the brand's standards.
  • Distinct responsibilities: Creating and editing brand profiles; selecting a profile for analyses.
  • Inputs/decisions: Branding standards; default profile selection.
  • Interactions: With Content Analysts (shared analysis workflow); with the system (branding-issue detection).
  • Observable success: Brand profile saved and applied to analyses.

Paying Subscriber

  • Product context: Selects a plan (Free, Pro ₹199/30 days with 100 analyses, Agency ₹599/30 days with 500 analyses), pays via UPI ID / payment QR code / Pay Now, and gains plan activation only after secure payment verification. May also submit payment verification details for review.
  • Primary goal: Activate a paid plan only after genuine payment verification.
  • Distinct responsibilities: Selecting a plan; paying via UPI; submitting payment details; tracking verification status.
  • Inputs/decisions: Plan choice; payment method (UPI ID, QR, Pay Now).
  • Interactions: With the Administrator (who verifies the payment).
  • Observable success: Plan activated after verification; quota updated.
Page 18 of 30

Administrator

  • Product context: Manages users, plans, and verified payments, including reviewing and verifying submitted payments before plans are activated.
  • Primary goal: Keep accounts, plans, and payment verification accurate and trustworthy.
  • Distinct responsibilities: Managing users; managing plans; reviewing and verifying payments.
  • Inputs/decisions: Verification decisions on submitted payments; user and plan edits.
  • Interactions: With Paying Subscribers (whose payments they verify).
  • Observable success: Payments verified and plans activated; user and plan records accurate.

5. Core User Flows

Page 19 of 30

Flow A — Content Analyst analyzes text and exports a report

  1. Content Analyst opens Landing and selects "Run a free analysis", arriving at Login.
  2. Signs in (or enrolls) on Login; lands on Dashboard.
  3. Dashboard shows projects, quota, live clock, timezone, and location chip.
  4. Opens Analyze, selects text input, pastes content, optionally selects a brand profile, and submits.
  5. System checks monthly quota server-side; if exhausted, Analyze shows a quota error with an upgrade path.
  6. System calls the AI provider server-side with protected keys; Analysis Results renders spelling, readability, and branding issues with quoted labels and score gauges.
  7. Content Analyst reviews the original-vs-improved comparison, toggling highlighted diffs.
  8. Saves the analysis as a project; it appears in Project History.
  9. Exports a PDF report; the file downloads.
  10. Continuation: returns to Dashboard or starts another analysis.

Flow B — Content Analyst analyzes an image or public URL

  1. From Analyze, selects image upload or URL input.
  2. Submits; system fetches/extracts content (for URLs) and calls the AI provider.
  3. Analysis Results renders issues and comparison.
  4. On failure (unsupported image, unreachable URL, provider error), an error with retry is shown; no fabricated results.
  5. Continuation: save, export, or retry.
Page 20 of 30

Flow C — Brand Manager creates a brand profile

  1. Brand Manager signs in and opens Brand Profiles.
  2. Creates a profile defining branding standards; saves.
  3. Profile becomes selectable on Analyze; branding-issue detection uses it.
  4. On save failure, an error with retry is shown.
  5. Continuation: run an analysis with the profile selected.

Flow D — Paying Subscriber pays via UPI and awaits verification

  1. Paying Subscriber opens Plans & Billing and reviews Free, Pro (₹199/30 days, 100 analyses), and Agency (₹599/30 days, 500 analyses).
  2. Selects Pro or Agency; sees the UPI ID, scannable payment QR, and Pay Now button.
  3. Pays via UPI ID, QR, or Pay Now; submits payment details for verification.
  4. Status shows "PAYMENT PENDING"; plan is not yet activated.
  5. On submission failure, an error with retry is shown.
  6. Continuation: awaits administrator verification.

Flow E — Administrator verifies a payment and activates a plan

  1. Administrator signs in and opens Admin.
  2. Reviews the pending payment queue.
  3. Verifies a submitted payment; the corresponding plan is activated for the Paying Subscriber and quota updated.
  4. On action failure, an error with retry is shown.
  5. Continuation: continues managing users and plans.
Page 21 of 30

Flow F — Administrator manages users and plans

  1. Administrator opens Admin.
  2. Edits user records or plan records.
  3. Changes persist; on failure, an error with retry is shown.

Flow G — User sets location

  1. User opens Location.
  2. Grants GPS permission; map centers on current location; location chip updates.
  3. If permission is denied or GPS unavailable, enters location manually.
  4. Continuation: location persists in the top bar.

Flow H — User views live date and time

  1. User sees the live clock and detected timezone in the top bar on any authenticated surface.
  2. If detection fails, a fallback timezone is shown.
Page 22 of 30

6. Visuals Colors and Theme

Muse: Virgil Abloh — remixed proof: industrial labels, quoted scores, safety-orange signal on deep navy.

Headline: "PROOF YOUR COPY BEFORE IT SHIPS" — with "PROOF" in safety orange.

Palette (dark mode):

  • Background: #0A1024 (deep navy, ~65% of surface)
  • Surface: #121A33 (raised cards, 1px #2A3350 hairline)
  • Text: #F2F4FA (AAA at body size)
  • Primary: #6C5CE7 (blue-purple; links, active nav, focus rings, score bars, ~20%)
  • Accent: #FF5A1F (safety orange; single most important action per screen, hazard stripes, headline score, ~8%)
  • Muted: #8B93AD (14px+ on surface only; never for critical labels)

Typography:

  • Headings: Archivo 700–800, uppercase for labels and quoted tags, tight -0.02em tracking on display sizes.
  • Body: Archivo.
  • Scale (1.333 modular): 72/54/40/30/22/18/16/14.
  • Display: clamp(40px, 8vw, 96px); section heads clamp(28px, 4vw, 48px); card titles 20–24px; body 16px/1.6; labels 12px uppercase tracked +0.16em; scores 56–72px tabular.
Page 23 of 30

Shape language: Hard-edged industrial framing — 2px and 4px borders, square corners (radius 2px max), hazard-stripe bands as section dividers, exposed hairline grid lines and corner crop marks on analysis cards, tag-shaped chips with a punched hole detail, zip-tie-like vertical rule connecting timeline items. Controls rectangular with 2px borders; the only rounded element is the circular payment QR bezel.

Layout: Strict 12-column grid with visible 1px column rules on Landing and Dashboard. Landing: asymmetric 7/5 split — oversized headline left, overlapping "live analysis receipt" card right. App shell: 240px left rail with uppercase quoted nav labels; top bar with live date/time, timezone, and location chip; content in a single wide column with results in a two-up original/improved comparison split by a vertical hazard rule. Mobile collapses to one column with quoted labels as section headers.

Imagery: The interface is the imagery — diff-highlighted copy blocks, score dials as instrument gauges, schematic pipeline diagrams, monospace-ish code panels for extracted URL text, and a single high-contrast macro photo of paper with orange markup on the pricing band. No stock people, no gradient blobs, no 3D renders. Payment QR in a dark bezel with an orange corner bracket; map is a dark-tiled map with an orange location pin.

Page 24 of 30

7. Signature Design Concept

The public Landing page is a full-bleed deep-navy field split 7/5 by a visible 1px column rule. Left: an oversized flush-left headline in Archivo 800, clamp(40px, 8vw, 96px), reading "PROOF YOUR COPY BEFORE IT SHIPS" with "PROOF" in safety orange and a small quoted "AI CONTENT ANALYZER" tag pinned above it like a garment tag. Directly beneath, a single orange rectangular CTA "Run a free analysis" with a hairline "5 free analyses / month" caption. Right: an overlapping "analysis receipt" card — dark surface, 2px border, corner crop marks — showing a score gauge at 72px tabular numerals, the three quoted labels (SPELLING / READABILITY / BRANDING) with pass-fail stamps, and a two-line original→improved diff with orange strikethrough and purple insertion. A hazard-stripe band runs edge-to-edge under the hero. No centred stack, no blue button, no gradient. The receipt card is clearly illustrative and never presents fabricated live results as real.

Page 25 of 30

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

  • Focal subject: The overlapping "analysis receipt" card with score gauge, quoted labels, and original→improved diff.
  • Input→transformation→outcome thesis: As the visitor lands, the receipt card stamps in with a 40ms scale-down settle; score numerals count up like an odometer; the three quoted labels reveal in sequence; the diff highlights flip between original and improved on hover. Outcome: the visitor sees the product's core interaction — proof of what changed — before signing in.
  • Motion vocabulary: Snappy 120–220ms cubic-bezier(0.2, 0.8, 0.2, 1) transitions; odometer count-up; 40ms scale-down stamp; a thin hazard-stripe ticker running once across the top of the results panel; hover flips highlighted diff. No bouncy springs, no parallax blobs.
  • Composed first frame: Navy field, 1px column rule, oversized headline with orange "PROOF", quoted tag above, orange CTA below, receipt card overlapping the rule at rest with final score values visible.
  • Reduced-motion state: Ticker removed, count-up removed, final values shown immediately; receipt card appears without stamp animation; diff toggle remains available on hover/focus.
Page 26 of 30

9. Non-Functional Requirements

  • NFR-1 — Working application (explicit): The delivered product is a working full-stack app, not a landing page.
  • NFR-2 — Secure AI integration (explicit): AI provider calls occur server-side only; API keys are never exposed to the client.
  • NFR-3 — Protect user data (explicit): User data is protected; project, brand-profile, and billing state is privately owned by the signed-in user.
  • NFR-4 — Server-side limits (explicit): Monthly analysis quotas are enforced server-side before each analysis.
  • NFR-5 — Verify payments before activation (explicit): No plan is activated until an administrator verifies the payment.
  • NFR-6 — Never fake results or payments (explicit): Analysis results reflect real AI output; payment success reflects real verification.
  • NFR-7 — Identify external APIs (explicit): External API dependencies are identified (see §2a).
  • NFR-8 — Plan durations and quotas (explicit): Pro and Agency are 30-day plans; Free is 5 analyses/month; Pro is 100 analyses; Agency is 500 analyses.
  • NFR-9 — Admin scope (explicit): Admin scope is limited to managing users, plans, and verified payments.
  • NFR-10 — Mobile-friendly layout (explicit): Layout is responsive and mobile-friendly; readable text and controls stay whole at 375px, 768px, and 1280px.
  • NFR-11 — Accessible contrast (required_inference): Text #F2F4FA on navy clears AAA at body size; safety orange is never used as a large background behind body text.
Page 27 of 30

10. Tech Stack

  • Frontend: React (web) with a responsive, mobile-friendly layout.
  • Backend: Python / FastAPI, extending a single shared backend for identity, projects, brand profiles, quota enforcement, AI integration, payment submission/verification, and PDF generation.
  • Storage: Persistent database for users, projects, analyses, brand profiles, plans, and payment submissions.
  • AI integration: Server-side AI provider client with protected API keys.
  • Payments: UPI payment collection (UPI ID, scannable QR, Pay Now) with administrator verification.
  • Maps: Map tile provider for location display.
  • Deployment: Docker / docker-compose for the frontend and backend services.
Page 28 of 30

11. Assumptions and Constraints

  • A-1 (required_inference): Application-owned identity with self-service enrollment on Login; all destinations except Landing and Login require an authenticated session.
  • A-2 (required_inference): The Administrator role is the only differentiated access boundary; the Admin surface is restricted to administrators.
  • A-3 (required_inference): Payment verification is performed by an administrator reviewing submitted payment evidence; no automated payment gateway verification is assumed.
  • A-4 (required_inference): The Landing hero receipt card is illustrative and clearly non-live; it never presents fabricated results as real.
  • A-5 (required_inference): If timezone detection fails, a sensible fallback timezone is shown.
  • A-6 (required_inference): If GPS permission is denied or unavailable, manual location entry is the fallback.
  • C-1 (explicit): Build a working app, not just a landing page.
  • C-2 (explicit): Use secure AI integration and protect API keys and user data.
  • C-3 (explicit): Enforce analysis limits server-side.
  • C-4 (explicit): Verify payments before activating plans.
  • C-5 (explicit): Never fake results or payments.
  • C-6 (explicit): Identify features requiring external APIs.
  • C-7 (explicit): Plan durations are 30 days for Pro and Agency; Free is 5 analyses/month.
  • C-8 (explicit): Admin scope is limited to managing users, plans, and verified payments.
Page 29 of 30

12. Glossary

  • Analysis: A single run of ClickProof's AI content analysis on text, image, or public URL content.
  • Analysis Results: The surface presenting detected issues, suggested improvements, and the original-vs-improved comparison.
  • Brand Profile: A user-defined set of branding standards used in branding-issue detection.
  • Issue: A detected spelling, readability, or branding problem in analyzed content.
  • Project: A saved analysis that appears in Project History.
  • Quota: The monthly analysis allowance tied to a plan (Free 5; Pro 100; Agency 500).
  • Plan: One of Free, Pro (₹199/30 days), or Agency (₹599/30 days).
  • Payment Submission: A user's submitted UPI payment details awaiting administrator verification.
  • Verification: An administrator's confirmation that a payment is genuine, which activates the corresponding plan.
  • UPI: Unified Payments Interface, the Indian payment rail used for UPI ID, QR code, and Pay Now.
  • Quoted Label: The uppercase, letterspaced tag chip used throughout the interface (e.g., "SPELLING", "PAYMENT PENDING").
Page 30 of 30

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open sign in
Login: Sign in
Dashboard: 1. Open admin surface
Admin: 2. Review pending payments
Admin: 3. Verify submitted payment
Admin: 4. Retry failed verification
Admin: 5. Manage user records
Admin: 6. Manage plan records
Admin: 7. Retry failed record edit
Location: 8. Grant GPS permission
Location: 9. Enter location manually

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open sign in
Login: Sign in
Dashboard: 1. Open admin surface
Admin: 2. Review pending payments
Admin: 3. Verify submitted payment
Admin: 4. Retry failed verification
Admin: 5. Manage user records
Admin: 6. Manage plan records
Admin: 7. Retry failed record edit
Location: 8. Grant GPS permission
Location: 9. Enter location manually