Graham McIntire
0061c4b169
Dark navbar header with radio icon, refined slideover control panel with branded header and section cards, polished cards/tables/badges on info, packets, and about pages using ring borders and shadow-xs.
62 lines
3.8 KiB
Text
62 lines
3.8 KiB
Text
<div class="mx-auto max-w-2xl py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-white shadow-xs sm:rounded-lg ring-1 ring-gray-950/5 dark:bg-gray-800/50 dark:shadow-none dark:ring-white/10 mb-8">
|
|
<div class="px-6 py-8 sm:px-8">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
|
|
<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.808-3.808-9.98 0-13.789m13.788 0c3.808 3.808 3.808 9.981 0 13.79M12 12h.008v.007H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">APRS.me</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{gettext("Real-time APRS packet tracking")}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prose max-w-none dark:prose-invert">
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
APRS.me is a real-time Automatic Packet Reporting System (APRS) viewer built for amateur radio operators. Track stations, view position reports, weather data, and telemetry from the APRS-IS network on an interactive map.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 rounded-lg bg-gray-50 p-5 ring-1 ring-gray-950/5 dark:bg-gray-900/50 dark:ring-white/10">
|
|
<h4 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
|
|
{gettext("Built with Modern Technologies")}
|
|
</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="inline-flex items-center rounded-md bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10 dark:bg-indigo-400/10 dark:text-indigo-400 dark:ring-indigo-400/30">
|
|
Elixir
|
|
</span>
|
|
<span class="inline-flex items-center rounded-md bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-700/10 dark:bg-green-400/10 dark:text-green-400 dark:ring-green-400/30">
|
|
Phoenix
|
|
</span>
|
|
<span class="inline-flex items-center rounded-md bg-purple-50 px-2.5 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10 dark:bg-purple-400/10 dark:text-purple-400 dark:ring-purple-400/30">
|
|
LiveView
|
|
</span>
|
|
<span class="inline-flex items-center rounded-md bg-yellow-50 px-2.5 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-700/10 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/30">
|
|
PostgreSQL
|
|
</span>
|
|
<span class="inline-flex items-center rounded-md bg-cyan-50 px-2.5 py-1 text-xs font-medium text-cyan-700 ring-1 ring-inset ring-cyan-700/10 dark:bg-cyan-400/10 dark:text-cyan-400 dark:ring-cyan-400/30">
|
|
PostGIS
|
|
</span>
|
|
<span class="inline-flex items-center rounded-md bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-700/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
|
|
Tailwind CSS
|
|
</span>
|
|
<span class="inline-flex items-center rounded-md bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
|
|
Leaflet.js
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-gray-400 dark:text-gray-500">
|
|
<p class="text-xs">
|
|
© 2026 aprs.me
|
|
</p>
|
|
</div>
|
|
</div>
|