Skip to content

Commit 94198c9

Browse files
Timna BrownTimna Brown
Timna Brown
authored and
Timna Brown
committed
feat(web-app): set light mode as default and add org/owner footer
- Remove dark-mode-on-load; light theme is now the default - Theme toggle button initializes as '🌙 Dark Mode' - Add site footer with Cloud2BR org avatar/name/link and owner/founder section (brown9804 avatar, @brown9804 link, LinkedIn link) - Footer adapts to dark mode when toggled
1 parent 78de567 commit 94198c9

3 files changed

Lines changed: 169 additions & 3 deletions

File tree

‎tool/web-app/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<body>
1010
<header>
1111
<h1>Azure Database Selector</h1>
12-
<button id="theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode" tabindex="0">🌙</button>
12+
<button id="theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode" tabindex="0">🌙 Dark Mode</button>
1313
</header>
1414
<main class="two-panel-layout">
1515
<section class="left-panel">
@@ -172,6 +172,34 @@ <h4>Compare Options</h4>
172172
</div>
173173
</section>
174174
</main>
175+
<footer class="site-footer">
176+
<div class="footer-inner">
177+
<div class="footer-org">
178+
<a href="https://github.com/Cloud2BR-MSFTLearningHub" target="_blank" rel="noopener" class="footer-org-link">
179+
<img src="https://github.com/Cloud2BR-MSFTLearningHub.png?size=64" alt="Cloud2BR org avatar" class="footer-org-avatar" />
180+
<span class="footer-org-name">Cloud2BR Open Source Microsoft Cloud Sandbox - Learning Hub</span>
181+
</a>
182+
</div>
183+
<div class="footer-divider"></div>
184+
<div class="footer-owner">
185+
<span class="footer-owner-label">Owner / Founder</span>
186+
<div class="footer-owner-info">
187+
<a href="https://github.com/brown9804" target="_blank" rel="noopener" class="footer-owner-link">
188+
<img src="https://github.com/brown9804.png?size=64" alt="brown9804 avatar" class="footer-owner-avatar" />
189+
<span>@brown9804</span>
190+
</a>
191+
<a href="https://www.linkedin.com/in/timna-b-939492161/" target="_blank" rel="noopener" class="footer-linkedin">
192+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.268c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 11.268h-3v-5.604c0-1.337-.025-3.059-1.865-3.059-1.865 0-2.151 1.455-2.151 2.958v5.705h-3v-10h2.881v1.367h.041c.401-.761 1.381-1.563 2.843-1.563 3.042 0 3.604 2.002 3.604 4.604v5.592z"/></svg>
193+
LinkedIn
194+
</a>
195+
</div>
196+
</div>
197+
<div class="footer-copy">
198+
&copy; <span id="footer-year"></span> Cloud2BR-MSFTLearningHub
199+
</div>
200+
</div>
201+
</footer>
202+
<script>document.getElementById('footer-year').textContent = new Date().getFullYear();</script>
175203
<script src="script.js"></script>
176204
</body>
177205
</html>

‎tool/web-app/script.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
document.addEventListener('DOMContentLoaded', () => {
2-
// Enable dark mode by default
3-
document.body.classList.add('dark-mode');
2+
// Light mode is the default
43

54
const steps = document.querySelectorAll('.step');
65
let currentStep = 0;

‎tool/web-app/styles.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -382,4 +382,143 @@ body.dark-mode #comparison-table th {
382382
.tooltip-icon:focus, .tooltip-icon:hover {
383383
color: #005fa3;
384384
text-shadow: 0 0 4px #90caf9;
385+
}
386+
387+
/* --- Site Footer --- */
388+
.site-footer {
389+
background: #f0f4f8;
390+
border-top: 1px solid #d0dce8;
391+
margin-top: 2.5rem;
392+
padding: 2rem 1rem 1.2rem;
393+
font-size: 0.95em;
394+
color: #444;
395+
}
396+
.footer-inner {
397+
max-width: 900px;
398+
margin: 0 auto;
399+
display: flex;
400+
flex-direction: column;
401+
align-items: center;
402+
gap: 1.2rem;
403+
}
404+
.footer-org {
405+
display: flex;
406+
justify-content: center;
407+
}
408+
.footer-org-link {
409+
display: flex;
410+
align-items: center;
411+
gap: 0.75rem;
412+
text-decoration: none;
413+
color: #0078d4;
414+
font-weight: 600;
415+
font-size: 1.05em;
416+
transition: color 0.2s;
417+
}
418+
.footer-org-link:hover {
419+
color: #005fa3;
420+
}
421+
.footer-org-avatar {
422+
width: 48px;
423+
height: 48px;
424+
border-radius: 50%;
425+
border: 2px solid #0078d4;
426+
object-fit: cover;
427+
}
428+
.footer-org-name {
429+
max-width: 320px;
430+
line-height: 1.3;
431+
}
432+
.footer-divider {
433+
width: 60px;
434+
height: 2px;
435+
background: #d0dce8;
436+
border-radius: 2px;
437+
}
438+
.footer-owner {
439+
display: flex;
440+
flex-direction: column;
441+
align-items: center;
442+
gap: 0.5rem;
443+
}
444+
.footer-owner-label {
445+
font-size: 0.82em;
446+
text-transform: uppercase;
447+
letter-spacing: 0.08em;
448+
color: #888;
449+
font-weight: 600;
450+
}
451+
.footer-owner-info {
452+
display: flex;
453+
align-items: center;
454+
gap: 1rem;
455+
}
456+
.footer-owner-avatar {
457+
width: 40px;
458+
height: 40px;
459+
border-radius: 50%;
460+
border: 2px solid #ccc;
461+
object-fit: cover;
462+
}
463+
.footer-owner-link {
464+
display: flex;
465+
align-items: center;
466+
gap: 0.5rem;
467+
text-decoration: none;
468+
color: #333;
469+
font-weight: 500;
470+
transition: color 0.2s;
471+
}
472+
.footer-owner-link:hover {
473+
color: #0078d4;
474+
}
475+
.footer-linkedin {
476+
display: flex;
477+
align-items: center;
478+
gap: 0.3rem;
479+
text-decoration: none;
480+
color: #0a66c2;
481+
font-weight: 500;
482+
transition: color 0.2s;
483+
}
484+
.footer-linkedin:hover {
485+
color: #004182;
486+
}
487+
.footer-copy {
488+
font-size: 0.85em;
489+
color: #999;
490+
}
491+
492+
/* Dark mode footer */
493+
body.dark-mode .site-footer {
494+
background: #1a1d21;
495+
border-top-color: #2d3238;
496+
color: #aaa;
497+
}
498+
body.dark-mode .footer-org-link {
499+
color: #90caf9;
500+
}
501+
body.dark-mode .footer-org-link:hover {
502+
color: #64b5f6;
503+
}
504+
body.dark-mode .footer-org-avatar {
505+
border-color: #90caf9;
506+
}
507+
body.dark-mode .footer-divider {
508+
background: #2d3238;
509+
}
510+
body.dark-mode .footer-owner-avatar {
511+
border-color: #444;
512+
}
513+
body.dark-mode .footer-owner-link {
514+
color: #ccc;
515+
}
516+
body.dark-mode .footer-owner-link:hover {
517+
color: #90caf9;
518+
}
519+
body.dark-mode .footer-linkedin {
520+
color: #64b5f6;
521+
}
522+
body.dark-mode .footer-copy {
523+
color: #666;
385524
}

0 commit comments

Comments
 (0)