fontawesome update + readme

readme.md

@@ -4,60 +4,46 @@ A loquendo bot made by wannabe developers
 <a href="https://imgur.com/562WiO7"><img src="https://i.imgur.com/562WiO7.png" title="source: imgur.com" /></a>
 
 ## About
-This bot is a electron app purely made of:
+This bot is a electron app made of:
 * HTML (Frontend)
 * CSS (Frontend)
 * Javascript (Frontend)
-* Python (Backend)
-* SQLite (Database)
+* SQLite (Backend / Database)
+
+## Functionalit
+* Multilingual
+* Sound notifications
+* Custom Theme, make your own theme (not everybody likes purple ;D )
+* Text to speech to read chat messages, you can use your installed TTS, Google TTS or Amazon Polly.
+* Speak to text to speak into the chat or speak as a TTS voice (WIP)
+* PNGTuber functionality, also usable in OBS as browsersource (WIP)
+* Custom chatbubble functionality, also usable in OBS as browsersource (WIP)
 
-All communication of the backend to frontend is made with JSON using [py-shell](https://www.npmjs.com/package/python-shell)  
-it is meant to be a simple bot, nothing overly complex and more importantly FREE!
 ## What you need before running the program
 ### Twitch:
+You need to obtain your own credentials to use this bot.
 * Client id: from [here](https://dev.twitch.tv/) place it in the settings.ini file under TWITCH > CLIENT_ID
 * Client secret: from [here](https://dev.twitch.tv/) place it in the settings.ini file under TWITCH > CLIENT_SECRET
 * OAuth token: from [here](https://twitchapps.com/tmi/) place it in the settings.ini file under TWITCH > OAUTH_TOKEN
 * Channel name: place it in the settings.ini file under TWITCH > CHANNEL_NAME
 * Username: place it in the settings.ini file under TWITCH > USERNAME
 
-## To run the program (as a user)
-* Run installer or portable mode
-* Enter either your channel info in 
+After getting your credentials you can set it in <img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/gears.svg" width="25" height="25"> > Show Advanced > <img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/brands/twitch.svg" width="25" height="25">
 
-## For developers (if you want to develop for it or expand its functionality)
+### Amazon Polly:
+* WIP
 
-* [Optional] Run as administrator
-* [Required] have [nodejs](https://nodejs.org/en/) installed
-### To run as a developer
-1. run command: npm install
-2. run command: pip install
-3.  npm start (to start the program)
-### Recommendations 
-* We use vscode with the following extensions:  
-    * SQLite  
-    * JavaScript Debugger  
-    * NPM  
-    * NPM Intellisense  
-    * HTML CSS Support  
-    * Todo Tree, i recommend [this guide](https://thomasventurini.com/articles/the-best-way-to-work-with-todos-in-vscode/)  
-* To build you need to globally install electron and electron-packager:
-    * npm i -g electron  
-    * npm i -g electron-packager  
-    * to actually build the program run: electron-packager  
+After getting your credentials you can set it in <img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/gears.svg" width="25" height="25"> > Show Advanced > <img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/brands/amazon.svg" width="25" height="25">
+
+### Google TTS:
+* WIP
+
+After getting your credentials you can set it in <img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/gears.svg" width="25" height="25"> > Show Advanced > <img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/brands/google.svg" width="25" height="25">
 
 ## Where to get voices
-### Available online voices that are in the bot
-* [amazon voices](https://docs.aws.amazon.com/polly/latest/dg/voicelist.html)
-* [google voices](https://github.com/IldarSham/node-google-tts-api/blob/master/supported-languages.txt)
 ### Windows
 * [Speech2Go](https://harposoftware.com/en/spanish-spain-/340-S2G-Jorge-Nuance-Voice.html).
 ### Linux
 * WIP
 ### Mac
-* WIP
-## Custom node_modules
-* Say.js: changes come from here [Marak/Say.js](https://github.com/Marak/say.js) this will make it possible to send encoding which serves for pronunciation of words better.
-
-## Encoding options for better pronunciations (depends on the TTS language)
-* [iconv-lite](https://github.com/ashtuchkin/iconv-lite/wiki/Supported-Encodings)
+* WIP

src/index.html

@@ -18,7 +18,10 @@
         <link rel="stylesheet" href="./css/tts-menu.css">
         <link rel="stylesheet" href="./css/volume-slider.css">
         <link rel="stylesheet" href="./css/sliders.css">
-        <link rel="stylesheet" href="./css/font-awesome.min.css">
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+            integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+            crossorigin="anonymous" referrerpolicy="no-referrer" />
         <link rel="stylesheet" href="./css/logger.css">
         <!--#endregion -->
 
@@ -42,19 +45,15 @@
                     </div>
                 </div>
                 <div id="window-controls">
-
                     <div class="button" id="min-button">
-                        <i class="fa fa-minus"></i>
+                        <i class="fa-solid fa-window-minimize"></i>
                     </div>
-
                     <div class="button" id="max-button">
-                        <i class="fa fa-square-o"></i>
+                        <i class="fa-solid fa-window-maximize"></i>
                     </div>
-
                     <div class="button" id="close-button">
-                        <i class="fa  fa-close"></i>
+                        <i class="fa-solid fa-xmark"></i>
                     </div>
-
                 </div>
             </div>
         </header>