diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f2158a3..801cbe7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -12,6 +12,12 @@ m.routeEnd.toLowerCase().includes(searchTerm.toLowerCase()) ); + const vibrate = (patern: number | number[] = 10) => { + if (typeof window !== 'undefined' && window.navigator.vibrate) { + window.navigator.vibrate(pattern); + } + } + const isVerifiedRecently = (dateVal: string | null) => { if (!dateVal) return 'draft'; @@ -60,26 +66,9 @@
- -
- OWL - External Tool -
-
-
OwlBoard
-

Live Departure Boards and PIS Codes

-
-
- Visit owlboard.info ↗ -
- + Go to OwlBoard Live Departures & PIS {#each filteredMaps as map (map.routeId)} - + vibrate(10)}>
{map.routeId.toString().padStart(4, '0')} @@ -133,21 +122,24 @@ position: fixed; top: 0; left: 0; + box-sizing: border-box; width: 100%; background: #3c6f79; color: #ebebeb; + z-index: 100; } .brand-container { - margin: 15px; + padding: 15px; display: flex; + width: 100%; align-items: center; + box-sizing: border-box; gap: 1rem; } .main-logo { - /* Adjust height to fit your logo's aspect ratio */ - height: 48px; + height: 52px; width: auto; display: block; } @@ -161,70 +153,92 @@ font-style: italic; } - .sub-brand { - font-size: 0.65rem; - font-weight: 800; - color: #94a3b8; - text-transform: uppercase; - letter-spacing: 0.1em; - margin: 0.2rem 0 0 0; - } - - /* Desktop layout adjustment */ - @media (min-width: 640px) { - .main-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 3rem; - } - - .brand-container { - margin-bottom: 0; - } - - .main-logo { - height: 56px; - } + .search-container { + margin-left: auto; } .search-input { width: 100%; + margin-left: auto; + height: 50px; padding: 0.8rem 1rem; - border: 2px solid #e2e8f0; - border-radius: 12px; + text-align: center; + text-transform: uppercase; + border-radius: 30px; + border: none; font-size: 1rem; + transition: all 0.3s ease; box-sizing: border-box; /* Ensures padding doesn't break width */ outline: none; } - .search-input:focus { - border-color: #3b82f6; + .search-input:hover { + box-shadow: rgba(0, 0, 0, 0.46); } - /* Card Layout (Mobile) */ .list-container { display: flex; flex-direction: column; gap: 1rem; - padding-top: 90px; + padding: 90px 1rem 1rem 1rem; + isolation: isolate; + z-index: 1; + } + + @media (max-width: 600px) { + .list-container { + padding-top: 90px; + gap: 0.75rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .card { + padding: 10px 12px; + margin: 0; + border-radius: 4px; + } + + .location { + font-size: 1rem; + margin-bottom: 0.1rem; + font-weight: 500; + } + + .path-arrow { + color: #fff; + font-size: 0.8rem; + margin: 0.1rem 0; + line-height: 0.75; + } + + .card-footer { + font-size: 0.6rem; + line-height: 0.5; + padding-bottom: 2px; + } } .card { display: block; - background: white; + background: #3c6f79; padding: 1.25rem; - border-radius: 16px; + border-radius: 35px; text-decoration: none; - color: inherit; - border: 1px solid #e2e8f0; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + color: #4fd1d1; + text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.29); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.482); transition: transform 0.1s ease; cursor: pointer; } + .card:hover { + transform: scale(1.01); + z-index: 5; + } + .card:active { - transform: scale(0.98); /* Tactile feedback for mobile */ + transform: scale(0.99); /* Tactile feedback for mobile */ } .card-top { @@ -237,8 +251,9 @@ .route-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; - color: #3b82f6; - background: #eff6ff; + color: #fff; + background: #2d2d2d; + text-shadow: none; padding: 0.2rem 0.5rem; border-radius: 6px; } @@ -254,24 +269,24 @@ } .path-arrow { - color: #acc7e8; + color: #fff; font-size: 0.9rem; margin: 0.2rem 0; } .card-footer { font-size: 0.7rem; - color: #64748b; + color: #e2ebeb; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; - border-top: 1px solid #f1f5f9; - padding-top: 0.75rem; + padding-top: 0; } .status-badge { font-size: 0.65rem; font-weight: 800; + text-shadow: none; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; @@ -294,56 +309,22 @@ color: #475569; } - @media (min-width: 640px) { - .page-wrapper { - padding: 3rem 1.5rem; - } - - .main-header { - display: flex; - justify-content: space-between; - align-items: center; - } - - .search-input { - width: 300px; - } - - .path-arrow { - display: inline-block; - margin: 0 0.5rem; - } - - .card-body { - display: flex; - align-items: center; - } + .button-link { + text-decoration: none; + border: none; + background: #3c6f79; + max-width: 360px; + padding: 8px 25px; + margin: auto; + text-align: center; + border-radius: 25px; + width: auto; + color: #e2ebeb; + transition: 0.3s all ease; + font-weight: 620; } - .external-card { - border-left: 4px solid #6366f1; - background: linear-gradient(to right, #ffffff, #f5f3ff); - } - - .system-tag { - background: #eef2ff !important; - color: #4338ca !important; - } - - .status-badge.external { - background: #6366f1; - color: white; - } - - .description { - margin: 0.25rem 0 0 0; - font-size: 0.9rem; - color: #64748b; - font-weight: 500; - } - - .external-card:hover { - border-color: #4338ca; - background: #f5f3ff; + .button-link:hover { + background: #2b2b2b; }