mirror of
https://github.com/gesellix/Bose-SoundTouch.git
synced 2026-08-19 00:56:16 +00:00
Tobias Gesellchen
56e82d5a01
We might peek into https://github.com/core-hacked/tunein-api for more advanced use cases
201 lines
7.7 KiB
HTML
201 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>SoundTouch Control Center</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link href="/static/css/app.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#" onclick="showPage('devices')">
|
|
<i class="bi bi-speaker"></i>
|
|
SoundTouch Control
|
|
</a>
|
|
<div class="navbar-nav ms-auto">
|
|
<a
|
|
class="nav-link"
|
|
href="#"
|
|
onclick="showPage('devices')"
|
|
title="Home"
|
|
>
|
|
<i class="bi bi-house"></i>
|
|
</a>
|
|
<a
|
|
class="nav-link tunein-nav-link"
|
|
href="#"
|
|
onclick="showPage('tunein')"
|
|
title="TuneIn Browse"
|
|
>
|
|
<img
|
|
src="/static/img/tunein-mono.svg"
|
|
alt="TuneIn"
|
|
class="tunein-nav-icon"
|
|
/>
|
|
</a>
|
|
<a
|
|
class="nav-link"
|
|
href="#"
|
|
onclick="discoverDevices()"
|
|
title="Discover Devices"
|
|
>
|
|
<i class="bi bi-search"></i>
|
|
</a>
|
|
<button
|
|
class="theme-toggle nav-link"
|
|
onclick="toggleTheme()"
|
|
title="Toggle Dark Mode"
|
|
>
|
|
<i id="theme-icon" class="bi bi-moon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4">
|
|
<!-- Device List Page -->
|
|
<div id="devices-page" class="page active">
|
|
<div
|
|
class="d-flex justify-content-between align-items-center mb-4"
|
|
>
|
|
<h2>Your SoundTouch Devices</h2>
|
|
<button class="btn btn-primary" onclick="discoverDevices()">
|
|
<i class="bi bi-search"></i>
|
|
Discover Devices
|
|
</button>
|
|
</div>
|
|
|
|
<div id="devices-loading" class="loading-spinner"></div>
|
|
|
|
<div id="devices-list" class="row">
|
|
<!-- Device cards will be inserted here by JavaScript -->
|
|
</div>
|
|
|
|
<div
|
|
id="no-devices"
|
|
style="display: none"
|
|
class="text-center py-5"
|
|
>
|
|
<i class="bi bi-speaker display-1 text-muted"></i>
|
|
<h4 class="mt-3">No Devices Found</h4>
|
|
<p class="text-muted">
|
|
Click "Discover Devices" to search for SoundTouch
|
|
speakers on your network.
|
|
</p>
|
|
<button class="btn btn-primary" onclick="discoverDevices()">
|
|
<i class="bi bi-search"></i>
|
|
Start Discovery
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TuneIn Browse Page -->
|
|
<div id="tunein-page" class="page">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h2><img src="/static/img/tunein-dark.svg" alt="TuneIn" class="tunein-heading-icon me-2" />TuneIn Browse</h2>
|
|
</div>
|
|
|
|
<div class="tunein-search-bar mb-3">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="tunein-search-input"
|
|
class="form-control"
|
|
placeholder="Search stations, podcasts..."
|
|
/>
|
|
<button
|
|
class="btn btn-primary"
|
|
onclick="tuneInSearch(document.getElementById('tunein-search-input').value)"
|
|
>
|
|
<i class="bi bi-search"></i>
|
|
Search
|
|
</button>
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
onclick="tuneInBrowse()"
|
|
title="Browse top level"
|
|
>
|
|
<i class="bi bi-house"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav id="tunein-breadcrumb" class="mb-3" style="display: none">
|
|
<!-- filled by JavaScript -->
|
|
</nav>
|
|
|
|
<div id="tunein-results">
|
|
<!-- filled by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Device Control Page -->
|
|
<div id="device-page" class="page">
|
|
<div class="back-button">
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
onclick="showPage('devices')"
|
|
>
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Devices
|
|
</button>
|
|
</div>
|
|
|
|
<div id="device-content">
|
|
<!-- Device control content will be inserted here by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="container text-center">
|
|
<small>
|
|
SoundTouch Web Control Interface -
|
|
<a
|
|
href="https://github.com/gesellix/Bose-SoundTouch"
|
|
target="_blank"
|
|
class="text-decoration-none"
|
|
>
|
|
Open Source Project
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Toast container for notifications -->
|
|
<div class="toast-container"></div>
|
|
|
|
<!-- Device picker for TuneIn playback -->
|
|
<div class="modal fade" id="devicePickerModal" tabindex="-1" aria-labelledby="devicePickerLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header py-2">
|
|
<h6 class="modal-title" id="devicePickerLabel">
|
|
<i class="bi bi-speaker me-2"></i>Play on device
|
|
</h6>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body p-2" id="devicePickerList">
|
|
<!-- device buttons filled by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Application JavaScript -->
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|