From c677c433610c5cf72a5d0e1cff0e599fba411221 Mon Sep 17 00:00:00 2001 From: Ratnojit Saha Date: Sun, 25 Feb 2024 18:03:35 +0530 Subject: [PATCH 1/4] new 2 forms qr voice --- .../Forms/QR-Code-Generator-Form/index.html | 37 ++++++ .../Forms/QR-Code-Generator-Form/main.css | 100 ++++++++++++++++ .../Forms/QR-Code-Generator-Form/script.js | 42 +++++++ .../Forms/Text-To-Voice-Form/index.html | 31 +++++ Components/Forms/Text-To-Voice-Form/main.js | 57 ++++++++++ Components/Forms/Text-To-Voice-Form/style.css | 107 ++++++++++++++++++ 6 files changed, 374 insertions(+) create mode 100644 Components/Forms/QR-Code-Generator-Form/index.html create mode 100644 Components/Forms/QR-Code-Generator-Form/main.css create mode 100644 Components/Forms/QR-Code-Generator-Form/script.js create mode 100644 Components/Forms/Text-To-Voice-Form/index.html create mode 100644 Components/Forms/Text-To-Voice-Form/main.js create mode 100644 Components/Forms/Text-To-Voice-Form/style.css diff --git a/Components/Forms/QR-Code-Generator-Form/index.html b/Components/Forms/QR-Code-Generator-Form/index.html new file mode 100644 index 00000000..8020e99f --- /dev/null +++ b/Components/Forms/QR-Code-Generator-Form/index.html @@ -0,0 +1,37 @@ + + + + + + + + QR Code Generator Form + + +
+
+

Generate QR Code

+ +
+ + + +
+
+
+
+ Generate + Download +
+
+ + + + + \ No newline at end of file diff --git a/Components/Forms/QR-Code-Generator-Form/main.css b/Components/Forms/QR-Code-Generator-Form/main.css new file mode 100644 index 00000000..22fcffea --- /dev/null +++ b/Components/Forms/QR-Code-Generator-Form/main.css @@ -0,0 +1,100 @@ +:root{ + background: linear-gradient(45deg, #010758, #490d61); + --primary-color: #403d84; + --border-radius: 8px; + --secondary-color: #fff; + --border-color: #7fb7c9; +} +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +body{ + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--bcg-color); +} + +.box{ + background-color: var(--primary-color); + padding: 30px; + width: 400px; + border-radius: var(--border-radius); +} + +.qr-header h1{ + font-size: 26px; + text-align: center; + color: var(--secondary-color); + margin-bottom: 24px; + text-transform: uppercase; +} + +.qr-header input{ + width: 100%; + margin-block: 12px; +} + +.qr-header input, select{ + padding: 8px; + border-radius: var(--border-radius); + font-size: 18px; + outline: none; + border: 2px solid var(--border-color); +} + +.qr-header label{ + color: var(--secondary-color); + font-size: 20px; +} + +.qr-header div{ + display: flex; + justify-content: space-between; +} + +.qr-footer{ + display: flex; + justify-content: center; +} +.qr-footer a{ + background-color: var(--secondary-color); + text-decoration: none; + font-size: 20px; + padding: 14px 36px; + margin-inline: 2px; + color: var(--primary-color); + font-weight: 600; + border-radius: var(--border-radius); +} + +.qr-body{ + display: grid; + place-items: center; + padding:20px; +} + +.qr-body img{ + max-width: 100%; + max-height: 100%; + margin-block: 10px; + padding: 20px; + border: 0.5px solid var(--border-color); + border-radius: var(--border-radius); +} + +@media screen and (max-width:520px){ + .box{ + width: 80%; + } + .qr-footer a{ + padding: 12px; + font-size: 16px; + } +} diff --git a/Components/Forms/QR-Code-Generator-Form/script.js b/Components/Forms/QR-Code-Generator-Form/script.js new file mode 100644 index 00000000..8e5c9dc5 --- /dev/null +++ b/Components/Forms/QR-Code-Generator-Form/script.js @@ -0,0 +1,42 @@ +const qrText = document.getElementById('qr-text'); +const sizes = document.getElementById('sizes'); +const generateBtn = document.getElementById('generateBtn'); +const downloadBtn = document.getElementById('downloadBtn'); +const qrContainer = document.querySelector('.qr-body'); + +let size = sizes.value; +generateBtn.addEventListener('click',(e)=>{ + e.preventDefault(); + isEmptyInput(); +}); + +sizes.addEventListener('change',(e)=>{ + size = e.target.value; + isEmptyInput(); +}); + +downloadBtn.addEventListener('click', ()=>{ + let img = document.querySelector('.qr-body img'); + + if(img !== null){ + let imgAtrr = img.getAttribute('src'); + downloadBtn.setAttribute("href", imgAtrr); + } + else{ + downloadBtn.setAttribute("href", `${document.querySelector('canvas').toDataURL()}`); + } +}); + +function isEmptyInput(){ + qrText.value.length > 0 ? generateQRCode() : alert("Enter the text or URL to generate your QR code");; +} +function generateQRCode(){ + qrContainer.innerHTML = ""; + new QRCode(qrContainer, { + text:qrText.value, + height:size, + width:size, + colorLight:"#fff", + colorDark:"#000", + }); +} diff --git a/Components/Forms/Text-To-Voice-Form/index.html b/Components/Forms/Text-To-Voice-Form/index.html new file mode 100644 index 00000000..c7603059 --- /dev/null +++ b/Components/Forms/Text-To-Voice-Form/index.html @@ -0,0 +1,31 @@ + + + + + + Text To Voice Form + + + + +
+
Text To Voice
+
+
+ + +
+
+ +
+ +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/Components/Forms/Text-To-Voice-Form/main.js b/Components/Forms/Text-To-Voice-Form/main.js new file mode 100644 index 00000000..cd226f22 --- /dev/null +++ b/Components/Forms/Text-To-Voice-Form/main.js @@ -0,0 +1,57 @@ +const textarea = document.querySelector("textarea"), +voiceList = document.querySelector("select"), +speechBtn = document.querySelector("button"); + +let synth = speechSynthesis, +isSpeaking = true; + +voices(); + +function voices(){ + for(let voice of synth.getVoices()){ + let selected = voice.name === "Google US English" ? "selected" : ""; + let option = ``; + voiceList.insertAdjacentHTML("beforeend", option); + } +} + +synth.addEventListener("voiceschanged", voices); + +function textToSpeech(text){ + let utterance = new SpeechSynthesisUtterance(text); + for(let voice of synth.getVoices()){ + if(voice.name === voiceList.value){ + utterance.voice = voice; + } + } + synth.speak(utterance); +} + +speechBtn.addEventListener("click", e =>{ + e.preventDefault(); + if(textarea.value !== ""){ + if(!synth.speaking){ + textToSpeech(textarea.value); + } + if(textarea.value.length > 80){ + setInterval(()=>{ + if(!synth.speaking && !isSpeaking){ + isSpeaking = true; + speechBtn.innerText = "Convert To Speech"; + }else{ + } + }, 500); + if(isSpeaking){ + synth.resume(); + isSpeaking = false; + speechBtn.innerText = "Pause Speech"; + }else{ + synth.pause(); + isSpeaking = true; + speechBtn.innerText = "Resume Speech"; + } + }else{ + speechBtn.innerText = "Convert To Speech"; + } + } +}); \ No newline at end of file diff --git a/Components/Forms/Text-To-Voice-Form/style.css b/Components/Forms/Text-To-Voice-Form/style.css new file mode 100644 index 00000000..79885024 --- /dev/null +++ b/Components/Forms/Text-To-Voice-Form/style.css @@ -0,0 +1,107 @@ +/* Import Google Font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: linear-gradient(45deg, #010758, #490d61); +} +::selection{ + color: #fff; + background: #5256AD; +} + +.wrapper{ + width: 370px; + padding: 25px 30px; + border-radius: 7px; + background: #fff; + box-shadow: 7px 7px 30px rgba(209, 203, 203, 0.745) +} +.wrapper header{ + font-size: 28px; + font-weight: 500; + text-align: center; +} +.wrapper form{ + margin: 35px 0 20px; +} +form .row{ + display: flex; + margin-bottom: 20px; + flex-direction: column; +} +form .row label{ + font-size: 18px; + margin-bottom: 5px; +} +form .row:nth-child(2) label{ + font-size: 17px; +} +form :where(textarea, select, button){ + outline: none; + width: 100%; + height: 100%; + border: none; + border-radius: 5px; +} +form .row textarea{ + resize: none; + height: 110px; + font-size: 15px; + padding: 8px 10px; + border: 1px solid #999; +} +form .row textarea::-webkit-scrollbar{ + width: 0px; +} +form .row .outer{ + height: 47px; + display: flex; + padding: 0 10px; + align-items: center; + border-radius: 5px; + justify-content: center; + border: 1px solid #999; +} +form .row select{ + font-size: 14px; + background: none; +} +form .row select::-webkit-scrollbar{ + width: 8px; +} +form .row select::-webkit-scrollbar-track{ + background: #fff; +} +form .row select::-webkit-scrollbar-thumb{ + background: #888; + border-radius: 8px; + border-right: 2px solid #ffffff; +} +form button{ + height: 52px; + color: #fff; + font-size: 17px; + cursor: pointer; + margin-top: 10px; + background: #675AFE; + transition: 0.3s ease; +} +form button:hover{ + background: #4534fe; +} + +@media(max-width: 400px){ + .wrapper{ + max-width: 345px; + width: 100%; + } +} \ No newline at end of file From 574fb148127b3870a34575dd0bb86f9152b62627 Mon Sep 17 00:00:00 2001 From: Ratnojit Saha Date: Sun, 25 Feb 2024 23:09:02 +0530 Subject: [PATCH 2/4] fixed forms.html added --- assets/html_files/forms.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index 46abdcf4..6cb62365 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -313,6 +313,32 @@

Newsletter Subscription Form

+
+

Text To Voice Form

+
+ + + +
+
+ + + +
+
+
+

QR Code Generator Form

+
+ + + +
+
+ + + +
+
From 48c8ce3afc5df0e267424a7e576eacd6fba8f230 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 25 Feb 2024 23:39:55 +0530 Subject: [PATCH 3/4] Update index.html --- Components/Forms/Text-To-Voice-Form/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Components/Forms/Text-To-Voice-Form/index.html b/Components/Forms/Text-To-Voice-Form/index.html index c7603059..2345629e 100644 --- a/Components/Forms/Text-To-Voice-Form/index.html +++ b/Components/Forms/Text-To-Voice-Form/index.html @@ -1,5 +1,4 @@ - @@ -28,4 +27,4 @@ - \ No newline at end of file + From 906783dee561ad9ac92a045853ca420e433f247d Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sun, 25 Feb 2024 23:45:17 +0530 Subject: [PATCH 4/4] Update forms.html --- assets/html_files/forms.html | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index c68aef84..a24d9947 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -313,11 +313,7 @@

Newsletter Subscription Form

-
-

Text To Voice Form

-
-

Newsletter Subscription-2 Form

@@ -325,12 +321,24 @@

Newsletter Subscription-2 Form
- + + + +
+
+
+

Text To Voice Form

+
+ + + +
+
+
-

QR Code Generator Form

@@ -339,13 +347,11 @@

QR Code Generator Form

- - +
-