Transformado em web app e alguns ajustes visuais
This commit is contained in:
Rafael Tavares Juliani
parent
458079bbc8
commit
b1efa032ff
BIN
.xdp-.goutputstream-83IF62-YJjfSA
Normal file
BIN
.xdp-.goutputstream-83IF62-YJjfSA
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@ -1,6 +1,6 @@
|
||||
# moan-audio-link
|
||||
|
||||
É uma espécie de "qr code" sonoro. Neste app, você pode gerar um código sonoro a partir de um link e, depois neste mesmo app, ouvir esse código e ir automaticamente para o link.
|
||||
Gere e escute códigos sonoros que funcionam como qr 'codes sonoros'. Neste app, você pode gerar um código sonoro a partir de um link e, depois neste mesmo app, ouvir esse código e ir automaticamente para o link.
|
||||
|
||||
Este app é inteiramente baseado em: <https://github.com/ggerganov/ggwave/tree/master>.
|
||||
|
||||
|
||||
41
estilo.css
41
estilo.css
@ -49,7 +49,11 @@ a.nav-link {
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
div#capturaSetor {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#gerarSetor div {
|
||||
@ -59,12 +63,14 @@ a.nav-link {
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#listeningIcon {
|
||||
visibility: hidden;
|
||||
margin-right: 5px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@ -124,8 +130,35 @@ p, label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h1 img {
|
||||
height: 2em;
|
||||
/* Esconde o radio original */
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Quando checado, mostra uma bolinha branca no centro */
|
||||
input[type="radio"]:checked::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 10em;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
BIN
icon-192.png
Normal file
BIN
icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
icon-512.png
Normal file
BIN
icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
15
index.html
15
index.html
@ -3,6 +3,8 @@
|
||||
<head>
|
||||
<title>Moan Áudio Link</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="AudioLinkIcon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@ -11,8 +13,8 @@
|
||||
<link rel="stylesheet" href="estilo.css">
|
||||
</head>
|
||||
<body>
|
||||
<img src="AudioLinkIcon.svg" alt="Ícone De uma orelha ouvindo um qr code">
|
||||
<h1>
|
||||
<img src="AudioLinkIcon.svg" alt="Ícone De uma orelha ouvindo um qr code">
|
||||
Moan Áudio Link
|
||||
</h1>
|
||||
|
||||
@ -331,5 +333,16 @@
|
||||
|
||||
captureStop.click();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
//Service Worker para funcionar como web app no android
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('service-worker.js')
|
||||
.then(reg => console.log('[PWA] Service Worker registrado:', reg.scope))
|
||||
.catch(err => console.error('[PWA] Falha no Service Worker:', err));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
29
manifest.json
Normal file
29
manifest.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "Moan Áudio Link",
|
||||
"short_name": "ÁudioLink",
|
||||
"start_url": "./",
|
||||
"display": "standalone",
|
||||
"orientation": "portrait",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#000000",
|
||||
"description": "Gere e escute códigos sonoros que funcionam como qr 'codes sonoros'.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "AudioLinkIcon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
14
service-worker.js
Normal file
14
service-worker.js
Normal file
@ -0,0 +1,14 @@
|
||||
self.addEventListener('install', (event) => {
|
||||
console.log('[ServiceWorker] Instalando...');
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
console.log('[ServiceWorker] Ativo');
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
// No cache offline ainda, apenas responde as requisições normalmente
|
||||
return;
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user