From 458079bbc8ea25b3a5ca9eb268d247e0a71d6fce Mon Sep 17 00:00:00 2001 From: Rafael Tavares Juliani <> Date: Sun, 18 May 2025 02:18:34 -0300 Subject: [PATCH] =?UTF-8?q?Primeira=20altera=C3=A7=C3=A3o=20do=20c=C3=B3di?= =?UTF-8?q?go=20original?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ANIMATEDstreamline--ear-hearing-solid.gif | Bin 0 -> 443 bytes AudioLinkIcon.svg | 160 ++++++++++++++ README.md | 10 +- estilo.css | 170 +++++++++++++++ index.html | 241 +++++++++++++++++----- 5 files changed, 532 insertions(+), 49 deletions(-) create mode 100644 ANIMATEDstreamline--ear-hearing-solid.gif create mode 100644 AudioLinkIcon.svg create mode 100644 estilo.css diff --git a/ANIMATEDstreamline--ear-hearing-solid.gif b/ANIMATEDstreamline--ear-hearing-solid.gif new file mode 100644 index 0000000000000000000000000000000000000000..a2b852d0414f104392ed9407e73f406952fe3b73 GIT binary patch literal 443 zcmZ?wbhEHbG-5DfSjfom@87@wFrfIK+s`#5*x50_)kx2PnUR5kLGhoUb5UwyNotBh zd1gt5g1e`00E6OB7Df>UCI%g#0-z~I3=B*+ru45o{gzj$V#_LtP1i2|+TEJ?y|SSr zFW7VLOX)Q_j}Lv=b7j$z_ZF8yt6!@UwK%+2e-3!b_3VRZbhbv9*Q{Yos%!nuwvt^#tB=)Rr~s!wihZ+t(a$8>r$kQL+=aMyb{d+oSS8|kV(Qs bF56a-UDDX7(@n!WQ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 + + + + +