diff --git a/.gitattributes b/.gitattributes index a6344aac8c09253b3b630fb776ae94478aa0275b..da01f9c0a6fb37a96fab59b43dc490a82fe80cbe 100644 --- a/.gitattributes +++ b/.gitattributes @@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text *.zip filter=lfs diff=lfs merge=lfs -text *.zst filter=lfs diff=lfs merge=lfs -text *tfevents* filter=lfs diff=lfs merge=lfs -text +assets/img/sanket_ui_preview.png filter=lfs diff=lfs merge=lfs -text diff --git a/app.js b/app.js new file mode 100644 index 0000000000000000000000000000000000000000..9333d5de4316e8d282c1b0e707f1372eccde8165 --- /dev/null +++ b/app.js @@ -0,0 +1,33 @@ +const navHomeBtn = document.querySelector("#nav-home"); +const navTranslteBtn = document.querySelector("#nav-translate"); +const navSettingsBtn = document.querySelector("#nav-settings"); + + +const translateCard = document.querySelector("#translate-card"); +const learnCard = document.querySelector("#learn-card"); +const contributeCard = document.querySelector("#contribute-card"); +const contactUsCard = document.querySelector("#contact-us-card"); + +//card nav +translateCard.addEventListener("click", function() { + window.location = './translate'; +}) +learnCard.addEventListener("click", function() { + window.location = './learn'; +}) +contributeCard.addEventListener("click", function() { + window.location = 'https://github.com/key2innovation'; +}) +contactUsCard.addEventListener("click", function() { + window.location = './contact-us'; +}) + +//bottom nav +navTranslteBtn.addEventListener("click", function() { + window.location = './translate' +}) +navSettingsBtn.addEventListener("click", function() { + navHomeBtn.classList.remove("active-nav-btn"); + navSettingsBtn.classList.add("active-nav-btn") + window.location = './settings' +}) diff --git a/assets/fonts/Aclonica-Regular.ttf b/assets/fonts/Aclonica-Regular.ttf new file mode 100644 index 0000000000000000000000000000000000000000..901a5bc0f1e3b9402ec7af09eccff3899ec056a0 Binary files /dev/null and b/assets/fonts/Aclonica-Regular.ttf differ diff --git a/assets/fonts/Aclonica/LICENSE.txt b/assets/fonts/Aclonica/LICENSE.txt new file mode 100644 index 0000000000000000000000000000000000000000..d645695673349e3947e8e5ae42332d0ac3164cd7 --- /dev/null +++ b/assets/fonts/Aclonica/LICENSE.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/assets/fonts/IndianSignLangage.ttf b/assets/fonts/IndianSignLangage.ttf new file mode 100644 index 0000000000000000000000000000000000000000..0a3e352375890ad7885f41d9a8b3af4f563da1dc Binary files /dev/null and b/assets/fonts/IndianSignLangage.ttf differ diff --git a/assets/fonts/Poppins-Medium.ttf b/assets/fonts/Poppins-Medium.ttf new file mode 100644 index 0000000000000000000000000000000000000000..6bcdcc27f22e001e46defdfd9e23f224ff65dd67 Binary files /dev/null and b/assets/fonts/Poppins-Medium.ttf differ diff --git a/assets/fonts/Poppins-Regular.ttf b/assets/fonts/Poppins-Regular.ttf new file mode 100644 index 0000000000000000000000000000000000000000..9f0c71b70a49664ced448c63edc9c4ff2bf8cf4a Binary files /dev/null and b/assets/fonts/Poppins-Regular.ttf differ diff --git a/assets/fonts/Poppins-SemiBold.ttf b/assets/fonts/Poppins-SemiBold.ttf new file mode 100644 index 0000000000000000000000000000000000000000..74c726e32781bc2c0a83170f6800c0ef4cb9ddcf Binary files /dev/null and b/assets/fonts/Poppins-SemiBold.ttf differ diff --git a/assets/fonts/Poppins/OFL.txt b/assets/fonts/Poppins/OFL.txt new file mode 100644 index 0000000000000000000000000000000000000000..76df3b565672e3248a5715339d092d4cb6c75019 --- /dev/null +++ b/assets/fonts/Poppins/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/assets/fonts/Poppins/Poppins-Black.ttf b/assets/fonts/Poppins/Poppins-Black.ttf new file mode 100644 index 0000000000000000000000000000000000000000..71c0f995ee64396f29a3d9ef283b5050f45d6e0f Binary files /dev/null and b/assets/fonts/Poppins/Poppins-Black.ttf differ diff --git a/assets/fonts/Poppins/Poppins-BlackItalic.ttf b/assets/fonts/Poppins/Poppins-BlackItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..7aeb58bd1b9436a814a50ee3539d38f7668908c8 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-BlackItalic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-Bold.ttf b/assets/fonts/Poppins/Poppins-Bold.ttf new file mode 100644 index 0000000000000000000000000000000000000000..00559eeb290fb8036f10633ff0640447d827b27c Binary files /dev/null and b/assets/fonts/Poppins/Poppins-Bold.ttf differ diff --git a/assets/fonts/Poppins/Poppins-BoldItalic.ttf b/assets/fonts/Poppins/Poppins-BoldItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..e61e8e88bdc98d7edba0ba2a372dfd7b4e5c4b3f Binary files /dev/null and b/assets/fonts/Poppins/Poppins-BoldItalic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-ExtraBold.ttf b/assets/fonts/Poppins/Poppins-ExtraBold.ttf new file mode 100644 index 0000000000000000000000000000000000000000..df7093608a7eb6173529ce9eeeb4d46e3a8290e5 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-ExtraBold.ttf differ diff --git a/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf b/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..14d2b375dc0c2c4aec35b3d9d4bd89d7291c52dd Binary files /dev/null and b/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-ExtraLight.ttf b/assets/fonts/Poppins/Poppins-ExtraLight.ttf new file mode 100644 index 0000000000000000000000000000000000000000..e76ec69a650f1323fe9af6dafc55628ca1afc7e1 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-ExtraLight.ttf differ diff --git a/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf b/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..89513d94693ae8100315edbb982d7d243f5469f6 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-Italic.ttf b/assets/fonts/Poppins/Poppins-Italic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..12b7b3c40b5c8dd7d90968d43bac7bc673a6c221 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-Italic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-Light.ttf b/assets/fonts/Poppins/Poppins-Light.ttf new file mode 100644 index 0000000000000000000000000000000000000000..bc36bcc2427a84e29e61ea7b634024072c04b206 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-Light.ttf differ diff --git a/assets/fonts/Poppins/Poppins-LightItalic.ttf b/assets/fonts/Poppins/Poppins-LightItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..9e70be6a9ef052bd26e248428cb4db214663afca Binary files /dev/null and b/assets/fonts/Poppins/Poppins-LightItalic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-Medium.ttf b/assets/fonts/Poppins/Poppins-Medium.ttf new file mode 100644 index 0000000000000000000000000000000000000000..6bcdcc27f22e001e46defdfd9e23f224ff65dd67 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-Medium.ttf differ diff --git a/assets/fonts/Poppins/Poppins-MediumItalic.ttf b/assets/fonts/Poppins/Poppins-MediumItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..be67410fd0a5aaf22e118ff0dd3be2dcd441f34c Binary files /dev/null and b/assets/fonts/Poppins/Poppins-MediumItalic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-Regular.ttf b/assets/fonts/Poppins/Poppins-Regular.ttf new file mode 100644 index 0000000000000000000000000000000000000000..9f0c71b70a49664ced448c63edc9c4ff2bf8cf4a Binary files /dev/null and b/assets/fonts/Poppins/Poppins-Regular.ttf differ diff --git a/assets/fonts/Poppins/Poppins-SemiBold.ttf b/assets/fonts/Poppins/Poppins-SemiBold.ttf new file mode 100644 index 0000000000000000000000000000000000000000..74c726e32781bc2c0a83170f6800c0ef4cb9ddcf Binary files /dev/null and b/assets/fonts/Poppins/Poppins-SemiBold.ttf differ diff --git a/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf b/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..3e6c942233c69f6b30cb8e8cdb4eea44b350586f Binary files /dev/null and b/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf differ diff --git a/assets/fonts/Poppins/Poppins-Thin.ttf b/assets/fonts/Poppins/Poppins-Thin.ttf new file mode 100644 index 0000000000000000000000000000000000000000..03e736613a750cdd8d4f54bca28844e2d13257cb Binary files /dev/null and b/assets/fonts/Poppins/Poppins-Thin.ttf differ diff --git a/assets/fonts/Poppins/Poppins-ThinItalic.ttf b/assets/fonts/Poppins/Poppins-ThinItalic.ttf new file mode 100644 index 0000000000000000000000000000000000000000..e26db5dd3dbab6fcdb06f7fd9ab9347ead808f02 Binary files /dev/null and b/assets/fonts/Poppins/Poppins-ThinItalic.ttf differ diff --git a/assets/images/back-btn.png b/assets/images/back-btn.png new file mode 100644 index 0000000000000000000000000000000000000000..7b57bd170dd4699ec70e91aee37e7506872b07eb Binary files /dev/null and b/assets/images/back-btn.png differ diff --git a/assets/images/bottom-sheet-btn.png b/assets/images/bottom-sheet-btn.png new file mode 100644 index 0000000000000000000000000000000000000000..7e3710834d30fc474d4ddd107e0a2f2e3145248f Binary files /dev/null and b/assets/images/bottom-sheet-btn.png differ diff --git a/assets/images/camera-icon.png b/assets/images/camera-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..73fbd580e610ebdf9ead813f9aca532bb796d89d Binary files /dev/null and b/assets/images/camera-icon.png differ diff --git a/assets/images/camera-switch-btn.png b/assets/images/camera-switch-btn.png new file mode 100644 index 0000000000000000000000000000000000000000..a5e31826e0ee3ced29d7de5b3ec4a28a095c6a53 Binary files /dev/null and b/assets/images/camera-switch-btn.png differ diff --git a/assets/images/contact-form.png b/assets/images/contact-form.png new file mode 100644 index 0000000000000000000000000000000000000000..ec35bb55207d4a892430bb5049c9139b18791331 Binary files /dev/null and b/assets/images/contact-form.png differ diff --git a/assets/images/contact-us-footer.png b/assets/images/contact-us-footer.png new file mode 100644 index 0000000000000000000000000000000000000000..464dfd7e5ab83534ade19739a89ed30324053962 Binary files /dev/null and b/assets/images/contact-us-footer.png differ diff --git a/assets/images/contact-us-illustration.png b/assets/images/contact-us-illustration.png new file mode 100644 index 0000000000000000000000000000000000000000..d548dc078bd77ac131cc1f4cef0c6367f7ad7425 Binary files /dev/null and b/assets/images/contact-us-illustration.png differ diff --git a/assets/images/contact-us-option-btn-img.png b/assets/images/contact-us-option-btn-img.png new file mode 100644 index 0000000000000000000000000000000000000000..093742f840b6c1198953b4c3ba543c6038d07ad1 Binary files /dev/null and b/assets/images/contact-us-option-btn-img.png differ diff --git a/assets/images/contribute-option-btn-img.png b/assets/images/contribute-option-btn-img.png new file mode 100644 index 0000000000000000000000000000000000000000..a6adc28f17dc1de4780adbe4f4d23d552b32ed1a Binary files /dev/null and b/assets/images/contribute-option-btn-img.png differ diff --git a/assets/images/demo-pfp.png b/assets/images/demo-pfp.png new file mode 100644 index 0000000000000000000000000000000000000000..b31e745eaf6ecc546285a959013c0784b7c84e9f Binary files /dev/null and b/assets/images/demo-pfp.png differ diff --git a/assets/images/icon-192x192.png b/assets/images/icon-192x192.png new file mode 100644 index 0000000000000000000000000000000000000000..982507e980cb1fceb6028723537ccc55eafc6c5e Binary files /dev/null and b/assets/images/icon-192x192.png differ diff --git a/assets/images/icon-256x256.png b/assets/images/icon-256x256.png new file mode 100644 index 0000000000000000000000000000000000000000..8c4130179c3996bced8f1d0b4c4eb4d439dd5e53 Binary files /dev/null and b/assets/images/icon-256x256.png differ diff --git a/assets/images/icon-384x384.png b/assets/images/icon-384x384.png new file mode 100644 index 0000000000000000000000000000000000000000..a5b1e68118fb95d4e1472dc697c40e228b03a4bc Binary files /dev/null and b/assets/images/icon-384x384.png differ diff --git a/assets/images/icon-512x512.png b/assets/images/icon-512x512.png new file mode 100644 index 0000000000000000000000000000000000000000..722eaec28c0091c49967b91b1fe17b05ba6be9df Binary files /dev/null and b/assets/images/icon-512x512.png differ diff --git a/assets/images/learn-header.png b/assets/images/learn-header.png new file mode 100644 index 0000000000000000000000000000000000000000..05388d1047d93b4b04947eccbd01e679dfe16439 Binary files /dev/null and b/assets/images/learn-header.png differ diff --git a/assets/images/learn-option-btn-img.png b/assets/images/learn-option-btn-img.png new file mode 100644 index 0000000000000000000000000000000000000000..75c87d6447d810a52730a60ee76c56d7956723a2 Binary files /dev/null and b/assets/images/learn-option-btn-img.png differ diff --git a/assets/images/photo-upload.png b/assets/images/photo-upload.png new file mode 100644 index 0000000000000000000000000000000000000000..1efd4f7bd66294c2fc4e83c331bd3f7c2c8bd974 Binary files /dev/null and b/assets/images/photo-upload.png differ diff --git a/assets/images/sanket-logo.png b/assets/images/sanket-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d03d8f7e0b4c7dfac368e6e6a4dc4ab26e1b9e53 Binary files /dev/null and b/assets/images/sanket-logo.png differ diff --git a/assets/images/send-icon.png b/assets/images/send-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..edcc4cb52519e34f37ada81501c492e12ce8001b Binary files /dev/null and b/assets/images/send-icon.png differ diff --git a/assets/images/settings-mockup.png b/assets/images/settings-mockup.png new file mode 100644 index 0000000000000000000000000000000000000000..432fd67590146748b9ec0b5148d67cfdc17beecd Binary files /dev/null and b/assets/images/settings-mockup.png differ diff --git a/assets/images/speaker.png b/assets/images/speaker.png new file mode 100644 index 0000000000000000000000000000000000000000..79934243697acb953e7ce3d577e001a2a0b74262 Binary files /dev/null and b/assets/images/speaker.png differ diff --git a/assets/images/transcript-heading.png b/assets/images/transcript-heading.png new file mode 100644 index 0000000000000000000000000000000000000000..c6dd4afc681b20efb1801436821973ec508bc9b1 Binary files /dev/null and b/assets/images/transcript-heading.png differ diff --git a/assets/images/transcript-settings.png b/assets/images/transcript-settings.png new file mode 100644 index 0000000000000000000000000000000000000000..cdf49cdd3b49f166c77156e5d64367320f448bfe Binary files /dev/null and b/assets/images/transcript-settings.png differ diff --git a/assets/images/translate-details.png b/assets/images/translate-details.png new file mode 100644 index 0000000000000000000000000000000000000000..5877c6b79abf272cb4111a2ca8b2ca47c3b11b83 Binary files /dev/null and b/assets/images/translate-details.png differ diff --git a/assets/images/translate-option-btn-img.png b/assets/images/translate-option-btn-img.png new file mode 100644 index 0000000000000000000000000000000000000000..162bb0b72ed96984594cf6c690e1402c4a6271ed Binary files /dev/null and b/assets/images/translate-option-btn-img.png differ diff --git a/assets/img/arrow-back.png b/assets/img/arrow-back.png new file mode 100644 index 0000000000000000000000000000000000000000..b3d1ec44f9260ab77161026321b041483b37cd4f Binary files /dev/null and b/assets/img/arrow-back.png differ diff --git a/assets/img/bottom-sheet.png b/assets/img/bottom-sheet.png new file mode 100644 index 0000000000000000000000000000000000000000..d6286921969e78e2d0357ce2209bc98d809dd057 Binary files /dev/null and b/assets/img/bottom-sheet.png differ diff --git a/assets/img/camera-icon.png b/assets/img/camera-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..b059e095d7f91156ebcc52734fb1415d9013fd76 Binary files /dev/null and b/assets/img/camera-icon.png differ diff --git a/assets/img/controls-bg.png b/assets/img/controls-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..06bd359752124743b70601a8c168a61f518c0e95 Binary files /dev/null and b/assets/img/controls-bg.png differ diff --git a/assets/img/fav.png b/assets/img/fav.png new file mode 100644 index 0000000000000000000000000000000000000000..dd0c11ff3fa508be41154ef2ee7e7559e7ec4139 Binary files /dev/null and b/assets/img/fav.png differ diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..02dae887b41f165f1095accddcd3a9a5a3664486 Binary files /dev/null and b/assets/img/favicon.png differ diff --git a/assets/img/google-translate-icon.png b/assets/img/google-translate-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..fc5d609a10dd711f5b40d86f321846af9aef1d0d Binary files /dev/null and b/assets/img/google-translate-icon.png differ diff --git a/assets/img/sanket_readme_banner.jpg b/assets/img/sanket_readme_banner.jpg new file mode 100644 index 0000000000000000000000000000000000000000..54fa45280d47c90c1478b586c400fffe5f936e59 Binary files /dev/null and b/assets/img/sanket_readme_banner.jpg differ diff --git a/assets/img/sanket_ui_preview.png b/assets/img/sanket_ui_preview.png new file mode 100644 index 0000000000000000000000000000000000000000..1555794a3597154b20684fc7708d5c1e590a7710 --- /dev/null +++ b/assets/img/sanket_ui_preview.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:efefc6cec49aba1908e244db30cc531fcd33a87a47d2714a436bdb890e0df628 +size 1042800 diff --git a/assets/img/social-preview.png b/assets/img/social-preview.png new file mode 100644 index 0000000000000000000000000000000000000000..1b18c125ae58746cd665c2dfa35d3d6c0a853ac0 Binary files /dev/null and b/assets/img/social-preview.png differ diff --git a/assets/img/speaker-icon.png b/assets/img/speaker-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..1db85751f4db3e16e1fcc71148d4a7527f0195f4 Binary files /dev/null and b/assets/img/speaker-icon.png differ diff --git a/assets/img/switch-cam.png b/assets/img/switch-cam.png new file mode 100644 index 0000000000000000000000000000000000000000..a144da2bea1cd5a13a2bc72146a34223969afb17 Binary files /dev/null and b/assets/img/switch-cam.png differ diff --git a/assets/img/transcript-expand-icon.png b/assets/img/transcript-expand-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4130c83b2d0337518b6471bd99abcbde2756bfba Binary files /dev/null and b/assets/img/transcript-expand-icon.png differ diff --git a/assets/img/transcript-heading.png b/assets/img/transcript-heading.png new file mode 100644 index 0000000000000000000000000000000000000000..e764c7eb263d02172f5544a24d77fa1b4fcaf5fe Binary files /dev/null and b/assets/img/transcript-heading.png differ diff --git a/assets/img/transcript-settings-icon.png b/assets/img/transcript-settings-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3b2f1adaf7972f99178b4f0e6f1f5d1a6deebde5 Binary files /dev/null and b/assets/img/transcript-settings-icon.png differ diff --git a/assets/img/upload-icon.png b/assets/img/upload-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..e7bc006967e2fbbf89225a617b8f5e39067272d7 Binary files /dev/null and b/assets/img/upload-icon.png differ diff --git a/assets/img/webcam_banner.png b/assets/img/webcam_banner.png new file mode 100644 index 0000000000000000000000000000000000000000..637b410808868449d57894537e6f5ddf72d7d9a6 Binary files /dev/null and b/assets/img/webcam_banner.png differ diff --git a/assets/js/translate.js b/assets/js/translate.js new file mode 100644 index 0000000000000000000000000000000000000000..320e42a38d627410b16ded6bcf4a0dbf01a34986 --- /dev/null +++ b/assets/js/translate.js @@ -0,0 +1,213 @@ +//meta(not so imp) functions by vkc! + +let gttsBtn = document.getElementById('gtts-btn'); +let cameraBtn = document.getElementById('camera-btn'); +let uploadBtn = document.querySelector('#upload-btn'); +let textArea = document.querySelector('#textarea'); +let line = document.createElement('p'); +line.className = "line" +line.id = "last-line" +line.innerHTML = `Ready to roll !` +textArea.appendChild(line) +line.scrollIntoView({ + behavior: "smooth", + block: "end", + inline: "nearest" +}); + +//open github repo +document.querySelector('#webcam-banner').addEventListener('click', function () { + window.open('https://github.com/vivekkushalch/Indian-Sign-Language-Recognition-System/', '_blank'); +}) + + + +// test function +async function addTestLines(totalLines) { + for (let i = 1; i < totalLines + 1; i++) { + let line = document.createElement('p'); + line.className = "line" + line.innerHTML = `Hello` + textArea.appendChild(line) + line.scrollIntoView({ + behavior: "smooth", + block: "end", + inline: "nearest" + }); + } +} +// addTestLines(10); + +uploadBtn.addEventListener('click', function () { + uploadBtn.style.background = "#D4EC7E"; + let text = 'Comming Soon!' + addNewTranslateLine(text) + tts(text) + uploadBtn.style.background = "#EAF1C5" +}) + + + + + +// adds new line in transcript box +async function addNewTranslateLine(text) { + let lastLine = textArea.lastElementChild; + try { + document.querySelector('#last-line').id = ''; + } catch (err) { + console.log(err) + } + + let newLine = document.createElement('p'); + newLine.innerHTML = text; + newLine.className = "line"; + newLine.id = 'last-line'; + textArea.appendChild(newLine); + newLine.scrollIntoView({ + behavior: "smooth", + block: "end", + inline: "nearest" + }) +} + + +// start sign prediction +cameraBtn.addEventListener("click", function () { + if (cameraBtn.style.backgroundColor === 'rgb(212, 236, 126)') { + cameraBtn.style.background = "#EAF1C5"; //deactivate btn + alert('stopping... Press OK') + location.reload() + + } else { + cameraBtn.style.background = "#D4EC7E"; + document.getElementById("webcam-banner").style.display = "none"; // remove banner + document.getElementById("canvas").style.display = "block"; // display web cam + alert('starting.... Press OK') + init(); + } +}); + +// text to speach btn colour change +gttsBtn.addEventListener("click", function () { + if (gttsBtn.style.backgroundColor === 'rgb(212, 236, 126)') { + gttsBtn.style.background = "#EAF1C5"; //dactivate btn + // alert('stopping... Press OK') + // location.reload() + + } else { + gttsBtn.style.background = "#D4EC7E"; + // alert('starting.... Press OK') + // init(); + } +}); + + +//text to speech +async function tts(text) { + if ('speechSynthesis' in window) { + // Speech Synthesis is supported 🎉 + console.log(''); + } else { + alert('Text to speech not available 😞'); + location.reload(); + } + + let msg = new SpeechSynthesisUtterance(text); + window.speechSynthesis.speak(msg); + +} + +// delay function +const delay = ms => new Promise(res => setTimeout(res, ms)); + +///////////////////////////////////// +// tensorflow.js magic ///////////// +//////////////////////////////////// +let model, webcam, ctx, labelContainer, maxPredictions; +async function init() { + const modelURL = "https://vivekkushalch.github.io/Indian-Sign-Language-Recognition-System/model.json"; + const metadataURL = "https://vivekkushalch.github.io/Indian-Sign-Language-Recognition-System/metadata.json"; + + // load the model and metadata + // Refer to tmImage.loadFromFiles() in the API to support files from a file picker + // Note: the pose library adds a tmPose object to your window (window.tmPose) + model = await tmPose.load(modelURL, metadataURL); + maxPredictions = model.getTotalClasses(); + + // Convenience function to setup a webcam + const size = 200; + const flip = true; // whether to flip the webcam + webcam = new tmPose.Webcam(size, size, flip); // width, height, flip + await webcam.setup(); // request access to the webcam + await webcam.play(); + window.requestAnimationFrame(loop); + + // append/get elements to the DOM + const canvas = document.getElementById("canvas"); + canvas.width = size; + canvas.height = size; + ctx = canvas.getContext("2d"); + // labelContainer = document.getElementById("textarea"); + // for (let i = 0; i < maxPredictions; i++) { // and class labels + // let para = document.createElement("p"); + // para.className = "line"; + // labelContainer.appendChild(para); + // } + +} + +async function loop(timestamp) { + webcam.update(); // update the webcam frame + await predict(); + window.requestAnimationFrame(loop); +} + +async function predict() { + // Prediction #1: run input through posenet + // estimatePose can take in an image, video or canvas html element + const { + pose, + posenetOutput + } = await model.estimatePose(webcam.canvas); + // Prediction 2: run input through teachable machine classification model + const prediction = await model.predict(posenetOutput); + + for (let i = 0; i < maxPredictions; i++) { + // if (prediction[i].probability.toFixed(2) == 1.00) { + // console.log(prediction[i].probability.toFixed(2), prediction[i].className) + // } + // const classPrediction = prediction[i].className + ": " + prediction[i].probability.toFixed(2); + if (prediction[i].probability.toFixed(2) == 1.00) { + if (document.querySelector('#last-line').innerHTML != prediction[i].className) { + await addNewTranslateLine(prediction[i].className); + if (gttsBtn.style.backgroundColor === 'rgb(212, 236, 126)') { //btn active + await tts(prediction[i].className) + // delay(0) + } else { + console.log('') + } + } + + // labelContainer.childNodes[i].innerHTML = prediction[i].className; + + + } + + } + + // finally draw the poses + drawPose(pose); +} + +function drawPose(pose) { + if (webcam.canvas) { + ctx.drawImage(webcam.canvas, 0, 0); + // draw the keypoints and skeleton + if (pose) { + const minPartConfidence = 0.5; //0.5 + tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx); + tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx); + } + } +} diff --git a/assets/styles/translate.css b/assets/styles/translate.css new file mode 100644 index 0000000000000000000000000000000000000000..88ae3dd8512a01073ca8b6181d5c9e047556e868 --- /dev/null +++ b/assets/styles/translate.css @@ -0,0 +1,255 @@ +/* + +1. globals +2. body +3. navbar +4. canvas(webcam preview) +5. transcript box +6. quick controlls (gtts, cam, upload) +7. bottom sheet (text to sign) + +*/ + +@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500&family=Poppins:wght@600&display=swap'); +* { + margin: 0; + padding: 0; + font-family: "Poppins"; +} + +body { + display: flex; + justify-content: center; + min-height: 100vh; + min-width: 100vw; + background-color: #EAF1C5; + overflow: auto; +} + +.cointainer { + display: block; + position: relative; + min-height: 100vh; + width: 100vw; + background-color: #EAF1C5; + overflow: auto; +} + + +/***************************/ + + +/* navbar */ + + +/**************************/ + +.navbar { + position: absolute; + width: 100%; + display: grid; + grid-template-columns: auto auto; +} + +#back-btn { + cursor: pointer; + padding-left: 15px; + padding-top: 15px; +} + +#cam-switch-btn { + cursor: pointer; + margin-left: 70%; + padding-top: 10px; +} + + +/***************************/ + + +/* canvas(webcam-preview) */ + + +/**************************/ + +#webcam-banner { + display: block; + width: 100%; + height: 25vh; +} + +.webcam-view { + display: none; + width: 100%; + height: 25vh; +} + + +/***************************/ + + +/* transcript */ + + +/**************************/ + +.transcript-wrapper { + display: flex; + flex-flow: column; + align-items: flex-start; + margin: auto; + margin-top: 20px; + height: 17rem; + width: 90%; + background: #EAF1C5; + border: 2px solid rgba(107, 126, 36, 0.5); + border-radius: 18px; +} + +.transcript-tittle-bar-wrapper { + background-color: #D4EC7E; + border-radius: 18px 18px 0px 0px; + width: 100%; + height: 3rem; + display: grid; + grid-template-columns: auto auto auto; + grid-gap: 50px; +} + +#gtranslate-btn { + cursor: pointer; + width: 20px; + padding-top: 15px; + padding-left: 15px; +} + +#transcript-heading { + width: 131px; + padding-top: 9px; +} + +#expand-transcript-btn { + cursor: pointer; + width: 23px; + padding-top: 13px; +} + +#textarea { + display: block; + width: 100%; + height: 75%; + overflow: auto; +} + +.line { + color: rgba(107, 126, 36, 0.6); + font-size: 28px; + padding-top: 7px; + padding-left: 15px; +} + +#last-line { + color: #386B21; +} + +#transcript-settings-btn { + width: 15px; + margin-left: auto; + padding-right: 15px; +} + + +/***************************/ + + +/* quick controlls */ + + +/**************************/ + +.quick-controls { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + margin: auto; + margin-top: 20px; + margin-bottom: 0; + width: 70%; + background: #EAF1C5; + border: 1px solid rgba(107, 126, 36, 0.5); + box-shadow: 0px 4px 4px rgba(107, 126, 36, 0.25); + border-radius: 45px; + padding: 8px 10px 8px 10px; +} + +.quick-btn { + cursor: pointer; + width: 22px; + margin: auto; +} + +#gtts-btn { + cursor: pointer; + margin-left: 8px; + padding-left: 5px; + padding: 8px 20px 8px 20px; + border-radius: 45px; +} + +#camera-btn { + cursor: pointer; + margin: 0px 15px 0px 15px; + padding: 8px 20px 8px 20px; + border-radius: 45px; +} + +#upload-btn { + cursor: pointer; + margin-right: 8px; + padding-right: 5px; + padding: 8px 20px 8px 20px; + border-radius: 45px; +} + + +/***************************/ + + +/* bottom sheet */ + + +/**************************/ + +#bottom-sheet { + display: block; + position: absolute; + width: 100%; + /* height: 50%; */ + bottom: 0; +} + + +/*************************/ + + +/* meida quiries */ + + +/************************/ + + +/* desktop */ + +@media only screen and (min-width: 1080px) { + .cointainer { + max-width: 430px; + /* border-left: 2px solid rgba(107, 126, 36, 0.5); */ + /* border-right: 2px solid rgba(107, 126, 36, 0.5); */ + -webkit-box-shadow: 0px 0px 100px 20px rgba(107, 126, 36, 0.3); + -moz-box-shadow: 0px 0px 100px 20px rgba(107, 126, 36, 0.3); + box-shadow: 0px 0px 100px 20px rgba(107, 126, 36, 0.3); + } + #bottom-sheet { + height: auto; + } +} \ No newline at end of file diff --git a/contact-us/index.html b/contact-us/index.html new file mode 100644 index 0000000000000000000000000000000000000000..263295b17b93be50cb7cd63fd6ded4e6b6ba1014 --- /dev/null +++ b/contact-us/index.html @@ -0,0 +1,74 @@ + + + + + + + + + + Sanket - Contact Us + + + + + + + + + + + + + + loader + + arrow_back + + illustration + + + contact-form + + + footer + + + + + \ No newline at end of file diff --git a/contact-us/style.css b/contact-us/style.css new file mode 100644 index 0000000000000000000000000000000000000000..44ea56dbcfdaa7cf7e0eba5440f5073d13ddf6fa --- /dev/null +++ b/contact-us/style.css @@ -0,0 +1,98 @@ +:root { + --ultraLightGreen: #D3F1E9; + --lightGreen: #BCF3E5; + --brightGreen: #62E6BF; + --mediumGreen: #0DA778; + --deepGreen: #0A7B79; + --navyBlue: #193053; +} + +* { + margin: 0; + padding: 0; + font-family: "Poppins"; + scroll-behavior: smooth; +} + +a { + text-decoration: none; + border: none; + /* cursor: pointer; */ + outline: none; + display: inline-block; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + text-decoration: none; + color: initial; + color: var(--navyBlue); +} + +a:active { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +img { + cursor: pointer; +} + +body { + display: flex; + flex-direction: row; + justify-content: center; + background-color: var(--ultraLightGreen); + width: 100vw; + /* height: 100vh; */ +} + +#back-arrow { + position: absolute; + top: 10px; + left: 10px; + font-weight: 600; + font-size: 2rem; +} + +#contact-us-illustration { + /* position: absolute; */ + width: 100%; + height: 17rem; + margin: auto; +} + +#contact-form { + position: absolute; + top: 12.8rem; + left: 12%; + width: 75%; + /* width: auto; */ + height: 55%; + margin: auto; +} + +#footer { + position: absolute; + bottom: 0; + left: 33.5%; + margin: auto; + width: 30%; + height: auto; +} + +@media only screen and (min-width: 1080px) { + #contact-us-illustration { + max-width: 40%; + /* width: auto; */ + } + #contact-form { + width: auto; + left: 40.5%; + margin: auto; + } + #footer { + left: 44.5%; + width: auto; + height: auto; + margin-left: auto; + } +} \ No newline at end of file diff --git a/index.html b/index.html index b0c4b3666032a737f3903db53e6a8a9272483e28..6a3f78cf7d718985472b4ac345152d655b2d94f8 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,138 @@ - - - - - - My static Space - - - -
-

Welcome to your static Space!

-

You can modify this app directly by editing index.html in the Files and versions tab.

-

- Also don't forget to check the - Spaces documentation. -

-
- + + + + + + + + + + + + + Sanket - Home + + + + + + + + + + + + + + + + + + + + loader + + + +
+

SANKET

+ +

The Voice Of The Unheard

+
+ +
+
+ + +
+
+ + +
+
+ +
+ + + +
+ + + diff --git a/learn/alphabets/index.html b/learn/alphabets/index.html new file mode 100644 index 0000000000000000000000000000000000000000..bc111efaa29a84103ca5d53ca7eb9a4912924bc5 --- /dev/null +++ b/learn/alphabets/index.html @@ -0,0 +1,149 @@ + + + + + + + + + + Sanket - Learn - Alphabets + + + + + + + + + + loader + back + +

Alphabets

+ + + + + + + + + \ No newline at end of file diff --git a/learn/animals/index.html b/learn/animals/index.html new file mode 100644 index 0000000000000000000000000000000000000000..c9032b2bb794b7a1ab8d540aa0d02823cef6868a --- /dev/null +++ b/learn/animals/index.html @@ -0,0 +1,131 @@ + + + + + + + + + + Sanket - Learn - Animals + + + + + + + + loader + back +

Animals

+ + + + + + + \ No newline at end of file diff --git a/learn/app.js b/learn/app.js new file mode 100644 index 0000000000000000000000000000000000000000..0155c60275a45bd3e08ab77cb4b8b60cda5d6a2f --- /dev/null +++ b/learn/app.js @@ -0,0 +1,2 @@ +const boxes = document.querySelectorAll("content-wrapper"); +console.log(boxes.children); // NodeList \ No newline at end of file diff --git a/learn/colours/index.html b/learn/colours/index.html new file mode 100644 index 0000000000000000000000000000000000000000..d35977b607d736ad400a0d29dc7f128aa1fc4639 --- /dev/null +++ b/learn/colours/index.html @@ -0,0 +1,132 @@ + + + + + + + + + + Sanket - Learn - Colours + + + + + + + + loader + back +

Colours

+ + + + + + + \ No newline at end of file diff --git a/learn/days/index.html b/learn/days/index.html new file mode 100644 index 0000000000000000000000000000000000000000..1308821f5147555ff57c80076e0641409d068ff2 --- /dev/null +++ b/learn/days/index.html @@ -0,0 +1,131 @@ + + + + + + + + + + Sanket - Learn - Days + + + + + + + + loader + back +

Days

+ + + + + + + \ No newline at end of file diff --git a/learn/emotions/index.html b/learn/emotions/index.html new file mode 100644 index 0000000000000000000000000000000000000000..93d14f74796a24aca0fdddf13d25f0727491e56b --- /dev/null +++ b/learn/emotions/index.html @@ -0,0 +1,131 @@ + + + + + + + + + + Sanket - Learn - Emotions + + + + + + + + loader + back +

Emotions

+ + + + + + + \ No newline at end of file diff --git a/learn/food/index.html b/learn/food/index.html new file mode 100644 index 0000000000000000000000000000000000000000..fc1bb34a882dbe532011fe98f54e1083f42ab245 --- /dev/null +++ b/learn/food/index.html @@ -0,0 +1,131 @@ + + + + + + + + + + Sanket - Learn - Food + + + + + + + + loader + back +

Food

+ + + + + + + \ No newline at end of file diff --git a/learn/index.html b/learn/index.html new file mode 100644 index 0000000000000000000000000000000000000000..e292d9812e880e67a809c3bcf55c6102bbdede56 --- /dev/null +++ b/learn/index.html @@ -0,0 +1,99 @@ + + + + + + + + + + + Sanket - Learn - Sign Language + + + + + + + + + + + + + + loader + arrow_back + +
+ + sort_by_alpha + Alphabets + + + pin + Numbers + + + palette + Colours + + + sound_detection_dog_barking + Animals + + + calendar_month + Months + + + today + Days + + + lunch_dining + Food + + + sentiment_very_satisfied + Emotions + +
+ + + \ No newline at end of file diff --git a/learn/months/index.html b/learn/months/index.html new file mode 100644 index 0000000000000000000000000000000000000000..01b6b26791b8fb2757a905ee8a439d42144999b5 --- /dev/null +++ b/learn/months/index.html @@ -0,0 +1,132 @@ + + + + + + + + + + Sanket - Learn - Months + + + + + + + + loader + back +

Months

+ + + + + + + \ No newline at end of file diff --git a/learn/numbers/index.html b/learn/numbers/index.html new file mode 100644 index 0000000000000000000000000000000000000000..adea573c3ebdcfbab68afca0e75c3c7c64bd1991 --- /dev/null +++ b/learn/numbers/index.html @@ -0,0 +1,133 @@ + + + + + + + + + + Sanket - Learn - Numbers + + + + + + + + loader + back +

Numbers

+ + + + + + + \ No newline at end of file diff --git a/learn/style.css b/learn/style.css new file mode 100644 index 0000000000000000000000000000000000000000..8836e83f824bb9811e85472a74d0e793a8ee7509 --- /dev/null +++ b/learn/style.css @@ -0,0 +1,212 @@ +:root { + --ultraLightGreen: #D3F1E9; + --lightGreen: #BCF3E5; + --brightGreen: #62E6BF; + --mediumGreen: #0DA778; + --deepGreen: #0A7B79; + --navyBlue: #193053; +} + +@font-face { + font-family: "Poppins"; + src: url("/assets/fonts/Poppins-Regular.ttf"); +} + +* { + margin: 0; + padding: 0; + font-family: "Poppins"; + scroll-behavior: smooth; +} + +a { + text-decoration: none; + border: none; + /* cursor: pointer; */ + outline: none; + display: inline-block; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + text-decoration: none; + color: initial; + color: var(--navyBlue); +} + +a:active { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + display: block; + background-color: var(--ultraLightGreen); + width: 100vw; + height: 100vh; +} + +#back-arrow { + position: absolute; + top: 10px; + left: 10px; + font-weight: 600; + font-size: 2rem; +} + +#learn-header { + display: block; + margin-left: auto; + margin-right: auto; + width: 40%; + margin-top: 2.5rem; +} + +.content-wrapper { + margin-left: 0.5rem; + margin-right: 0.5rem; + margin-top: 2rem; + display: grid; + grid-template-columns: auto auto; + grid-auto-rows: minmax(100px, auto); + justify-content: center + /* width: fit-content; + height: fit-content; + display: grid; + grid-auto-flow: column; */ + /* grid-template-rows: 1fr 1fr; */ + /* grid-auto-rows: auto; + gap: 1rem; + justify-content: center; + align-items: center; */ +} + +.content-wrapper .item { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 9rem; + height: 10rem; + /* background-color: #A0D6FF; */ + border: 2px solid #4CA7ED; + margin: 1rem; + text-decoration: none; + text-align: center; + vertical-align: middle; + /* line-height: 1rem; */ + /* font-family: "Poppins"; */ + /* font-size: 1.3rem; */ + /* font-weight: 400; */ + /* background-color: #A0D6FF; + -webkit-box-shadow: 0px 10px 0px 0px rgba(76, 167, 237, 1); + -moz-box-shadow: 0px 10px 0px 0px rgba(76, 167, 237, 1); + box-shadow: 0px 5px 0px 0px rgba(76, 167, 237, 1); */ + color: var(--navyBlue); + border-radius: 18px; + transition: background-color 0.25s ease; +} + +.content-wrapper .item .icon { + font-size: 4rem; + font-weight: 600; +} + +.content-wrapper .item .text { + text-align: center; + /* font-family: "Poppins"; */ + font-size: 1rem; + font-weight: 400; +} + +.content-wrapper .item:active { + user-select: none !important; + touch-action: manipulation !important; + /* height: 11rem; */ + outline: none !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none !important; + transform: translateY(2px); +} + +#learn-alphabets-btn { + background-color: #A0D6FF; + -webkit-box-shadow: 0px 10px 0px 0px rgba(76, 167, 237, 1); + -moz-box-shadow: 0px 10px 0px 0px rgba(76, 167, 237, 1); + box-shadow: 0px 5px 0px 0px rgba(76, 167, 237, 1); +} + +#learn-numbers-btn { + background-color: #F3C0FE; + border-color: #CF7FE0; + /* -webkit-box-shadow: 0px 10px 0px 0px #CF7FE0; + -moz-box-shadow: 0px 10px 0px 0px #CF7FE0; */ + box-shadow: 0px 5px 0px 0px #CF7FE0; +} + +#learn-colours-btn { + background-color: #F4A7A8; + border-color: #EB8183; + -webkit-box-shadow: 0px 10px 0px 0px #EB8183; + -moz-box-shadow: 0px 10px 0px 0px #EB8183; + box-shadow: 0px 5px 0px 0px #EB8183; +} + +#learn-animals-btn { + background-color: #D4C5FF; + border-color: #A083F4; + -webkit-box-shadow: 0px 10px 0px 0px #A083F4; + -moz-box-shadow: 0px 10px 0px 0px #A083F4; + box-shadow: 0px 5px 0px 0px #A083F4; +} + +#learn-months-btn { + background-color: #FFE78F; + border-color: #DDBD47; + -webkit-box-shadow: 0px 10px 0px 0px #DDBD47; + -moz-box-shadow: 0px 10px 0px 0px #DDBD47; + box-shadow: 0px 5px 0px 0px #DDBD47; +} + +#learn-days-btn { + background-color: #EFEFEF; + border-color: #7D8088; + -webkit-box-shadow: 0px 10px 0px 0px #7D8088; + -moz-box-shadow: 0px 10px 0px 0px #7D8088; + box-shadow: 0px 5px 0px 0px #7D8088; +} + +#learn-food-btn { + background-color: #85FEDA; + border-color: #47C9A2; + -webkit-box-shadow: 0px 10px 0px 0px #47C9A2; + -moz-box-shadow: 0px 10px 0px 0px #47C9A2; + box-shadow: 0px 5px 0px 0px #47C9A2; +} + +#learn-emotions-btn { + background-color: #FFDEFA; + border-color: #F27FA5; + -webkit-box-shadow: 0px 10px 0px 0px #F27FA5; + -moz-box-shadow: 0px 10px 0px 0px #F27FA5; + box-shadow: 0px 5px 0px 0px #F27FA5; +} + +@media only screen and (min-width: 1080px) { + #learn-header { + width: 10rem; + } + .content-wrapper { + margin-left: auto; + margin-right: auto; + max-width: fit-content; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(100px, auto); + justify-items: center + } + .content-wrapper .item { + width: 8rem; + height: 8rem; + } + a:hover { + background-color: red; + } +} \ No newline at end of file diff --git a/manifest.webmanifest b/manifest.webmanifest new file mode 100644 index 0000000000000000000000000000000000000000..7924c8743dffd6738cb3e856613b362978530c3c --- /dev/null +++ b/manifest.webmanifest @@ -0,0 +1,31 @@ +{ + "theme_color": "#0A7B79", + "background_color": "#BCF3E5", + "display": "standalone", + "scope": "/", + "start_url": "/Indian-Sign-Language-Recognition-System/", + "name": "SANKET", + "short_name": "SANKET", + "description": "Sign Language Translator", + "icons": [{ + "src": "/assets/images/icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/assets/images/icon-192x192.png", + "sizes": "256x256", + "type": "image/png" + }, + { + "src": "/assets/images/icon-192x192.png", + "sizes": "384x384", + "type": "image/png" + }, + { + "src": "/assets/images/icon-192x192.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} \ No newline at end of file diff --git a/settings/app.js b/settings/app.js new file mode 100644 index 0000000000000000000000000000000000000000..7e55219b37711036414ab92057eba9d273ee900a --- /dev/null +++ b/settings/app.js @@ -0,0 +1,12 @@ +const navHomeBtn = document.querySelector("#nav-home"); +const navTranslteBtn = document.querySelector("#nav-translate"); +const navSettingsBtn = document.querySelector("#nav-settings"); + + +//bottom nav +navHomeBtn.addEventListener("click", function() { + window.location = '/' +}) +navTranslteBtn.addEventListener("click", function() { + window.location = '/translate' +}) \ No newline at end of file diff --git a/settings/index.html b/settings/index.html new file mode 100644 index 0000000000000000000000000000000000000000..46e17f27385a03c0f113b3f645ddc8d0d8ef4d03 --- /dev/null +++ b/settings/index.html @@ -0,0 +1,81 @@ + + + + + + + + Sanket - Settings + + + Sanket - Home + + + + + + + + + + + + + + loader + + mockup + +
+ + + +
+ + + + \ No newline at end of file diff --git a/settings/style.css b/settings/style.css new file mode 100644 index 0000000000000000000000000000000000000000..c6e2eb653e15be79059f4e1fdd5cf052e02d28de --- /dev/null +++ b/settings/style.css @@ -0,0 +1,95 @@ +:root { + --ultraLightGreen: #D3F1E9; + --lightGreen: #BCF3E5; + --brightGreen: #62E6BF; + --mediumGreen: #0DA778; + --deepGreen: #0A7B79; + --navyBlue: #193053; +} + +@font-face { + font-family: "Poppins"; + src: url("/assets/fonts/Poppins-Regular.ttf"); +} + +@font-face { + font-family: "Aclonica"; + src: url("/assets/fonts/Aclonica-Regular.ttf"); +} + +* { + font-family: 'Poppins', sans-serif; + padding: 0; + margin: 0; + scroll-behavior: smooth; +} + +body { + display: flex; + text-align: center; + flex-direction: column; + background-color: var(--ultraLightGreen) !important; + min-height: 100vh; + overflow: hidden; +} + +#mockup { + display: block; + /* max-width: 25%; */ + /* position: absolute; */ + /* width: 50%; */ + /* height: 50%; */ +} + +.active-nav-btn span { + background-color: var(--brightGreen); +} + +.bottom-nav-bar { + position: fixed; + bottom: 0; + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + margin: auto; + margin-top: 20px; + margin-bottom: 0; + width: 100%; + background: var(--lightGreen); + border-top: 3px solid rgba(1, 157, 146, 0.3); + padding-top: 7px; +} + +.nav-btn { + display: inline-block; + left: 0; + border: none; + text-align: center; + color: var(--navyBlue); + background-color: var(--lightGreen); +} + +.nav-btn span { + cursor: pointer; + border-radius: 18px; + padding: 2px 15px 2px 15px; +} + +.nav-btn p { + font-size: 0.7rem; + font-weight: 500; +} + +.navbar #nav-home {} + +.active-nav-btn span { + background-color: var(--brightGreen); +} + +@media only screen and (min-width: 1080px) { + #mockup { + max-width: 25%; + margin-left: auto; + margin-right: auto; + } +} \ No newline at end of file diff --git a/style.css b/style.css index 114adf441e9032febb46bc056b2a8bb651075f0d..c5116e511f6b6a4bece243be521294ad20a59bed 100644 --- a/style.css +++ b/style.css @@ -1,28 +1,305 @@ +/* +1. :root variables/values +2. font-face +3. body +4. top navbar cum header +5. sanket heading +6. home option cards +7. bottom navbar +8. media queries (Desktop) +*/ + + +/***************************/ + + +/* root color variables+values */ + + +/**************************/ + +:root { + --ultraLightGreen: #D3F1E9; + --lightGreen: #BCF3E5; + --brightGreen: #62E6BF; + --mediumGreen: #0DA778; + --deepGreen: #0A7B79; + --navyBlue: #193053; +} + + +/***************************/ + + +/* font face */ + + +/**************************/ + +@font-face { + font-family: "Poppins"; + src: url("./assets/fonts/Poppins-Regular.ttf"); +} + +@font-face { + font-family: "Aclonica"; + src: url("./assets/fonts/Aclonica-Regular.ttf"); +} + + +/***************************/ + + +/* global styles */ + + +/**************************/ + +* { + font-family: 'Poppins', sans-serif; + padding: 0; + margin: 0; + scroll-behavior: smooth; +} + body { - padding: 2rem; - font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif; + background-color: var(--ultraLightGreen) !important; + min-height: 100vh; +} + + +/***************************/ + + +/* top navbar cum header */ + + +/**************************/ + +.nav-cointainer { + margin-top: 20px; + display: flex; + flex-wrap: nowrap; + align-content: space-between; + justify-content: space-around; + align-items: flex-start; +} + +.nav-left-content-wrapper { + margin-right: 3rem; + text-align: left; } -h1 { - font-size: 16px; - margin-top: 0; +.nav-left-content-wrapper h2 { + text-align: left; + font-family: 'Poppins', sans-serif; + font-weight: medium; + font-size: 1.5rem; + color: var(--deepGreen); } -p { - color: rgb(107, 114, 128); - font-size: 15px; - margin-bottom: 10px; - margin-top: 5px; +.nav-left-content-wrapper h4 { + font-family: 'Poppins', sans-serif; + font-weight: 500; + font-size: 1rem; + color: var(--navyBlue); } -.card { - max-width: 620px; - margin: 0 auto; - padding: 16px; - border: 1px solid lightgray; - border-radius: 16px; + +/* #user-name-underline { + border-bottom: 0.2rem solid var(--deepGreen); + border-radius: 1rem; + width: 2.5rem; +} */ + +.nav-right-content-wrapper { + position: relative; +} + +#user-pfp { + display: inline-block; + position: relative; + margin-left: 3rem; + max-width: 2.5rem; + border: var(--mediumGreen) solid 3px; + border-radius: 50%; + cursor: pointer; +} + +.notification-badge { + position: absolute; + width: 10px; + height: 10px; + top: -1px; + right: 2px; + background: red; + color: white; + border-radius: 50%; + border: 1px solid var(--lightGreen); } -.card p:last-child { - margin-bottom: 0; + +/***************************/ + + +/* sanket heading */ + + +/**************************/ + +.sanket-heading-cointainer { + margin-top: 2.3rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.sanket-heading-cointainer h1 { + font-family: 'Aclonica', sans-serif; + font-size: 2.5rem; + font-weight: 400; + color: var(--deepGreen); +} + + +/* .sanket-heading-cointainer span { + margin-top: -0.20rem; + border-bottom: 0.2rem solid var(--deepGreen); + border-radius: 1rem; + width: 5rem; +} */ + +.sanket-heading-cointainer p { + margin-top: 3px; + font-family: 'Poppins', sans-serif; + font-size: 0.6rem; + font-weight: 600; + color: var(--deepGreen); +} + + +/***************************/ + + +/* home option cards */ + + +/**************************/ + +.home-options-wrapper { + /* margin-left: auto; */ + /* margin-right: auto; */ + margin: auto; + margin-top: 2rem; + /* width: fit-content; */ + /* height: fit-content; */ + width: 100%; + min-height: 80%; + display: grid; + grid-auto-flow: column; + grid-template-rows: 1fr 1fr; + gap: 1rem; + justify-content: center; + align-items: center; +} + +.option-card { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.option-card img { + width: 9rem; + height: 11rem; +} + +.option-card { + display: inline-block; + border: none; + background-color: var(--mediumGreen); + border-radius: 18px; + transition: background-color 0.25s ease; +} + +.option-card:active { + height: 11rem; + box-shadow: none; + transform: translateY(2px); +} + +#option-card-3 { + border: none; + background-color: none; +} + + +/***************************/ + + +/* bottom navbar */ + + +/**************************/ + +.bottom-nav-bar { + position: fixed; + bottom: 0; + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + margin: auto; + margin-top: 20px; + margin-bottom: 0; + width: 100%; + background: var(--lightGreen); + border-top: 3px solid rgba(1, 157, 146, 0.3); + padding-top: 7px; +} + +.nav-btn { + display: inline-block; + left: 0; + border: none; + text-align: center; + color: var(--navyBlue); + background-color: var(--lightGreen); +} + +.nav-btn span { + border-radius: 18px; + padding: 2px 15px 2px 15px; +} + +.nav-btn p { + font-size: 0.7rem; + font-weight: 500; +} + +.active-nav-btn span { + background-color: var(--brightGreen); +} + + +/***************************/ + + +/* media queries DESKTOP */ + + +/**************************/ + +@media only screen and (min-width: 1080px) { + .option-card { + cursor: pointer; + } + .nav-btn { + cursor: pointer; + } + .home-options-wrapper { + display: flex; + flex-direction: row; + } + .option-card:hover { + background-color: #193053; + } } diff --git a/sw.js b/sw.js new file mode 100644 index 0000000000000000000000000000000000000000..e5f4039dfe10e0395cc62e7e7c0d7d079a197eb7 --- /dev/null +++ b/sw.js @@ -0,0 +1,64 @@ + +const staticCacheName = 'site-static-v4'; +const dynamicCacheName = 'site-dynamic-v4'; +const assets = [ + './index.html', + './style.css', + './assets/fonts/IndianSignLangage.ttf', + './assets/fonts/Aclonica-Regular.ttf', + './assets/fonts/Poppins-Regular.ttf', + './assets/images/contact-us-option-btn-img.png', + './assets/images/contribute-option-btn-img.png', + './assets/images/learn-option-btn-img.png', + './assets/images/translate-option-btn-img.png', + './assets/images/sanket-logo.png', + './assets/images/demo-pfp.png', +]; + + + +// install event +self.addEventListener('install', evt => { + //console.log('service worker installed'); + evt.waitUntil( + caches.open(staticCacheName).then((cache) => { + console.log('caching shell assets'); + cache.addAll(assets); + }) + ); +}); + +// activate event +self.addEventListener('activate', evt => { + //console.log('service worker activated'); + evt.waitUntil( + caches.keys().then(keys => { + //console.log(keys); + return Promise.all(keys + .filter(key => key !== staticCacheName && key !== dynamicCacheName) + .map(key => caches.delete(key)) + ); + }) + ); +}); + +// fetch event +self.addEventListener('fetch', evt => { + //console.log('fetch event', evt); + evt.respondWith( + caches.match(evt.request).then(cacheRes => { + return cacheRes || fetch(evt.request).then(fetchRes => { + return caches.open(dynamicCacheName).then(cache => { + cache.put(evt.request.url, fetchRes.clone()); + // check cached items size + // limitCacheSize(dynamicCacheName, 15); + return fetchRes; + }) + }); + }).catch(() => { + if (evt.request.url.indexOf('.html') > -1) { + return caches.match('index.html'); + } + }) + ); +}); diff --git a/translate/app.js b/translate/app.js new file mode 100644 index 0000000000000000000000000000000000000000..ee69897c2c1f3654d280d2ec3f1e41fd872d347b --- /dev/null +++ b/translate/app.js @@ -0,0 +1,313 @@ +//meta(not so imp) functions by vkc! + +const modelURL = "https://teachablemachine.withgoogle.com/models/riOJKjJZ1/model.json"; +const metadataURL = "https://teachablemachine.withgoogle.com/models/riOJKjJZ1/metadata.json"; + + + +let gttsBtn = document.getElementById('gtts-btn'); +let cameraBtn = document.getElementById('camera-btn'); +let uploadBtn = document.querySelector('#upload-btn'); +let textArea = document.querySelector('#textarea'); +let backBtn = document.querySelector("#back-btn") +let line = document.createElement('p'); + + +line.className = "line" +line.id = "last-line" +line.innerHTML = `Ready to roll !` +textArea.appendChild(line) +line.scrollIntoView({ + behavior: "smooth", + block: "end", + inline: "nearest" +}); + + +// back btn +backBtn.addEventListener("click", function() { + window.location = '/' +}) + + +let webcamON = false + +//open github repo +document.querySelector('#webcam-banner').addEventListener('click', function() { + window.open('https://github.com/vivekkushalch/Indian-Sign-Language-Recognition-System/', '_blank'); +}) + + + +// test function +async function addTestLines(totalLines) { + for (let i = 1; i < totalLines + 1; i++) { + let line = document.createElement('p'); + line.className = "line" + line.innerHTML = `Hello` + textArea.appendChild(line) + line.scrollIntoView({ + behavior: "smooth", + block: "end", + inline: "nearest" + }); + } +} +// addTestLines(10); + + + + + +// adds new line in transcript box +async function addNewTranslateLine(text) { + let lastLine = textArea.lastElementChild; + try { + document.querySelector('#last-line').id = ''; + } catch (err) { + console.log(err) + } + + let newLine = document.createElement('p'); + newLine.innerHTML = text; + newLine.className = "line"; + newLine.id = 'last-line'; + textArea.appendChild(newLine); + newLine.scrollIntoView({ + behavior: "smooth", + block: "end", + inline: "nearest" + }) +} + + +// start sign prediction +// cameraBtn.addEventListener("click", function() { +// if (cameraBtn.style.background === '#62E6BF') { +// cameraBtn.style.background = "#EAF1C5"; //deactivate btn +// alert('stopping... Press OK') +// location.reload() + +// } else { +// cameraBtn.style.background = "#62E6BF"; +// document.getElementById("webcam-banner").style.display = "none"; // remove banner +// document.getElementById("canvas").style.display = "block"; // display web cam +// alert('starting.... Press OK') +// init(); +// } +// }); + +// start sign prediction +cameraBtn.addEventListener("click", function() { + if (webcamON) { + location.reload() + } else { + webcamON = true + cameraBtn.style.background = "#62E6BF"; + document.getElementById("webcam-banner").style.display = "none"; // remove banner + document.getElementById("canvas").style.display = "block"; // display web cam + alert('starting.... Press OK') + init(); + } +}) + +// text to speach btn colour change +gttsBtn.addEventListener("click", function() { + if (gttsBtn.style.backgroundColor === 'rgb(212, 236, 126)') { + gttsBtn.style.background = "#EAF1C5"; //dactivate btn + // alert('stopping... Press OK') + // location.reload() + + } else { + gttsBtn.style.background = "#62E6BF"; + // alert('starting.... Press OK') + // init(); + } +}); + + + +let file; + +async function predictImage(file) { + const modelURL = 'https://teachablemachine.withgoogle.com/models/riOJKjJZ1/'; + const model = await tmImage.load(modelURL + 'model.json', modelURL + 'metadata.json'); + + + const imagePreview = document.getElementsByClassName('webcam-view'); + + + + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = async() => { + imagePreview.src = reader.result; + const imageElement = document.createElement('img'); + imageElement.src = reader.result; + const prediction = await model.predict(imageElement); + addNewTranslateLine(predictions) + console.log(prediction); + }; +}; + + +//upload img +uploadBtn.addEventListener('click', function() { + uploadBtn.style.background = "#62E6BF"; + uploadBtn.style.background = "" + const fileInput = document.querySelector('#file-input'); + fileInput.click() + fileInput.addEventListener('change', async(event) => { + file = event.target.files[0]; + if (!file) { + console.error('No file selected.'); + return; + } + }) + predictImage(file) + // let fileInput = document.querySelector('#file-input') + // fileInput.click(); + // fileInput.addEventListener('change', async(event) => { + // const file = event.target.files[0]; + // if (!file) { + // console.error('No file selected.'); + // return; + // } + + // const reader = new FileReader(); + // reader.readAsDataURL(file); + // reader.onload = async() => { + // let img = document.createElement('img') + // img.className = 'webcam-view' + // document.querySelector(".webcam-view").appendChild(img).src = reader.result; + + // //predict image + + // model = window.tmImage.load(modelURL, metadataURL); + // let flip = true; + // // maxPredictions = model.getTotalClasses(); + // const prediction = await model.predict(img); + // console.log(prediction) + // addNewTranslateLine(prediction) + + // }; + // reader.onerror = (error) => { + // console.error(error); + // }; + // }); + + + +}) + + + + + +//text to speech +async function tts(text) { + if ('speechSynthesis' in window) { + // Speech Synthesis is supported 🎉 + console.log(''); + } else { + alert('Text to speech not available 😞'); + location.reload(); + } + + let msg = new SpeechSynthesisUtterance(text); + window.speechSynthesis.speak(msg); + +} + +// delay function +const delay = ms => new Promise(res => setTimeout(res, ms)); + +///////////////////////////////////// +let index = 0 +const spamFilter = ['I', `❤️`, 'I', 'N', 'D', 'I', 'A'] +let beforeTextDone = 0; + +///////////////////////////////////// +// tensorflow.js magic ///////////// +//////////////////////////////////// +let model, webcam, ctox, labelContainer, maxPredictions; +async function init() { + //hello, welcome, thankyou, iloveu {>= 0.95} + // const modelURL = "https://storage.googleapis.com/tm-model/C2gYk6JPd/model.json"; + // const metadataURL = "https://storage.googleapis.com/tm-model/C2gYk6JPd/metadata.json"; + + //1,2,3,4,5{==1.0 meh} + // const modelURL = "https://storage.googleapis.com/tm-model/qWNVsgTyJ/model.json"; + // const metadataURL = "https://storage.googleapis.com/tm-model/qWNVsgTyJ/metadata.json"; + + + + // load the model and metadata + // Refer to tmImage.loadFromFiles() in the API to support files from a file picker + // or files from your local hard drive + // Note: the pose library adds "tmImage" object to your window (window.tmImage) + model = await tmImage.load(modelURL, metadataURL); + maxPredictions = model.getTotalClasses(); + + // Convenience function to setup a webcam + const flip = true; // whether to flip the webcam + webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip 180 + await webcam.setup(); // request access to the webcam + await webcam.play(); + window.requestAnimationFrame(loop); + + // append elements to the DOM + document.querySelector(".webcam-view").appendChild(webcam.canvas).className = 'canvas'; + labelContainer = document.getElementById("last-line"); + for (let i = 0; i < maxPredictions; i++) { // and class labels + labelContainer.appendChild(document.createElement("div")); + } +} + +async function loop() { + webcam.update(); // update the webcam frame + await predict(); + window.requestAnimationFrame(loop); +} + +// run the webcam image through the image model +async function predict() { + // predict can take in an image, video or canvas html element + const prediction = await model.predict(webcam.canvas); + for (let i = 0; i < maxPredictions; i++) { + // if (prediction[i].probability.toFixed(2) == 1.00) { + // console.log(prediction[i].probability.toFixed(2), prediction[i].className) + // } + // const classPrediction = prediction[i].className + ": " + prediction[i].probability.toFixed(2); + console.log(prediction[i].probability.toFixed(2), prediction[i].className) + if (prediction[i].probability.toFixed(2) == 1.0) { + if (prediction[i].className == spamFilter[index]) { + index += 1; + if (index == spamFilter.length) { + index = 0; + } + if (document.querySelector('#last-line').innerHTML != prediction[i].className) { + await addNewTranslateLine(prediction[i].className); + if (gttsBtn.style.backgroundColor === 'rgb(212, 236, 126)') { //btn active + await tts(prediction[i].className) + // delay(0) + } else { + console.log('') + } + } + } + + // labelContainer.childNodes[i].innerHTML = prediction[i].className; + + + } + + } + + // for (let i = 0; i < maxPredictions; i++) { + // const classPrediction = + // prediction[i].className + ": " + prediction[i].probability.toFixed(2); + // labelContainer.childNodes[i].innerHTML = classPrediction; + // } + +} diff --git a/translate/bottom-sheet.js b/translate/bottom-sheet.js new file mode 100644 index 0000000000000000000000000000000000000000..8a1fce89ede96365479b40d7f42f3985ea9529f8 --- /dev/null +++ b/translate/bottom-sheet.js @@ -0,0 +1,16 @@ +$("#myElement1").downupPopup(); +$("#myElement1").downupPopup({ + duration: "300", // milliseconds + animation: "ease", // css effects -> ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) + background: true, // true, false -> dark background + radiusLeft: "10px", // top-left-radius + radiusRight: "10px", // top-right-radius + distance: 20, // distance top + headerText: "", // title, you can use HTML here -> Example + width: "100%", // width -> 100%, 80%, 200px etc. + contentScroll: false // true, false -> for use,
have to inside the element +}); +$("#btn-1").click(function() { + $("#myElement1").css('display:block;') + $("#myElement1").downupPopup("open"); +}); \ No newline at end of file diff --git a/translate/index.html b/translate/index.html new file mode 100644 index 0000000000000000000000000000000000000000..d0b289c15148324ffd5f0ec6c2f7a4b1899c6cc9 --- /dev/null +++ b/translate/index.html @@ -0,0 +1,109 @@ + + + + + + + + + + + Sanket - Translate Sign Language + + + + + + + + + + + + + + + + + + + + + + loader +
+
+ back + switch-camera +
+ SANKET +
+
+
+ settings + Transcript! +
+
+
+ transcript-settings +
+
+ speak + camera + upload photo + +
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/translate/re-app.js b/translate/re-app.js new file mode 100644 index 0000000000000000000000000000000000000000..0519ecba6ea913e21689ec692e81e9e4973fbf73 --- /dev/null +++ b/translate/re-app.js @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/translate/re-index.html b/translate/re-index.html new file mode 100644 index 0000000000000000000000000000000000000000..2486f1f83f2f14d386d2f0905db845668652f24a --- /dev/null +++ b/translate/re-index.html @@ -0,0 +1,95 @@ + + + + + + + + + + + Sanket - Translate - Sign to Text + + + + + + + + + + + + + + + + loader + + + + +
+ webcam-banner + +
+ U +
+
+ +
+
+ tune +
+ subtitles Transcript +
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/translate/re-style.css b/translate/re-style.css new file mode 100644 index 0000000000000000000000000000000000000000..5e9582f1cc53556dc35c1a1a770ebadcde175e61 --- /dev/null +++ b/translate/re-style.css @@ -0,0 +1,173 @@ +:root { + --ultraLightGreen: #D3F1E9; + --lightGreen: #BCF3E5; + --brightGreen: #62E6BF; + --mediumGreen: #0DA778; + --deepGreen: #0A7B79; + --navyBlue: #193053; +} + +@font-face { + font-family: "Poppins"; + src: url("/assets/fonts/Poppins-Regular.ttf"); +} + +* { + margin: 0; + padding: 0; + font-family: "Poppins"; + scroll-behavior: smooth; +} + +span:active { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + background-color: var(--ultraLightGreen); + min-width: 100vw; + min-height: 100vh; +} + +.navbar { + min-width: 100%; + position: fixed; + /* background-color: red; */ + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; +} + +.navbar #nav-left span { + /* background-color: blue; */ + color: var(--navyBlue); + text-decoration: none; + text-align: left; + font-size: 2rem !important; + font-weight: 500; + margin-top: 5px; +} + +.navbar #nav-right { + /* background-color: green; */ + color: var(--navyBlue); + font-weight: 500; + text-align: right; + font-size: 2rem !important; + margin-right: 1.2rem; +} + +.webcam-view img { + width: 100%; +} + +.webcam-view canvas { + display: none; + width: 100%; + height: 25vh; +} + +.webcam-view .prediction-overlay { + position: absolute; + text-align: center; + margin-top: -3.45rem; + width: 100%; + /* height: 2rem; */ + /* background-color: var(--navyBlue); */ + background-color: rgba(25, 48, 83, .65); + /* padding: 3px; */ + /* opacity: .8; */ +} + +.webcam-view .prediction-overlay span { + font-size: 2rem; + font-weight: 800; + color: white; + /* opacity: 1; */ +} + +.transcript-wrapper { + display: flex; + flex-flow: column; + align-items: flex-start; + margin: auto; + margin-top: 20px; + height: 15rem; + width: 85%; + background: #f5f5f5; + border: 2px solid var(--navyBlue); + border-radius: 18px; +} + +.transcript-title-bar-wrapper { + background-color: var(--navyBlue); + border-radius: 16px 16px 0px 0px; + /* border: 2px solid var(--navyBlue); */ + width: 100%; + height: 3rem; + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: flex-start; + /* display: grid; */ + /* grid-template-columns: auto auto; */ + /* grid-gap: 50px; */ +} + +.transcript-title-bar-wrapper #transcript-settings-btn { + /* grid-column: 2; */ + color: white; + cursor: pointer; + width: 20px; + /* padding-top: 12px; */ + padding-left: 15px; +} + +.transcript-title-bar-wrapper #transcript-text { + /* grid-column: 1; */ + /* display: flex; */ + /* flex-direction: row; */ + /* justify-content: space-around; */ + color: white; + font-weight: 600; + font-size: 1.15rem; + padding: 0; +} + + +/* .navbar { + position: absolute; + display: flex; + font-size: large; + width: 100%; + margin: auto; + justify-content: space-between; +} + +.navbar span { + margin-top: 1rem; + color: var(--navyBlue); + font-size: 3rem; + font-weight: 600; +} + +.navbar #nav-left { + float: left; + margin-left: 10px; +} + +.navbar #nav-right { + float: left; + margin-left: 10px; +} */ + + +/* .webcam-view img { + /* position: absolute; */ + + +/* min-width: 100vw; */ + + +/* } */ \ No newline at end of file diff --git a/translate/style.css b/translate/style.css new file mode 100644 index 0000000000000000000000000000000000000000..2ddae1cab2ec083ee458a234264e5dc664dded6f --- /dev/null +++ b/translate/style.css @@ -0,0 +1,319 @@ +/* + +1. globals +2. body +3. navbar +4. canvas(webcam preview) +5. transcript box +6. quick controlls (gtts, cam, upload) +7. bottom sheet (text to sign) + +*/ + +:root { + --ultraLightGreen: #D3F1E9; + --lightGreen: #BCF3E5; + --brightGreen: #62E6BF; + --mediumGreen: #0DA778; + --deepGreen: #0A7B79; + --navyBlue: #193053; + --background: #fff; + --foreground: #000; + --divider: #dcdcdc; + --overlay: #888; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #000; + --foreground: #fff; + --divider: #333; + } +} + + +/* @import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500&family=Poppins:wght@600&display=swap'); */ + +@font-face { + font-family: "Poppins"; + src: url("/assets/fonts/Poppins-SemiBold.ttf"); +} + +@font-face { + font-family: "Aclonica"; + src: url("/assets/fonts/Aclonica-Regular.ttf"); +} + +* { + margin: 0; + padding: 0; + font-family: "Poppins"; + font-size: 600; +} + +body { + display: flex; + justify-content: center; + min-height: 100vh; + min-width: 100vw; + background-color: var(--lightGreen); + overflow: auto; +} + +.cointainer { + display: block; + position: relative; + min-height: 100vh; + width: 100vw; + background-color: var(--ultraLightGreen); + overflow: auto; +} + + +/***************************/ + + +/* navbar */ + + +/**************************/ + +.navbar { + position: absolute; + width: 100%; + display: grid; + grid-template-columns: auto auto; +} + +#back-btn { + cursor: pointer; + padding-left: 15px; + padding-top: 15px; +} + +#cam-switch-btn { + cursor: pointer; + margin-left: 70%; + padding-top: 10px; +} + + +/***************************/ + + +/* canvas(webcam-preview) */ + + +/**************************/ + +#webcam-banner { + display: none; + width: 100%; + height: 25vh; +} + +.webcam-view { + display: block; + width: 100%; + height: 25vh; +} + +.canvas { + display: block; + width: 100%; + height: 28vh; +} + + +/***************************/ + + +/* transcript */ + + +/**************************/ + +.transcript-wrapper { + /* position: relative; */ + display: flex; + flex-flow: column; + align-items: flex-start; + margin: auto; + margin-top: 20px; + height: 17rem; + width: 85%; + background: #F9FFFD; + border: 2px solid var(--navyBlue); + border-radius: 18px; +} + +.transcript-tittle-bar-wrapper { + background-color: var(--navyBlue); + border-radius: 16px 16px 0px 0px; + width: 100%; + height: 2.7rem; + display: grid; + grid-template-columns: auto auto auto; + grid-gap: 50px; +} + +#transcript-settings-btn { + cursor: pointer; + height: 17px; + margin: auto; + /* width: 20px; */ + padding-top: 4.5px; + /* padding-left: 15px; */ +} + +#transcript-heading { + width: 131px; + padding-top: 9px; +} + +#expand-transcript-btn { + cursor: pointer; + /* width: 23px; */ + font-size: 1rem; + padding-top: 13px; +} + +#transcript-details-btn { + /* position: absolute; */ + width: 50%; + margin: auto; +} + +#textarea { + display: block; + width: 100%; + height: 75%; + overflow: auto; +} + +.line { + color: rgba(25, 48, 83, 0.4); + font-size: 28px; + padding-top: 7px; + padding-left: 15px; +} + +#last-line { + color: var(--navyBlue); +} + + +/* #transcript-settings-btn { + width: 15px; + margin-left: auto; + padding-right: 15px; +} */ + + +/***************************/ + + +/* quick controlls */ + + +/**************************/ + +.quick-controls { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + margin: auto; + margin-top: 20px; + margin-bottom: 0; + width: 70%; + background: var(--ultraLightGreen); + border: 1px solid var(--navyBlue); + /* box-shadow: 0px 4px 4px ; */ + border-radius: 45px; + padding: 8px 10px 8px 10px; +} + +.quick-btn { + cursor: pointer; + width: 22px; + margin: auto; +} + +#gtts-btn { + cursor: pointer; + margin-left: 8px; + padding-left: 5px; + padding: 8px 20px 8px 20px; + border-radius: 45px; +} + +#camera-btn { + cursor: pointer; + margin: 0px 15px 0px 15px; + padding: 8px 20px 8px 20px; + border-radius: 45px; +} + +#upload-btn { + cursor: pointer; + margin-right: 8px; + padding-right: 5px; + padding: 8px 20px 8px 20px; + border-radius: 45px; +} + +#file-input { + display: none; +} + + +/***************************/ + + +/* bottom sheet */ + + +/**************************/ + +#bottom-sheet { + display: block; + position: absolute; + width: 100%; + bottom: 0; +} + +.overlay { + position: absolute; + right: 0; + left: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.85); + opacity: 0; + transition: all 450ms cubic-bezier(0.32, 1, 0.23, 1) 0ms; +} + + +/*************************/ + + +/* meida quiries */ + + +/************************/ + + +/* desktop */ + +@media only screen and (min-width: 1080px) { + .cointainer { + max-width: 430px; + /* border-left: 2px solid rgba(107, 126, 36, 0.5); */ + /* border-right: 2px solid rgba(107, 126, 36, 0.5); */ + -webkit-box-shadow: 0px 0px 100px 20px rgba(107, 126, 36, 0.3); + -moz-box-shadow: 0px 0px 100px 20px rgba(107, 126, 36, 0.3); + box-shadow: 0px 0px 100px 20px rgba(107, 126, 36, 0.3); + } + #bottom-sheet { + height: auto; + } +} \ No newline at end of file diff --git a/translate/text-to-sign/app.js b/translate/text-to-sign/app.js new file mode 100644 index 0000000000000000000000000000000000000000..941b49608d4e7cc6f02b15b7d14d566b0c109c98 --- /dev/null +++ b/translate/text-to-sign/app.js @@ -0,0 +1,69 @@ +const signText = document.querySelector('.player-view') +const normText = document.querySelector('#player-text') + +const textArea = document.querySelector('#text-area') + +const msgInput = document.querySelector('.message-input') +const sendBtn = document.querySelector('#send-btn') + +msgInput.value = 'ihioahsdhashdskd' + +let newText = ""; +sendBtn.addEventListener('click', function() { + // textArea.value = '' + textArea.innerHTML = '' + let text = msgInput.value; + msgInput.value = '' + + + for (let i = 0; i < text.length; i++) { + setTimeout(function() { + signText.innerHTML = text[i] + normText.innerHTML = text[i] + + + const letter = text.charAt(i); + const isLastLetter = (i === text.length - 1); + + if (isLastLetter) { + // newText += `

${letter}

`; + newText += letter + + + } else { + newText += letter; + } + + textArea.innerHTML = newText; + // await new Promise(r => setTimeout(r, 1000)); + + // if (isLastLetter) { + // const lastLetterElement = textArea.lastChild.lastChild; + // lastLetterElement.classList.add("highlight"); + // } + + + + // const letter = text.charAt(i); + // const isLastLetter = (i === text.length - 1); + + // if (isLastLetter) { + // newText += `${letter}`; + // } else { + // newText += letter; + // } + + // textArea.value = newText; + + + + // const lastLetter = text.slice(-1); + // const lastIndex = text.lastIndexOf(lastLetter); + // const newText = text.slice(0, lastIndex) + `${text[i]}` + text.slice(lastIndex + 1); + + // textArea.innerHTML = newText; + + console.log(i) + }, i * 1000) + } +}) \ No newline at end of file diff --git a/translate/text-to-sign/index.html b/translate/text-to-sign/index.html new file mode 100644 index 0000000000000000000000000000000000000000..0b9fdc0fc0976ff5a09a9f37ee0852f88ace87e7 --- /dev/null +++ b/translate/text-to-sign/index.html @@ -0,0 +1,88 @@ + + + + + + + + Sanket - Text to Sign + + + + Sanket - Home + + + + + + + + + + + + + loader + +

Text to Sign

+ + back + +
+
H
+

H

+
+ + + + + +
+ + +
+ + + + + + \ No newline at end of file diff --git a/translate/text-to-sign/style.css b/translate/text-to-sign/style.css new file mode 100644 index 0000000000000000000000000000000000000000..a43cb4656a680232ae49cb15e99586e688981ab5 --- /dev/null +++ b/translate/text-to-sign/style.css @@ -0,0 +1,203 @@ +:root { + --ultraLightGreen: #D3F1E9; + --lightGreen: #BCF3E5; + --brightGreen: #62E6BF; + --mediumGreen: #0DA778; + --deepGreen: #0A7B79; + --navyBlue: #193053; +} + +@font-face { + font-family: "Poppins"; + src: url("/assets/fonts/Poppins-Regular.ttf"); +} + +@font-face { + font-family: "Aclonica"; + src: url("/assets/fonts/Aclonica-Regular.ttf"); +} + +@font-face { + font-family: "isl"; + src: url("/assets/fonts/IndianSignLangage.ttf"); +} + +* { + font-family: 'Poppins', sans-serif; + padding: 0; + margin: 0; + scroll-behavior: smooth; +} + +body { + font-family: 'Poppins'; + background-color: var(--brightGreen) !important; + display: flex; + flex-direction: column; + align-items: center + /* min-height: 100vh; */ + /* overflow: hidden; */ +} + +#back-btn { + position: absolute; + top: 1rem; + left: 1rem; + cursor: pointer; +} + +h1 { + position: absolute; + margin: auto; + top: 0.4rem; + color: var(--navyBlue); + font-family: "Poppins"; + font-size: 2rem; +} + +.wrapper { + margin-top: 4.5rem; + padding-top: 2rem; + display: flex; + flex-direction: column; + align-items: center; + /* padding: 20px; */ + background-color: white; + width: 85%; + height: 13rem; + border: 2px solid var(--navyBlue); + border-radius: 18px; +} + +.player-view { + display: flex; + flex-direction: column; + align-items: center; + /* padding: 15px; */ + /* margin-top: 3rem; */ + font-family: 'isl'; + font-size: 8rem; +} + +.player-view span { + font-size: 2.5rem; +} + +#player-text { + font-size: 2rem; + margin: auto; +} + +#text-area { + text-decoration: none; + width: 80%; + height: 9rem; + position: fixed; + /* bottom: 13rem; */ + bottom: 6rem; + border: 2px solid var(--navyBlue); + border-radius: 18px; + padding: 10px; + padding-left: 15px; + padding-top: 15px; + overflow: auto; + font-size: 1.52rem; +} + +.line { + color: rgba(25, 48, 83, 0.4); + font-size: 28px; + padding-top: 7px; + padding-left: 15px; +} + +#last-line { + color: var(--navyBlue); +} + +.highlight { + background-color: yellow; + color: black; +} + + +/* +.quick-controls { + position: fixed; + margin: auto; + bottom: 7.5rem; + display: flex; + flex-direction: row; + justify-content: space-around; + width: 15rem; + padding: 0.65rem; + border: 2px solid var(--navyBlue); + border-radius: 3rem; + background-color: var(--lightGreen); +} + +.quick-controls .quick-btn { + font-size: 5rem; + font-weight: 800; + color: var(--navyBlue); +} + +.quick-controls span { + cursor: pointer; +} */ + +.message-container { + position: fixed; + margin: auto; + bottom: 0; + width: 90%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 5px; + background-color: #fff; + /* border-top: 1px solid #e6ecf0; */ + /* border: 50%; */ + border-radius: 5rem; + border: 2px solid var(--navyBlue); + margin-bottom: 1rem; +} + +.message-input { + width: 50%; + flex-grow: 1; + /* margin-right: 10px; */ + border: none; + outline: none; + font-size: 16px; + color: var(--navyBlue); + margin-left: 20px; + text-decoration: none; +} + +.send-btn { + /* background-color: #1da1f2; */ + /* color: #fff; */ + border: none; + padding: 10px; + /* border-radius: 30%; */ + font-size: 16px; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + background: none; +} + +.send-icon { + display: inline-block; + width: 24px; + height: 24px; + /* background-color: #1da1f2; */ + color: #fff; + border-radius: 50%; + text-align: center; + line-height: 24px; + font-size: 14px; +} \ No newline at end of file