audioshare/index.html at main · sakgoyal/audioshare · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="color-scheme" content="dark light">
	<title>Audio Share</title>
	<style>
		:root { color-scheme: dark light; }
		body { display: flex; flex-direction: column; gap: 1rem; font-family: sans-serif; padding: 1rem; max-width: 800px; margin: auto; }
		#clients-list { padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; }
		.row { display: flex; justify-content: space-between; align-items: center; border: 1px solid #ccc; padding: 0.5rem; width: 100%; box-sizing: border-box; }
		.client-row { cursor: pointer; transition: background-color 0.2s; }
		.client-row:hover { background-color: rgba(255, 255, 255, 0.1); }
		.client-row.playing { border-color: #4caf50; background-color: rgba(76, 175, 80, 0.1); }
		.row h2 { margin: 0; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1rem; }
	</style>
</head>

<body>
	<h1>Audio Files</h1>
	<div id="audio-container"></div>
	<h1>Connected Clients</h1>
	<div id="clients-list"></div>
</body>

<script type="module" src="/client.js"></script>