Skip to content

Commit 13b65a9

Browse files
boogieboogie
authored
Merge pull request #12 from boogie/claude/modernize-login-design-011CUTm8EQ2bRuJeP7svAo5C
Modernize UI with card-based design and improved styling
2 parents 26067b5 + 2902353 commit 13b65a9

2 files changed

Lines changed: 250 additions & 55 deletions

File tree

‎css/mcumgr.css‎

Lines changed: 144 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,165 @@
1+
/* General Layout */
2+
body {
3+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
4+
min-height: 100vh;
5+
}
6+
7+
main.container {
8+
padding-top: 80px;
9+
padding-bottom: 40px;
10+
}
11+
112
.content {
2-
padding: 10px 0;
13+
padding: 20px 0;
14+
}
15+
16+
/* Login Card */
17+
.login-card {
18+
border-radius: 16px;
19+
border: none;
20+
animation: fadeInUp 0.6s ease-out;
21+
}
22+
23+
.login-card .card-body {
24+
background: white;
25+
border-radius: 16px;
26+
}
27+
28+
/* Animations */
29+
@keyframes fadeInUp {
30+
from {
31+
opacity: 0;
32+
transform: translateY(30px);
33+
}
34+
to {
35+
opacity: 1;
36+
transform: translateY(0);
37+
}
338
}
439

40+
/* Card Enhancements */
41+
.card {
42+
border-radius: 12px;
43+
border: none;
44+
transition: transform 0.2s ease, box-shadow 0.2s ease;
45+
}
46+
47+
.card:hover {
48+
transform: translateY(-2px);
49+
}
50+
51+
.card-header {
52+
border-radius: 12px 12px 0 0 !important;
53+
border-bottom: none;
54+
padding: 1rem 1.5rem;
55+
}
56+
57+
/* Image Cards - Modern Design */
558
.image {
6-
background: #ddd;
7-
border: 2px solid #aaa;
8-
margin: 10px 0;
9-
padding: 10px;
59+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
60+
border: none;
61+
border-radius: 12px;
62+
margin: 15px 0;
63+
padding: 20px;
64+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
65+
transition: all 0.3s ease;
66+
}
67+
68+
.image:hover {
69+
transform: translateY(-2px);
70+
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
1071
}
1172

1273
.image.active {
13-
background: #eee;
14-
border: 2px solid #0a0;
15-
margin: 10px 0;
16-
padding: 8px;
74+
background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
75+
border: 2px solid #10b981;
76+
padding: 18px;
77+
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
78+
}
79+
80+
.image h2 {
81+
font-size: 1.25rem;
82+
font-weight: 600;
83+
margin-bottom: 15px;
84+
color: #1f2937;
1785
}
1886

87+
/* Tables - Modern Look */
1988
table {
2089
border-collapse: collapse;
21-
border: 1px solid #700;
90+
border: none;
91+
width: 100%;
92+
border-radius: 8px;
93+
overflow: hidden;
94+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
2295
}
2396

2497
table th {
25-
padding: 5px;
98+
padding: 12px 16px;
2699
text-align: left;
27-
font-weight: normal;
28-
font-size: 0.9em;
100+
font-weight: 600;
101+
font-size: 0.875rem;
29102
color: #fff;
30-
background: #700;
103+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
104+
text-transform: uppercase;
105+
letter-spacing: 0.5px;
31106
}
32107

33108
table td {
34-
padding: 5px;
109+
padding: 12px 16px;
35110
text-align: left;
36-
font-size: 0.9em;
37-
border-bottom: 1px solid #700;
111+
font-size: 0.9rem;
112+
border-bottom: 1px solid #e5e7eb;
113+
background: white;
114+
}
115+
116+
table tr:last-child td {
117+
border-bottom: none;
118+
}
119+
120+
table tr:hover td {
121+
background: #f9fafb;
122+
}
123+
124+
/* Upload Status Card */
125+
.upload-status-card {
126+
background: #f3f4f6;
127+
border-radius: 8px;
128+
padding: 16px;
129+
border-left: 4px solid #3b82f6;
130+
}
131+
132+
/* Button Enhancements */
133+
.btn {
134+
border-radius: 8px;
135+
font-weight: 500;
136+
padding: 0.5rem 1.25rem;
137+
transition: all 0.2s ease;
138+
}
139+
140+
.btn-lg {
141+
padding: 0.75rem 1.5rem;
142+
font-size: 1.1rem;
143+
}
144+
145+
.btn:hover {
146+
transform: translateY(-1px);
147+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
148+
}
149+
150+
/* Alert Enhancements */
151+
.alert {
152+
border-radius: 10px;
153+
border: none;
154+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
155+
}
156+
157+
/* Navbar Enhancement */
158+
.navbar {
159+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
160+
}
161+
162+
/* Spinner Enhancement */
163+
.spinner-border {
164+
border-width: 0.3rem;
38165
}

‎index.html‎

Lines changed: 106 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -20,56 +20,124 @@
2020
<main role="main" class="container">
2121

2222
<div class="starter-template">
23-
<h1>mcumgr web</h1>
23+
<!-- Initial/Login Screen -->
2424
<div class="content" id="initial-screen">
25-
<div class="alert alert-primary" role="alert" id="bluetooth-is-available">
26-
<b><span id="bluetooth-is-available-message"></span></b>
27-
This tool is compatible with desktops (or laptops) with the <b>latest Chrome and Edge</b> browsers (other Chromium-based browsers may also work), and working
28-
Bluetooth connection (most laptops have them these days). You can also try it from Chrome on Android, or Bluefy on iOS/iPadOS.
29-
</div>
30-
<div id="connect-block" style="display: none;">
31-
<div class="form-group form-inline">
32-
<div class="col-auto">
33-
<input id="device-name-input" type="text" class="form-control" id="device-name-input" placeholder="Device name (optional)">
34-
</div>
35-
<div class="col-auto">
36-
<button id="button-connect" type="submit" class="btn btn-primary"><i class="bi-bluetooth"></i> Connect</button>
25+
<div class="row justify-content-center">
26+
<div class="col-md-8 col-lg-6">
27+
<div class="card shadow-lg login-card">
28+
<div class="card-body p-5">
29+
<div class="text-center mb-4">
30+
<i class="bi-bluetooth display-1 text-primary"></i>
31+
<h1 class="h2 mt-3 mb-2">mcumgr web</h1>
32+
<p class="text-muted">Web Bluetooth Device Manager</p>
33+
</div>
34+
35+
<div class="alert alert-primary" role="alert" id="bluetooth-is-available">
36+
<i class="bi-info-circle-fill me-2"></i>
37+
<strong><span id="bluetooth-is-available-message"></span></strong>
38+
<p class="mb-0 mt-2 small">
39+
This tool is compatible with desktops (or laptops) with the <b>latest Chrome and Edge</b> browsers (other Chromium-based browsers may also work), and working
40+
Bluetooth connection (most laptops have them these days). You can also try it from Chrome on Android, or Bluefy on iOS/iPadOS.
41+
</p>
42+
</div>
43+
44+
<div id="connect-block" style="display: none;">
45+
<div class="mb-3">
46+
<label for="device-name-input" class="form-label">Device Name (Optional)</label>
47+
<input id="device-name-input" type="text" class="form-control form-control-lg" placeholder="Enter device name">
48+
</div>
49+
<div class="d-grid">
50+
<button id="button-connect" type="submit" class="btn btn-primary btn-lg">
51+
<i class="bi-bluetooth me-2"></i> Connect to Device
52+
</button>
53+
</div>
54+
</div>
55+
</div>
3756
</div>
3857
</div>
3958
</div>
4059
</div>
60+
61+
<!-- Connecting Screen -->
4162
<div class="content" id="connecting-screen" style="display: none;">
42-
<div class="alert alert-primary" role="alert">
43-
Connecting...
44-
</div>
63+
<div class="row justify-content-center">
64+
<div class="col-md-6">
65+
<div class="card shadow-lg">
66+
<div class="card-body text-center p-5">
67+
<div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
68+
<span class="visually-hidden">Loading...</span>
69+
</div>
70+
<h4>Connecting to device...</h4>
71+
<p class="text-muted">Please wait while we establish connection</p>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
4576
</div>
77+
78+
<!-- Connected Screen -->
4679
<div class="content" id="connected-screen" style="display: none;">
47-
<div class="container">
48-
<div>
49-
<button id="button-echo" type="submit" class="btn btn-primary"><i class="bi-soundwave"></i> Echo</button>
50-
<button id="button-disconnect" type="submit" class="btn btn-secondary"><i class="bi-x-square"></i> Disconnect</button>
51-
<button id="button-reset" type="submit" class="btn btn-info"><i class="bi-arrow-clockwise"></i> Reset</button>
80+
<!-- Device Controls Card -->
81+
<div class="card shadow-sm mb-4">
82+
<div class="card-header bg-primary text-white">
83+
<h5 class="mb-0"><i class="bi-tools me-2"></i>Device Controls</h5>
5284
</div>
53-
<hr />
54-
<h3>Images</h3>
55-
<div id="image-list"></div>
56-
<div>
57-
<button id="button-image-state" type="submit" class="btn btn-info"><i class="bi-arrow-down-circle"></i> Refresh</button>
58-
<button id="button-erase" type="submit" class="btn btn-warning"><i class="bi-eraser-fill"></i> Erase</button>
59-
<button id="button-test" type="submit" class="btn btn-primary" disabled><i class="bi-question-square"></i> Test</button>
60-
<button id="button-confirm" type="submit" class="btn btn-success" disabled><i class="bi-check2-square"></i> Confirm</button>
85+
<div class="card-body">
86+
<div class="d-flex gap-2 flex-wrap">
87+
<button id="button-echo" type="submit" class="btn btn-outline-primary">
88+
<i class="bi-soundwave"></i> Echo
89+
</button>
90+
<button id="button-reset" type="submit" class="btn btn-outline-info">
91+
<i class="bi-arrow-clockwise"></i> Reset
92+
</button>
93+
<button id="button-disconnect" type="submit" class="btn btn-outline-secondary ms-auto">
94+
<i class="bi-x-square"></i> Disconnect
95+
</button>
96+
</div>
6197
</div>
62-
<hr />
63-
<h3>Image Upload</h3>
64-
<div class="form-group">
65-
<input type="file" class="form-control" id="file-image" />
98+
</div>
99+
100+
<!-- Images Card -->
101+
<div class="card shadow-sm mb-4">
102+
<div class="card-header bg-primary text-white">
103+
<h5 class="mb-0"><i class="bi-file-earmark-binary me-2"></i>Images</h5>
104+
</div>
105+
<div class="card-body">
106+
<div id="image-list" class="mb-3"></div>
107+
<div class="d-flex gap-2 flex-wrap">
108+
<button id="button-image-state" type="submit" class="btn btn-info">
109+
<i class="bi-arrow-down-circle"></i> Refresh
110+
</button>
111+
<button id="button-erase" type="submit" class="btn btn-warning">
112+
<i class="bi-eraser-fill"></i> Erase
113+
</button>
114+
<button id="button-test" type="submit" class="btn btn-primary" disabled>
115+
<i class="bi-question-square"></i> Test
116+
</button>
117+
<button id="button-confirm" type="submit" class="btn btn-success" disabled>
118+
<i class="bi-check2-square"></i> Confirm
119+
</button>
120+
</div>
66121
</div>
67-
<div class="image">
68-
<div class="form-group">
69-
<div id="file-status">Select image file (.img)</div>
70-
<div id="file-info"></div>
122+
</div>
123+
124+
<!-- Image Upload Card -->
125+
<div class="card shadow-sm">
126+
<div class="card-header bg-primary text-white">
127+
<h5 class="mb-0"><i class="bi-cloud-upload me-2"></i>Image Upload</h5>
128+
</div>
129+
<div class="card-body">
130+
<div class="mb-3">
131+
<label for="file-image" class="form-label">Select firmware image</label>
132+
<input type="file" class="form-control" id="file-image" accept=".img" />
133+
</div>
134+
<div class="upload-status-card">
135+
<div id="file-status" class="mb-2">Select image file (.img)</div>
136+
<div id="file-info" class="text-muted small"></div>
71137
</div>
72-
<button class="btn btn-primary" id="file-upload" disabled><i class="bi-upload"></i> Upload</button>
138+
<button class="btn btn-primary btn-lg mt-3" id="file-upload" disabled>
139+
<i class="bi-upload me-2"></i> Upload Firmware
140+
</button>
73141
</div>
74142
</div>
75143
</div>

0 commit comments

Comments
 (0)