Feature play zoomlogin (#1516)

* feat(play/zoomlogin): add new Zoom login and chatbot clone project

* * fix(play/schulte-tables): fix plain class name to prevent from potential overriding issue

* fix(play/zoomlogin): clean up the code

* fix(play/zoomlogin): add the img

* fix: replace img, remove code (#1512)

* fix: replace svg and png logo images to cdn link

* fix: add guiding sentences in header

* fix: delete direct DOM manipulation code

---------

Co-authored-by: Priyankar Pal <[email protected]
reply.github.com>.

* refactor: remove unused file, refactor css code(#1512)

* refactor: remove App.css file

* refactor: change sticky header top value

---------

Co-authored-by: Priyankar Pal <[email protected]>

* refactor: change the assets and footer style for responsive design (#1512)

* refactor: replace zoom help icon with transparent background

* refactor: change footer text size for mobile screen

---------

Co-authored-by: Priyankar Pal <[email protected]>

* refactor: add the modal (#1512)

* refactor: remove the guide sentences in the header add the modal

---------

Co-authored-by: Priyankar Pal <[email protected]>

* refactor: fix mobile responsive design for chatbot (#1512)

* refactor: fix mobile responsive design for chatbot

---------

Co-authored-by: Priyankar Pal <[email protected]>i

* refactor: clean up the code (#1512)

* refactor: clean up the unused function and import

---------

Co-authored-by: Priyankar Pal <[email protected]>

---------

Co-authored-by: Priyankar Pal <[email protected]>
Co-authored-by: Sachin Chaurasiya <[email protected]>

package.json

@@ -39,6 +39,7 @@
     "mathjs": "^11.12.0",
     "p5": "^1.9.0",
     "react": "^18.2.0",
+    "react-chatbot-kit": "^2.2.2",
     "react-codemirror2": "^7.3.0",
     "react-color": "^2.19.3",
     "react-confetti": "^6.1.0",

src/plays/schulte-tables/components/SchulteTable.jsx

@@ -10,7 +10,7 @@ const SchulteTable = ({ nextNumber, setNextNumber, data, setStart, start, setRes
 
   return (
     <section>
-      <div className="flex">
+      <div className="schulte-table-flex">
         <h1>
           Time:{' '}
           <Timer nextNumber={nextNumber} setResult={setResult} setStart={setStart} start={start} />

src/plays/schulte-tables/styles.css

@@ -29,7 +29,7 @@
   cursor: pointer;
 }
 
-.flex {
+.schulte-table-flex {
   display: flex;
   margin: 0 auto;
   justify-content: space-between;

src/plays/zoomlogin/Readme.md

@@ -0,0 +1,30 @@
+# zoomlogin
+
+Clone project for the zoom login page and the help chatbot
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: day-lee
+- Gihub Link: https://github.com/day-lee
+- Blog:
+- Video:
+
+## Implementation Details
+
+- Login form validation
+- Help chatbot, customizing the React-Chatbot-Library
+- Responsive design to display ads or Zoom images based on screen size
+- Accessibility features, including form submission via Enter key, alt attributes, aria-labels, and button hover saturation changes
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+react-chatbot-kit

src/plays/zoomlogin/Zoomlogin.js

@@ -0,0 +1,24 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+
+import App from 'plays/zoomlogin/components/App';
+
+// WARNING: Do not change the entry componenet name
+function Zoomlogin(props) {
+  // Your Code Start below.
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <App />
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Zoomlogin;