diff --git a/ANIMATEDstreamline--ear-hearing-solid.gif b/ANIMATEDstreamline--ear-hearing-solid.gif new file mode 100644 index 0000000..a2b852d Binary files /dev/null and b/ANIMATEDstreamline--ear-hearing-solid.gif differ diff --git a/AudioLinkIcon.svg b/AudioLinkIcon.svg new file mode 100644 index 0000000..10ec040 --- /dev/null +++ b/AudioLinkIcon.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/README.md b/README.md index 95b9c5e..bf0cca1 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,12 @@ É 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. -Este app é inteiramente baseado em: . \ No newline at end of file +Este app é inteiramente baseado em: . + +O ícone é licenciado sob CC By 4.0 e as imagens presentes no ícone possuem os seguintes créditos e licenças: + +* QRCode icon por Vaadin, licenciada sob a Apache License 2.0. + +* Ear Hearing (solid) icon por Streamline, licenciada sob a Creative Commons Attribution 4.0 International (CC BY 4.0). + +Obs.: A licença do ANIMATEDstreamline--ear-hearing-solid.gif é a mesma do original (CC BY 4.0). \ No newline at end of file diff --git a/estilo.css b/estilo.css new file mode 100644 index 0000000..4619533 --- /dev/null +++ b/estilo.css @@ -0,0 +1,170 @@ +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + justify-content: space-around; + box-sizing: border-box; + background: linear-gradient(83deg,#b32eeb,#5ba4fa,#bc1b60); + background-size: 180% 180%; + animation: gradient-animation 14s ease infinite; + font-family: "Josefin Sans", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + } + +h1 { + text-align: center; + color: #fff; + font-size: 50px; + font-family: "Goldman", sans-serif; + font-weight: 700; + font-style: normal; + margin-bottom: 3px; +} + +h2 { + text-align: center; + color: #fff; + font-size: 21px; + font-family: "Josefin Sans", sans-serif; + font-weight: 500; + font-style: normal; +} + +a.nav-link { + color: #fff; + font-size: 15px; + font-family: "Josefin Sans", sans-serif; + font-weight: 400; + font-style: normal; +} + +.setores { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + justify-content: space-around; + box-sizing: border-box; + margin-bottom: 60px; +} + +#gerarSetor div { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + justify-content: space-around; + box-sizing: border-box; + margin-bottom: 60px; +} + +#listeningIcon { + visibility: hidden; + margin-right: 5px; +} + +.spinner { + width: 40px; + height: 40px; + margin-bottom: 15px; + border: 4px solid #fff; /* Cor de fundo do círculo */ + border-top: 4px solid #5ba4fa; /* Cor da parte girante */ + border-radius: 50%; + animation: spin 1s linear infinite; /* Animação contínua */ +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +#rxData, #rxDataTXT, #countdown { + font-size: 27px; + font-weight: bold; + margin-right: 3px; + background-color: rgba(255,255,255,1); + color: #5ba4fa; + padding: 3px 8px; + border-radius: 5px; + vertical-align: middle; +} + +#redirecionamentoTXT, #divTXT { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + justify-content: space-around; + box-sizing: border-box; +} + +button{ + cursor: pointer; +} + + @keyframes gradient-animation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } + +p, label { + margin: 10px; + max-width: 767px; + color: #fff; +} + +h1 img { + height: 2em; + vertical-align: middle; + margin-right: 5px; +} + +textarea { + width: 83vw; + max-width: 600px; + height: 40px; + border: 2px solid; + border-radius: 10px; + background: rgba(200, 200, 200, 0.1); + color: rgb(255, 255, 255); + font-family: "Josefine Sans", sans-serif; +} + +.button-34 { + margin: 10px 10px 25px 10px; + background: #5E5DF0; + border-radius: 999px; + box-shadow: #5E5DF0 0 10px 20px -10px; + box-sizing: border-box; + color: #FFFFFF; + cursor: pointer; + font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 24px; + opacity: 1; + outline: 0 solid transparent; + padding: 8px 18px; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + width: fit-content; + word-break: break-word; + border: 0; +} + +.button-34:hover { + box-shadow: #5E5DF0 0 10px 20px -10px; + opacity: 0.8; +} \ No newline at end of file diff --git a/index.html b/index.html index f2e37ee..43ffafd 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,79 @@ - + - ggwave : javascript example + Moan Áudio Link + + + + + + + -
- Minimal ggwave example using Javascript bindings +

+ Ícone De uma orelha ouvindo um qr code + Moan Áudio Link +

+ + +
-

+ Ouvindo + + + -
Tx Data:

- - - -

- -
Rx data:

- - - - -

- -
- - | - Build time: @GIT_DATE@ | - Commit hash: @GIT_SHA1@ | - Commit subject: @GIT_COMMIT_SUBJECT@ | - Source Code | - + +
+ +
+
+ +

Redirecionando para em 3 segundo(s).

+
+ +
+

O código é ...

+
+ +
+

Gerar código sonoro

+
+ +
+ + +
+ +
+ +

É 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.

+ + Código fonte + + + + +