my personal site
Enhance styling and responsiveness of privacy policy page. Implement fluid typography, improved spacing, and accessibility features for app icons. Add media queries for better layout across various screen sizes.
+278
-17
images/VT-Gym-Tracker-ios-Icon.png
images/VT-Gym-Tracker-ios-Icon.png
This is a binary file and will not be displayed.
+93
privacy-policy.html
+93
privacy-policy.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<title>Privacy Policy | Jack Hannon</title>
7
+
<script>
8
+
// Apply saved theme or OS preference before CSS loads to prevent flash
9
+
if (localStorage.getItem('theme') === 'dark' ||
10
+
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
11
+
document.documentElement.classList.add('dark-theme');
12
+
}
13
+
</script>
14
+
<link rel="stylesheet" href="style.css" />
15
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=match_case" />
16
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
17
+
<style>
18
+
.material-symbols-outlined {
19
+
font-variation-settings:
20
+
'FILL' 0,
21
+
'wght' 400,
22
+
'GRAD' 0,
23
+
'opsz' 24
24
+
}
25
+
</style>
26
+
</head>
27
+
<body>
28
+
<main class="container" id="main-content">
29
+
<div id="a11y-status" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
30
+
31
+
<section class="privacy-policy">
32
+
<div class="app-icon-container">
33
+
<a href="https://apps.apple.com/us/app/vt-gym-tracker/id6736409867?itscg=30200&itsct=apps_box_link&mttnsubad=6736409867"
34
+
target="_blank"
35
+
rel="noopener noreferrer"
36
+
aria-label="Download VT Gym Tracker on the App Store">
37
+
<img src="images/VT-Gym-Tracker-ios-Icon.png"
38
+
alt="VT Gym Tracker App Icon"
39
+
class="app-icon"
40
+
width="140"
41
+
height="140"
42
+
loading="eager"
43
+
decoding="async" />
44
+
</a>
45
+
</div>
46
+
<h1>Privacy Policy</h1>
47
+
<p><strong>Last Updated:</strong> January 11, 2025</p>
48
+
49
+
<p>Jack Hannon [I, Me, My] built Gym Tracker (the "App") as a free, non-commercial application. The App and any additional services provided now or in the future are provided "as is." This Privacy Policy outlines how I handle your information when you use my mobile application, Gym Tracker. By accessing or using the App, you agree to these privacy terms.</p>
50
+
51
+
<h2>Information Collected</h2>
52
+
<p>Gym Tracker does not collect, store, or transmit any personal or non-personal information from its users. Any data saved in the app is stored locally on the device.</p>
53
+
54
+
<h2>Third-Party Services</h2>
55
+
<p>The App connects to the Virginia Tech Recreational Sports website ("VT Rec Sports"). VT Rec Sports and their partners may collect personal information as outlined in their Privacy Policy. I encourage you to review their policy to understand how your information is handled when you interact with VT Rec Sports through the App.</p>
56
+
57
+
<h2>Links to Third-Party Websites</h2>
58
+
<p>The App may contain links to third-party websites or services that I don't operate. Once you leave the App, I have no control over these external sites and cannot be responsible for their privacy practices. Please review the privacy policies of any third-party sites you visit.</p>
59
+
60
+
<h2>Changes to This Privacy Policy</h2>
61
+
<p>I may update this Privacy Policy periodically. Any changes will be posted on this page with an updated "Last Updated" date.</p>
62
+
63
+
<h2>Contact</h2>
64
+
<p>If you have any questions or suggestions about this Privacy Policy, please contact me at <a href="mailto:hannon@vt.edu">hannon@vt.edu</a></p>
65
+
</section>
66
+
</main>
67
+
68
+
<footer class="privacy-footer">
69
+
<div class="container">
70
+
<div class="footer-content">
71
+
<div class="footer-social">
72
+
<a href="https://www.linkedin.com/in/jackphannon/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile">
73
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="linkedin-icon">
74
+
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
75
+
</svg>
76
+
</a>
77
+
<a href="https://github.com/Hann8n" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile">
78
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="github-icon">
79
+
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
80
+
</svg>
81
+
</a>
82
+
<a href="https://bsky.app/profile/jackhannon.me" target="_blank" rel="noopener noreferrer" aria-label="Bluesky Profile">
83
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bluesky-icon">
84
+
<path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/>
85
+
</svg>
86
+
</a>
87
+
</div>
88
+
</div>
89
+
</div>
90
+
</footer>
91
+
<script src="script.js"></script>
92
+
</body>
93
+
</html>
+185
-17
style.css
+185
-17
style.css
···
2258
2258
max-width: 800px;
2259
2259
margin: 0 auto;
2260
2260
line-height: 1.7;
2261
+
padding: 2rem 1rem;
2262
+
/* Improve readability with better spacing */
2263
+
letter-spacing: 0.01em;
2261
2264
}
2262
2265
2266
+
/* Enhanced typography for better hierarchy */
2263
2267
.privacy-policy h1 {
2264
-
font-size: 2.2em;
2265
-
margin: 0 0 1rem 0;
2268
+
font-size: clamp(2rem, 5vw, 2.5rem);
2269
+
margin: 0 0 1.5rem 0;
2266
2270
color: var(--text-color);
2267
-
text-align: center;
2268
-
border-bottom: 2px solid var(--link-color);
2269
-
padding-bottom: 0.5rem;
2271
+
text-align: left;
2272
+
font-weight: 700;
2273
+
letter-spacing: -0.02em;
2270
2274
}
2271
2275
2272
2276
.privacy-policy h2 {
2273
-
font-size: 1.6em;
2277
+
font-size: clamp(1.4rem, 4vw, 1.8rem);
2274
2278
margin: 2rem 0 1rem 0;
2275
2279
color: var(--text-color);
2276
-
border-left: 4px solid var(--vt-maroon);
2277
-
padding-left: 1rem;
2280
+
font-weight: 600;
2281
+
letter-spacing: -0.01em;
2282
+
}
2283
+
2284
+
.privacy-policy p {
2285
+
margin-bottom: 1.2rem;
2286
+
color: var(--text-color);
2287
+
font-size: clamp(1rem, 2.5vw, 1.1rem);
2288
+
}
2289
+
2290
+
.privacy-policy a {
2291
+
color: var(--vt-maroon);
2292
+
text-decoration: none;
2293
+
transition: color 0.2s ease;
2294
+
}
2295
+
2296
+
.privacy-policy a:hover {
2297
+
color: var(--vt-burntOrange);
2298
+
}
2299
+
2300
+
.app-icon-container {
2301
+
display: flex;
2302
+
justify-content: flex-start;
2303
+
margin-bottom: 1rem;
2304
+
padding: 0.5rem 0;
2305
+
}
2306
+
2307
+
.app-icon-container a {
2308
+
display: inline-block;
2309
+
text-decoration: none;
2310
+
border-radius: inherit;
2311
+
}
2312
+
2313
+
.app-icon {
2314
+
/* Use clamp() for fluid sizing that scales with screen size */
2315
+
width: clamp(100px, 8vw, 140px);
2316
+
height: clamp(100px, 8vw, 140px);
2317
+
border-radius: clamp(20px, 2vw, 28px);
2318
+
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
2319
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2320
+
/* Ensure proper aspect ratio and prevent distortion */
2321
+
object-fit: cover;
2322
+
/* Add subtle border for better definition */
2323
+
border: 2px solid rgba(255, 255, 255, 0.1);
2324
+
}
2325
+
2326
+
.app-icon:hover {
2327
+
transform: scale(1.08) translateY(-2px);
2328
+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
2278
2329
}
2279
2330
2331
+
/* Focus state for accessibility */
2332
+
.app-icon:focus {
2333
+
outline: 3px solid var(--vt-maroon);
2334
+
outline-offset: 4px;
2335
+
}
2336
+
2337
+
/* Ensure minimum touch target size for mobile */
2338
+
@media (max-width: 768px) {
2339
+
.app-icon {
2340
+
min-width: 44px;
2341
+
min-height: 44px;
2342
+
}
2343
+
}
2344
+
2345
+
/* High contrast mode support */
2346
+
@media (prefers-contrast: high) {
2347
+
.app-icon {
2348
+
border: 2px solid currentColor;
2349
+
}
2350
+
2351
+
.app-icon:hover {
2352
+
border-color: var(--vt-maroon);
2353
+
}
2354
+
}
2355
+
2356
+
/* Reduced motion support */
2357
+
@media (prefers-reduced-motion: reduce) {
2358
+
.app-icon {
2359
+
transition: none;
2360
+
}
2361
+
2362
+
.app-icon:hover {
2363
+
transform: none;
2364
+
}
2365
+
}
2366
+
2367
+
2368
+
2280
2369
.privacy-policy h3 {
2281
2370
font-size: 1.3em;
2282
2371
margin: 1.5rem 0 0.8rem 0;
···
2321
2410
opacity: 0.9;
2322
2411
}
2323
2412
2324
-
/* Mobile responsive adjustments for privacy policy */
2325
-
@media (max-width: 650px) {
2413
+
/* Responsive design with modern breakpoints */
2414
+
/* Large screens (1200px+) */
2415
+
@media (min-width: 1200px) {
2416
+
.app-icon {
2417
+
width: clamp(120px, 6vw, 160px);
2418
+
height: clamp(120px, 6vw, 160px);
2419
+
}
2420
+
2421
+
.app-icon-container {
2422
+
margin-bottom: 1.5rem;
2423
+
}
2424
+
}
2425
+
2426
+
/* Tablets and small desktops (768px - 1199px) */
2427
+
@media (min-width: 768px) and (max-width: 1199px) {
2428
+
.app-icon {
2429
+
width: clamp(100px, 7vw, 130px);
2430
+
height: clamp(100px, 7vw, 130px);
2431
+
}
2432
+
2433
+
.app-icon-container {
2434
+
margin-bottom: 1.25rem;
2435
+
}
2436
+
}
2437
+
2438
+
/* Mobile landscape and small tablets (481px - 767px) */
2439
+
@media (min-width: 481px) and (max-width: 767px) {
2440
+
.app-icon {
2441
+
width: clamp(80px, 8vw, 110px);
2442
+
height: clamp(80px, 8vw, 110px);
2443
+
}
2444
+
2445
+
.app-icon-container {
2446
+
margin-bottom: 1rem;
2447
+
padding: 0.5rem 0;
2448
+
}
2449
+
2326
2450
.privacy-policy h1 {
2327
-
font-size: 1.8em;
2451
+
font-size: clamp(1.8em, 4vw, 2.2em);
2328
2452
}
2329
2453
2330
2454
.privacy-policy h2 {
2331
-
font-size: 1.4em;
2455
+
font-size: clamp(1.4em, 3.5vw, 1.8em);
2332
2456
margin: 1.5rem 0 0.8rem 0;
2333
-
padding-left: 0.8rem;
2457
+
}
2458
+
}
2459
+
2460
+
/* Mobile portrait (320px - 480px) */
2461
+
@media (max-width: 480px) {
2462
+
.app-icon {
2463
+
width: clamp(70px, 12vw, 90px);
2464
+
height: clamp(70px, 12vw, 90px);
2465
+
border-radius: clamp(16px, 3vw, 20px);
2466
+
}
2467
+
2468
+
.app-icon-container {
2469
+
margin-bottom: 0.75rem;
2470
+
padding: 0.25rem 0;
2471
+
}
2472
+
2473
+
.privacy-policy h1 {
2474
+
font-size: clamp(1.6em, 5vw, 2em);
2475
+
margin: 0 0 0.8rem 0;
2334
2476
}
2335
2477
2336
-
.privacy-policy h3 {
2337
-
font-size: 1.2em;
2478
+
.privacy-policy h2 {
2479
+
font-size: clamp(1.3em, 4vw, 1.6em);
2338
2480
margin: 1.2rem 0 0.6rem 0;
2339
2481
}
2340
2482
2341
-
.privacy-policy ul {
2342
-
padding-left: 1.2rem;
2483
+
.privacy-policy p {
2484
+
font-size: clamp(0.9em, 3.5vw, 1em);
2485
+
margin-bottom: 1rem;
2486
+
line-height: 1.6;
2487
+
}
2488
+
2489
+
.privacy-policy {
2490
+
padding: 1rem;
2491
+
margin: 0.5rem;
2492
+
}
2493
+
}
2494
+
2495
+
/* Extra small screens (below 320px) */
2496
+
@media (max-width: 319px) {
2497
+
.app-icon {
2498
+
width: 60px;
2499
+
height: 60px;
2500
+
border-radius: 14px;
2501
+
}
2502
+
2503
+
.app-icon-container {
2504
+
margin-bottom: 0.5rem;
2505
+
padding: 0.125rem 0;
2506
+
}
2507
+
2508
+
.privacy-policy {
2509
+
padding: 0.75rem;
2510
+
margin: 0.25rem;
2343
2511
}
2344
2512
}
2345
2513