1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Anti-Pattern: Redundant UX Writing</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: 'Inter', sans-serif;
17 min-height: 100vh;
18 background: #f0f4f8;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: #ffffff;
27 border-radius: 24px;
28 padding: 48px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 box-shadow: 0 4px 24px rgba(0,0,0,0.08);
33 }
34
35 /* Page Header */
36 .page-header {
37 text-align: center;
38 margin-bottom: 32px;
39 padding-bottom: 24px;
40 border-bottom: 1px solid #e5e7eb;
41 }
42
43 .page-header h1 {
44 font-size: 28px;
45 font-weight: 700;
46 color: #1f2937;
47 margin-bottom: 8px;
48 }
49
50 .page-header p {
51 font-size: 14px;
52 color: #6b7280;
53 }
54
55 /* Section with DUPLICATE heading */
56 .section {
57 background: #f9fafb;
58 border-radius: 16px;
59 padding: 28px;
60 margin-bottom: 24px;
61 }
62
63 .section-header {
64 margin-bottom: 20px;
65 padding-bottom: 16px;
66 border-bottom: 1px solid #e5e7eb;
67 }
68
69 .section-header h2 {
70 font-size: 20px;
71 font-weight: 700;
72 color: #1f2937;
73 margin-bottom: 4px;
74 }
75
76 .section-header p {
77 font-size: 13px;
78 color: #6b7280;
79 }
80
81 /* Form */
82 .form-group {
83 margin-bottom: 20px;
84 }
85
86 .form-label {
87 display: block;
88 font-size: 14px;
89 font-weight: 600;
90 color: #374151;
91 margin-bottom: 6px;
92 }
93
94 .form-sublabel {
95 font-size: 12px;
96 color: #9ca3af;
97 margin-bottom: 8px;
98 display: block;
99 }
100
101 .form-input {
102 width: 100%;
103 padding: 12px 16px;
104 border: 1px solid #d1d5db;
105 border-radius: 8px;
106 font-size: 14px;
107 font-family: inherit;
108 }
109
110 .form-hint {
111 font-size: 11px;
112 color: #6b7280;
113 margin-top: 6px;
114 line-height: 1.4;
115 }
116
117 /* Button section */
118 .button-section {
119 margin-top: 24px;
120 padding-top: 20px;
121 border-top: 1px solid #e5e7eb;
122 }
123
124 .btn-submit {
125 width: 100%;
126 background: #2563eb;
127 color: white;
128 padding: 14px 24px;
129 border-radius: 8px;
130 font-weight: 600;
131 font-size: 15px;
132 border: none;
133 cursor: pointer;
134 margin-bottom: 12px;
135 }
136
137 .btn-helper {
138 font-size: 12px;
139 color: #6b7280;
140 text-align: center;
141 line-height: 1.5;
142 }
143
144 /* Form row */
145 .form-row {
146 display: grid;
147 grid-template-columns: 1fr 1fr;
148 gap: 16px;
149 }
150
151
152 </style>
153</head>
154<body>
155 <div class="container">
156 <!-- PAGE HEADER -->
157 <div class="page-header">
158 <h1>Create Your Account</h1>
159 <p>Sign up to get started with our platform</p>
160 </div>
161
162 <!-- SECTION WITH DUPLICATE HEADING -->
163 <div class="section">
164 <div class="section-header">
165 <h2>Create Your Account</h2>
166 <p>Fill out the form below to create your new account</p>
167 </div>
168
169 <div class="form-row">
170 <div class="form-group">
171 <label class="form-label">First Name</label>
172 <span class="form-sublabel">Enter your first name</span>
173 <input type="text" class="form-input" placeholder="Enter first name">
174 <span class="form-hint">Your first name as it appears on documents</span>
175 </div>
176 <div class="form-group">
177 <label class="form-label">Last Name</label>
178 <span class="form-sublabel">Enter your last name</span>
179 <input type="text" class="form-input" placeholder="Enter last name">
180 <span class="form-hint">Your last name as it appears on documents</span>
181 </div>
182 </div>
183
184 <div class="form-group">
185 <label class="form-label">Email Address</label>
186 <span class="form-sublabel">Provide a valid email address</span>
187 <input type="email" class="form-input" placeholder="example@email.com">
188 <span class="form-hint">Your email will be used to send you important notifications via email</span>
189 </div>
190
191 <div class="form-group">
192 <label class="form-label">Create Password</label>
193 <span class="form-sublabel">Choose a secure password</span>
194 <input type="password" class="form-input" placeholder="Enter password">
195 <span class="form-hint">Password must be at least 8 characters for security</span>
196 </div>
197
198 <div class="button-section">
199 <button class="btn-submit">Create Account</button>
200 <p class="btn-helper">Click the button above to create your account and complete registration</p>
201 </div>
202 </div>
203
204 </div>
205<script src="/js/detect-antipatterns-browser.js"></script>
206</body>
207</html>