Skip to content

Commit 06c28e1

Browse files
DrswithDrswith
committed
feat: 添加SEO优化和可访问性改进
添加favicon、sitemap和robots.txt文件 优化HTML结构增加语义化和ARIA属性 新增屏幕阅读器专用样式类 完善元标签和结构化数据
1 parent faf9de2 commit 06c28e1

File tree

5 files changed

+182
-62
lines changed

5 files changed

+182
-62
lines changed

‎index.html‎

Lines changed: 132 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,136 +3,205 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>List of USB ID's - USB IDs Query Tool</title>
6+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7+
<link rel="apple-touch-icon" href="/favicon.svg" />
8+
9+
<!-- SEO Meta Tags -->
10+
<title>USB IDs Database - Complete List of USB Vendor and Device IDs</title>
11+
<meta name="description" content="Comprehensive USB IDs database with vendor and device information. Search through thousands of USB device identifiers, vendor codes, and product IDs. Updated daily from official sources." />
12+
<meta name="keywords" content="USB IDs, USB vendor IDs, USB device IDs, USB database, hardware identification, device drivers, USB specifications" />
13+
<meta name="author" content="USB IDs Database" />
14+
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
15+
<meta name="googlebot" content="index, follow" />
16+
<meta name="theme-color" content="#2563eb" />
17+
<meta name="msapplication-TileColor" content="#2563eb" />
18+
<meta name="application-name" content="USB IDs Database" />
19+
20+
<!-- Open Graph Meta Tags -->
21+
<meta property="og:title" content="USB IDs Database - Complete List of USB Vendor and Device IDs" />
22+
<meta property="og:description" content="Comprehensive USB IDs database with vendor and device information. Search through thousands of USB device identifiers updated daily." />
23+
<meta property="og:type" content="website" />
24+
<meta property="og:url" content="https://drswith.github.io/usb.ids/" />
25+
<meta property="og:site_name" content="USB IDs Database" />
26+
<meta property="og:image" content="https://drswith.github.io/usb.ids/favicon.svg" />
27+
<meta property="og:image:width" content="32" />
28+
<meta property="og:image:height" content="32" />
29+
<meta property="og:image:type" content="image/svg+xml" />
30+
<meta property="og:locale" content="en_US" />
31+
32+
<!-- Twitter Card Meta Tags -->
33+
<meta name="twitter:card" content="summary" />
34+
<meta name="twitter:title" content="USB IDs Database - Complete List of USB Vendor and Device IDs" />
35+
<meta name="twitter:description" content="Comprehensive USB IDs database with vendor and device information. Search through thousands of USB device identifiers updated daily." />
36+
<meta name="twitter:image" content="https://drswith.github.io/usb.ids/favicon.svg" />
37+
<meta name="twitter:creator" content="@usbids" />
38+
<meta name="twitter:site" content="@usbids" />
39+
40+
<!-- Canonical URL -->
41+
<link rel="canonical" href="https://drswith.github.io/usb.ids/" />
42+
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
43+
44+
<!-- Structured Data -->
45+
<script type="application/ld+json">
46+
{
47+
"@context": "https://schema.org",
48+
"@type": "Dataset",
49+
"name": "USB IDs Database",
50+
"description": "Comprehensive database of USB vendor and device identifiers, updated daily from official sources",
51+
"url": "https://drswith.github.io/usb.ids/",
52+
"keywords": ["USB", "vendor IDs", "device IDs", "hardware identification", "USB specifications"],
53+
"creator": {
54+
"@type": "Organization",
55+
"name": "USB IDs Database"
56+
},
57+
"distribution": {
58+
"@type": "DataDownload",
59+
"encodingFormat": "application/json",
60+
"contentUrl": "https://drswith.github.io/usb.ids/usb.ids.json"
61+
},
62+
"temporalCoverage": "2024/..",
63+
"spatialCoverage": "Worldwide"
64+
}
65+
</script>
766

867
</head>
968
<body>
1069
<div id="app">
11-
<!-- 头部 -->
12-
<header class="header">
70+
<!-- Header -->
71+
<header class="header" role="banner">
1372
<div class="container">
1473
<div class="header-content">
1574
<div class="header-left">
1675
<h1 class="title">
17-
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
76+
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
1877
<path d="M9 12l2 2 4-4"/>
1978
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
2079
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
2180
<path d="M9 12h6"/>
2281
</svg>
23-
USB IDs
82+
USB IDs Database
2483
</h1>
25-
<p class="subtitle">A database for quickly finding USB device vendor and product information</p>
84+
<p class="subtitle">Comprehensive database for quickly finding USB device vendor and product information</p>
2685
</div>
27-
<div class="header-stats">
86+
<aside class="header-stats" aria-label="Database statistics">
2887
<div class="header-stat">
29-
<div class="stat-number" id="headerTotalVendors">-</div>
88+
<div class="stat-number" id="headerTotalVendors" aria-label="Total vendors">-</div>
3089
<div class="stat-label">Vendors</div>
3190
</div>
3291
<div class="header-stat">
33-
<div class="stat-number" id="headerTotalDevices">-</div>
92+
<div class="stat-number" id="headerTotalDevices" aria-label="Total devices">-</div>
3493
<div class="stat-label">Devices</div>
3594
</div>
36-
</div>
95+
</aside>
3796
</div>
3897
</div>
3998
</header>
4099

41100
<!-- Version Information Section -->
42-
<section class="version-section">
101+
<section class="version-section" aria-label="Database version information">
43102
<div class="container">
44103
<div class="version-info">
45104
<div class="version-item">
46105
<span class="version-label">Version:</span>
47-
<span class="version-value" id="versionNumber">-</span>
106+
<span class="version-value" id="versionNumber" aria-label="Current database version">-</span>
48107
</div>
49108
<div class="version-item">
50-
<span class="version-label">Fetch Time:</span>
51-
<span class="version-value" id="fetchTime">-</span>
109+
<span class="version-label">Last Updated:</span>
110+
<span class="version-value" id="fetchTime" aria-label="Last update time">-</span>
52111
</div>
53112
<div class="version-item">
54113
<span class="version-label">Next Update:</span>
55-
<span class="version-value" id="nextUpdate">-</span>
114+
<span class="version-value" id="nextUpdate" aria-label="Next scheduled update">-</span>
56115
</div>
57116
<div class="version-item">
58117
<span class="version-label">Countdown:</span>
59-
<span class="version-value countdown" id="countdown">-</span>
118+
<span class="version-value countdown" id="countdown" aria-label="Time until next update">-</span>
60119
</div>
61120
</div>
62121
</div>
63122
</section>
64123

65124
<!-- Search Section -->
66-
<section class="search-section">
125+
<section class="search-section" role="search" aria-label="USB device search">
67126
<div class="container">
127+
<h2 class="sr-only">Search USB Devices and Vendors</h2>
68128
<div class="search-container">
69129
<div class="search-box">
70-
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
130+
<label for="searchInput" class="sr-only">Search USB vendors and devices</label>
131+
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
71132
<circle cx="11" cy="11" r="8"/>
72133
<path d="m21 21-4.35-4.35"/>
73134
</svg>
74135
<input
75-
type="text"
136+
type="search"
76137
id="searchInput"
77138
placeholder="Search vendor name, device name, vendor ID or device ID..."
78139
class="search-input"
140+
aria-describedby="search-help"
141+
autocomplete="off"
79142
>
80-
<button id="clearSearch" class="clear-btn" style="display: none;">
81-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
143+
<button id="clearSearch" class="clear-btn" style="display: none;" aria-label="Clear search">
144+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
82145
<line x1="18" y1="6" x2="6" y2="18"/>
83146
<line x1="6" y1="6" x2="18" y2="18"/>
84147
</svg>
85148
</button>
86149
</div>
150+
<div id="search-help" class="sr-only">Search by vendor name, device name, vendor ID (4-digit hex), or device ID (4-digit hex)</div>
87151

88-
<div class="filter-options">
89-
<div class="filter-group">
90-
<label class="filter-label">Search Type:</label>
91-
<div class="radio-group">
92-
<label class="radio-option">
93-
<input type="radio" name="searchType" value="all" checked>
94-
<span class="radio-custom"></span>
95-
All
96-
</label>
97-
<label class="radio-option">
98-
<input type="radio" name="searchType" value="vendor">
99-
<span class="radio-custom"></span>
100-
Vendor
101-
</label>
102-
<label class="radio-option">
103-
<input type="radio" name="searchType" value="device">
104-
<span class="radio-custom"></span>
105-
Device
106-
</label>
107-
</div>
152+
<fieldset class="filter-options">
153+
<legend class="filter-label">Search Type:</legend>
154+
<div class="radio-group" role="radiogroup" aria-label="Search filter options">
155+
<label class="radio-option">
156+
<input type="radio" name="searchType" value="all" checked aria-describedby="filter-all-desc">
157+
<span class="radio-custom"></span>
158+
All
159+
</label>
160+
<label class="radio-option">
161+
<input type="radio" name="searchType" value="vendor" aria-describedby="filter-vendor-desc">
162+
<span class="radio-custom"></span>
163+
Vendor
164+
</label>
165+
<label class="radio-option">
166+
<input type="radio" name="searchType" value="device" aria-describedby="filter-device-desc">
167+
<span class="radio-custom"></span>
168+
Device
169+
</label>
108170
</div>
109-
</div>
171+
<div class="sr-only">
172+
<div id="filter-all-desc">Search both vendors and devices</div>
173+
<div id="filter-vendor-desc">Search vendors only</div>
174+
<div id="filter-device-desc">Search devices only</div>
175+
</div>
176+
</fieldset>
110177
</div>
111178
</div>
112179
</section>
113180

114181
<!-- Search Results Statistics -->
115-
<section class="search-stats">
182+
<section class="search-stats" aria-label="Search results summary">
116183
<div class="container">
117-
<div class="search-results-info">
184+
<div class="search-results-info" role="status" aria-live="polite">
118185
<span id="searchResultsText">Showing all results</span>
119-
<span class="results-count" id="searchResults">-</span>
186+
<span class="results-count" id="searchResults" aria-label="Number of results">-</span>
120187
</div>
121188
</div>
122189
</section>
123190

124191
<!-- Results Section -->
125-
<section class="results-section">
192+
<main class="results-section" role="main" aria-label="USB device search results">
126193
<div class="container">
194+
<h2 class="sr-only">Search Results</h2>
195+
127196
<!-- Loading State -->
128-
<div id="loadingState" class="loading-state">
129-
<div class="spinner"></div>
197+
<div id="loadingState" class="loading-state" role="status" aria-live="polite">
198+
<div class="spinner" aria-hidden="true"></div>
130199
<p>Loading USB device data...</p>
131200
</div>
132201

133202
<!-- Empty State -->
134-
<div id="emptyState" class="empty-state" style="display: none;">
135-
<svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
203+
<div id="emptyState" class="empty-state" style="display: none;" role="status">
204+
<svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
136205
<circle cx="11" cy="11" r="8"/>
137206
<path d="m21 21-4.35-4.35"/>
138207
</svg>
@@ -141,14 +210,14 @@ <h3>No matching results found</h3>
141210
</div>
142211

143212
<!-- Results List -->
144-
<div id="resultsList" class="results-list" style="display: none;"></div>
213+
<div id="resultsList" class="results-list" style="display: none;" role="region" aria-label="USB device results" aria-live="polite"></div>
145214

146215
<!-- Pagination -->
147-
<div id="pagination" class="pagination" style="display: none;">
216+
<nav id="pagination" class="pagination" style="display: none;" role="navigation" aria-label="Search results pagination">
148217
<div class="pagination-left">
149218
<div class="page-size-selector">
150219
<label for="pageSizeSelect">Items per page:</label>
151-
<select id="pageSizeSelect" class="page-size-select">
220+
<select id="pageSizeSelect" class="page-size-select" aria-label="Select number of items per page">
152221
<option value="25">25</option>
153222
<option value="50" selected>50</option>
154223
<option value="100">100</option>
@@ -158,36 +227,37 @@ <h3>No matching results found</h3>
158227
</div>
159228

160229
<div class="pagination-center">
161-
<button id="prevPage" class="page-btn" disabled>
162-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
230+
<button id="prevPage" class="page-btn" disabled aria-label="Go to previous page">
231+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
163232
<polyline points="15,18 9,12 15,6"/>
164233
</svg>
165234
Previous
166235
</button>
167236

168237
<div class="page-jump">
238+
<label for="pageJumpInput" class="sr-only">Jump to page number</label>
169239
<span>Page</span>
170-
<input type="number" id="pageJumpInput" class="page-jump-input" min="1" value="1">
240+
<input type="number" id="pageJumpInput" class="page-jump-input" min="1" value="1" aria-label="Page number">
171241
<span>of</span>
172-
<button id="pageJumpBtn" class="page-jump-btn">Go</button>
242+
<button id="pageJumpBtn" class="page-jump-btn" aria-label="Jump to specified page">Go</button>
173243
</div>
174244

175-
<button id="nextPage" class="page-btn" disabled>
245+
<button id="nextPage" class="page-btn" disabled aria-label="Go to next page">
176246
Next
177-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
247+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
178248
<polyline points="9,18 15,12 9,6"/>
179249
</svg>
180250
</button>
181251
</div>
182252

183253
<div class="pagination-right">
184254
<div class="page-info">
185-
<span id="pageInfo">Page 1 of 1</span>
255+
<span id="pageInfo" aria-live="polite">Page 1 of 1</span>
186256
</div>
187257
</div>
188-
</div>
258+
</nav>
189259
</div>
190-
</section>
260+
</main>
191261
</div>
192262
<script type="module" src="/src/main.ts"></script>
193263
</body>

‎public/favicon.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎public/robots.txt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
User-agent: *
2+
Allow: /
3+
4+
Sitemap: https://drswith.github.io/usb.ids/sitemap.xml

‎public/sitemap.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3+
<url>
4+
<loc>https://drswith.github.io/usb.ids/</loc>
5+
<lastmod>2024-01-01</lastmod>
6+
<changefreq>daily</changefreq>
7+
<priority>1.0</priority>
8+
</url>
9+
</urlset>

‎src/styles.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,19 @@
55
box-sizing: border-box;
66
}
77

8+
/* Screen reader only content */
9+
.sr-only {
10+
position: absolute;
11+
width: 1px;
12+
height: 1px;
13+
padding: 0;
14+
margin: -1px;
15+
overflow: hidden;
16+
clip: rect(0, 0, 0, 0);
17+
white-space: nowrap;
18+
border: 0;
19+
}
20+
821
/* CSS variables definition */
922
:root {
1023
--primary-color: #3b82f6;
@@ -283,6 +296,20 @@ html {
283296
gap: 2rem;
284297
align-items: center;
285298
flex-wrap: wrap;
299+
border: none;
300+
padding: 0;
301+
margin: 0;
302+
background: none;
303+
}
304+
305+
.filter-options legend {
306+
font-weight: 500;
307+
color: var(--text-secondary);
308+
font-size: 0.9rem;
309+
padding: 0;
310+
margin: 0;
311+
border: none;
312+
float: none;
286313
}
287314

288315
.filter-group {

0 commit comments

Comments
 (0)