|
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | 6 | <title>OpenFDD - Formatted Data Document</title> |
7 | | - <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Outfit:wght@400;700&display=swap" rel="stylesheet"> |
8 | 7 | <style> |
9 | 8 | :root { |
10 | | - --bg-dark: #0f172a; |
11 | | - --bg-light: #1e293b; |
12 | | - --accent1: #3b82f6; |
13 | | - --accent2: #8b5cf6; |
14 | | - --text: #f8fafc; |
15 | | - } |
16 | | - body { |
17 | | - margin: 0; font-family: 'Inter', system-ui, sans-serif; |
18 | | - background: linear-gradient(135deg, var(--bg-dark), #09090b); color: var(--text); |
19 | | - overflow-x: hidden; min-height: 100vh; |
20 | | - } |
21 | | - .blob { |
22 | | - position: fixed; border-radius: 50%; filter: blur(100px); z-index: -1; |
23 | | - opacity: 0.6; animation: blob-float 20s infinite alternate; |
24 | | - } |
25 | | - .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--accent1); } |
26 | | - .blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--accent2); } |
27 | | - @keyframes blob-float { 100% { transform: translateY(100px) scale(1.05); } } |
28 | | - |
29 | | - nav { padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; } |
30 | | - .logo { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -1px; } |
31 | | - .nav-links a { color: #cbd5e1; text-decoration: none; margin-left: 2rem; font-weight: 600; transition: color 0.2s; } |
32 | | - .nav-links a:hover { color: white; } |
33 | | - |
34 | | - .hero { |
35 | | - min-height: calc(100vh - 100px); display: flex; flex-direction: column; |
36 | | - justify-content: center; align-items: center; text-align: center; |
37 | | - padding: 0 5%; position: relative; z-index: 10; |
38 | | - } |
39 | | - h1 { font-family: 'Outfit', sans-serif; font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 1.5rem; line-height: 1.1; letter-spacing: -2px; } |
40 | | - h1 span { background: linear-gradient(to right, #60a5fa, #c084fc); -webkit-background-clip: text; color: transparent; display: inline-block;} |
41 | | - .subtitle { font-size: clamp(1.1rem, 2vw, 1.5rem); color: #94a3b8; max-width: 800px; margin-bottom: 3rem; line-height: 1.6; } |
42 | | - |
43 | | - .glass-card { |
44 | | - background: rgba(30, 41, 59, 0.4); |
45 | | - backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); |
46 | | - border: 1px solid rgba(255, 255, 255, 0.1); |
47 | | - border-radius: 32px; padding: 4rem; max-width: 1000px; width: 100%; |
48 | | - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.05); |
49 | | - transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
50 | | - text-align: left; |
51 | | - } |
52 | | - .glass-card:hover { transform: translateY(-10px); } |
53 | | - |
54 | | - .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; margin-top: 4rem; } |
55 | | - .feature-item { position: relative; padding-left: 1.5rem; border-left: 2px solid rgba(255,255,255,0.1); transition: border-color 0.3s; } |
56 | | - .feature-item:hover { border-color: var(--accent1); } |
57 | | - .feature-item h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; margin-bottom: 1rem; margin-top: 0; color: #f8fafc; } |
58 | | - .feature-item p { color: #94a3b8; font-size: 1.05rem; line-height: 1.6; margin: 0; } |
59 | | - |
60 | | - .cta-container { text-align: center; margin-top: -2rem; margin-bottom: 3rem; } |
61 | | - .cta-btn { |
62 | | - display: inline-flex; align-items: center; justify-content: center; |
63 | | - background: linear-gradient(135deg, var(--accent1), var(--accent2)); |
64 | | - color: white; padding: 1.2rem 3rem; border-radius: 999px; text-decoration: none; |
65 | | - font-weight: 600; font-size: 1.2rem; cursor: pointer; |
66 | | - box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4); |
67 | | - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
68 | | - position: relative; overflow: hidden; |
69 | | - } |
70 | | - .cta-btn::after { |
71 | | - content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; |
72 | | - background: linear-gradient(rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity 0.3s; |
73 | | - } |
74 | | - .cta-btn:hover { box-shadow: 0 15px 35px rgba(139, 92, 246, 0.5); transform: scale(1.05); } |
75 | | - .cta-btn:hover::after { opacity: 1; } |
| 9 | + --navy: #002147; |
| 10 | + --white: #ffffff; |
| 11 | + --off-white: #fcfcfc; |
| 12 | + --gray: #e6e6e6; |
| 13 | + --text-dark: #111111; |
| 14 | + --text-muted: #444444; |
| 15 | + } |
| 16 | + body { |
| 17 | + margin: 0; |
| 18 | + padding: 0; |
| 19 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| 20 | + background-color: var(--off-white); |
| 21 | + color: var(--text-dark); |
| 22 | + line-height: 1.6; |
| 23 | + } |
| 24 | + h1, h2, h3, h4 { |
| 25 | + font-family: Georgia, "Times New Roman", serif; |
| 26 | + color: var(--navy); |
| 27 | + margin-top: 1.5em; margin-bottom: 0.5em; |
| 28 | + } |
| 29 | + header { |
| 30 | + background-color: var(--navy); |
| 31 | + color: var(--white); |
| 32 | + padding: 2.5rem 5%; |
| 33 | + border-bottom: 4px solid var(--gray); |
| 34 | + text-align: center; |
| 35 | + } |
| 36 | + header h1 { |
| 37 | + color: var(--white); |
| 38 | + margin: 0; |
| 39 | + font-size: 2.8rem; |
| 40 | + letter-spacing: -0.5px; |
| 41 | + } |
| 42 | + header p { |
| 43 | + margin: 0.5rem 0 0; |
| 44 | + font-size: 1.25rem; |
| 45 | + color: #d1d9e6; |
| 46 | + font-weight: 300; |
| 47 | + } |
| 48 | + main { |
| 49 | + max-width: 850px; |
| 50 | + margin: 3rem auto; |
| 51 | + padding: 0 2rem; |
| 52 | + } |
| 53 | + section { |
| 54 | + margin-bottom: 4rem; |
| 55 | + } |
| 56 | + hr { |
| 57 | + border: 0; height: 1px; background-color: var(--gray); margin: 3rem 0; |
| 58 | + } |
| 59 | + .points-list { |
| 60 | + list-style-type: none; padding: 0; |
| 61 | + } |
| 62 | + .points-list li { |
| 63 | + margin-bottom: 1.75rem; |
| 64 | + padding-left: 1.5rem; |
| 65 | + border-left: 3px solid var(--navy); |
| 66 | + } |
| 67 | + .points-list strong { |
| 68 | + display: block; |
| 69 | + font-family: Georgia, "Times New Roman", serif; |
| 70 | + font-size: 1.25rem; |
| 71 | + color: var(--navy); |
| 72 | + margin-bottom: 0.35rem; |
| 73 | + } |
| 74 | + .technical-list li { |
| 75 | + margin-bottom: 0.75rem; |
| 76 | + } |
| 77 | + a.button { |
| 78 | + display: inline-block; |
| 79 | + background-color: var(--navy); |
| 80 | + color: var(--white); |
| 81 | + padding: 0.75rem 1.5rem; |
| 82 | + text-decoration: none; |
| 83 | + font-weight: bold; |
| 84 | + font-size: 1rem; |
| 85 | + border: 2px solid var(--navy); |
| 86 | + transition: all 0.2s ease; |
| 87 | + } |
| 88 | + a.button:hover { |
| 89 | + background-color: var(--white); |
| 90 | + color: var(--navy); |
| 91 | + } |
| 92 | + .intro-text { |
| 93 | + font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; |
| 94 | + } |
76 | 95 | </style> |
77 | 96 | </head> |
78 | 97 | <body> |
79 | | - <div class="blob blob-1"></div> |
80 | | - <div class="blob blob-2"></div> |
81 | | - |
82 | | - <nav> |
83 | | - <div class="logo">OpenFDD</div> |
84 | | - <div class="nav-links"> |
85 | | - <a href="#">Spec</a> |
86 | | - <a href="#">Extension</a> |
87 | | - <a href="#">GitHub</a> |
88 | | - </div> |
89 | | - </nav> |
90 | | - |
91 | | - <div class="hero"> |
92 | | - <h1 style="margin-top: 2rem;">The End of <br><span>Dead PDFs</span></h1> |
93 | | - <p class="subtitle">OpenFDD replaces static visual documents with data-first interactive containers. Machine verifiable, cryptographically secure, and natively self-saving.</p> |
94 | | - |
95 | | - <div class="cta-container"> |
96 | | - <a href="#" class="cta-btn">Read the Specification →</a> |
97 | | - </div> |
98 | | - |
99 | | - <div class="glass-card"> |
100 | | - <div style="font-family: 'Outfit'; font-size: 2rem; margin-bottom: 1rem; color: white;">Why FDD over PDF?</div> |
101 | | - <p style="color: #94a3b8; font-size: 1.2rem; margin-bottom: 3rem; max-width: 800px; line-height: 1.6;"> |
102 | | - The future of documents isn't a static printed page simulated on a screen. It's a localized, self-contained web app that carries its own cryptographically verified database. |
| 98 | + <header> |
| 99 | + <h1>OpenFDD</h1> |
| 100 | + <p>The Formatted Data Document Specification</p> |
| 101 | + </header> |
| 102 | + |
| 103 | + <main> |
| 104 | + <section> |
| 105 | + <h2>The End of the Static PDF</h2> |
| 106 | + <p class="intro-text"> |
| 107 | + OpenFDD replaces static, "visual-first" documents with data-first interactive containers. |
| 108 | + Our architecture provides documents that are natively human-readable, cryptographically verifiable, and locally persistent without the need for complex infrastructure. |
103 | 109 | </p> |
104 | | - <div class="features"> |
105 | | - <div class="feature-item"> |
106 | | - <h3>Cryptographically Verified</h3> |
107 | | - <p>Layered digital signatures ensure the data payload can never be tampered with. Perfect for bank statements and invoices.</p> |
108 | | - </div> |
109 | | - <div class="feature-item"> |
110 | | - <h3>AI Native JSON-LD</h3> |
111 | | - <p>Provide perfect, hallucination-free parsing for machine learning. Stop forcing AI to read OCR PDFs.</p> |
112 | | - </div> |
113 | | - <div class="feature-item"> |
114 | | - <h3>100% JS-Free Security</h3> |
115 | | - <p>Relies entirely on Declarative Shadow DOM and CSS-only logic. Complete immunity to malicious execution scripts.</p> |
116 | | - </div> |
117 | | - <div class="feature-item"> |
118 | | - <h3>The 1-File CRM</h3> |
119 | | - <p>Add your own notes to a received document. FDD updates locally and sees changes instantly sync right back into the file.</p> |
120 | | - </div> |
121 | | - </div> |
122 | | - </div> |
123 | | - </div> |
| 110 | + <a href="https://github.com/open-fdd" class="button">Read the Specification</a> |
| 111 | + </section> |
| 112 | + |
| 113 | + <hr> |
| 114 | + |
| 115 | + <section> |
| 116 | + <h2>Strategic Advocacy & Benefits</h2> |
| 117 | + <p class="intro-text">FDD adoption significantly streamlines data consumption by addressing massive operational bottlenecks natively:</p> |
| 118 | + <ul class="points-list"> |
| 119 | + <li> |
| 120 | + <strong>Open Source & License-Free</strong> |
| 121 | + An open specification without licensing or proprietary requirements translates to significantly less cost to generate and maintain institutional documents. |
| 122 | + </li> |
| 123 | + <li> |
| 124 | + <strong>Reduced Processing Overhead</strong> |
| 125 | + A lower computing and processing cost per document generation because there is far less translation necessary from internal data models to the output file structure. |
| 126 | + </li> |
| 127 | + <li> |
| 128 | + <strong>Pristine Data Access</strong> |
| 129 | + Removes the requirement of using LLMs, OCR pipelines, or brittle XML parsing frameworks to access and use the data (which often yields imperfect results). Developers can retrieve the raw data object easily, without translation errors or complicated infrastructure to support the format. |
| 130 | + </li> |
| 131 | + <li> |
| 132 | + <strong>Interact Your Way</strong> |
| 133 | + Interact with the payload via the medium of your choice. Use the built-in, secure UI, an office suite, custom data modeling tools, a coding IDE, or an AI Agent—the choice is exclusively yours. |
| 134 | + </li> |
| 135 | + <li> |
| 136 | + <strong>Decentralized Infrastructure</strong> |
| 137 | + Removes the massive root infrastructure costs of maintaining complex API endpoints for institutions aiming to support parallel and downstream industries. Instead of building thousands of webhooks for the mortgage industry pulling bank statements, or colleges pulling verified school records, institutions can simply issue a standardized, verifiable `.fdd` file. |
| 138 | + </li> |
| 139 | + </ul> |
| 140 | + </section> |
| 141 | + |
| 142 | + <hr> |
| 143 | + |
| 144 | + <section> |
| 145 | + <h2>Technical Foundations</h2> |
| 146 | + <p class="intro-text">An FDD container serves as an offline-first Single-Page Web App carrying its own encrypted payload database:</p> |
| 147 | + <ul class="technical-list"> |
| 148 | + <li><strong>Cryptographically Verified:</strong> Layered digital signatures natively prevent untraceable tampering.</li> |
| 149 | + <li><strong>AI Native JSON-LD:</strong> Direct object injection providing perfect, machine-readable syntax for ML models.</li> |
| 150 | + <li><strong>100% JS-Free Security:</strong> Complete security isolating parsing logic via Declarative HTML protocols and CSS rendering tricks—thwarting malware executing within the container logic.</li> |
| 151 | + <li><strong>Local Persistence:</strong> Allows documents to natively <i>auto-sync</i> user-modified fields back locally ensuring changes operate within an active localized session state without losing context.</li> |
| 152 | + </ul> |
| 153 | + </section> |
| 154 | + </main> |
124 | 155 | </body> |
125 | 156 | </html> |
0 commit comments