ai

Runtime error

App Files Files Community

lokeshloki143 commited on May 5, 2025

Commit

07ef801

verified ·

1 Parent(s): a0a6601

Create App21_Al_Coach_Site_Supervisor.html

Browse files

Files changed (1) hide show

App21_Al_Coach_Site_Supervisor.html +230 -0

App21_Al_Coach_Site_Supervisor.html ADDED Viewed

	@@ -0,0 +1,230 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+<title>AI Coach Site Supervisor</title>
+<style>
+  /* Reset and base */
+  * {
+    box-sizing: border-box;
+  }
+  body, html {
+    margin: 0; padding: 0;
+    height: 100%;
+    background: #1e2a38;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #eef2f7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #app {
+    max-width: 350px;
+    width: 100%;
+    height: 600px;
+    background: #273849;
+    border-radius: 14px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  header {
+    background: #3a5068;
+    padding: 16px;
+    text-align: center;
+    font-size: 1.25rem;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    color: #f0f4f8;
+    box-shadow: inset 0 -3px 8px rgba(0,0,0,0.3);
+    user-select: none;
+  }
+  main.chat-area {
+    flex-grow: 1;
+    padding: 10px 14px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .message {
+    max-width: 80%;
+    margin-bottom: 12px;
+    padding: 10px 14px;
+    border-radius: 14px;
+    line-height: 1.3;
+    font-size: 0.9rem;
+    word-wrap: break-word;
+  }
+  .user-message {
+    background: #4a90e2;
+    align-self: flex-end;
+    border-bottom-right-radius: 2px;
+  }
+  .bot-message {
+    background: #485563;
+    align-self: flex-start;
+    border-bottom-left-radius: 2px;
+  }
+  footer {
+    background: #3a5068;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  footer input[type="text"] {
+    flex-grow: 1;
+    padding: 10px 14px;
+    border: none;
+    border-radius: 10px;
+    font-size: 1rem;
+    outline: none;
+    background: #2f4154;
+    color: #e0e6ed;
+    user-select: text;
+  }
+  footer button {
+    padding: 10px 14px;
+    background: #4a90e2;
+    border: none;
+    border-radius: 10px;
+    color: white;
+    font-weight: 700;
+    font-size: 1rem;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.3s ease;
+  }
+  footer button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  footer button:hover:not(:disabled) {
+    background-color: #357abd;
+  }
+  /* Scrollbar styling */
+  main.chat-area::-webkit-scrollbar {
+    width: 6px;
+  }
+  main.chat-area::-webkit-scrollbar-track {
+    background: #2f4154;
+  }
+  main.chat-area::-webkit-scrollbar-thumb {
+    background: #4a90e2;
+    border-radius: 3px;
+  }
+  @media (max-width: 360px) {
+    #app {
+      max-width: 100vw;
+      border-radius: 0;
+      height: 100vh;
+    }
+  }
+</style>
+</head>
+<body>
+  <div id="app" role="main" aria-label="AI Coach Site Supervisor Chat Application">
+    <header>AI Coach Site Supervisor</header>
+    <main class="chat-area" id="chat" aria-live="polite" aria-relevant="additions"></main>
+    <footer>
+      <input type="text" id="userInput" placeholder="Describe an issue or ask for advice..." aria-label="Chat input"/>
+      <button id="sendBtn" aria-label="Send message">Send</button>
+    </footer>
+  </div>
+<script>
+  // Basic conversational logic for AI Coach Site Supervisor
+  const chatArea = document.getElementById('chat');
+  const userInput = document.getElementById('userInput');
+  const sendBtn = document.getElementById('sendBtn');
+  // Predefined advice responses for keywords
+  const adviceDB = [
+    {
+      keywords: ['safety', 'helmet', 'ppe', 'gear'],
+      reply: 'Always wear the required PPE onsite, including helmet, gloves, and safety boots to prevent injuries.'
+    },
+    {
+      keywords: ['delay', 'schedule', 'late', 'time'],
+      reply: 'Review the project timeline and notify stakeholders immediately about delays to adjust workload effectively.'
+    },
+    {
+      keywords: ['equipment', 'machine', 'breakdown', 'repair'],
+      reply: 'Report equipment issues promptly to maintenance and avoid using faulty machinery to ensure safety.'
+    },
+    {
+      keywords: ['inspection', 'quality', 'check'],
+      reply: 'Ensure all phases pass quality inspections and document findings carefully for audits.'
+    },
+    {
+      keywords: ['team', 'worker', 'conflict', 'communication'],
+      reply: 'Maintain clear and respectful communication with your team to resolve conflicts and boost productivity.'
+    },
+    {
+      keywords: ['emergency', 'fire', 'accident', 'first aid'],
+      reply: 'Have an emergency response plan accessible and ensure everyone knows evacuation routes and emergency contacts.'
+    }
+  ];
+  // Default reply for unmatched input
+  const defaultReply = "Thanks for your input. As a site supervisor AI coach, I'm here to assist with safety, scheduling, equipment, and team matters. Could you please provide more details?";
+  // Add message to chat area
+  function addMessage(text, type = 'bot-message') {
+    const msgDiv = document.createElement('div');
+    msgDiv.className = 'message ' + type;
+    msgDiv.textContent = text;
+    chatArea.appendChild(msgDiv);
+    chatArea.scrollTop = chatArea.scrollHeight;
+  }
+  // Process user input and generate bot reply
+  function processInput(input) {
+    if (!input.trim()) return;
+    // Show user message
+    addMessage(input, 'user-message');
+    // Convert input to lowercase for matching
+    const lowerInput = input.toLowerCase();
+    // Find matching advice
+    for (const entry of adviceDB) {
+      for (const keyword of entry.keywords) {
+        if (lowerInput.includes(keyword)) {
+          addMessage(entry.reply);
+          return;
+        }
+      }
+    }
+    // No keyword matched
+    addMessage(defaultReply);
+  }
+  // Event listeners
+  sendBtn.addEventListener('click', () => {
+    if (userInput.value.trim() === '') return;
+    processInput(userInput.value);
+    userInput.value = '';
+    userInput.focus();
+  });
+  userInput.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendBtn.click();
+    }
+  });
+  // Initial greeting
+  window.onload = () => {
+    addMessage('Hello! I am your Site Supervisor AI Coach. Ask me about safety, scheduling, equipment, or team issues.');
+  };
+</script>
+</body>
+</html>