328 lines
13 KiB
HTML
328 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Docs | RadioPlayer</title>
|
|
<meta name="description" content="Simple documentation for using RadioPlayer on desktop and mobile.">
|
|
<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-2); 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; }
|
|
.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; }
|
|
h3 { margin:18px 0 8px; font-size:0.96rem; color:var(--text-main); }
|
|
ul { margin:0; padding-left:1.2rem; }
|
|
ol { margin:0; padding-left:1.2rem; }
|
|
.toc {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 22px;
|
|
}
|
|
.toc a,
|
|
.inline-link {
|
|
color: var(--text-main);
|
|
text-decoration: none;
|
|
}
|
|
.toc a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.65rem 0.9rem;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,0.05);
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
}
|
|
.grid-two {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.85fr);
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
.summary-card {
|
|
display: grid;
|
|
gap: 12px;
|
|
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%);
|
|
}
|
|
.summary-label {
|
|
color: var(--accent-2);
|
|
font-size: 0.76rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
.summary-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.summary-list li {
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 14px;
|
|
background: rgba(255,255,255,0.04);
|
|
color: var(--text-main);
|
|
line-height: 1.5;
|
|
}
|
|
.note {
|
|
margin-top: 14px;
|
|
padding: 12px 14px;
|
|
border-left: 3px solid rgba(77, 215, 200, 0.68);
|
|
border-radius: 14px;
|
|
background: rgba(77, 215, 200, 0.08);
|
|
}
|
|
.muted {
|
|
color: var(--text-muted);
|
|
}
|
|
.stack {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
a { color:inherit; }
|
|
@media (max-width: 860px) {
|
|
.grid-two { grid-template-columns: 1fr; }
|
|
.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; }
|
|
.toc { gap: 8px; }
|
|
.toc a { width: 100%; justify-content: center; }
|
|
}
|
|
</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">Docs</span>
|
|
</span>
|
|
</a>
|
|
<a class="back-link" href="./">Back to player</a>
|
|
</div>
|
|
|
|
<main class="card">
|
|
<p class="eyebrow">Docs</p>
|
|
<div class="hero-grid">
|
|
<div>
|
|
<h1>Simple guide to using RadioPlayer.</h1>
|
|
<p class="lead">RadioPlayer helps you browse stations, start listening quickly, and move between stations with a clean player that works on desktop and mobile.</p>
|
|
<p class="lead">This page covers the basics only, so it stays easy to read and useful for everyday listening.</p>
|
|
</div>
|
|
|
|
<aside class="summary-card" aria-label="Quick summary">
|
|
<span class="summary-label">Quick summary</span>
|
|
<ul class="summary-list">
|
|
<li>Browse stations and start playback fast.</li>
|
|
<li>Use search, favorites, and recents to find stations again.</li>
|
|
<li>Install the app for easier access on supported devices.</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
|
|
<nav class="toc" aria-label="Documentation sections">
|
|
<a href="#overview">Overview</a>
|
|
<a href="#using-the-player">Using the player</a>
|
|
<a href="#stations-and-countries">Stations and countries</a>
|
|
<a href="#install-and-offline">Install and offline</a>
|
|
<a href="#tips">Tips</a>
|
|
<a href="#help">Help</a>
|
|
</nav>
|
|
|
|
<div class="sections">
|
|
<section id="overview">
|
|
<h2>Overview</h2>
|
|
<p>RadioPlayer is an online radio player made to keep listening simple. You can open the player, browse available stations, search for something specific, and switch stations quickly without getting lost in a busy interface.</p>
|
|
<div class="grid-two">
|
|
<div>
|
|
<h3>What you can do</h3>
|
|
<ul>
|
|
<li>Browse a station library with a simple player view.</li>
|
|
<li>Search stations and move between them quickly.</li>
|
|
<li>Keep favorites and recent stations easy to reach.</li>
|
|
<li>Use the player on desktop and mobile screens.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>What the player focuses on</h3>
|
|
<ul>
|
|
<li>Fast access to stations without extra clutter.</li>
|
|
<li>Clear playback controls that are easy to understand.</li>
|
|
<li>A lightweight experience that is easy to return to.</li>
|
|
<li>Simple listening whether you are on phone or desktop.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="using-the-player">
|
|
<h2>Using the player</h2>
|
|
<div class="stack">
|
|
<div>
|
|
<h3>Quick start</h3>
|
|
<ol>
|
|
<li>Open the player and press play to start the current station.</li>
|
|
<li>Use next and previous to move through the available station list.</li>
|
|
<li>Open the station library to search and choose something else.</li>
|
|
<li>Save stations as favorites for faster access later.</li>
|
|
</ol>
|
|
</div>
|
|
<div>
|
|
<h3>While you listen</h3>
|
|
<ul>
|
|
<li>The player is designed to stay simple while you switch stations.</li>
|
|
<li>Search helps narrow the station list quickly.</li>
|
|
<li>Recent stations help you get back to what you heard before.</li>
|
|
<li>Favorites keep your usual choices close at hand.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Playback and status</h3>
|
|
<ul>
|
|
<li>You can control playback, volume, and station changes from the main player.</li>
|
|
<li>Status messages help explain what the player is doing when needed.</li>
|
|
<li>The layout stays compact so listening feels quick and direct.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="stations-and-countries">
|
|
<h2>Stations and countries</h2>
|
|
<p>RadioPlayer can help you narrow the station list by country, so it is easier to explore the stations you care about instead of scrolling through everything at once.</p>
|
|
<div class="grid-two">
|
|
<div>
|
|
<h3>Finding stations</h3>
|
|
<ul>
|
|
<li>Use the library to browse the available station list.</li>
|
|
<li>Search helps you get to a station faster.</li>
|
|
<li>Country filters can make the list easier to manage.</li>
|
|
<li>Your listening flow stays simple even with a larger catalog.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Keeping things current</h3>
|
|
<ul>
|
|
<li>The station list can refresh so the player stays useful over time.</li>
|
|
<li>Saved data helps the player open quickly when you come back.</li>
|
|
<li>Recent and favorite stations help reduce repeated searching.</li>
|
|
<li>The goal is faster listening with less friction.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p class="note">If you return often, favorites and recents help make the player feel faster and more personal.</p>
|
|
</section>
|
|
|
|
<section id="install-and-offline">
|
|
<h2>Install and offline</h2>
|
|
<div class="grid-two">
|
|
<div>
|
|
<h3>Install and offline</h3>
|
|
<ul>
|
|
<li>You can install the app on supported devices for easier access.</li>
|
|
<li>Installed use can feel faster and closer to a native app.</li>
|
|
<li>Some player data can stay available so reopening feels quicker.</li>
|
|
<li>The app is designed to come back up smoothly after the first visit.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Listening on different devices</h3>
|
|
<ul>
|
|
<li>The layout is made to work well on both desktop and mobile.</li>
|
|
<li>Supported devices and browsers can offer extra playback options.</li>
|
|
<li>The player keeps controls visible so switching and listening stay easy.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tips">
|
|
<h2>Tips</h2>
|
|
<div class="grid-two">
|
|
<div>
|
|
<h3>For faster listening</h3>
|
|
<ul>
|
|
<li>Use favorites for the stations you play most often.</li>
|
|
<li>Check recents when you want to go back quickly.</li>
|
|
<li>Use search instead of scrolling long lists.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>For a cleaner experience</h3>
|
|
<ul>
|
|
<li>Use country filters when the station list feels too wide.</li>
|
|
<li>Open the player on the device you listen on most.</li>
|
|
<li>Keep the installed version handy if your browser supports it.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="help">
|
|
<h2>Help</h2>
|
|
<p>If you just want the basics, this page is enough: browse, search, play, and save favorites. For general app information, open <a class="inline-link" href="about.html">About</a>. For privacy details, open <a class="inline-link" href="privacy.html">Privacy</a>.</p>
|
|
<p class="muted">This public docs page is intentionally short so it stays clean and easy to scan.</p>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |