Skip to content

Commit cc5c36f

Browse files
committed
fix and improvew ui and fix scrollto iew
1 parent b2d4753 commit cc5c36f

3 files changed

Lines changed: 477 additions & 295 deletions

File tree

Clog/index.html

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@
1818
<meta property="og:description" content="A specialized technology powerhouse delivering PWA, open-source, and custom software solutions." />
1919
<meta property="og:image" content="/src/social.png" />
2020

21-
22-
2321
<script>
2422
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(reg => { console.log('Core Service Worker Active. Scope:', reg.scope); }) .catch(err => { console.error('× Service Worker Registration Failed:', err); }); }); }
2523
</script>
@@ -44,16 +42,14 @@
4442
<link rel="stylesheet" href="/css/github-markdown.min.css">
4543

4644
<!-- global css used every page -->
47-
<link rel="stylesheet" href="/css/global.css">
48-
<!-- current page css -->
49-
<link rel="stylesheet" href="/css/clog.css">
45+
<link rel="stylesheet" href="/css/global.css">
46+
<!-- current page css -->
47+
<link rel="stylesheet" href="/css/clog.css">
5048

5149
</head>
5250

5351
<body>
5452

55-
56-
5753
<div id="loader" class="loader" style="pointer-events: none;">
5854
<img style="height: 120px; width: 120px; pointer-events: none;" src="/src/mrc-nuca-loading.svg" alt="mrc-nuca-loading">
5955
<div class="loader-text-wrapper">
@@ -84,7 +80,6 @@
8480

8581
<div class="tech-grid"></div>
8682

87-
8883
<header class="header" id="navbar">
8984
<div class="nav-bar glass-panel">
9085
<a href="/" class="nav-logo">
@@ -114,9 +109,9 @@
114109
<a href="/CopyRight/">Brand Guidelines</a>
115110
<a href="/Contact/">Contact</a>
116111
<div class="mobile-menu-goto-id">
117-
<a href="#expertise">Expertise</a>
118-
<a href="#workflow">Workflow</a>
119-
<a href="#open-source">Open Source</a>
112+
<a href="#expertise">Expertise</a>
113+
<a href="#workflow">Workflow</a>
114+
<a href="#open-source">Open Source</a>
120115
</div>
121116
</div>
122117
</header>
@@ -133,27 +128,31 @@
133128
<use href="/src/global.svg#icon-sort"></use>
134129
</svg>
135130
</button>
136-
<select class="sort-select" id="sort-select">
131+
<select class="sort-select" id="sort-select" aria-label="Sort logs option">
137132
<option value="NameA">By Name Ascending</option>
138133
<option value="NameD">By Name Descending</option>
139134
<option value="DateA">By Date Ascending</option>
140135
<option value="DateD">By Date Descending</option>
141136
</select>
142-
<svg class="clearSort icon" onclick="clearSort()"><use href="/src/global.svg#icon-close"></use></svg>
137+
<svg class="clearSort icon" onclick="clearSort()" tabindex="0" role="button" aria-label="Clear sort options" onkeydown="if(event.key === 'Enter' || event.key === ' ') { clearSort(); event.preventDefault(); }">
138+
<use href="/src/global.svg#icon-close"></use>
139+
</svg>
143140
</div>
144141
<div class="search-wrapper glass-panel" id="search-wrapper">
145142
<button class="search-icon-btn" onclick="toggleSearch()" aria-label="Search">
146143
<svg class="icon"><use href="/src/global.svg#icon-search"></use></svg>
147144
</button>
148145
<input type="text" class="search-input" id="search-bar" placeholder="Type To Search..." oninput="handleSearchInput()" onblur="closeSearchIfEmpty()">
149-
<svg class="clearSearch icon" onclick="clearSearch()"><use href="/src/global.svg#icon-close"></use></svg>
146+
<svg class="clearSearch icon" onclick="clearSearch()" tabindex="0" role="button" aria-label="Clear search input" onkeydown="if(event.key === 'Enter' || event.key === ' ') { clearSearch(); event.preventDefault(); }">
147+
<use href="/src/global.svg#icon-close"></use>
148+
</svg>
150149
</div>
151150
</div>
152151

153152
<div class="layout-grid">
154-
<aside>
153+
<aside class="filter-panel">
155154
<div class="glass-panel sidebar-card pad-2">
156-
<div class="sidebar-header" id="sidebar-header" onclick="toggleMobileCategories()">
155+
<div class="sidebar-header" id="sidebar-header" onclick="toggleMobileCategories()" role="button" tabindex="0" aria-label="Toggle categories list" onkeydown="if(event.key === 'Enter' || event.key === ' ') { toggleMobileCategories(); event.preventDefault(); }">
157156
<div class="flex items-center gap-2">
158157
<svg class="icon txt-mrc"><use href="/src/global.svg#icon-category"></use></svg> Categories
159158
</div>
@@ -185,6 +184,15 @@
185184
<svg class="icon"><use href="/src/global.svg#icon-back"></use></svg> Back to Logs
186185
</button>
187186

187+
<!-- Table of Contents Section -->
188+
<div id="reader-toc-container" class="reader-toc-container glass-panel">
189+
<div class="toggleToc" onclick="toggleToC()" role="button" tabindex="0" aria-label="table of contents" onkeydown="if(event.key === 'Enter' || event.key === ' ') { toggleToC(); event.preventDefault(); }">
190+
<h4 style="margin: 0; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; color: #fff;">
191+
<svg class="icon" style="width: 16px; height: 16px; color: var(--mrc);"><use href="/src/global.svg#icon-category"></use></svg> Table of Contents
192+
</h4>
193+
</div>
194+
<div id="reader-toc" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; margin-top: 0.5rem;"></div>
195+
</div>
188196
<article class="glass-panel reader-container">
189197
<img src="" alt="Banner" id="full-img" class="reader-banner" onerror="this.style.display='none'">
190198

@@ -218,16 +226,6 @@ <h1 class="reader-title" id="full-title">Loading...</h1>
218226
</div>
219227
</div>
220228

221-
<!-- Table of Contents Section -->
222-
<div id="reader-toc-container" class="glass-panel" style="display: none; margin-bottom: 2rem; padding: 1rem 1.25rem; border-radius: 12px;">
223-
<div class="toggleToc" onclick="toggleToC()">
224-
<h4 style="margin: 0; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; color: #fff;">
225-
<svg class="icon" style="width: 16px; height: 16px; color: var(--mrc);"><use href="/src/global.svg#icon-category"></use></svg> Table of Contents
226-
</h4>
227-
<svg id="toc-toggle-icon" class="icon" style="width: 16px; height: 16px; transition: transform 0.3s; color: var(--text-muted);"><use href="/src/global.svg#icon-chevron-down"></use></svg>
228-
</div>
229-
<div id="reader-toc" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; margin-top: 0;"></div>
230-
</div>
231229

232230
<div class="markdown-body" id="full-body"></div>
233231
<div class="reader-meta-bottom">
@@ -318,9 +316,9 @@ <h4 class="uppercase flex txt-main txt-center gap-1 font-md pos-rel">Connect</h4
318316
</div>
319317
</div>
320318
</footer>
321-
<!-- handle loader , copyright year, animation and etc -->
319+
<!-- handle loader , copyright year, animation,menu and etc -->
322320
<script src="/js/global.js"></script>
323-
<!-- curentpage js -->
321+
<!-- currentpage js -->
324322
<script src="/js/clog.js"></script>
325323

326324
</body>

0 commit comments

Comments
 (0)