Skip to content

Commit a84d89e

Browse files
nnazar1nnazar1
authored
Create CF.html
1 parent ae5e778 commit a84d89e

1 file changed

Lines changed: 318 additions & 0 deletions

File tree

‎CF.html‎

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="govuk-template govuk-template--rebranded">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Citizen-facing reference architecture - GOV.UK Digital Architecture</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
7+
<meta name="theme-color" content="#1d70b8">
8+
9+
<!-- GOV.UK Frontend CSS -->
10+
<link rel="stylesheet"
11+
href="https://cdn.jsdelivr.net/npm/govuk-frontend@5.13.0/dist/govuk/govuk-frontend.min.css">
12+
13+
<style>
14+
:root{
15+
--band-blue:#1d70b8;
16+
--band-teal:#05ebea;
17+
--ink:#1d70b8;
18+
--white:#ffffff;
19+
--border:#b1b4b6;
20+
--panel:#f3f2f1;
21+
}
22+
23+
.app-content-wrapper{display:flex;min-height:calc(100vh - 300px);}
24+
.app-sidebar{
25+
background:var(--panel);
26+
border-right:1px solid var(--border);
27+
width:220px;
28+
padding:20px;
29+
}
30+
.app-main-content{flex:1;padding:30px 40px;}
31+
32+
.architecture-diagram{
33+
display:grid;
34+
grid-template-columns:220px auto;
35+
gap:12px 20px;
36+
margin-top:30px;
37+
}
38+
39+
.band-blue{background:var(--band-blue);}
40+
.band-teal{background:var(--band-teal);}
41+
42+
.layer-title{
43+
color:#fff;
44+
margin:0;
45+
display:flex;
46+
align-items:center;
47+
padding:10px;
48+
}
49+
50+
.layer-band{padding:10px;}
51+
.architecture-row{display:flex;flex-wrap:wrap;gap:8px;}
52+
53+
.architecture-box{
54+
background:var(--white);
55+
color:var(--ink);
56+
border:2px solid var(--ink);
57+
text-align:center;
58+
padding:14px 16px;
59+
font-family:"GDS Transport",Arial,sans-serif;
60+
font-weight:700;
61+
font-size:16px;
62+
min-width:160px;
63+
flex:1 1 180px;
64+
transition:background-color .15s,color .15s,border-color .15s;
65+
}
66+
67+
.architecture-box a{
68+
color:inherit;
69+
text-decoration:none;
70+
display:block;
71+
}
72+
73+
.architecture-box.has-link:hover{
74+
background:var(--band-blue);
75+
color:#fff;
76+
border-color:var(--band-blue);
77+
}
78+
.architecture-box.has-link:hover a{ text-decoration:underline; }
79+
80+
.box-links{
81+
margin-top:8px;
82+
display:flex;
83+
flex-wrap:wrap;
84+
gap:10px;
85+
justify-content:center;
86+
font-weight:400;
87+
}
88+
.box-links a{
89+
font-size:14px;
90+
text-decoration:underline;
91+
font-weight:400;
92+
display:inline;
93+
}
94+
95+
.dotted{border-style:dotted;}
96+
97+
.layer-business-logic .architecture-row{
98+
display:grid;
99+
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
100+
gap:8px;
101+
}
102+
103+
.layer-infrastructure .architecture-box{flex:1 1 100%;}
104+
105+
.app-service-nav__list{
106+
display:flex;
107+
list-style:none;
108+
padding:0;
109+
margin:0;
110+
gap:40px;
111+
}
112+
.app-service-nav__link{
113+
font-size:19px;
114+
font-weight:600;
115+
color:var(--ink);
116+
text-decoration:none;
117+
}
118+
.app-service-nav__link:hover{text-decoration:underline;}
119+
</style>
120+
</head>
121+
122+
<body class="govuk-template__body">
123+
<script>
124+
document.body.className += ' js-enabled' +
125+
('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
126+
</script>
127+
128+
<a href="#main-content" class="govuk-skip-link">Skip to main content</a>
129+
130+
<header class="govuk-header" data-module="govuk-header">
131+
<div class="govuk-header__container govuk-width-container">
132+
<div class="govuk-header__logo">
133+
<a href="index.html" class="govuk-header__link govuk-header__link--homepage">GOV.UK</a>
134+
</div>
135+
<div class="govuk-header__content">
136+
<a href="index.html" class="govuk-header__link">Digital Architecture</a>
137+
</div>
138+
</div>
139+
</header>
140+
141+
<nav class="app-service-nav govuk-!-margin-bottom-3"
142+
style="background:#f3f2f1;border-bottom:1px solid #b1b4b6;">
143+
<div class="govuk-width-container">
144+
<ul class="app-service-nav__list">
145+
<li><a class="app-service-nav__link" href="index.html">Documentation</a></li>
146+
<li><a class="app-service-nav__link" href="contact.html">Contact</a></li>
147+
</ul>
148+
</div>
149+
</nav>
150+
151+
<div class="app-product-header govuk-!-padding-top-6 govuk-!-padding-bottom-6"
152+
style="background:#1d70b8;color:#fff;text-align:center;">
153+
<h1 class="govuk-heading-xl" style="color:#fff;">
154+
Citizen-facing reference architecture
155+
</h1>
156+
</div>
157+
158+
<div class="app-content-wrapper">
159+
<nav class="app-sidebar">
160+
<h2 class="govuk-heading-s">Contents</h2>
161+
<ul class="govuk-list govuk-list--bullet">
162+
<li><a href="introduction.html">Introduction</a></li>
163+
<li><a href="who-this-is-for.html">Who this is for</a></li>
164+
<li><a href="how-to-use.html">How to use it</a></li>
165+
<li><a href="citizen-facing-architecture.html">Citizen-facing reference architecture</a></li>
166+
<li><a href="contact.html">Contact us</a></li>
167+
</ul>
168+
</nav>
169+
170+
<main id="main-content" class="app-main-content">
171+
172+
<!-- ================= Architecture Diagram ================= -->
173+
<div class="architecture-diagram">
174+
175+
<!-- Digital Channels -->
176+
<div class="govuk-heading-m layer-title band-blue">Citizen Facing Digital Channels</div>
177+
<div class="layer-band band-blue">
178+
<div class="architecture-row">
179+
180+
<!-- FIXED: Clickable, but no URL text shown in box -->
181+
<div class="architecture-box has-link">
182+
<a href="https://www.gov.uk/government/publications/govuk-proposition/govuk-proposition" target="_blank" rel="noopener noreferrer">
183+
GOV.UK Websites
184+
</a>
185+
</div>
186+
187+
<div class="architecture-box has-link">
188+
<a href="https://www.notifications.service.gov.uk/" target="_blank" rel="noopener noreferrer">GOV.UK Notify</a>
189+
</div>
190+
191+
<!-- FIXED: Clickable, but no URL text shown in box -->
192+
<div class="architecture-box has-link">
193+
<a href="https://www.gov.uk/guidance/download-the-govuk-app" target="_blank" rel="noopener noreferrer">GOV.UK Mobile App</a>
194+
<div class="box-links">
195+
<a href="https://docs.publishing.service.gov.uk/mobile/" target="_blank" rel="noopener noreferrer"> </a>
196+
</div>
197+
</div>
198+
199+
<!-- FIXED: Clickable, dotted, but no URL text shown in box -->
200+
<div class="architecture-box dotted has-link">
201+
<a href="https://www.gov.uk/algorithmic-transparency-records/dsit-gov-dot-uk-chat" target="_blank" rel="noopener noreferrer">GOV.UK Chat</a>
202+
<div class="box-links">
203+
<a href="https://insidegovuk.blog.gov.uk/2024/11/05/were-running-a-private-beta-of-gov-uk-chat/" target="_blank" rel="noopener noreferrer"></a>
204+
</div>
205+
</div>
206+
207+
<div class="architecture-box">Third Party Solutions &amp; Agents</div>
208+
209+
</div>
210+
</div>
211+
212+
<!-- Interaction -->
213+
<div class="govuk-heading-m layer-title band-teal">Interaction Layer</div>
214+
<div class="layer-band band-teal">
215+
<div class="architecture-row">
216+
217+
<div class="architecture-box dotted has-link">
218+
<a href="https://github.com/govuk-digital-backbone" target="_blank" rel="noopener noreferrer">GOV.UK Digital Backbone</a>
219+
</div>
220+
221+
<div class="architecture-box has-link">
222+
<a href="https://www.forms.service.gov.uk/" target="_blank" rel="noopener noreferrer">GOV.UK Forms</a>
223+
</div>
224+
225+
<div class="architecture-box has-link">
226+
<a href="https://www.sign-in.service.gov.uk/" target="_blank" rel="noopener noreferrer">GOV.UK OneLogin</a>
227+
</div>
228+
229+
<div class="architecture-box has-link">
230+
<a href="https://www.payments.service.gov.uk/" target="_blank" rel="noopener noreferrer">GOV.UK Pay</a>
231+
</div>
232+
233+
<div class="architecture-box has-link">
234+
<a href="https://www.api.gov.uk/#uk-public-sector-apis" target="_blank" rel="noopener noreferrer">Public Sector APIs</a>
235+
</div>
236+
237+
<div class="architecture-box">Private Sector APIs</div>
238+
239+
</div>
240+
</div>
241+
242+
<!-- Business Logic -->
243+
<div class="govuk-heading-m layer-title band-blue">Business Logic</div>
244+
<div class="layer-band band-blue layer-business-logic">
245+
<div class="architecture-row">
246+
<div class="architecture-box">HMRC Tax System</div>
247+
<div class="architecture-box">DVLA Drivers System</div>
248+
<div class="architecture-box">DEFRA Grants &amp; Payments</div>
249+
<div class="architecture-box">HMPO Apply for Passport</div>
250+
<div class="architecture-box">MoJ Justice Services Suite</div>
251+
<div class="architecture-box">DWP Universal Credit</div>
252+
<div class="architecture-box">Home Office Right to Work</div>
253+
<div class="architecture-box">Companies House Register Company</div>
254+
<div class="architecture-box">HMRC Tax Free Childcare Account</div>
255+
<div class="architecture-box">+++</div>
256+
</div>
257+
</div>
258+
259+
<!-- Data -->
260+
<div class="govuk-heading-m layer-title band-teal">Data Layer</div>
261+
<div class="layer-band band-teal">
262+
<div class="architecture-row">
263+
264+
<!-- FIXED: Clickable, but no URL text shown in box -->
265+
<div class="architecture-box has-link">
266+
<a href="https://docs.publishing.service.gov.uk/repos/whitehall.html" target="_blank" rel="noopener noreferrer">GOV.UK “Whitehall” CMS</a>
267+
<div class="box-links">
268+
<a href="https://www.gov.uk/guidance/how-to-publish-on-gov-uk" target="_blank" rel="noopener noreferrer"></a>
269+
<a href="https://frontend.design-system.service.gov.uk/" target="_blank" rel="noopener noreferrer"></a>
270+
</div>
271+
</div>
272+
273+
<div class="architecture-box has-link">
274+
<a href="https://www.datamarketplace.gov.uk/" target="_blank" rel="noopener noreferrer">Data Marketplace</a>
275+
</div>
276+
277+
<div class="architecture-box has-link">
278+
<a href="https://www.data.gov.uk/" target="_blank" rel="noopener noreferrer">Public Sector Data Stores</a>
279+
</div>
280+
281+
<div class="architecture-box">Private Sector Data Stores</div>
282+
283+
</div>
284+
</div>
285+
286+
<!-- Infrastructure -->
287+
<div class="govuk-heading-m layer-title band-blue">Infrastructure</div>
288+
<div class="layer-band band-blue layer-infrastructure">
289+
<div class="architecture-row">
290+
291+
<div class="architecture-box dotted has-link">
292+
<a href="https://co-cddo.github.io/ndx/" target="_blank" rel="noopener noreferrer">National Digital Exchange</a>
293+
</div>
294+
295+
<div class="architecture-box has-link">
296+
<a href="https://www.gov.uk/guidance/government-cloud-first-policy" target="_blank" rel="noopener noreferrer">Cloud Services</a>
297+
</div>
298+
299+
</div>
300+
</div>
301+
302+
</div>
303+
<!-- ================= End Diagram ================= -->
304+
305+
</main>
306+
</div>
307+
308+
<footer class="govuk-footer">
309+
<div class="govuk-width-container">
310+
<p class="govuk-footer__meta">© Crown copyright</p>
311+
</div>
312+
</footer>
313+
314+
<script src="https://cdn.jsdelivr.net/npm/govuk-frontend@5.13.0/dist/govuk/govuk-frontend.min.js"></script>
315+
<script>window.GOVUKFrontend.initAll();</script>
316+
</body>
317+
</html>
318+
``

0 commit comments

Comments
 (0)