adminator-admin-dashboard 2.9.0 β†’ 4.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/CHANGELOG.md +422 -0
  2. package/CLAUDE.md +126 -154
  3. package/README.md +322 -376
  4. package/dist/2026.js +8751 -0
  5. package/dist/2026.js.map +1 -0
  6. package/dist/404.html +36 -16
  7. package/dist/500.html +36 -16
  8. package/dist/assets/static/images/logo.svg +3 -3
  9. package/dist/basic-table.html +152 -699
  10. package/dist/blank.html +42 -507
  11. package/dist/buttons.html +152 -448
  12. package/dist/calendar.html +246 -658
  13. package/dist/charts.html +124 -658
  14. package/dist/chat.html +209 -706
  15. package/dist/compose.html +141 -618
  16. package/dist/datatable.html +467 -991
  17. package/dist/email.html +430 -943
  18. package/dist/forms.html +208 -733
  19. package/dist/google-maps.html +123 -513
  20. package/dist/index.html +436 -1041
  21. package/dist/runtime.js +1299 -0
  22. package/dist/runtime.js.map +1 -0
  23. package/dist/signin.html +92 -92
  24. package/dist/signup.html +106 -91
  25. package/dist/ui.html +268 -897
  26. package/dist/vector-maps.html +132 -511
  27. package/dist/vendor-chartjs.js +14593 -0
  28. package/dist/vendor-chartjs.js.map +1 -0
  29. package/dist/vendor-fullcalendar.js +14793 -0
  30. package/dist/vendor-fullcalendar.js.map +1 -0
  31. package/dist/vendors.js +3758 -0
  32. package/dist/vendors.js.map +1 -0
  33. package/package.json +47 -50
  34. package/src/404.html +35 -15
  35. package/src/500.html +35 -15
  36. package/src/assets/scripts/2026/Shell.js +312 -0
  37. package/src/assets/scripts/2026/calendar.js +123 -0
  38. package/src/assets/scripts/2026/charts.js +259 -0
  39. package/src/assets/scripts/2026/index.js +35 -0
  40. package/src/assets/scripts/2026/init.js +207 -0
  41. package/src/assets/scripts/2026/maps.js +78 -0
  42. package/src/assets/scripts/2026/palette.js +266 -0
  43. package/src/assets/static/images/logo.svg +3 -3
  44. package/src/assets/styles/2026/_animations.scss +14 -0
  45. package/src/assets/styles/2026/_auth.scss +215 -0
  46. package/src/assets/styles/2026/_base.scss +37 -0
  47. package/src/assets/styles/2026/_calendar.scss +380 -0
  48. package/src/assets/styles/2026/_charts.scss +44 -0
  49. package/src/assets/styles/2026/_chat.scss +350 -0
  50. package/src/assets/styles/2026/_components.scss +140 -0
  51. package/src/assets/styles/2026/_dashboard.scss +520 -0
  52. package/src/assets/styles/2026/_data.scss +130 -0
  53. package/src/assets/styles/2026/_dropdowns.scss +128 -0
  54. package/src/assets/styles/2026/_email.scss +599 -0
  55. package/src/assets/styles/2026/_error.scss +98 -0
  56. package/src/assets/styles/2026/_forms.scss +215 -0
  57. package/src/assets/styles/2026/_fullcalendar.scss +134 -0
  58. package/src/assets/styles/2026/_palette.scss +173 -0
  59. package/src/assets/styles/2026/_responsive.scss +229 -0
  60. package/src/assets/styles/2026/_shell.scss +290 -0
  61. package/src/assets/styles/2026/_tokens.scss +80 -0
  62. package/src/assets/styles/2026/_ui.scss +365 -0
  63. package/src/assets/styles/2026/index.scss +23 -0
  64. package/src/basic-table.html +153 -710
  65. package/src/blank.html +42 -517
  66. package/src/buttons.html +152 -458
  67. package/src/calendar.html +246 -668
  68. package/src/charts.html +124 -668
  69. package/src/chat.html +209 -716
  70. package/src/compose.html +142 -629
  71. package/src/datatable.html +466 -1000
  72. package/src/email.html +429 -952
  73. package/src/forms.html +207 -742
  74. package/src/google-maps.html +128 -523
  75. package/src/index.html +438 -1050
  76. package/src/signin.html +92 -92
  77. package/src/signup.html +106 -91
  78. package/src/ui.html +267 -906
  79. package/src/vector-maps.html +133 -522
  80. package/dist/1e59d2330b4c6deb84b3.ttf +0 -0
  81. package/dist/20fd1704ea223900efa9.woff2 +0 -0
  82. package/dist/29b39089170885ae2967.woff +0 -0
  83. package/dist/8b43027f47b20503057d.eot +0 -0
  84. package/dist/9bad94440d49256265a5.eot +0 -0
  85. package/dist/assets/fontawesome-webfont.svg +0 -2671
  86. package/dist/assets/themify.svg +0 -362
  87. package/dist/eda8b94308c6f538f04a.ttf +0 -0
  88. package/dist/f691f37e57f04c152e23.woff +0 -0
  89. package/dist/main.js +0 -61331
  90. package/dist/main.js.map +0 -1
  91. package/src/assets/scripts/app 2.js +0 -645
  92. package/src/assets/scripts/app.js +0 -645
  93. package/src/assets/scripts/charts/chartJS/index.js +0 -148
  94. package/src/assets/scripts/charts/easyPieChart/index.js +0 -200
  95. package/src/assets/scripts/charts/index.js +0 -3
  96. package/src/assets/scripts/charts/sparkline/index.js +0 -208
  97. package/src/assets/scripts/chat/index.js +0 -11
  98. package/src/assets/scripts/components/Chart.js +0 -1390
  99. package/src/assets/scripts/components/Sidebar.js +0 -241
  100. package/src/assets/scripts/constants/colors.js +0 -274
  101. package/src/assets/scripts/datatable/index.js +0 -379
  102. package/src/assets/scripts/datepicker/index.js +0 -302
  103. package/src/assets/scripts/email/index.js +0 -25
  104. package/src/assets/scripts/fullcalendar/index.js +0 -86
  105. package/src/assets/scripts/googleMaps/index.js +0 -93
  106. package/src/assets/scripts/index.js +0 -18
  107. package/src/assets/scripts/masonry/index.js +0 -14
  108. package/src/assets/scripts/popover/index.js +0 -109
  109. package/src/assets/scripts/scrollbar/index.js +0 -10
  110. package/src/assets/scripts/search/index.js +0 -15
  111. package/src/assets/scripts/sidebar/index.js +0 -140
  112. package/src/assets/scripts/skycons/index.js +0 -52
  113. package/src/assets/scripts/ui/index.js +0 -412
  114. package/src/assets/scripts/utils/date.js +0 -242
  115. package/src/assets/scripts/utils/dom.js +0 -349
  116. package/src/assets/scripts/utils/index.js +0 -45
  117. package/src/assets/scripts/utils/theme.js +0 -107
  118. package/src/assets/scripts/vectorMaps/index.js +0 -277
  119. package/src/assets/styles/index.scss +0 -801
  120. package/src/assets/styles/spec/components/easyPieChart.scss +0 -11
  121. package/src/assets/styles/spec/components/footer.scss +0 -4
  122. package/src/assets/styles/spec/components/forms.scss +0 -288
  123. package/src/assets/styles/spec/components/index.scss +0 -9
  124. package/src/assets/styles/spec/components/loader.scss +0 -46
  125. package/src/assets/styles/spec/components/masonry.scss +0 -1
  126. package/src/assets/styles/spec/components/pageContainer.scss +0 -255
  127. package/src/assets/styles/spec/components/progressBar.scss +0 -6
  128. package/src/assets/styles/spec/components/sidebar.scss +0 -642
  129. package/src/assets/styles/spec/components/topbar.scss +0 -455
  130. package/src/assets/styles/spec/generic/base.scss +0 -102
  131. package/src/assets/styles/spec/generic/index.scss +0 -1
  132. package/src/assets/styles/spec/index.scss +0 -4
  133. package/src/assets/styles/spec/screens/chat.scss +0 -147
  134. package/src/assets/styles/spec/screens/email.scss +0 -108
  135. package/src/assets/styles/spec/screens/index.scss +0 -2
  136. package/src/assets/styles/spec/settings/baseColors.scss +0 -103
  137. package/src/assets/styles/spec/settings/borders.scss +0 -6
  138. package/src/assets/styles/spec/settings/breakpoints.scss +0 -26
  139. package/src/assets/styles/spec/settings/fonts.scss +0 -4
  140. package/src/assets/styles/spec/settings/index.scss +0 -4
  141. package/src/assets/styles/spec/settings/materialColors.scss +0 -550
  142. package/src/assets/styles/spec/tools/index.scss +0 -1
  143. package/src/assets/styles/spec/tools/mixins/clearfix.scss +0 -15
  144. package/src/assets/styles/spec/tools/mixins/index.scss +0 -3
  145. package/src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss +0 -58
  146. package/src/assets/styles/spec/tools/mixins/placeholder.scss +0 -10
  147. package/src/assets/styles/spec/utils/colors.scss +0 -33
  148. package/src/assets/styles/spec/utils/index.scss +0 -2
  149. package/src/assets/styles/spec/utils/layout/helpers/border.scss +0 -78
  150. package/src/assets/styles/spec/utils/layout/helpers/flex.scss +0 -220
  151. package/src/assets/styles/spec/utils/layout/helpers/index.scss +0 -11
  152. package/src/assets/styles/spec/utils/layout/helpers/layout.scss +0 -137
  153. package/src/assets/styles/spec/utils/layout/helpers/lists.scss +0 -23
  154. package/src/assets/styles/spec/utils/layout/helpers/margin.scss +0 -266
  155. package/src/assets/styles/spec/utils/layout/helpers/objects.scss +0 -91
  156. package/src/assets/styles/spec/utils/layout/helpers/padding.scss +0 -147
  157. package/src/assets/styles/spec/utils/layout/helpers/positions.scss +0 -118
  158. package/src/assets/styles/spec/utils/layout/helpers/pseudo.scss +0 -6
  159. package/src/assets/styles/spec/utils/layout/helpers/sizes.scss +0 -157
  160. package/src/assets/styles/spec/utils/layout/helpers/typography.scss +0 -127
  161. package/src/assets/styles/spec/utils/layout/index.scss +0 -3
  162. package/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss +0 -25
  163. package/src/assets/styles/spec/utils/layout/mixins/index.scss +0 -2
  164. package/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss +0 -28
  165. package/src/assets/styles/spec/utils/layout/utils/center.scss +0 -54
  166. package/src/assets/styles/spec/utils/layout/utils/gap.scss +0 -229
  167. package/src/assets/styles/spec/utils/layout/utils/index.scss +0 -5
  168. package/src/assets/styles/spec/utils/layout/utils/layers.scss +0 -5
  169. package/src/assets/styles/spec/utils/layout/utils/peers.scss +0 -35
  170. package/src/assets/styles/utils/mobile.scss +0 -954
  171. package/src/assets/styles/utils/theme.css +0 -97
  172. package/src/assets/styles/vendor/datepicker.scss +0 -183
  173. package/src/assets/styles/vendor/font-awesome.css +0 -2337
  174. package/src/assets/styles/vendor/fullcalendar.scss +0 -217
  175. package/src/assets/styles/vendor/index.scss +0 -8
  176. package/src/assets/styles/vendor/jquery.datatables.scss +0 -162
  177. package/src/assets/styles/vendor/perfectScrollbar.scss +0 -4
  178. package/src/assets/styles/vendor/sparkline.scss +0 -6
  179. package/src/assets/styles/vendor/themify-icons.css +0 -1081
package/dist/email.html CHANGED
@@ -1,991 +1,478 @@
1
1
  <!DOCTYPE html>
2
- <html>
2
+ <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
6
- <title>Email</title>
7
- <style>
8
- #loader {
9
- transition: all 0.3s ease-in-out;
10
- opacity: 1;
11
- visibility: visible;
12
- position: fixed;
13
- height: 100vh;
14
- width: 100%;
15
- background: #fff;
16
- z-index: 90000;
17
- }
18
-
19
- #loader.fadeOut {
20
- opacity: 0;
21
- visibility: hidden;
22
- }
23
-
24
-
25
-
26
- .spinner {
27
- width: 40px;
28
- height: 40px;
29
- position: absolute;
30
- top: calc(50% - 20px);
31
- left: calc(50% - 20px);
32
- background-color: #333;
33
- border-radius: 100%;
34
- -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
35
- animation: sk-scaleout 1.0s infinite ease-in-out;
36
- }
37
-
38
- @-webkit-keyframes sk-scaleout {
39
- 0% { -webkit-transform: scale(0) }
40
- 100% {
41
- -webkit-transform: scale(1.0);
42
- opacity: 0;
43
- }
44
- }
45
-
46
- @keyframes sk-scaleout {
47
- 0% {
48
- -webkit-transform: scale(0);
49
- transform: scale(0);
50
- } 100% {
51
- -webkit-transform: scale(1.0);
52
- transform: scale(1.0);
53
- opacity: 0;
54
- }
55
- }
56
- </style>
57
- <script defer="defer" src="main.js"></script></head>
58
- <body class="app">
59
-
60
-
61
-
62
-
63
-
64
-
65
- <div id="loader">
66
- <div class="spinner"></div>
67
- </div>
68
-
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>Email Β· 2026 Redesign Preview</title>
69
7
  <script>
70
- window.addEventListener('load', function load() {
71
- const loader = document.getElementById('loader');
72
- setTimeout(function() {
73
- loader.classList.add('fadeOut');
74
- }, 300);
75
- });
8
+ (function () {
9
+ try {
10
+ var saved = localStorage.getItem('dash26-theme');
11
+ var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
12
+ document.documentElement.setAttribute('data-theme', saved || (prefersDark ? 'dark' : 'light'));
13
+ } catch (e) {
14
+ document.documentElement.setAttribute('data-theme', 'light');
15
+ }
16
+ })();
76
17
  </script>
77
-
78
-
79
-
80
- <div>
81
- <!-- #Left Sidebar ==================== -->
82
- <div class="sidebar">
83
- <div class="sidebar-inner">
84
- <!-- ### $Sidebar Header ### -->
85
- <div class="sidebar-logo">
86
- <div class="peers ai-c fxw-nw">
87
- <div class="peer peer-greed">
88
- <a class="sidebar-link td-n" href="index.html">
89
- <div class="peers ai-c fxw-nw">
90
- <div class="peer">
91
- <div class="logo">
92
- <img src="assets/static/images/logo.svg" alt="">
93
- </div>
94
- </div>
95
- <div class="peer peer-greed">
96
- <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
97
- </div>
98
- </div>
99
- </a>
100
- </div>
101
- <div class="peer">
102
- <div class="mobile-toggle sidebar-toggle">
103
- <a href="" class="td-n">
104
- <i class="ti-arrow-circle-left"></i>
105
- </a>
106
- </div>
107
- </div>
108
- </div>
18
+ <script defer="defer" src="runtime.js"></script><script defer="defer" src="vendor-fullcalendar.js"></script><script defer="defer" src="vendor-chartjs.js"></script><script defer="defer" src="vendors.js"></script><script defer="defer" src="2026.js"></script></head>
19
+ <body data-active="email" data-crumbs="Communications | Email | Inbox">
20
+ <div class="shell">
21
+ <div data-shell-sidebar></div>
22
+ <div class="main">
23
+ <div data-shell-topbar></div>
24
+ <main class="content">
25
+
26
+ <section class="hero mail-hero">
27
+ <div class="hero-text">
28
+ <span class="eyebrow" id="heroDate">Thursday Β· April 23 Β· 2026</span>
29
+ <h1 class="hero-title">Inbox Β· <span class="accent">12 unread</span></h1>
30
+ <p class="hero-sub">You're caught up on everything before today. <strong>3 new threads</strong> need a reply, and <em>2 invoices</em> are awaiting your approval.</p>
109
31
  </div>
32
+ <div class="hero-actions">
33
+ <button class="btn btn--ghost">
34
+ <svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
35
+ Refresh
36
+ </button>
37
+ <button class="btn btn--primary">
38
+ <svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>
39
+ Compose
40
+ </button>
41
+ </div>
42
+ </section>
43
+
44
+
45
+ <section class="mail-shell" aria-label="Email">
110
46
 
111
- <!-- ### $Sidebar Menu ### -->
112
- <ul class="sidebar-menu scrollable pos-r">
113
- <li class="nav-item mT-30">
114
- <a class="sidebar-link" href="index.html">
115
- <span class="icon-holder">
116
- <i class="c-blue-500 ti-home"></i>
117
- </span>
118
- <span class="title">Dashboard</span>
47
+
48
+ <aside class="mail-rail">
49
+ <a class="mail-compose" href="#">
50
+ <svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>
51
+ Compose
52
+ </a>
53
+
54
+ <div class="mail-rail-section">
55
+ <div class="mail-rail-label">Folders</div>
56
+ <a class="mail-folder is-active" href="#">
57
+ <svg viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
58
+ <span class="mail-folder-name">Inbox</span>
59
+ <span class="mail-folder-count is-strong">12</span>
119
60
  </a>
120
- </li>
121
- <li class="nav-item">
122
- <a class="sidebar-link" href="email.html">
123
- <span class="icon-holder">
124
- <i class="c-brown-500 ti-email"></i>
125
- </span>
126
- <span class="title">Email</span>
61
+ <a class="mail-folder" href="#">
62
+ <svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
63
+ <span class="mail-folder-name">Starred</span>
64
+ <span class="mail-folder-count">5</span>
127
65
  </a>
128
- </li>
129
- <li class="nav-item">
130
- <a class="sidebar-link" href="compose.html">
131
- <span class="icon-holder">
132
- <i class="c-blue-500 ti-share"></i>
133
- </span>
134
- <span class="title">Compose</span>
66
+ <a class="mail-folder" href="#">
67
+ <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
68
+ <span class="mail-folder-name">Snoozed</span>
69
+ <span class="mail-folder-count">3</span>
135
70
  </a>
136
- </li>
137
- <li class="nav-item">
138
- <a class="sidebar-link" href="calendar.html">
139
- <span class="icon-holder">
140
- <i class="c-deep-orange-500 ti-calendar"></i>
141
- </span>
142
- <span class="title">Calendar</span>
71
+ <a class="mail-folder" href="#">
72
+ <svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
73
+ <span class="mail-folder-name">Sent</span>
74
+ <span class="mail-folder-count">128</span>
143
75
  </a>
144
- </li>
145
- <li class="nav-item">
146
- <a class="sidebar-link" href="chat.html">
147
- <span class="icon-holder">
148
- <i class="c-deep-purple-500 ti-comment-alt"></i>
149
- </span>
150
- <span class="title">Chat</span>
76
+ <a class="mail-folder" href="#">
77
+ <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
78
+ <span class="mail-folder-name">Drafts</span>
79
+ <span class="mail-folder-count">2</span>
151
80
  </a>
152
- </li>
153
- <li class="nav-item">
154
- <a class="sidebar-link" href="charts.html">
155
- <span class="icon-holder">
156
- <i class="c-indigo-500 ti-bar-chart"></i>
157
- </span>
158
- <span class="title">Charts</span>
81
+ <a class="mail-folder" href="#">
82
+ <svg viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
83
+ <span class="mail-folder-name">Spam</span>
84
+ <span class="mail-folder-count">9</span>
159
85
  </a>
160
- </li>
161
- <li class="nav-item">
162
- <a class="sidebar-link" href="forms.html">
163
- <span class="icon-holder">
164
- <i class="c-light-blue-500 ti-pencil"></i>
165
- </span>
166
- <span class="title">Forms</span>
86
+ <a class="mail-folder" href="#">
87
+ <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6 18 20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
88
+ <span class="mail-folder-name">Trash</span>
167
89
  </a>
168
- </li>
169
- <li class="nav-item dropdown">
170
- <a class="sidebar-link" href="ui.html">
171
- <span class="icon-holder">
172
- <i class="c-pink-500 ti-palette"></i>
173
- </span>
174
- <span class="title">UI Elements</span>
90
+ </div>
91
+
92
+ <div class="mail-rail-section">
93
+ <div class="mail-rail-label">Labels</div>
94
+ <a class="mail-folder" href="#">
95
+ <span class="mail-label-dot" style="background: var(--primary);"></span>
96
+ <span class="mail-folder-name">Work</span>
97
+ <span class="mail-folder-count">42</span>
175
98
  </a>
176
- </li>
177
- <li class="nav-item dropdown">
178
- <a class="dropdown-toggle" href="javascript:void(0);">
179
- <span class="icon-holder">
180
- <i class="c-orange-500 ti-layout-list-thumb"></i>
181
- </span>
182
- <span class="title">Tables</span>
183
- <span class="arrow">
184
- <i class="ti-angle-right"></i>
185
- </span>
99
+ <a class="mail-folder" href="#">
100
+ <span class="mail-label-dot" style="background: var(--success);"></span>
101
+ <span class="mail-folder-name">Team</span>
102
+ <span class="mail-folder-count">28</span>
186
103
  </a>
187
- <ul class="dropdown-menu">
188
- <li>
189
- <a class="sidebar-link" href="basic-table.html">Basic Table</a>
190
- </li>
191
- <li>
192
- <a class="sidebar-link" href="datatable.html">Data Table</a>
193
- </li>
194
- </ul>
195
- </li>
196
- <li class="nav-item dropdown">
197
- <a class="dropdown-toggle" href="javascript:void(0);">
198
- <span class="icon-holder">
199
- <i class="c-purple-500 ti-map"></i>
200
- </span>
201
- <span class="title">Maps</span>
202
- <span class="arrow">
203
- <i class="ti-angle-right"></i>
204
- </span>
104
+ <a class="mail-folder" href="#">
105
+ <span class="mail-label-dot" style="background: var(--purple);"></span>
106
+ <span class="mail-folder-name">Finance</span>
107
+ <span class="mail-folder-count">11</span>
205
108
  </a>
206
- <ul class="dropdown-menu">
207
- <li>
208
- <a href="google-maps.html">Google Map</a>
209
- </li>
210
- <li>
211
- <a href="vector-maps.html">Vector Map</a>
212
- </li>
213
- </ul>
214
- </li>
215
- <li class="nav-item dropdown">
216
- <a class="dropdown-toggle" href="javascript:void(0);">
217
- <span class="icon-holder">
218
- <i class="c-red-500 ti-files"></i>
219
- </span>
220
- <span class="title">Pages</span>
221
- <span class="arrow">
222
- <i class="ti-angle-right"></i>
223
- </span>
109
+ <a class="mail-folder" href="#">
110
+ <span class="mail-label-dot" style="background: var(--warning);"></span>
111
+ <span class="mail-folder-name">Invoices</span>
112
+ <span class="mail-folder-count">6</span>
224
113
  </a>
225
- <ul class="dropdown-menu">
226
- <li>
227
- <a class="sidebar-link" href="blank.html">Blank</a>
228
- </li>
229
- <li>
230
- <a class="sidebar-link" href="404.html">404</a>
231
- </li>
232
- <li>
233
- <a class="sidebar-link" href="500.html">500</a>
234
- </li>
235
- <li>
236
- <a class="sidebar-link" href="signin.html">Sign In</a>
237
- </li>
238
- <li>
239
- <a class="sidebar-link" href="signup.html">Sign Up</a>
240
- </li>
241
- </ul>
242
- </li>
243
- <li class="nav-item dropdown">
244
- <a class="dropdown-toggle" href="javascript:void(0);">
245
- <span class="icon-holder">
246
- <i class="c-teal-500 ti-view-list-alt"></i>
247
- </span>
248
- <span class="title">Multiple Levels</span>
249
- <span class="arrow">
250
- <i class="ti-angle-right"></i>
251
- </span>
114
+ <a class="mail-folder" href="#">
115
+ <span class="mail-label-dot" style="background: var(--info);"></span>
116
+ <span class="mail-folder-name">Travel</span>
117
+ <span class="mail-folder-count">4</span>
252
118
  </a>
253
- <ul class="dropdown-menu">
254
- <li class="nav-item dropdown">
255
- <a href="javascript:void(0);">
256
- <span>Menu Item</span>
257
- </a>
258
- </li>
259
- <li class="nav-item dropdown">
260
- <a href="javascript:void(0);">
261
- <span>Menu Item</span>
262
- <span class="arrow">
263
- <i class="ti-angle-right"></i>
119
+ </div>
120
+
121
+ <div class="mail-rail-storage">
122
+ <div class="mail-storage-head">
123
+ <span>Storage</span>
124
+ <span class="num">7.4 / 15 GB</span>
125
+ </div>
126
+ <div class="mail-storage-bar"><div class="mail-storage-bar-fill" style="width: 49%;"></div></div>
127
+ <div class="mail-storage-foot">49% used Β· <a href="#">Upgrade</a></div>
128
+ </div>
129
+ </aside>
130
+
131
+
132
+ <section class="mail-list">
133
+ <div class="mail-list-head">
134
+ <div class="mail-list-toptools">
135
+ <div class="mail-list-title">Inbox<span class="meta">12 UNREAD Β· 246 TOTAL</span></div>
136
+ <div class="mail-list-tools">
137
+ <button class="mail-tool" aria-label="Filter">
138
+ <svg viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
139
+ </button>
140
+ <button class="mail-tool" aria-label="Sort">
141
+ <svg viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
142
+ </button>
143
+ </div>
144
+ </div>
145
+ <div class="mail-search">
146
+ <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
147
+ <input type="text" placeholder="Search mail…">
148
+ </div>
149
+ </div>
150
+
151
+ <div class="mail-tabs">
152
+ <a class="mail-tab is-active" href="#">Primary <span class="num">8</span></a>
153
+ <a class="mail-tab" href="#">Updates <span class="num">3</span></a>
154
+ <a class="mail-tab" href="#">Promotions <span class="num">1</span></a>
155
+ </div>
156
+
157
+ <div class="mail-list-scroll">
158
+ <article class="mail-row is-unread">
159
+ <div class="mail-row-avatar ma-1">SK</div>
160
+ <div class="mail-row-body">
161
+ <div class="mail-row-top">
162
+ <div class="mail-row-from">Sara Kim</div>
163
+ <div class="mail-row-time">10:42</div>
164
+ </div>
165
+ <div class="mail-row-subject">Q2 launch plan β€” review before Thursday</div>
166
+ <div class="mail-row-preview">Hey John, attaching the latest deck and revised timeline. Two open questions on pricing β€” would love your call before…</div>
167
+ <div class="mail-row-tags">
168
+ <span class="mail-tag work">Work</span>
169
+ <span class="mail-tag attach">
170
+ <svg viewBox="0 0 24 24"><path d="m21 12-9 9a6 6 0 0 1-8-8l9-9a4 4 0 0 1 6 6l-9 9a2 2 0 0 1-3-3l9-9"/></svg>
171
+ 2
264
172
  </span>
265
- </a>
266
- <ul class="dropdown-menu">
267
- <li>
268
- <a href="javascript:void(0);">Menu Item</a>
269
- </li>
270
- <li>
271
- <a href="javascript:void(0);">Menu Item</a>
272
- </li>
273
- </ul>
274
- </li>
275
- </ul>
276
- </li>
277
- </ul>
278
- </div>
279
- </div>
173
+ </div>
174
+ </div>
175
+ <div class="mail-star is-on" aria-label="Starred"><svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
176
+ </article>
280
177
 
281
- <!-- #Main ============================ -->
282
- <div class="page-container">
283
- <!-- ### $Topbar ### -->
284
- <div class="header navbar">
285
- <div class="header-container">
286
- <ul class="nav-left">
287
- <li>
288
- <a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
289
- <i class="ti-menu"></i>
290
- </a>
291
- </li>
292
- <li class="search-box">
293
- <a class="search-toggle no-pdd-right" href="javascript:void(0);">
294
- <i class="search-icon ti-search pdd-right-10"></i>
295
- <i class="search-icon-close ti-close pdd-right-10"></i>
296
- </a>
297
- </li>
298
- <li class="search-input">
299
- <input class="form-control" type="text" placeholder="Search...">
300
- </li>
301
- </ul>
302
- <ul class="nav-right">
303
- <li class="notifications dropdown">
304
- <span class="counter bgc-red">3</span>
305
- <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
306
- <i class="ti-bell"></i>
307
- </a>
178
+ <article class="mail-row is-active is-unread">
179
+ <div class="mail-row-avatar ma-2">LR</div>
180
+ <div class="mail-row-body">
181
+ <div class="mail-row-top">
182
+ <div class="mail-row-from">Leo Reyes</div>
183
+ <div class="mail-row-time">09:18</div>
184
+ </div>
185
+ <div class="mail-row-subject">Dependency bump merged β€” all green</div>
186
+ <div class="mail-row-preview">Morning! Just pushed the dependency upgrade to master. All 10 stale Dependabot PRs are closed and CI passed on first run. Quick…</div>
187
+ <div class="mail-row-tags">
188
+ <span class="mail-tag team">Team</span>
189
+ <span class="mail-tag work">Work</span>
190
+ </div>
191
+ </div>
192
+ <div class="mail-star" aria-label="Star"><svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
193
+ </article>
308
194
 
309
- <ul class="dropdown-menu">
310
- <li class="pX-20 pY-15 bdB">
311
- <i class="ti-bell pR-10"></i>
312
- <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
313
- </li>
314
- <li>
315
- <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
316
- <li>
317
- <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
318
- <div class="peer mR-15">
319
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
320
- </div>
321
- <div class="peer peer-greed">
322
- <span>
323
- <span class="fw-500">John Doe</span>
324
- <span class="c-grey-600">liked your <span class="text-dark">post</span>
325
- </span>
326
- </span>
327
- <p class="m-0">
328
- <small class="fsz-xs">5 mins ago</small>
329
- </p>
330
- </div>
331
- </a>
332
- </li>
333
- <li>
334
- <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
335
- <div class="peer mR-15">
336
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
337
- </div>
338
- <div class="peer peer-greed">
339
- <span>
340
- <span class="fw-500">Moo Doe</span>
341
- <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
342
- </span>
343
- </span>
344
- <p class="m-0">
345
- <small class="fsz-xs">7 mins ago</small>
346
- </p>
347
- </div>
348
- </a>
349
- </li>
350
- <li>
351
- <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
352
- <div class="peer mR-15">
353
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
354
- </div>
355
- <div class="peer peer-greed">
356
- <span>
357
- <span class="fw-500">Lee Doe</span>
358
- <span class="c-grey-600">commented on your <span class="text-dark">video</span>
359
- </span>
360
- </span>
361
- <p class="m-0">
362
- <small class="fsz-xs">10 mins ago</small>
363
- </p>
364
- </div>
365
- </a>
366
- </li>
367
- </ul>
368
- </li>
369
- <li class="pX-20 pY-15 ta-c bdT">
370
- <span>
371
- <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
195
+ <article class="mail-row is-unread">
196
+ <div class="mail-row-avatar ma-3">MD</div>
197
+ <div class="mail-row-body">
198
+ <div class="mail-row-top">
199
+ <div class="mail-row-from">Mira Doe</div>
200
+ <div class="mail-row-time">08:05</div>
201
+ </div>
202
+ <div class="mail-row-subject">Invoice #INV-2026-104 ready for approval</div>
203
+ <div class="mail-row-preview">Your monthly invoice from Northwind Studio is ready. Total $4,820.00 due May 7. Click below to review and approve before…</div>
204
+ <div class="mail-row-tags">
205
+ <span class="mail-tag finance">Finance</span>
206
+ <span class="mail-tag invoice">Invoice</span>
207
+ <span class="mail-tag attach">
208
+ <svg viewBox="0 0 24 24"><path d="m21 12-9 9a6 6 0 0 1-8-8l9-9a4 4 0 0 1 6 6l-9 9a2 2 0 0 1-3-3l9-9"/></svg>
209
+ 1
372
210
  </span>
373
- </li>
374
- </ul>
375
- </li>
376
- <li class="notifications dropdown">
377
- <span class="counter bgc-blue">3</span>
378
- <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
379
- <i class="ti-email"></i>
380
- </a>
211
+ </div>
212
+ </div>
213
+ <div class="mail-star" aria-label="Star"><svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
214
+ </article>
381
215
 
382
- <ul class="dropdown-menu">
383
- <li class="pX-20 pY-15 bdB">
384
- <i class="ti-email pR-10"></i>
385
- <span class="fsz-sm fw-600 c-grey-900">Emails</span>
386
- </li>
387
- <li>
388
- <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
389
- <li>
390
- <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
391
- <div class="peer mR-15">
392
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
393
- </div>
394
- <div class="peer peer-greed">
395
- <div>
396
- <div class="peers jc-sb fxw-nw mB-5">
397
- <div class="peer">
398
- <p class="fw-500 mB-0">John Doe</p>
399
- </div>
400
- <div class="peer">
401
- <small class="fsz-xs">5 mins ago</small>
402
- </div>
403
- </div>
404
- <span class="c-grey-600 fsz-sm">
405
- Want to create your own customized data generator for your app...
406
- </span>
407
- </div>
408
- </div>
409
- </a>
410
- </li>
411
- <li>
412
- <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
413
- <div class="peer mR-15">
414
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
415
- </div>
416
- <div class="peer peer-greed">
417
- <div>
418
- <div class="peers jc-sb fxw-nw mB-5">
419
- <div class="peer">
420
- <p class="fw-500 mB-0">Moo Doe</p>
421
- </div>
422
- <div class="peer">
423
- <small class="fsz-xs">15 mins ago</small>
424
- </div>
425
- </div>
426
- <span class="c-grey-600 fsz-sm">
427
- Want to create your own customized data generator for your app...
428
- </span>
429
- </div>
430
- </div>
431
- </a>
432
- </li>
433
- <li>
434
- <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
435
- <div class="peer mR-15">
436
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
437
- </div>
438
- <div class="peer peer-greed">
439
- <div>
440
- <div class="peers jc-sb fxw-nw mB-5">
441
- <div class="peer">
442
- <p class="fw-500 mB-0">Lee Doe</p>
443
- </div>
444
- <div class="peer">
445
- <small class="fsz-xs">25 mins ago</small>
446
- </div>
447
- </div>
448
- <span class="c-grey-600 fsz-sm">
449
- Want to create your own customized data generator for your app...
450
- </span>
451
- </div>
452
- </div>
453
- </a>
454
- </li>
455
- </ul>
456
- </li>
457
- <li class="pX-20 pY-15 ta-c bdT">
458
- <span>
459
- <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
216
+ <article class="mail-row">
217
+ <div class="mail-row-avatar ma-4">AT</div>
218
+ <div class="mail-row-body">
219
+ <div class="mail-row-top">
220
+ <div class="mail-row-from">Anya Trent</div>
221
+ <div class="mail-row-time">Yesterday</div>
222
+ </div>
223
+ <div class="mail-row-subject">Re: Brand workshop notes</div>
224
+ <div class="mail-row-preview">Thanks for sharing β€” added a few comments inline. Big +1 on consolidating the secondary palette. Should we ping Marcus before…</div>
225
+ <div class="mail-row-tags">
226
+ <span class="mail-tag work">Work</span>
227
+ </div>
228
+ </div>
229
+ </article>
230
+
231
+ <article class="mail-row is-unread">
232
+ <div class="mail-row-avatar ma-5">PV</div>
233
+ <div class="mail-row-body">
234
+ <div class="mail-row-top">
235
+ <div class="mail-row-from">Paolo Vega</div>
236
+ <div class="mail-row-time">Yesterday</div>
237
+ </div>
238
+ <div class="mail-row-subject">Lisbon meetup β€” confirmed venue</div>
239
+ <div class="mail-row-preview">Locked in the rooftop venue for May 22. Capacity 80, full A/V, and they can host the after-party until midnight. Need your…</div>
240
+ <div class="mail-row-tags">
241
+ <span class="mail-tag travel">Travel</span>
242
+ </div>
243
+ </div>
244
+ <div class="mail-star is-on" aria-label="Starred"><svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
245
+ </article>
246
+
247
+ <article class="mail-row">
248
+ <div class="mail-row-avatar ma-6">JC</div>
249
+ <div class="mail-row-body">
250
+ <div class="mail-row-top">
251
+ <div class="mail-row-from">Jess Choi</div>
252
+ <div class="mail-row-time">Tue</div>
253
+ </div>
254
+ <div class="mail-row-subject">Newsletter draft v3 β€” your edits welcome</div>
255
+ <div class="mail-row-preview">Hey, I incorporated all the feedback from Friday's review. Could you take a final pass on the founder note section before we…</div>
256
+ <div class="mail-row-tags">
257
+ <span class="mail-tag team">Team</span>
258
+ </div>
259
+ </div>
260
+ </article>
261
+
262
+ <article class="mail-row">
263
+ <div class="mail-row-avatar ma-1">FB</div>
264
+ <div class="mail-row-body">
265
+ <div class="mail-row-top">
266
+ <div class="mail-row-from">Finance Bot</div>
267
+ <div class="mail-row-time">Mon</div>
268
+ </div>
269
+ <div class="mail-row-subject">March card statement available</div>
270
+ <div class="mail-row-preview">Your March card statement is ready. Total spend $3,210.55 across 47 transactions. Auto-pay scheduled for April 28. View details…</div>
271
+ <div class="mail-row-tags">
272
+ <span class="mail-tag finance">Finance</span>
273
+ <span class="mail-tag attach">
274
+ <svg viewBox="0 0 24 24"><path d="m21 12-9 9a6 6 0 0 1-8-8l9-9a4 4 0 0 1 6 6l-9 9a2 2 0 0 1-3-3l9-9"/></svg>
275
+ 1
460
276
  </span>
461
- </li>
462
- </ul>
463
- </li>
464
- <li class="dropdown">
465
- <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
466
- <div class="peer mR-10">
467
- <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
468
277
  </div>
469
- <div class="peer">
470
- <span class="fsz-sm c-grey-900">John Doe</span>
278
+ </div>
279
+ </article>
280
+
281
+ <article class="mail-row is-unread">
282
+ <div class="mail-row-avatar ma-2">RG</div>
283
+ <div class="mail-row-body">
284
+ <div class="mail-row-top">
285
+ <div class="mail-row-from">Rita Gomez</div>
286
+ <div class="mail-row-time">Apr 19</div>
471
287
  </div>
472
- </a>
473
- <ul class="dropdown-menu fsz-sm">
474
- <li>
475
- <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
476
- <i class="ti-settings mR-10"></i>
477
- <span>Setting</span>
478
- </a>
479
- </li>
480
- <li>
481
- <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
482
- <i class="ti-user mR-10"></i>
483
- <span>Profile</span>
484
- </a>
485
- </li>
486
- <li>
487
- <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
488
- <i class="ti-email mR-10"></i>
489
- <span>Messages</span>
490
- </a>
491
- </li>
492
- <li role="separator" class="divider"></li>
493
- <li>
494
- <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
495
- <i class="ti-power-off mR-10"></i>
496
- <span>Logout</span>
497
- </a>
498
- </li>
499
- </ul>
500
- </li>
501
- </ul>
502
- </div>
503
- </div>
288
+ <div class="mail-row-subject">Coffee next week?</div>
289
+ <div class="mail-row-preview">Long time no chat! I'll be in town Tue–Thu and would love to grab coffee if you're free. Mornings work best for me…</div>
290
+ </div>
291
+ </article>
504
292
 
505
- <!-- ### $App Screen Content ### -->
506
- <main class="main-content bgc-grey-100">
507
- <div id="mainContent">
508
- <div class="full-container">
509
- <div class="email-app">
510
- <div class="email-side-nav remain-height ov-h">
511
- <div class="h-100 layers">
512
- <div class="p-20 bgc-grey-100 layer w-100">
513
- <a href="compose.html" class="btn btn-danger d-grid">New Message</a>
514
- </div>
515
- <div class="scrollable pos-r bdT layer w-100 fxg-1">
516
- <ul class="p-20 nav flex-column">
517
- <li class="nav-item">
518
- <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
519
- <div class="peers ai-c jc-sb">
520
- <div class="peer peer-greed">
521
- <i class="mR-10 ti-email"></i>
522
- <span>Inbox</span>
523
- </div>
524
- <div class="peer">
525
- <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
526
- </div>
527
- </div>
528
- </a>
529
- </li>
530
- <li class="nav-item">
531
- <a href="" class="nav-link c-grey-800 cH-blue-500">
532
- <div class="peers ai-c jc-sb">
533
- <div class="peer peer-greed">
534
- <i class="mR-10 ti-share"></i>
535
- <span>Sent</span>
536
- </div>
537
- <div class="peer">
538
- <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
539
- </div>
540
- </div>
541
- </a>
542
- </li>
543
- <li class="nav-item">
544
- <a href="" class="nav-link c-grey-800 cH-blue-500">
545
- <div class="peers ai-c jc-sb">
546
- <div class="peer peer-greed">
547
- <i class="mR-10 ti-star"></i>
548
- <span>Important</span>
549
- </div>
550
- <div class="peer">
551
- <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
552
- </div>
553
- </div>
554
- </a>
555
- </li>
556
- <li class="nav-item">
557
- <a href="" class="nav-link c-grey-800 cH-blue-500">
558
- <div class="peers ai-c jc-sb">
559
- <div class="peer peer-greed">
560
- <i class="mR-10 ti-file"></i>
561
- <span>Drafts</span>
562
- </div>
563
- <div class="peer">
564
- <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
565
- </div>
566
- </div>
567
- </a>
568
- </li>
569
- <li class="nav-item">
570
- <a href="" class="nav-link c-grey-800 cH-blue-500">
571
- <div class="peers ai-c jc-sb">
572
- <div class="peer peer-greed">
573
- <i class="mR-10 ti-alert"></i>
574
- <span>Spam</span>
575
- </div>
576
- <div class="peer">
577
- <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
578
- </div>
579
- </div>
580
- </a>
581
- </li>
582
- <li class="nav-item">
583
- <a href="" class="nav-link c-grey-800 cH-blue-500">
584
- <div class="peers ai-c jc-sb">
585
- <div class="peer peer-greed">
586
- <i class="mR-10 ti-trash"></i>
587
- <span>Trash</span>
588
- </div>
589
- <div class="peer">
590
- <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
591
- </div>
592
- </div>
593
- </a>
594
- </li>
595
- </ul>
596
- </div>
293
+ <article class="mail-row">
294
+ <div class="mail-row-avatar ma-3">NS</div>
295
+ <div class="mail-row-body">
296
+ <div class="mail-row-top">
297
+ <div class="mail-row-from">Notion Β· Shared</div>
298
+ <div class="mail-row-time">Apr 18</div>
597
299
  </div>
300
+ <div class="mail-row-subject">3 pages updated in "Q2 OKRs"</div>
301
+ <div class="mail-row-preview">Sara, Leo, and Mira made edits to pages you follow. View a summary of the changes and jump back into the docs…</div>
598
302
  </div>
599
- <div class="email-wrapper row remain-height bgc-white ov-h">
600
- <div class="email-list h-100 layers">
601
- <div class="layer w-100">
602
- <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw">
603
- <div class="peer">
604
- <div class="btn-group" role="group">
605
- <button type="button" class="email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p">
606
- <i class="ti-menu"></i>
607
- </button>
608
- <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
609
- <i class="ti-folder"></i>
610
- </button>
611
- <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
612
- <i class="ti-tag"></i>
613
- </button>
614
- <div class="btn-group" role="group">
615
- <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
616
- <i class="ti-more-alt"></i>
617
- </button>
618
- <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
619
- <li>
620
- <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
621
- <i class="ti-trash mR-10"></i>
622
- <span>Delete</span>
623
- </a>
624
- </li>
625
- <li>
626
- <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
627
- <i class="ti-alert mR-10"></i>
628
- <span>Mark as Spam</span>
629
- </a>
630
- </li>
631
- <li>
632
- <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
633
- <i class="ti-star mR-10"></i>
634
- <span>Star</span>
635
- </a>
636
- </li>
637
- </ul>
638
- </div>
639
- </div>
640
- </div>
641
- <div class="peer">
642
- <div class="btn-group" role="group">
643
- <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
644
- <i class="ti-angle-left"></i>
645
- </button>
646
- <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
647
- <i class="ti-angle-right"></i>
648
- </button>
649
- </div>
650
- </div>
651
- </div>
303
+ </article>
304
+
305
+ <article class="mail-row">
306
+ <div class="mail-row-avatar ma-4">GH</div>
307
+ <div class="mail-row-body">
308
+ <div class="mail-row-top">
309
+ <div class="mail-row-from">GitHub</div>
310
+ <div class="mail-row-time">Apr 17</div>
652
311
  </div>
653
- <div class="layer w-100">
654
- <div class="bdT bdB">
655
- <input type="text" class="form-control m-0 bdw-0 pY-15 pX-20" placeholder="Search...">
656
- </div>
312
+ <div class="mail-row-subject">[adminator] PR #482 merged into master</div>
313
+ <div class="mail-row-preview">puikinsh merged "Add 2026 dashboard preview page" into master. 1 reviewer approved. CI passed all checks…</div>
314
+ <div class="mail-row-tags">
315
+ <span class="mail-tag work">Work</span>
657
316
  </div>
658
- <div class="layer w-100 fxg-1 scrollable pos-r">
659
- <div class="">
660
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
661
- <div class="peer mR-10">
662
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
663
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
664
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
665
- </div>
666
- </div>
667
- <div class="peer peer-greed ov-h">
668
- <div class="peers ai-c">
669
- <div class="peer peer-greed">
670
- <h6>John Doe</h6>
671
- </div>
672
- <div class="peer">
673
- <small>1 min ago</small>
674
- </div>
675
- </div>
676
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
677
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
678
- </div>
679
- </div>
680
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
681
- <div class="peer mR-10">
682
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
683
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
684
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
685
- </div>
686
- </div>
687
- <div class="peer peer-greed ov-h">
688
- <div class="peers ai-c">
689
- <div class="peer peer-greed">
690
- <h6>John Doe</h6>
691
- </div>
692
- <div class="peer">
693
- <small>1 min ago</small>
694
- </div>
695
- </div>
696
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
697
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
698
- </div>
699
- </div>
700
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
701
- <div class="peer mR-10">
702
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
703
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
704
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
705
- </div>
706
- </div>
707
- <div class="peer peer-greed ov-h">
708
- <div class="peers ai-c">
709
- <div class="peer peer-greed">
710
- <h6>John Doe</h6>
711
- </div>
712
- <div class="peer">
713
- <small>1 min ago</small>
714
- </div>
715
- </div>
716
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
717
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
718
- </div>
719
- </div>
720
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
721
- <div class="peer mR-10">
722
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
723
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
724
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
725
- </div>
726
- </div>
727
- <div class="peer peer-greed ov-h">
728
- <div class="peers ai-c">
729
- <div class="peer peer-greed">
730
- <h6>John Doe</h6>
731
- </div>
732
- <div class="peer">
733
- <small>1 min ago</small>
734
- </div>
735
- </div>
736
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
737
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
738
- </div>
739
- </div>
740
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
741
- <div class="peer mR-10">
742
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
743
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
744
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
745
- </div>
746
- </div>
747
- <div class="peer peer-greed ov-h">
748
- <div class="peers ai-c">
749
- <div class="peer peer-greed">
750
- <h6>John Doe</h6>
751
- </div>
752
- <div class="peer">
753
- <small>1 min ago</small>
754
- </div>
755
- </div>
756
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
757
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
758
- </div>
759
- </div>
760
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
761
- <div class="peer mR-10">
762
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
763
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
764
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
765
- </div>
766
- </div>
767
- <div class="peer peer-greed ov-h">
768
- <div class="peers ai-c">
769
- <div class="peer peer-greed">
770
- <h6>John Doe</h6>
771
- </div>
772
- <div class="peer">
773
- <small>1 min ago</small>
774
- </div>
775
- </div>
776
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
777
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
778
- </div>
779
- </div>
780
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
781
- <div class="peer mR-10">
782
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
783
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
784
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
785
- </div>
786
- </div>
787
- <div class="peer peer-greed ov-h">
788
- <div class="peers ai-c">
789
- <div class="peer peer-greed">
790
- <h6>John Doe</h6>
791
- </div>
792
- <div class="peer">
793
- <small>1 min ago</small>
794
- </div>
795
- </div>
796
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
797
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
798
- </div>
799
- </div>
800
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
801
- <div class="peer mR-10">
802
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
803
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
804
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
805
- </div>
806
- </div>
807
- <div class="peer peer-greed ov-h">
808
- <div class="peers ai-c">
809
- <div class="peer peer-greed">
810
- <h6>John Doe</h6>
811
- </div>
812
- <div class="peer">
813
- <small>1 min ago</small>
814
- </div>
815
- </div>
816
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
817
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
818
- </div>
819
- </div>
820
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
821
- <div class="peer mR-10">
822
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
823
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
824
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
825
- </div>
826
- </div>
827
- <div class="peer peer-greed ov-h">
828
- <div class="peers ai-c">
829
- <div class="peer peer-greed">
830
- <h6>John Doe</h6>
831
- </div>
832
- <div class="peer">
833
- <small>1 min ago</small>
834
- </div>
835
- </div>
836
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
837
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
838
- </div>
839
- </div>
840
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
841
- <div class="peer mR-10">
842
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
843
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
844
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
845
- </div>
846
- </div>
847
- <div class="peer peer-greed ov-h">
848
- <div class="peers ai-c">
849
- <div class="peer peer-greed">
850
- <h6>John Doe</h6>
851
- </div>
852
- <div class="peer">
853
- <small>1 min ago</small>
854
- </div>
855
- </div>
856
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
857
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
858
- </div>
859
- </div>
860
- <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
861
- <div class="peer mR-10">
862
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
863
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
864
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
865
- </div>
866
- </div>
867
- <div class="peer peer-greed ov-h">
868
- <div class="peers ai-c">
869
- <div class="peer peer-greed">
870
- <h6>John Doe</h6>
871
- </div>
872
- <div class="peer">
873
- <small>1 min ago</small>
874
- </div>
875
- </div>
876
- <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
877
- <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
878
- </div>
879
- </div>
880
- </div>
317
+ </div>
318
+ </article>
319
+ </div>
320
+ </section>
321
+
322
+
323
+ <section class="mail-reader">
324
+ <div class="reader-toolbar">
325
+ <div class="reader-tools-group">
326
+ <button class="mail-tool" aria-label="Back">
327
+ <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
328
+ </button>
329
+ <span class="sep"></span>
330
+ <button class="mail-tool" aria-label="Archive">
331
+ <svg viewBox="0 0 24 24"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
332
+ </button>
333
+ <button class="mail-tool" aria-label="Delete">
334
+ <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6 18 20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
335
+ </button>
336
+ <button class="mail-tool" aria-label="Mark unread">
337
+ <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
338
+ </button>
339
+ <button class="mail-tool" aria-label="Snooze">
340
+ <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
341
+ </button>
342
+ <span class="sep"></span>
343
+ <button class="mail-tool" aria-label="Move to folder">
344
+ <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
345
+ </button>
346
+ <button class="mail-tool" aria-label="Label">
347
+ <svg viewBox="0 0 24 24"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
348
+ </button>
349
+ </div>
350
+ <div class="reader-tools-group">
351
+ <button class="mail-tool" aria-label="Previous">
352
+ <svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
353
+ </button>
354
+ <button class="mail-tool" aria-label="Next">
355
+ <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
356
+ </button>
357
+ <span class="sep"></span>
358
+ <button class="mail-tool" aria-label="More">
359
+ <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
360
+ </button>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="reader-scroll">
365
+ <header class="reader-head">
366
+ <h1 class="reader-subject">Dependency bump merged β€” all green</h1>
367
+ <div class="reader-meta-row">
368
+ <span class="mail-tag team">Team</span>
369
+ <span class="mail-tag work">Work</span>
370
+ <span class="mail-tag attach">
371
+ <svg viewBox="0 0 24 24"><path d="m21 12-9 9a6 6 0 0 1-8-8l9-9a4 4 0 0 1 6 6l-9 9a2 2 0 0 1-3-3l9-9"/></svg>
372
+ 3 attachments
373
+ </span>
374
+ </div>
375
+ </header>
376
+
377
+ <article class="reader-card">
378
+ <div class="reader-card-head">
379
+ <div class="reader-avatar ma-2">LR</div>
380
+ <div class="reader-from-block">
381
+ <div class="reader-from-name">Leo Reyes</div>
382
+ <div class="reader-from-email">leo@adminator.app</div>
383
+ <div class="reader-from-meta">to <strong>me</strong>, Sara Kim, Mira Doe</div>
384
+ </div>
385
+ <div class="reader-time-block">
386
+ Today, 09:18
387
+ <span class="mono">42 MIN AGO</span>
388
+ </div>
389
+ <div class="reader-actions">
390
+ <button class="mail-tool" aria-label="Reply">
391
+ <svg viewBox="0 0 24 24"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
392
+ </button>
393
+ <button class="mail-tool" aria-label="Forward">
394
+ <svg viewBox="0 0 24 24"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg>
395
+ </button>
881
396
  </div>
882
397
  </div>
883
- <div class="email-content h-100">
884
- <div class="h-100 scrollable pos-r">
885
- <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+">
886
- <div class="peer">
887
- <div class="btn-group" role="group">
888
- <button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
889
- <i class="ti-angle-left"></i>
890
- </button>
891
- <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
892
- <i class="ti-folder"></i>
893
- </button>
894
- <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
895
- <i class="ti-tag"></i>
896
- </button>
897
- <div class="btn-group" role="group">
898
- <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
899
- <i class="ti-more-alt"></i>
900
- </button>
901
- <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
902
- <li>
903
- <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
904
- <i class="ti-trash mR-10"></i>
905
- <span>Delete</span>
906
- </a>
907
- </li>
908
- <li>
909
- <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
910
- <i class="ti-alert mR-10"></i>
911
- <span>Mark as Spam</span>
912
- </a>
913
- </li>
914
- <li>
915
- <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
916
- <i class="ti-star mR-10"></i>
917
- <span>Star</span>
918
- </a>
919
- </li>
920
- </ul>
921
- </div>
922
- </div>
923
- </div>
924
- <div class="peer">
925
- <div class="btn-group" role="group">
926
- <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
927
- <i class="ti-angle-left"></i>
928
- </button>
929
- <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
930
- <i class="ti-angle-right"></i>
931
- </button>
932
- </div>
398
+
399
+ <div class="reader-body">
400
+ <p>Morning, John β€”</p>
401
+ <p>Just pushed the big dependency upgrade to <strong>master</strong>. Quick rundown of what changed and what's coming next:</p>
402
+ <ul>
403
+ <li>All <strong>10 stale Dependabot PRs</strong> are now closed.</li>
404
+ <li>Webpack bumped to <strong>5.101.3</strong>, Bootstrap to <strong>5.3.8</strong>, Chart.js to <strong>4.5.0</strong>.</li>
405
+ <li>Removed the last jQuery references in the calendar component (~14kb saved).</li>
406
+ <li>CI passed on first run, no flaky tests this time around πŸŽ‰</li>
407
+ </ul>
408
+ <p>I've attached the bundle-size delta and the migration notes. The only thing I'd flag β€” the new FullCalendar release moves a few CSS variables around, so the dark-mode preview will need a quick visual pass. Sara already has a draft fix in <a href="#">PR #487</a>.</p>
409
+ <div class="reader-quote">
410
+ "Wins of the week: cleaner dependency graph, faster cold-start, and we finally retired the legacy build scripts."
411
+ </div>
412
+ <p>Let me know if you spot anything off in staging β€” happy to roll back individual packages if needed.</p>
413
+ <p>β€” Leo</p>
414
+ </div>
415
+
416
+ <div class="reader-attach">
417
+ <div class="reader-attach-head">
418
+ <svg viewBox="0 0 24 24"><path d="m21 12-9 9a6 6 0 0 1-8-8l9-9a4 4 0 0 1 6 6l-9 9a2 2 0 0 1-3-3l9-9"/></svg>
419
+ 3 Attachments
420
+ </div>
421
+ <div class="reader-attach-grid">
422
+ <div class="reader-attach-item">
423
+ <div class="attach-ico pdf">PDF</div>
424
+ <div class="attach-meta">
425
+ <div class="attach-name">migration-notes.pdf</div>
426
+ <div class="attach-size">428 KB</div>
933
427
  </div>
934
428
  </div>
935
- <div class="email-content-wrapper">
936
-
937
- <div class="peers ai-c jc-sb pX-40 pY-30">
938
- <div class="peers peer-greed">
939
- <div class="peer mR-20">
940
- <img class="bdrs-50p w-3r h-3r" alt="" src="https://randomuser.me/api/portraits/men/11.jpg">
941
- </div>
942
- <div class="peer">
943
- <small>Nov, 02 2024</small>
944
- <h5 class="c-grey-900 mB-5">John Doe</h5>
945
- <span>To: email@gmail.com</span>
946
- </div>
947
- </div>
948
- <div class="peer">
949
- <a href="" class="btn btn-danger bdrs-50p p-15 lh-0">
950
- <i class="fa fa-reply"></i>
951
- </a>
952
- </div>
429
+ <div class="reader-attach-item">
430
+ <div class="attach-ico xls">XLS</div>
431
+ <div class="attach-meta">
432
+ <div class="attach-name">bundle-size-delta.xlsx</div>
433
+ <div class="attach-size">62 KB</div>
953
434
  </div>
954
-
955
-
956
- <div class="bdT pX-40 pY-30">
957
- <h4>Title of this email goes here</h4>
958
- <p>
959
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
960
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
961
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
962
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
963
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
964
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
965
- </p>
966
- <p>
967
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
968
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
969
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
970
- </p>
971
- <p>
972
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
973
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
974
- </p>
435
+ </div>
436
+ <div class="reader-attach-item">
437
+ <div class="attach-ico img">PNG</div>
438
+ <div class="attach-meta">
439
+ <div class="attach-name">ci-screenshot.png</div>
440
+ <div class="attach-size">1.1 MB</div>
975
441
  </div>
976
442
  </div>
977
443
  </div>
978
444
  </div>
445
+ </article>
446
+
447
+ <div class="reader-card">
448
+ <div class="reader-collapsed">
449
+ <div class="reader-avatar ma-1">SK</div>
450
+ <div class="reader-collapsed-from">Sara Kim</div>
451
+ <div class="reader-collapsed-preview">Looks great, Leo. I'll handle the FullCalendar dark-mode pass today and ping when staging is ready.</div>
452
+ <div class="reader-collapsed-time">09:24</div>
453
+ </div>
979
454
  </div>
455
+
456
+ <div class="reader-card">
457
+ <div class="reader-collapsed">
458
+ <div class="reader-avatar ma-3">MD</div>
459
+ <div class="reader-collapsed-from">Mira Doe</div>
460
+ <div class="reader-collapsed-preview">Nice work β€” the bundle delta looks clean. Two small notes inline on the migration doc.</div>
461
+ <div class="reader-collapsed-time">09:36</div>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="reader-replybar">
466
+ <input type="text" placeholder="Reply to Leo, Sara, Mira…">
467
+ <button class="reply-send" aria-label="Send reply">
468
+ <svg viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
469
+ </button>
980
470
  </div>
981
471
  </div>
982
- </div>
472
+ </section>
473
+ </section>
983
474
  </main>
984
-
985
- <!-- ### $App Screen Footer ### -->
986
- <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
987
- <span>Copyright Β© 2025 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
988
- </footer>
475
+ <div data-shell-footer></div>
989
476
  </div>
990
477
  </div>
991
478
  </body>