Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WeShield Incident Report</title>
  
  <style>
    /* STEP 1: Reset default browser styles and set up page layout */
    * {
      box-sizing: border-box; /* Makes width calculations include padding and border */
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      background: #f5f5f5;
      padding: 10px; /* Small padding around the whole page */
    }

    /* STEP 2: Container structure - now fully responsive */
    #weshield-wrapper {
      width: 100%; /* Takes full width available */
      max-width: 450px; /* But won't exceed 450px on large screens */
      margin: 0 auto; /* Centers the widget horizontally */
      border: 1px solid #ddd;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
      display: flex;
      flex-direction: column;
      /* Changed: Now uses viewport height minus padding for mobile */
      height: calc(100vh - 20px); /* Full screen height minus padding */
      max-height: 700px; /* But won't exceed 700px on large screens */
    }
    
    /* STEP 3: Header styling */
    #weshield-header {
      background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
      color: #fff;
      padding: 16px;
      font-size: 1.2em;
      font-weight: 600;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      flex-shrink: 0; /* Prevents header from shrinking */
    }
    
    /* STEP 4: Chat container - the main conversation area */
    #weshield-chat-container {
      flex: 1; /* Takes up all remaining space */
      display: flex;
      flex-direction: column;
      background: #fafafa;
      overflow: hidden; /* Prevents content from overflowing */
    }
    
    /* STEP 5: Messages area - where conversation appears */
    #weshield-chat-messages {
      flex: 1;
      padding: 16px;
      overflow-y: auto; /* Allows scrolling when messages overflow */
      display: flex;
      flex-direction: column;
      gap: 8px; /* Space between messages */
      /* Smooth scrolling on iOS */
      -webkit-overflow-scrolling: touch;
    }
    
    /* STEP 6: Input form at the bottom */
    #weshield-chat-form {
      display: flex;
      border-top: 1px solid #e0e0e0;
      background: #fff;
      flex-shrink: 0; /* Prevents form from shrinking */
      padding: 8px;
      gap: 8px; /* Space between input and button */
    }
    
    #weshield-chat-input {
      flex: 1;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 20px; /* Rounded like modern chat apps */
      outline: none;
      font-size: 16px; /* 16px prevents zoom on iOS when focusing */
      transition: border-color 0.2s;
    }
    
    #weshield-chat-input:focus {
      border-color: #007bff; /* Blue border when active */
    }
    
    #weshield-chat-submit {
      background: #007bff;
      color: #fff;
      border: none;
      padding: 12px 20px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      transition: background 0.2s;
      /* Better touch target for mobile */
      min-width: 70px;
    }
    
    #weshield-chat-submit:hover {
      background: #0056b3;
    }
    
    #weshield-chat-submit:active {
      background: #004085; /* Darker when pressed */
    }

    /* STEP 7: Message bubble styles */
    .weshield-bot-msg,
    .weshield-user-msg {
      max-width: 85%; /* Takes up most of the width but not all */
      padding: 10px 14px;
      border-radius: 18px;
      line-height: 1.5;
      word-wrap: break-word;
      animation: fadeInUp 0.3s ease-out;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .weshield-bot-msg {
      background: #e3f2fd; /* Light blue for bot */
      align-self: flex-start; /* Aligns to left */
      border-bottom-left-radius: 4px; /* Sharp corner on bottom-left */
    }
    
    .weshield-user-msg {
      background: #007bff; /* Blue for user */
      color: #fff;
      align-self: flex-end; /* Aligns to right */
      border-bottom-right-radius: 4px; /* Sharp corner on bottom-right */
    }
    
    /* Smooth fade-in animation for messages */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* STEP 8: Loading indicator (shows while processing) */
    .weshield-loading {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #999;
      margin: 0 2px;
      animation: loading 1.4s infinite ease-in-out both;
    }
    
    .weshield-loading:nth-child(1) {
      animation-delay: -0.32s;
    }
    
    .weshield-loading:nth-child(2) {
      animation-delay: -0.16s;
    }
    
    @keyframes loading {
      0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
      }
      40% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* STEP 9: Mobile-specific optimizations */
    @media (max-width: 480px) {
      body {
        padding: 0; /* Remove padding on very small screens */
      }
      
      #weshield-wrapper {
        border-radius: 0; /* Remove rounded corners for full-screen feel */
        height: 100vh; /* Full viewport height */
        max-height: none; /* Remove max-height restriction */
      }
      
      #weshield-header {
        padding: 14px;
        font-size: 1.1em;
      }
      
      .weshield-bot-msg,
      .weshield-user-msg {
        max-width: 90%; /* Slightly wider bubbles on mobile */
      }
    }
    
    /* STEP 10: Error message styling */
    .weshield-error-msg {
      background: #ffebee;
      color: #c62828;
      padding: 10px 14px;
      border-radius: 18px;
      align-self: flex-start;
      max-width: 85%;
      animation: shake 0.4s ease-out;
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }
  </style>
</head>
<body>

<div id="weshield-wrapper">
  <div id="weshield-header">WeShield Incident Report</div>
  <div id="weshield-chat-container">
    <div id="weshield-chat-messages"></div>
    <form id="weshield-chat-form" onsubmit="weshieldHandleInput(event)">
      <input 
        id="weshield-chat-input" 
        type="text" 
        placeholder="Type your answer…" 
        autocomplete="off"
        aria-label="Chat input"
      />
      <button id="weshield-chat-submit" type="submit" aria-label="Send message">Send</button>
    </form>
  </div>
</div>

<script>
  /* ====================================
     CONFIGURATION SECTION
     ==================================== */
  
  // Define all the questions we'll ask the user
  const weshieldQuestions = [
    { 
      key: 'name', 
      text: 'What is your name?', 
      required: true 
    },
    {
      key: 'email',
      text: 'What is your email address?',
      validate: v => /\S+@\S+\.\S+/.test(v), // Checks if it looks like an email
      error: 'Please provide a valid email address (e.g., name@example.com).',
      required: true
    },
    { 
      key: 'phone', 
      text: 'What is your phone number?', 
      required: true 
    },
    {
      key: 'date',
      text: 'On what date did the incident occur? (Format: YYYY-MM-DD, e.g., 2024-03-15)',
      validate: v => {
        // Check format and that it's not a future date
        if (!/^\d{4}-\d{2}-\d{2}$/.test(v)) return false;
        const date = new Date(v);
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        return date <= today;
      },
      error: 'Please use YYYY-MM-DD format and ensure the date is not in the future.',
      required: true
    },
    { 
      key: 'locationType', 
      text: 'Where did it happen? (e.g., Online, Workplace, School, Street, Public Transit)', 
      required: true 
    },
    {
      key: 'address',
      text: 'If you know the exact address or a nearby landmark, please share it. (Type "skip" if you prefer not to answer)',
      required: false
    },
    {
      key: 'reason',
      text: 'What do you believe motivated this incident? (e.g., Racism, Antisemitism, Islamophobia, Sexism, Homophobia, Other)',
      required: false
    },
    {
      key: 'description',
      text: 'Please describe what happened in as much detail as you feel comfortable sharing. Include what was said or done, who was involved, and any other relevant information.',
      required: true
    },
    {
      key: 'witnesses',
      text: 'Were there any witnesses? If yes, do you know their names or how to contact them? (Type "skip" if not applicable)',
      required: false
    }
  ];

  /* ====================================
     STATE MANAGEMENT
     ==================================== */
  
  let weshieldCurrentQ = 0; // Tracks which question we're on
  let weshieldResponses = {}; // Stores all user answers

  /* ====================================
     MESSAGE DISPLAY FUNCTIONS
     ==================================== */
  
  // Function to show a bot message
  function weshieldAppendBot(text) {
    const msgDiv = document.createElement('div');
    msgDiv.className = 'weshield-bot-msg';
    msgDiv.textContent = text;
    document.getElementById('weshield-chat-messages').appendChild(msgDiv);
    weshieldScrollToBottom();
  }
  
  // Function to show a user message
  function weshieldAppendUser(text) {
    const msgDiv = document.createElement('div');
    msgDiv.className = 'weshield-user-msg';
    msgDiv.textContent = text;
    document.getElementById('weshield-chat-messages').appendChild(msgDiv);
    weshieldScrollToBottom();
  }
  
  // Function to show an error message
  function weshieldAppendError(text) {
    const msgDiv = document.createElement('div');
    msgDiv.className = 'weshield-error-msg';
    msgDiv.textContent = text;
    document.getElementById('weshield-chat-messages').appendChild(msgDiv);
    weshieldScrollToBottom();
  }
  
  // Function to show a loading indicator
  function weshieldShowLoading() {
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'weshield-bot-msg';
    loadingDiv.id = 'weshield-loading-indicator';
    loadingDiv.innerHTML = '<span class="weshield-loading"></span><span class="weshield-loading"></span><span class="weshield-loading"></span>';
    document.getElementById('weshield-chat-messages').appendChild(loadingDiv);
    weshieldScrollToBottom();
  }
  
  // Function to remove the loading indicator
  function weshieldHideLoading() {
    const loading = document.getElementById('weshield-loading-indicator');
    if (loading) loading.remove();
  }
  
  // Auto-scroll to show the latest message
  function weshieldScrollToBottom() {
    const chatBox = document.getElementById('weshield-chat-messages');
    // Use setTimeout to ensure the scroll happens after the DOM updates
    setTimeout(() => {
      chatBox.scrollTop = chatBox.scrollHeight;
    }, 100);
  }

  /* ====================================
     CONVERSATION LOGIC
     ==================================== */
  
  // Function to ask the next question
  function weshieldAskNext() {
    // Check if we've asked all questions
    if (weshieldCurrentQ >= weshieldQuestions.length) {
      weshieldSubmitReport();
      return;
    }
    
    const currentQuestion = weshieldQuestions[weshieldCurrentQ];
    
    // Add a small delay so it feels more natural (like a real person typing)
    setTimeout(() => {
      weshieldAppendBot(currentQuestion.text);
    }, 500);
  }
  
  // Function to handle user's typed input
  function weshieldHandleInput(event) {
    event.preventDefault(); // Prevents the form from refreshing the page
    
    const inputField = document.getElementById('weshield-chat-input');
    const userInput = inputField.value.trim(); // Get text and remove extra spaces
    
    // Don't do anything if the input is empty
    if (!userInput) return;

    // Show what the user typed
    weshieldAppendUser(userInput);
    inputField.value = ''; // Clear the input field

    // Allow user to cancel at any time
    if (userInput.toLowerCase() === 'cancel') {
      weshieldAppendBot('Okay, the report has been cancelled. If you change your mind, refresh the page to start over. Thank you for considering reporting.');
      document.getElementById('weshield-chat-form').style.display = 'none';
      return;
    }

    const currentQuestion = weshieldQuestions[weshieldCurrentQ];

    // If the user types "skip" and the question is optional, move to next question
    if (userInput.toLowerCase() === 'skip' && !currentQuestion.required) {
      weshieldResponses[currentQuestion.key] = '';
      weshieldCurrentQ++;
      weshieldAskNext();
      return;
    }
    
    // If the question has a validation rule, check if the answer is valid
    if (currentQuestion.validate && !currentQuestion.validate(userInput)) {
      weshieldAppendError(currentQuestion.error || 'Invalid input. Please try again.');
      return; // Don't move to next question, ask again
    }
    
    // Store the answer and move to the next question
    weshieldResponses[currentQuestion.key] = userInput;
    weshieldCurrentQ++;
    weshieldAskNext();
  }

  /* ====================================
     SUBMISSION LOGIC
     ==================================== */
  
  // Function to submit the complete report
  async function weshieldSubmitReport() {
    weshieldAppendBot('Thank you for sharing this information. I\'m now submitting your report...');
    weshieldShowLoading();
    
    // Add timestamp
    weshieldResponses.submittedAt = new Date().toISOString();
    
    // PLACEHOLDER: AI Classification
    // In a real implementation, you would call an AI API here
    async function classifyDescription(text) {
      // This is where you'd integrate with an AI service
      // For now, it just returns a placeholder
      await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate API delay
      return 'Pending Review';
    }
    
    try {
      const aiResult = await classifyDescription(weshieldResponses.description || '');
      weshieldResponses.aiClassification = aiResult;
      
      // IMPORTANT: Replace this URL with your actual backend endpoint
      // This could be a Google Apps Script, Firebase, or any other backend
      const BACKEND_URL = 'YOUR_APPS_SCRIPT_WEBAPP_URL';
      
      const response = await fetch(BACKEND_URL, {
        method: 'POST',
        body: JSON.stringify(weshieldResponses),
        headers: { 'Content-Type': 'application/json' }
      });
      
      weshieldHideLoading();
      
      const result = await response.json();
      
      if (result.success) {
        weshieldAppendBot('✓ Your report has been successfully recorded. Someone from our team will review it soon. Thank you for speaking up and helping make our community safer.');
      } else {
        weshieldAppendError('There was an error submitting your report. Please try again later or contact us directly.');
      }
    } catch (error) {
      console.error('Submission error:', error);
      weshieldHideLoading();
      weshieldAppendError('Submission failed due to a network error. Please check your connection and try again later.');
    }
    
    // Disable the input form after submission
    document.getElementById('weshield-chat-form').style.display = 'none';
  }

  /* ====================================
     INITIALIZATION
     ==================================== */
  
  // Start the conversation when the page loads
  function weshieldInit() {
    // Initial welcome messages
    setTimeout(() => {
      weshieldAppendBot("Hello! I'm here to help you report a hate or discrimination incident.");
    }, 300);
    
    setTimeout(() => {
      weshieldAppendBot("Your information will be kept confidential. You can type 'cancel' at any time to stop.");
    }, 1000);
    
    setTimeout(() => {
      weshieldAppendBot("Let's begin...");
    }, 1800);
    
    // Start asking questions
    setTimeout(() => {
      weshieldAskNext();
    }, 2500);
  }
  
  // Make sure the page is fully loaded before starting
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', weshieldInit);
  } else {
    weshieldInit();
  }
</script>

</body>
</html>