| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>AI HR Ticket Generator</title> |
| |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| <style> |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| body { |
| font-family: 'Roboto', Arial, sans-serif; |
| background: #f5f5f5; |
| display: flex; justify-content: center; padding: 20px; |
| } |
| .chat-container { |
| width: 100%; max-width: 600px; |
| background: #fff; border-radius: 8px; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| display: flex; flex-direction: column; overflow: hidden; |
| } |
| .chat-header { |
| background: #6200ea; color: #fff; padding: 16px; |
| display: flex; align-items: center; font-size: 1.2rem; |
| } |
| .chat-header .material-icons { margin-right: 8px; } |
| .messages { |
| flex: 1; padding: 16px; display: flex; |
| flex-direction: column; gap: 12px; overflow-y: auto; |
| } |
| .message { |
| max-width: 80%; padding: 12px 16px; |
| border-radius: 24px; line-height: 1.4; |
| word-wrap: break-word; |
| } |
| .bot { background: #e0e0e0; align-self: flex-start; } |
| .user { background: #6200ea; color: #fff; align-self: flex-end; } |
| .input-area { |
| padding: 12px 16px; border-top: 1px solid #ddd; |
| display: flex; gap: 8px; align-items: center; |
| } |
| .input-area input, |
| .input-area select, |
| .input-area textarea { |
| flex: 1; padding: 10px; border: 1px solid #ccc; |
| border-radius: 20px; font-size: 1rem; outline: none; |
| } |
| .input-area button { |
| background: #6200ea; border: none; color: #fff; |
| border-radius: 50%; width: 48px; height: 48px; |
| display: flex; align-items: center; justify-content: center; |
| cursor: pointer; font-size: 1.5rem; |
| } |
| .summary { |
| background: #f1f3f5; padding: 20px; border-radius: 8px; |
| margin: 16px; text-align: center; |
| } |
| .summary h3 { margin-bottom: 12px; color: #333; } |
| .summary pre { |
| text-align: left; white-space: pre-wrap; |
| background: #fff; padding: 12px; border-radius: 4px; |
| } |
| @media (max-width:480px) { |
| .chat-header { font-size:1rem; padding:12px; } |
| .input-area button { width:40px; height:40px; font-size:1.2rem; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="chat-container"> |
| <div class="chat-header"> |
| <span class="material-icons">support_agent</span> |
| AI HR Ticket Generator |
| </div> |
| <div class="messages" id="chatBox"> |
| <div class="message bot">Hi! 👋 Let's create your HR ticket.</div> |
| </div> |
| <div class="input-area" id="inputArea"></div> |
| </div> |
|
|
| <form id="chatForm" action="/generate" method="post" style="display:none;"> |
| <input type="hidden" name="firstName" id="firstNameField"> |
| <input type="hidden" name="lastName" id="lastNameField"> |
| <input type="hidden" name="email" id="emailField"> |
| <input type="hidden" name="issue" id="issueField"> |
| <input type="hidden" name="priority" id="priorityField"> |
| <input type="hidden" name="date" id="dateField"> |
| </form> |
|
|
| {% if ticket %} |
| <div class="summary"> |
| <h3>✅ Your Ticket has been Generated:</h3> |
| <pre>{{ ticket }}</pre> |
| <a href="/download/{{ session_id }}"><button style="margin-top:12px;">Download as PDF</button></a> |
| <p><a href="/tickets">📄 View Submitted Tickets</a></p> |
| </div> |
| {% endif %} |
|
|
| <script> |
| const questions = [ |
| { label:"What is your first name?", field:"firstName", type:"text" }, |
| { label:"What is your last name?", field:"lastName", type:"text" }, |
| { label:"What is your email address?", field:"email", type:"email" }, |
| { label:"Describe the issue you're facing.", field:"issue", type:"textarea" }, |
| { label:"Select priority:", field:"priority", type:"select", options:["High","Medium","Low"] }, |
| { label:"What is the date of the issue?", field:"date", type:"date" } |
| ]; |
| |
| let current = 0; |
| const responses = {}; |
| const chatBox = document.getElementById("chatBox"); |
| const inputArea = document.getElementById("inputArea"); |
| const form = document.getElementById("chatForm"); |
| |
| function addMessage(text, cls="bot") { |
| const msg=document.createElement("div"); |
| msg.className=`message ${cls}`; msg.textContent=text; |
| chatBox.appendChild(msg); |
| chatBox.scrollTop = chatBox.scrollHeight; |
| } |
| |
| function showInput(q) { |
| inputArea.innerHTML=""; |
| let inp; |
| if(q.type==="select") { |
| inp=document.createElement("select"); |
| q.options.forEach(o=>{ |
| const opt=document.createElement("option"); |
| opt.value=opt.text=o; inp.appendChild(opt); |
| }); |
| } else if(q.type==="textarea") { |
| inp=document.createElement("textarea"); inp.rows=3; |
| } else { |
| inp=document.createElement("input"); inp.type=q.type; |
| } |
| inp.id="userInput"; inputArea.appendChild(inp); |
| |
| const btn=document.createElement("button"); |
| btn.innerHTML='<span class="material-icons">arrow_forward</span>'; |
| btn.onclick=e=>{ |
| e.preventDefault(); |
| const v=inp.value.trim(); if(!v) return; |
| responses[q.field]=v; addMessage(v,"user"); |
| current++; |
| if(current < questions.length) nextQuestion(); |
| else showSummary(); |
| }; |
| inputArea.appendChild(btn); |
| inp.focus(); |
| } |
| |
| function nextQuestion() { |
| addMessage(questions[current].label,"bot"); |
| setTimeout(()=>showInput(questions[current]), 300); |
| } |
| |
| function showSummary() { |
| addMessage("Here's your ticket. Confirm to submit.","bot"); |
| const sum=` |
| Name: ${responses.firstName} ${responses.lastName} |
| Email: ${responses.email} |
| Priority: ${responses.priority} |
| Date: ${responses.date} |
| Issue: ${responses.issue}`.trim(); |
| addMessage(sum,"bot"); |
| |
| const btn=document.createElement("button"); |
| btn.textContent="✅ Submit Ticket"; |
| btn.onclick=e=>{ |
| e.preventDefault(); |
| Object.keys(responses).forEach(k=> |
| document.getElementById(k+"Field").value=responses[k] |
| ); |
| form.submit(); |
| }; |
| inputArea.innerHTML=""; inputArea.appendChild(btn); |
| } |
| |
| window.onload = nextQuestion; |
| </script> |
| </body> |
| </html> |
|
|
