diff --git a/README.md b/README.md index 8fcbc919..8ea552b5 100644 --- a/README.md +++ b/README.md @@ -296,6 +296,7 @@ Check out all of the submissions below! Well done everyone! - Linta Nijo - [Github](https://github.com/squeakdesign/Quote-generator) | [View Live](https://squeakdesign.github.io/Quote-generator/) - Yu Ling Chen - [Github](https://github.com/Yo0GuitarIT/Quote-Generator) | [View Live](https://yo0guitarit.github.io/Quote-Generator/) - naijamesz - [Github](https://github.com/naijamesz/random-quote) | [View Live](https://random-quote-bice.vercel.app/) +- Lambru Adrian Georgian - [Github](https://github.com/lambrugeorge/Quote-Generator) | [View Live](https://lambrugeorge.github.io/Quote-Generator/) ### Infinity Scroll - Original: [Github](https://github.com/JacintoDesign/infinite-scroll) @@ -464,6 +465,8 @@ Check out all of the submissions below! Well done everyone! - João Gonçalves [Github](https://github.com/Joopr8/picture-in-picture) | [View Live](https://joopr8.github.io/picture-in-picture//) - BM Mahamudul Hasan Shohug - [Github](https://github.com/bshohug/picture-in-picture) | [View Live](https://bshohug.github.io/picture-in-picture/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/picture-in-picture) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/picture-in-picture/) +- Lambru Adrian Georgian - [Github](https://github.com/lambrugeorge/picture-in-picture) | [View Live](https://lambrugeorge.github.io/picture-in-picture/) + ### Joke Teller - Original: [Github](https://github.com/JacintoDesign/joke-teller/) @@ -524,6 +527,7 @@ Check out all of the submissions below! Well done everyone! - BM Mahamudul Hasan Shohug - [Github](https://github.com/bshohug/joke-teller) | [View Live](https://bshohug.github.io/joke-teller/) - Yu Ling Chen - [Github](https://github.com/Yo0GuitarIT/JokeTeller) | [View Live](https://yo0guitarit.github.io/JokeTeller/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/joke-teller) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/joke-teller/) +- Lambru Adrian - [Github](https://github.com/lambrugeorge/Joke-Teller) | [View Live](https://lambrugeorge.github.io/Joke-Teller/) ### Light Dark Mode - Original: [Github](https://github.com/JacintoDesign/light-dark-mode) @@ -574,7 +578,7 @@ Check out all of the submissions below! Well done everyone! - BM Mahamudul Hasan Shohug - [Github](https://github.com/bshohug/toggle-day-light-mode) | [View Live](https://bshohug.github.io/toggle-day-light-mode/) - Yu Ling Chen - [Github](https://github.com/Yo0GuitarIT/DarkLightMode) | [View Live](https://yo0guitarit.github.io/DarkLightMode/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/light-dark-mode) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/light-dark-mode/) - +- Lambru Adrian Georgian - [Github](https://github.com/lambrugeorge/light-dark-mode) | [View Live](https://lambrugeorge.github.io/light-dark-mode/) ### Animated Template - Original: [Github](https://github.com/JacintoDesign/animated-template) - Sahil Aghara - [GitHub](https://github.com/sahilaghara1911) | [View Live](https://sahilaghara1911.github.io/Animated-Template/) @@ -612,6 +616,7 @@ Check out all of the submissions below! Well done everyone! - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/animated) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/animated/) - Yu Ling Chen - [Github](https://github.com/Yo0GuitarIT/AnimateTemplate) | [View Live](https://yo0guitarit.github.io/AnimateTemplate/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/animated-template) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/animated-template/) +- Lambru Adrian Georgian - [Github](https://github.com/lambrugeorge/animated-template) | [View Live](https://lambrugeorge.github.io/animated-template/) ### Navigation Nation - Original: [Github](https://github.com/JacintoDesign/animated-navigation) @@ -644,6 +649,7 @@ Check out all of the submissions below! Well done everyone! - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/navigation-nation) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/navigation-nation/) - Yu Ling Chen - [Github](https://github.com/Yo0GuitarIT/NavigationNation) | [View Live](https://yo0guitarit.github.io/NavigationNation/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/animated-navigation) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/animated-navigation/) +- Lambru Adrian Georgian - [Github](https://github.com/lambrugeorge/Navigation-nations) | [View Live](https://lambrugeorge.github.io/Navigation-nations/) ### Music Player - Original: [Github](https://github.com/JacintoDesign/music-player) @@ -685,11 +691,13 @@ Check out all of the submissions below! Well done everyone! - Patrick Tonderai Ganhiwa - [Github](https://github.com/Pats101/music-player) | [View Live](https://pats101.github.io/music-player/) - Jonnathan Riquelmo - [GitHub](https://github.com/JonnathanRiquelmo/music-player) | [View Live](https://jonnathanriquelmo.github.io/music-player/) - Virginija Meilune - [GitHub](https://github.com/meilune/music-player) | [View Live](https://meilune.github.io/music-player/) + - Jin-co - [Github](https://github.com/jin-co/web-javascript/tree/master/p2/pz08_music_play) | [View Live](https://jin-co-jcg.hostman.site/20p/pz08_music_play/index.html) - MingWei Yong - [Github](https://github.com/ymw0331/javascript-20-projects/tree/master/008-music-player) | [View Live](http://wayney-music-player.s3-website-ap-southeast-1.amazonaws.com/) - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/music-player) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/music-player/) - João Gonçalves [Github](https://github.com/Joopr8/music-player) | [View Live](https://joopr8.github.io/music-player/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/music-player) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/music-player/) +- Lambru Adrian Georgian- [Github](https://github.com/lambrugeorge/Music-player) | [View Live](https://lambrugeorge.github.io/Music-player/) ### Custom Countdown - Original: [Github](https://github.com/JacintoDesign/custom-countdown) @@ -722,6 +730,7 @@ Check out all of the submissions below! Well done everyone! - MingWei Yong - [Github](https://github.com/ymw0331/javascript-20-projects/tree/master/009-custom-countdown) | [View Live](http://wayney-custom-countdown.s3-website-ap-southeast-1.amazonaws.com/) - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/custom-countdown) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/custom-countdown/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/custom-countdown) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/custom-countdown/) +- Lambru Adrian Georgian - [Github](https://github.com/lambrugeorge/custom-countdown) | [View Live](https://lambrugeorge.github.io/custom-countdown/) ### Book Keeper - Original: [Github](https://github.com/JacintoDesign/bookmark-app) @@ -747,6 +756,7 @@ Check out all of the submissions below! Well done everyone! - MingWei Yong - [Github](https://github.com/ymw0331/javascript-20-projects/tree/master/010-book-keeper) | [View Live](http://wayney-book-keeper.s3-website-ap-southeast-1.amazonaws.com/) - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/book-keeper) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/book-keeper/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/bookmarks-app) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/bookmarks-app/) +- Lambru Adrian - [Github](https://github.com/lambrugeorge/bookmark-app) | [View Live](https://lambrugeorge.github.io/bookmark-app/) ### Video Player - Original: [Github](https://github.com/JacintoDesign/video-player) @@ -774,6 +784,7 @@ Check out all of the submissions below! Well done everyone! - MingWei Yong - [Github](https://github.com/ymw0331/javascript-20-projects/tree/master/011-video-player) | [View Live](http://wayney-video-player.s3-website-ap-southeast-1.amazonaws.com/) - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/video-player) [View Live](https://dwernz.github.io/ZTM_Portfolio/project/video-player/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/video-player) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/video-player/) +- Lambru Adrian Georgian - [Github](https://github.com/lambrugeorge/video-player) [View Live](https://lambrugeorge.github.io/video-player/) ### Form Validator - Original: [Github](https://github.com/JacintoDesign/form-validation) @@ -804,6 +815,7 @@ Check out all of the submissions below! Well done everyone! - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/form-validator) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/form-validator/) - João Gonçalves [Github](https://github.com/Joopr8/form-validator) | [View Live](https://joopr8.github.io/form-validator/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/form-validator) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/form-validator/) +- Lambru Adrian Georgian [Github](https://github.com/lambrugeorge/form-validator) | [View Live](https://lambrugeorge.github.io/form-validator/) ### Rock Spock - Original: [Github](https://github.com/JacintoDesign/spock-rock-game) @@ -827,6 +839,7 @@ Check out all of the submissions below! Well done everyone! - MingWei Yong - [Github](https://github.com/ymw0331/javascript-20-projects/tree/master/013-spock-rock-game) | [View Live](http://wayney-spock-rock-game.s3-website-ap-southeast-1.amazonaws.com/) - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/spock-rock-game) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/spock-rock-game/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/spock-rock-game) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/spock-rock-game/) +- Lambru Adrian Georgian [Github](https://github.com/lambrugeorge/Spock-Rock) | [View Live](https://lambrugeorge.github.io/Spock-Rock/) ### NASA APOD - Original: [Github](https://github.com/JacintoDesign/nasa-api-pictures) @@ -851,6 +864,8 @@ Check out all of the submissions below! Well done everyone! - MingWei Yong - [Github](https://github.com/ymw0331/javascript-20-projects/tree/master/014-nasa-apod) | [View Live](http://wayney-nasa-apod.s3-website-ap-southeast-1.amazonaws.com/) - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/nasa-apod) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/nasa-apod/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/nasa-api-pictures) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/nasa-api-pictures/) +- Lambru Adrian - [Github](https://github.com/lambrugeorge/NASA-APOD) | [View Live](https://lambrugeorge.github.io/NASA-APOD/) + ### Paint Clone - Original: [Github](https://github.com/JacintoDesign/paint-clone) @@ -914,6 +929,7 @@ Check out all of the submissions below! Well done everyone! - MingWei Yong - [Github](https://github.com/ymw0331/javascript-20-projects/tree/master/015-math-sprint) | [View Live](http://wayney-math-sprint.s3-website-ap-southeast-1.amazonaws.com/) - Daniel Wernz - [Github](https://github.com/dwernz/ZTM_Portfolio/tree/master/project/math-sprint-game) | [View Live](https://dwernz.github.io/ZTM_Portfolio/project/math-sprint-game/) - Vamshidhar Thonti - [Github](https://github.com/vamshidhar-thonti/JavaScript/tree/master/JS-Projects/math-sprint-game) | [View Live](https://vamshidhar-thonti.github.io/JavaScript/JS-Projects/math-sprint-game/) +- Lambru Adrian - [Github](https://github.com/lambrugeorge/Math-Sprint-Game) | [View Live](https://lambrugeorge.github.io/Math-Sprint-Game/) ### Drag and Drop - Original: [Github](https://github.com/JacintoDesign/drag-and-drop) diff --git a/favicon.png b/favicon.png new file mode 100644 index 00000000..45c7bba7 Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..9f80aa41 --- /dev/null +++ b/index.html @@ -0,0 +1,86 @@ + + + + + + Development and Learning Journey + + + + + +
+ + Light Mode + + + +
+ + + + +
+
+

Development and Learning Journey

+

Explore my path in the world of software development!

+
+
+ +
+

Journey in the World of Development

+
+
+

First Line of Code

+ Proud Coder +
+
+

Impactful Projects

+ Proud Coder +
+
+

Developer Community

+ Proud Coder +
+
+
+ +
+

Explore Recent Articles

+
+ + + + + + +
+
+

>Welcome to the collection of my recent articles. Dive into topics ranging from coding tutorials to insights on the latest technologies. Join me on this learning journey, and let's explore the vast world of software development together!

+
+
+ +
+
+ + + + + + +
+
+ + + + + + diff --git a/robot.gif b/robot.gif new file mode 100644 index 00000000..c05abf99 Binary files /dev/null and b/robot.gif differ diff --git a/script.js b/script.js new file mode 100644 index 00000000..c26b42ed --- /dev/null +++ b/script.js @@ -0,0 +1,53 @@ +const toggleSwitch = document.querySelector('input[type="checkbox"]'); +const nav = document.getElementById('nav'); +const toggleIcon = document.getElementById('toggle-icon'); +const image1 = document.getElementById('image1'); +const image2 = document.getElementById('image2'); +const image3 = document.getElementById('image3'); +const textBox = document.getElementById('text-box'); + +function imageMode(color) { + image1.src = `img/undraw_proud_coder_${color}.svg`; + image2.src = `img/undraw_feeling_proud_${color}.svg`; + image3.src = `img/undraw_conceptual_idea_${color}.svg`; + +} + +function darkMode() { + nav.style.backgroundColor = 'rgb(0 0 0 / 50%)'; + textBox.style.backgroundColor = 'rgb(255 255 255 / 50%)'; + toggleIcon.children[0].textContent = 'Dark Mode'; + toggleIcon.children[1].classList.replace('fa-sun', 'fa-moon'); + imageMode('dark') +} +function lightMode() { + nav.style.backgroundColor = 'rgb(255 255 255 / 50%)'; + textBox.style.backgroundColor = 'rgb(0 0 0 / 50%)'; + toggleIcon.children[0].textContent = 'Light Mode'; + toggleIcon.children[1].classList.replace('fa-moon', 'fa-sun'); + imageMode('light') +} + +function switchTheme(event) { + if (event.target.checked) { + document.documentElement.setAttribute('data-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + darkMode(); + } else { + document.documentElement.setAttribute('data-theme', 'light'); + localStorage.setItem('theme', 'light'); + lightMode(); + } +} + + +toggleSwitch.addEventListener('change', switchTheme); + +const currentTheme = localStorage.getItem('theme'); +if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); +if (currentTheme === 'dark') { + toggleSwitch.checked = true; + darkMode(); + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..d5e1cc28 --- /dev/null +++ b/style.css @@ -0,0 +1,261 @@ +@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Kaushan+Script&family=Oswald&display=swap'); + + +:root { + --primary-color: rgb(255, 92, 92); + --primary-variant: #ff2d2d; + --secondary-color: #1b9999; + --on-primary: rgb(250, 250, 250); + --on-background: rgb(66, 66, 66); + --on-background-alt: rgba(66, 66, 66, 0.7); + --background: rgb(255, 255, 255); + --box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.5); +} + +[data-theme="dark"] { + --primary-color: rgb(150, 65, 255); + --primary-variant: #6c63ff; + --secondary-color: #03dac5; + --on-primary: #000; + --on-background: rgba(255, 255, 255, 0.9); + --on-background-alt: rgba(255, 255, 255, 0.7); + --background: #121212; +} + +html { + box-sizing: border-box; + scroll-behavior: smooth; +} + +body { + margin: 0; + color: var(--on-background); + background-color: var(--background); + font-family: Comfortaa, sans-serif; + background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%2347cad3' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E"); +} + +section { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +h1 { + font-family: Kaushan Script, sans-serif; + font-size: 100px; + margin-bottom: 0; +} + +h2 { + color: var(--on-background-alt); + font-size: 32px; + font-weight: normal; +} + +/* Navigation */ +nav { + z-index: 10; + position: fixed; + font-family: Oswald, sans-serif; + font-size: 24px; + letter-spacing: 3px; + padding: 25px; + width: 100vw; + background: rgb(255 255 255 / 50%); +} + +a { + margin-right: 25px; + color: var(--primary-color); + text-decoration: none; + border-bottom: 3px solid transparent; + font-weight: bold; +} + +a:hover, +a:focus { + color: var(--on-background); + border-bottom: 3px solid; +} + +/* Home Section */ +.title-group { + text-align: center; +} + +/* About Section */ +.about-container { + display: flex; +} + +.image-container { + border: 1px solid var(--secondary-color); + border-radius: 10px; + padding: 10px 20px; + margin-right: 25px; + width: auto; + background: var(--background); + box-shadow: var(--box-shadow); +} + +img { + height: 300px; + width: 300px; +} + +/* Projects Section */ +.buttons { + margin-top: 15px; + margin-bottom: 50px; +} + +button { + min-width: 100px; + height: 40px; + cursor: pointer; + border-radius: 10px; + margin-right: 10px; + border: 2px solid var(--primary-color); + font-size: 15px; + outline: none; +} + +button:disabled { + opacity: 0.4; + cursor: default; +} + +button:hover:not(.outline) { + filter: brightness(110%); +} + +.primary { + background: var(--primary-color); + color: var(--on-primary); +} + +.secondary { + border: 2px solid var(--secondary-color); +} + +.secondary, +.secondary:hover, +.outline.secondary:hover { + background: var(--secondary-color); + color: var(--on-primary); +} + +.outline { + background: var(--background); + color: var(--on-background); +} + +.outline:hover { + background: var(--primary-color); + color: var(--on-primary); +} + +.text-box { + width: 40%; + text-align: justify; + background: rgb(0 0 0 / 50%); + color: var(--on-primary); + border-radius: 10px; + padding: 30px; +} + +p { + margin: 0; + line-height: 25px; +} + +/* Contact Section */ +.fab { + font-size: 100px; + margin-right: 50px; + cursor: pointer; + color: var(--primary-color); +} + +.fab:hover { + color: var(--on-background); +} + +/* Dark Mode Toggle */ +.theme-switch-wrapper { + display: flex; + align-items: center; + z-index: 100; + position: fixed; + right: 25px; + top: 30px; +} + +.theme-switch-wrapper span { + margin-right: 10px; + font-size: 1rem; +} + +.toggle-text { + position: relative; + top: -4px; + right: 5px; + color: var(--on-background); +} + +.theme-switch { + display: inline-block; + height: 34px; + position: relative; + width: 60px; +} + +.theme-switch input { + display: none; +} + +.slider { + background: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: 0.4s; +} + +.slider::before { + background: #fff; + bottom: 4px; + content: ""; + height: 26px; + left: 4px; + position: absolute; + transition: 0.4s; + width: 26px; +} + +input:checked + .slider { + background: var(--primary-color); +} + +input:checked + .slider::before { + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round::before { + border-radius: 50%; +} + +.fas { + font-size: 30px; + margin-right: 5px; +} \ No newline at end of file diff --git a/voiceRSS.js b/voiceRSS.js new file mode 100644 index 00000000..6195deed --- /dev/null +++ b/voiceRSS.js @@ -0,0 +1,2 @@ +// VoiceRSS Javascript SDK +const VoiceRSS={speech(e){this._validate(e),this._request(e)},_validate(e){if(!e)throw"The settings are undefined";if(!e.key)throw"The API key is undefined";if(!e.src)throw"The text is undefined";if(!e.hl)throw"The language is undefined";if(e.c&&"auto"!=e.c.toLowerCase()){let a=!1;switch(e.c.toLowerCase()){case"mp3":a=(new Audio).canPlayType("audio/mpeg").replace("no","");break;case"wav":a=(new Audio).canPlayType("audio/wav").replace("no","");break;case"aac":a=(new Audio).canPlayType("audio/aac").replace("no","");break;case"ogg":a=(new Audio).canPlayType("audio/ogg").replace("no","");break;case"caf":a=(new Audio).canPlayType("audio/x-caf").replace("no","")}if(!a)throw`The browser does not support the audio codec ${e.c}`}},_request(e){const a=this._buildRequest(e),t=this._getXHR();t.onreadystatechange=function(){if(4==t.readyState&&200==t.status){if(0==t.responseText.indexOf("ERROR"))throw t.responseText;let e=t.responseText;audioElement.src=e,audioElement.onloadedmetadata=(()=>{audioElement.play()})}},t.open("POST","https://api.voicerss.org/",!0),t.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"),t.send(a)},_buildRequest(e){const a=e.c&&"auto"!=e.c.toLowerCase()?e.c:this._detectCodec();return`key=${e.key||""}&src=${e.src||""}&hl=${e.hl||""}&r=${e.r||""}&c=${a||""}&f=${e.f||""}&ssml=${e.ssml||""}&b64=true`},_detectCodec(){const e=new Audio;return e.canPlayType("audio/mpeg").replace("no","")?"mp3":e.canPlayType("audio/wav").replace("no","")?"wav":e.canPlayType("audio/aac").replace("no","")?"aac":e.canPlayType("audio/ogg").replace("no","")?"ogg":e.canPlayType("audio/x-caf").replace("no","")?"caf":""},_getXHR(){try{return new XMLHttpRequest}catch(e){}try{return new ActiveXObject("Msxml3.XMLHTTP")}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP.6.0")}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP.3.0")}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(e){}try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}throw"The browser does not support HTTP request"}}; \ No newline at end of file