Skip to content

Commit ff05969

Browse files
itsgbemiitsgbemi
authored
Update index.html
1 parent 0fb81e6 commit ff05969

1 file changed

Lines changed: 346 additions & 0 deletions

File tree

‎app/index.html‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,154 @@
153153
line-height: var(--leading-normal);
154154
}
155155

156+
header {
157+
width: 100%;
158+
background-color: var(--white);
159+
margin-bottom: 1rem;
160+
}
161+
162+
.header-container {
163+
display: flex;
164+
justify-content: space-between;
165+
align-items: center;
166+
width: 100%;
167+
max-width: 1200px;
168+
padding: 1rem 0.5rem;
169+
margin: 0 auto;
170+
}
171+
172+
.logo {
173+
height: 40px;
174+
}
175+
176+
.nav {
177+
display: flex;
178+
align-items: center;
179+
gap: 2rem;
180+
}
181+
182+
.nav-list {
183+
display: flex;
184+
list-style: none;
185+
gap: 1.5rem;
186+
}
187+
188+
.nav-link {
189+
text-decoration: none;
190+
color: var(--text-color);
191+
font-weight: 500;
192+
transition: color var(--transition-speed) ease;
193+
}
194+
195+
.nav-link:hover {
196+
color: var(--primary-color);
197+
}
198+
199+
.cta-button, .mobile-cta-button {
200+
background: var(--button-bg);
201+
color: var(--button-text);
202+
box-shadow: var(--shadow-sm);
203+
border: 2px solid var(--primary-color);
204+
border-radius: 4px;
205+
font-weight: 700;
206+
cursor: pointer;
207+
transition: var(--transition);
208+
}
209+
210+
.cta-button:hover, .mobile-cta-button:hover {
211+
background: transparent;
212+
color: var(--primary-color);
213+
}
214+
.cta-button {
215+
padding: 0.5rem 1rem;
216+
}
217+
.mobile-cta-button {
218+
padding: 0.5rem 0.75rem;
219+
}
220+
.mobile-menu-button {
221+
display: none;
222+
background: none;
223+
border: none;
224+
border-radius: 4px;
225+
color: var(--text-color);
226+
cursor: pointer;
227+
padding: 0.25rem 0.5rem;
228+
}
229+
230+
.mobile-menu-icon {
231+
width: 24px;
232+
height: 24px;
233+
}
234+
235+
.mobile-menu {
236+
position: fixed;
237+
top: 0;
238+
right: 0;
239+
bottom: 0;
240+
width: var(--mobile-menu-width);
241+
background-color: var(--white);
242+
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
243+
transform: translateX(100%);
244+
transition: transform var(--transition-speed) ease;
245+
z-index: 200;
246+
padding: 2rem;
247+
}
248+
249+
.mobile-menu.active {
250+
transform: translateX(0);
251+
}
252+
253+
.mobile-nav-list {
254+
list-style: none;
255+
display: flex;
256+
flex-direction: column;
257+
gap: 1.5rem;
258+
margin-top: 2rem;
259+
}
260+
261+
.mobile-nav-link {
262+
text-decoration: none;
263+
color: var(--text-color);
264+
font-size: 1.125rem;
265+
font-weight: 500;
266+
display: flex;
267+
align-items: center;
268+
gap: 0.75rem;
269+
}
270+
271+
.mobile-nav-link:hover {
272+
color: var(--primary-color);
273+
}
274+
275+
.mobile-nav-icon {
276+
width: 20px;
277+
height: 20px;
278+
}
279+
280+
.overlay {
281+
position: fixed;
282+
top: 0;
283+
left: 0;
284+
right: 0;
285+
bottom: 0;
286+
background-color: rgba(0, 0, 0, 0.5);
287+
z-index: 100;
288+
opacity: 0;
289+
visibility: hidden;
290+
transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
291+
}
292+
293+
.overlay.active {
294+
opacity: 1;
295+
visibility: visible;
296+
}
297+
298+
.mobile-header-actions {
299+
display: none;
300+
gap: 0.5rem;
301+
align-items: center;
302+
}
303+
156304
.hero {
157305
background: var(--white);
158306
display: flex;
@@ -800,7 +948,89 @@
800948
height: 20px;
801949
}
802950

951+
footer {
952+
width: 100%;
953+
background: var(--gradient);
954+
padding: 3rem 2rem 5rem;
955+
text-align: center;
956+
margin-top: auto;
957+
}
958+
959+
body.dark-mode footer {
960+
background: var(--gradient-dark);
961+
}
962+
963+
.footer-nav {
964+
display: flex;
965+
justify-content: center;
966+
gap: 2rem;
967+
margin-bottom: 1.5rem;
968+
flex-wrap: wrap;
969+
}
970+
971+
.footer-nav a {
972+
text-decoration: none;
973+
color: var(--color-primary);
974+
transition: var(--transition);
975+
}
976+
977+
.footer-nav a:hover {
978+
color: var(--color-secondary);
979+
}
980+
981+
.social-icons {
982+
display: flex;
983+
justify-content: center;
984+
gap: 1.5rem;
985+
margin-bottom: 1.5rem;
986+
}
987+
988+
.social-icons a {
989+
display: inline-block;
990+
transition: var(--transition);
991+
}
992+
993+
.social-icons a:hover {
994+
transform: translateY(-2px);
995+
}
996+
997+
.social-icons svg {
998+
width: 24px;
999+
height: 24px;
1000+
color: var(--color-primary);
1001+
}
1002+
1003+
.copyright {
1004+
font-size: 0.9rem;
1005+
margin-bottom: 40px;
1006+
color: var(--color-secondary);
1007+
}
1008+
1009+
.copyright a {
1010+
text-decoration: none;
1011+
color: var(--color-primary);
1012+
border-bottom: 1px dotted var(--color-primary);
1013+
transition: var(--transition);
1014+
}
1015+
1016+
.copyright a:hover {
1017+
border-bottom-color: transparent;
1018+
}
1019+
1020+
8031021
@media (max-width: 767px) {
1022+
.logo {
1023+
height: 35px;
1024+
}
1025+
.nav, .cta-button {
1026+
display: none;
1027+
}
1028+
.mobile-menu-button {
1029+
display: block;
1030+
}
1031+
.mobile-header-actions {
1032+
display: flex;
1033+
}
8041034
.modal {
8051035
align-items: flex-end;
8061036
}
@@ -844,6 +1074,64 @@
8441074
Accessibility
8451075
</button>
8461076

1077+
<header>
1078+
<div class="header-container">
1079+
<a href="/">
1080+
<img src="/assets/images/logo-light.svg" alt="Light Mode Company Logo" class="logo" id="siteLogo">
1081+
</a>
1082+
1083+
<div class="nav">
1084+
<ul class="nav-list">
1085+
<li><a href="/app/index.html" class="nav-link">Documents</a></li>
1086+
<li><a href="/app/edit-doc.html" class="nav-link">Editor</a></li>
1087+
</ul>
1088+
</div>
1089+
1090+
<div class="mobile-header-actions">
1091+
<button class="mobile-menu-button" aria-label="Open menu">
1092+
<svg class="mobile-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1093+
<line x1="14" y1="5" x2="22" y2="5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
1094+
<line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
1095+
<line x1="5" y1="19" x2="17" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
1096+
</svg>
1097+
</button>
1098+
</div>
1099+
</div>
1100+
</header>
1101+
1102+
<div class="overlay"></div>
1103+
1104+
<aside class="mobile-menu">
1105+
<button class="mobile-menu-button" aria-label="Close menu" style="box-shadow: var(--shadow-sm)">
1106+
<svg class="mobile-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1107+
<path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1108+
<path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1109+
</svg>
1110+
</button>
1111+
1112+
<ul class="mobile-nav-list">
1113+
<li><a href="/app/index.html" class="mobile-nav-link">
1114+
<svg class="mobile-nav-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1115+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
1116+
<polyline points="14 2 14 8 20 8"></polyline>
1117+
<line x1="16" y1="13" x2="8" y2="13"></line>
1118+
<line x1="16" y1="17" x2="8" y2="17"></line>
1119+
<polyline points="10 9 9 9 8 9"></polyline>
1120+
</svg>Documents</a></li>
1121+
<li><a href="/app/edit-doc.html" class="mobile-nav-link">
1122+
<svg class="mobile-nav-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1123+
<path d="M12 20h9"></path>
1124+
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
1125+
</svg>
1126+
Editor</a></li>
1127+
<li><a href="/" class="mobile-nav-link">
1128+
<svg clas="mobile-nav-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1129+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
1130+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
1131+
</svg>Return to homepage</a></li>
1132+
</ul>
1133+
</aside>
1134+
8471135
<main id="main-content" role="main">
8481136
<section class="hero">
8491137
<div class="greeting-container">
@@ -961,6 +1249,44 @@ <h2><span id="greeting-text">Good Morning</span></h2>
9611249
</section>
9621250
</main>
9631251

1252+
<footer role="contentinfo">
1253+
<div class="footer-nav">
1254+
<a href="/">Home</a>
1255+
<a href="/privacy.html">Privacy</a>
1256+
<a href="mailto:outparse@gmail.com?subject=Feedback%20on%20Outparse">Feedback</a>
1257+
</div>
1258+
<div class="social-icons">
1259+
<a href="https://github.com/outparse" aria-label="GitHub">
1260+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1261+
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
1262+
</svg>
1263+
</a>
1264+
<a href="https://www.linkedin.com/company/outparse/" aria-label="LinkedIn">
1265+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1266+
<path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14m-.5 15.5v-5.3a3.26 3.26 0 00-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 011.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 001.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 00-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
1267+
</svg>
1268+
</a>
1269+
<a href="https://twitter.com/outparse" aria-label="Twitter">
1270+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1271+
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 01-1.93.07 4.28 4.28 0 004 2.98 8.521 8.521 0 01-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
1272+
</svg>
1273+
</a>
1274+
<a href="https://instagram.com/outparse" aria-label="Instagram">
1275+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1276+
<path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 01-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 017.8 2m-.2 2A3.6 3.6 0 004 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 003.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 011.25 1.25A1.25 1.25 0 0117.25 8A1.25 1.25 0 0116 6.75a1.25 1.25 0 011.25-1.25M12 7a5 5 0 015 5 5 5 0 01-5 5 5 5 0 01-5-5 5 5 0 015-5m0 2a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003-3 3 3 0 00-3-3z"/>
1277+
</svg>
1278+
</a>
1279+
<a href="#" aria-label="Facebook">
1280+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1281+
<path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/>
1282+
</svg>
1283+
</a>
1284+
</div>
1285+
<div class="copyright">
1286+
&copy; <script>document.write(new Date().getFullYear())</script> Outparse. Created by <a href="https://gbemisolaoyeniyi.com" target="_blank" rel="author">Gbemisola Oyeniyi</a>. This open source project is licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="license">GNU Affero General Public License v3.0</a>. All Rights Reserved.
1287+
</div>
1288+
</footer>
1289+
9641290
<div class="modal" id="rename-modal" role="dialog" aria-modal="true" aria-labelledby="rename-modal-title">
9651291
<div class="modal-content">
9661292
<h3 id="rename-modal-title">Rename Document</h3>
@@ -1104,6 +1430,26 @@ <h3>Read Aloud</h3>
11041430
</div>
11051431

11061432
<script>
1433+
document.addEventListener('DOMContentLoaded', function() {
1434+
const mobileMenuButtons = document.querySelectorAll('.mobile-menu-button');
1435+
const mobileMenu = document.querySelector('.mobile-menu');
1436+
const overlay = document.querySelector('.overlay');
1437+
1438+
mobileMenuButtons.forEach(button => {
1439+
button.addEventListener('click', function() {
1440+
mobileMenu.classList.toggle('active');
1441+
overlay.classList.toggle('active');
1442+
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
1443+
});
1444+
});
1445+
1446+
overlay.addEventListener('click', function() {
1447+
mobileMenu.classList.remove('active');
1448+
overlay.classList.remove('active');
1449+
document.body.style.overflow = '';
1450+
});
1451+
});
1452+
11071453
// Quotes data
11081454
const quotes = [
11091455
"Perfection is an infinite journey, just start.",

0 commit comments

Comments
 (0)