144 lines
7.1 KiB
HTML
144 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>About RadioPlayer | Online Radio Player by 76bit.net</title>
|
|
<meta name="description" content="Learn about RadioPlayer, a simple online radio player by 76bit.net for browsing stations, switching quickly, and listening on desktop and mobile.">
|
|
<meta name="keywords" content="RadioPlayer, online radio player, internet radio, radio stations, radio streaming, 76bit.net, mobile radio player, desktop radio player">
|
|
<meta property="og:title" content="About RadioPlayer | Online Radio Player by 76bit.net">
|
|
<meta property="og:description" content="Basic information about RadioPlayer, including what the player does, who made it, and its release date.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="RadioPlayer">
|
|
<meta property="og:image" content="assets/radioplayer-logo-512.png">
|
|
<meta property="og:image:alt" content="RadioPlayer logo">
|
|
<meta name="theme-color" content="#111318">
|
|
<link rel="manifest" href="manifest.json?v=__BUILD_STAMP__">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="assets/radioplayer-logo-192.png">
|
|
<link rel="icon" type="image/png" sizes="512x512" href="assets/radioplayer-logo-512.png">
|
|
<link rel="apple-touch-icon" href="assets/radioplayer-logo-192.png">
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--page-bg: #111318;
|
|
--panel: rgba(16, 20, 27, 0.82);
|
|
--border: rgba(255, 255, 255, 0.12);
|
|
--text-main: #f7f8fb;
|
|
--text-muted: rgba(247, 248, 251, 0.72);
|
|
--accent: #4dd7c8;
|
|
--accent-2: #ffb45c;
|
|
--shadow: 0 28px 72px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { min-height: 100%; background: var(--page-bg); font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
color: var(--text-main);
|
|
background:
|
|
radial-gradient(circle at 18% 8%, rgba(77, 215, 200, 0.24), transparent 34%),
|
|
radial-gradient(circle at 86% 82%, rgba(255, 180, 92, 0.2), transparent 32%),
|
|
linear-gradient(180deg, #111318 0%, #101218 58%, #111821 100%);
|
|
}
|
|
.page-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 64px; }
|
|
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
|
|
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
|
|
.brand img { width:44px; height:44px; border-radius:14px; box-shadow:0 12px 28px rgba(77, 215, 200, 0.18); }
|
|
.brand-title { display:block; font-size:1.02rem; font-weight:800; }
|
|
.brand-subtitle { display:block; color:var(--text-muted); font-size:0.82rem; font-weight:700; }
|
|
.back-link { padding:0.68rem 0.92rem; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,0.06); color:var(--text-main); text-decoration:none; font-size:0.9rem; font-weight:700; }
|
|
.card { padding: clamp(24px, 4vw, 42px); border:1px solid var(--border); border-radius:28px; background: linear-gradient(180deg, rgba(16,20,27,0.82), rgba(255,255,255,0.035)); box-shadow:var(--shadow); backdrop-filter: blur(22px) saturate(130%); }
|
|
.eyebrow { margin:0 0 10px; color:var(--accent); font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
|
|
h1 { margin:0; font-size: clamp(2rem, 5vw, 3.25rem); line-height:0.98; }
|
|
.lead { margin: 16px 0 0; max-width: 60ch; }
|
|
p, li { color:var(--text-muted); line-height:1.7; }
|
|
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr); gap:18px; align-items:start; }
|
|
.maker-card {
|
|
display:grid;
|
|
gap:14px;
|
|
padding:20px;
|
|
border:1px solid rgba(255,255,255,0.1);
|
|
border-radius:22px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)),
|
|
radial-gradient(circle at top left, rgba(77, 215, 200, 0.16), transparent 48%);
|
|
}
|
|
.maker-logo-wrap {
|
|
display:grid;
|
|
place-items:center;
|
|
min-height:132px;
|
|
padding:20px;
|
|
border:1px solid rgba(255,255,255,0.08);
|
|
border-radius:18px;
|
|
background: rgba(8, 12, 18, 0.68);
|
|
}
|
|
.maker-logo { width:min(100%, 220px); height:auto; display:block; }
|
|
.maker-title { margin:0; color:var(--text-main); font-size:1.08rem; }
|
|
.maker-copy { margin:0; }
|
|
.maker-meta { display:grid; gap:6px; }
|
|
.maker-meta p { margin:0; }
|
|
.sections { display:grid; gap:16px; margin-top:28px; }
|
|
section { padding:18px 20px; border:1px solid rgba(255,255,255,0.08); border-radius:20px; background: rgba(255,255,255,0.045); }
|
|
h2 { margin:0 0 10px; font-size:1.05rem; }
|
|
ul { margin:0; padding-left:1.2rem; }
|
|
a { color:inherit; }
|
|
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } }
|
|
@media (max-width: 720px) { .page-shell { width:min(100% - 20px, 960px); padding-top:16px; } .topbar { flex-direction:column; align-items:flex-start; } }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page-shell">
|
|
<div class="topbar">
|
|
<a class="brand" href="./">
|
|
<img src="assets/radioplayer-logo-192.png" alt="" aria-hidden="true">
|
|
<span>
|
|
<span class="brand-title">RadioPlayer</span>
|
|
<span class="brand-subtitle">About</span>
|
|
</span>
|
|
</a>
|
|
<a class="back-link" href="./">Back to player</a>
|
|
</div>
|
|
|
|
<main class="card">
|
|
<p class="eyebrow">About</p>
|
|
<div class="hero-grid">
|
|
<div>
|
|
<h1>About RadioPlayer</h1>
|
|
<p class="lead">RadioPlayer is a simple online radio player that helps you find stations, start listening quickly, and move between stations without extra clutter.</p>
|
|
<p class="lead">It works well on desktop and mobile, keeps the experience clear, and makes it easy to come back and continue listening.</p>
|
|
</div>
|
|
|
|
<aside class="maker-card" aria-label="76bit">
|
|
<div class="maker-logo-wrap">
|
|
<img class="maker-logo" src="images/76bit_logo.webp" alt="76bit logo">
|
|
</div>
|
|
<p class="maker-title">Made by 76bit.net</p>
|
|
<div class="maker-meta">
|
|
<p class="maker-copy">Release date: April 29, 2026</p>
|
|
<p class="maker-copy">Simple radio browsing and playback in one place.</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="sections">
|
|
<section>
|
|
<h2>What it does</h2>
|
|
<p>Browse radio stations, search the list, switch between stations, and start playback with a small and simple interface.</p>
|
|
</section>
|
|
<section>
|
|
<h2>Basic features</h2>
|
|
<p>The player helps you discover stations, keep favorites close, and return to listening quickly on both phone and desktop screens.</p>
|
|
</section>
|
|
<section>
|
|
<h2>Why people use it</h2>
|
|
<p>It is made for listeners who want radio to feel fast, clear, and easy to use without unnecessary steps.</p>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |