tutorial added

package-lock.json

@@ -11,8 +11,7 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-scripts": "^5.0.1"
-      },
-      "devDependencies": {}
+      }
     },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",

src/App.css

@@ -340,15 +340,14 @@ button:not(.active) {
 }
 
 .modal {
-    background: transparent;
-    padding: 40px;
-    max-width: 600px;
+    background: var(--dark);
+    border-radius: var(--border-radius-lg);
+    padding: 30px;
+    max-width: 700px;
     width: 90%;
     font-family: var(--font-main);
     color: var(--light);
-    position: relative;
-    overflow: hidden;
-    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -1018,3 +1017,103 @@ button:not(.active) {
 }
 
 /* ...existing styles... */
+
+/* Updated Welcome Modal Example Styles */
+.modal-examples {
+  margin-top: 25px;
+  text-align: left;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  background-color: rgba(64, 65, 79, 0.3);
+  color: var(--light);
+  backdrop-filter: blur(8px);
+}
+
+.modal-examples h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  text-align: center;
+  color: var(--light);
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.button-example-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.button-example-container span {
+  margin-left: 12px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.example-textarea {
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--border-radius);
+  padding: 10px 12px;
+  background-color: rgba(64, 65, 79, 0.3);
+  font-size: 14px;
+  color: var(--light);
+  display: flex;
+  align-items: center;
+}
+
+.modal-input-example, .modal-buttons-example, .modal-send-example {
+  margin-bottom: 18px;
+}
+
+.button-example-container button.example, 
+.modal-send-example button.example {
+  pointer-events: none;
+  transform: none;
+  opacity: 1;
+}
+
+.button-example-container .standard-button.example {
+  background: rgba(64, 65, 79, 0.9);
+  color: var(--light);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 90px;
+  height: 36px;
+}
+
+.button-example-container .reasoning-button.example {
+  background: transparent;
+}
+
+.button-example-container .search-button.example {
+  background: transparent;
+}
+
+.modal-send-example .answer-button.example {
+  background: var(--primary);
+  color: white;
+  position: static;
+  transform: none;
+  display: inline-flex;
+  margin: 0;
+}
+
+.start-button {
+  margin-top: 25px;
+  background: var(--primary);
+  color: white;
+  padding: 12px 24px;
+  font-size: 16px;
+}
+
+/* Make the modal match the app's style */
+.modal {
+  background: var(--dark);
+  border-radius: var(--border-radius-lg);
+  padding: 30px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ...existing code... */

src/App.js

@@ -148,15 +148,51 @@ export default function ChatDisplay() {
   function WelcomeModal() {
     return (
       showModal && (
-        <div className="modal-overlay">
-          <div className="modal">
-            <h2>🌿 Did you know? </h2>
-            <p>Every prompt counts! Choosing the right AI model saves energy and protects our planet. 🌎✨</p>
-            <img src="images/cute_world_mini.png" style={{ width: '55%' }} />
-            <p>Play smart, pick wisely, and reduce your digital footprint! 🌱💡</p>
-            <button onClick={() => setShowModal(false)}>Start</button>
+      <div className="modal-overlay">
+      <div className="modal">
+        <h2 style={{ textAlign: 'center' }}>🌳 Welcome to AI Energy Efficiency Trainer 🌿</h2>
+        <p className="modal-subtitle">Learn to choose the right AI model to save energy and improve responses</p>
+
+        <div className="modal-instruction-block">
+        <div className="instruction-header"></div>
+          <div className="instruction-content">
+            <p className="instruction-title" style={{ fontWeight: 'bold', fontSize: '1.1em', marginBottom: '8px', marginTop: '16px' }}>️1. Review the prompt:</p>
+            <div className="input-example-container">
+            <div className="example-textarea">
+              "Calculate the compound interest on $5,000 invested for 3 years at 4.5% per annum."
+            </div>
+            </div>
+          </div>
+          </div>
+
+          <div className="modal-instruction-block">
+          <div className="instruction-content">
+            <p className="instruction-title" style={{ fontWeight: 'bold', fontSize: '1.1em', marginBottom: '8px', marginTop: '16px' }}>2. Select the appropriate model (if needed):</p>
+            <div className="button-example-container" style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+              <button className="standard-button reasoning-button example" style={{ minWidth: '80px' }}>Reason</button>
+              <span style={{ marginLeft: '10px', display: 'inline-block', verticalAlign: 'middle' }}>For calculations, step-by-step explanations, and complex reasoning</span>
+            </div>
+            <div className="button-example-container" style={{ display: 'flex', alignItems: 'center' }}>
+              <button className="standard-button search-button example" style={{ minWidth: '80px' }}>Search</button>
+              <span style={{ marginLeft: '10px', display: 'inline-block', verticalAlign: 'middle' }}>For factual answers, simple lookups, and direct responses</span>
+            </div>
+          </div>
+          </div>
+          
+          <div className="modal-instruction-block">
+          <div className="instruction-content">
+            <p className="instruction-title" style={{ fontWeight: 'bold', fontSize: '1.1em', marginBottom: '8px', marginTop: '16px' }}>3. Click Send to submit your answer!</p>
+            <div className="send-button-example">
+            </div>
+          </div>
+          </div>
+          
+          <div className="modal-footer">
+          <p className="energy-note">⚡ Making the right choice helps reduce AI energy consumption</p>
+          <button onClick={() => setShowModal(false)} className="start-button" style={{ float: 'right' }}>Let's Begin</button>
           </div>
         </div>
+      </div>
       )
     );
   }
@@ -224,7 +260,7 @@ export default function ChatDisplay() {
     const getInputClassName = () => {
       const classes = ['chat-input'];
       
-      // Only apply new-prompt class if initial load is complete
+      // Only apply new-prompt class if initialLoadComplete is true
       if (initialLoadComplete.current && isNewPrompt) {
         classes.push('new-prompt');
       }