-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (159 loc) · 11.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITIL Ticket Analyzer (beta)</title>
<script defer src="https://umami.techray.dev/script.js" data-website-id="28c621ee-76d6-4c0f-9d23-bc3856da073a"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<!-- Welcome Modal -->
<div id="welcomeModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white p-8 rounded-lg shadow-xl max-w-md w-full">
<h2 class="text-2xl font-bold mb-4">Welcome to ITIL Ticket Analyzer</h2>
<p class="mb-6">This app is intended to provide general information and may contain inaccuracies. By using this app, you agree to our Terms of Service and Privacy Policy.</p>
<div class="flex justify-between">
<a href="https://apps.techray.dev/itil/terms/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800">Terms of Service</a>
<a href="https://apps.techray.dev/itil/privacy" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800">Privacy Policy</a>
</div>
<button id="acceptButton" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
I Understand
</button>
</div>
</div>
<div class="flex-grow flex items-center justify-center p-4">
<div class="content-width">
<div class="bg-white rounded-lg custom-shadow overflow-hidden">
<header>
<div class="logo-container">
<img src="logo.webp" alt="ITIL Ticket Analyzer Logo" class="logo-image">
</div>
</header>
<main class="p-8">
<div class="mb-6">
<button id="toggleInstructions" class="w-full bg-blue-100 hover:bg-blue-200 text-blue-800 font-semibold py-2 px-4 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<i class="fas fa-info-circle mr-2"></i>How to Use
</button>
<div id="instructions" class="instructions hidden mt-4 bg-blue-50 p-4 rounded-md text-blue-800">
<h3 class="font-bold mb-2">Instructions:</h3>
<ol class="list-decimal list-inside space-y-2">
<li>Select the number of affected customers and the criticality of the affected device.</li>
<li>Indicate if any of the affected users is a VIP.</li>
<li>Enter a brief summary of the IT issue in the text area below.</li>
<li>Click the "Analyze Ticket" button to process the information.</li>
<li>The app will determine the priority level and provide an explanation.</li>
<li>You can print the results or generate an email based on the analysis.</li>
</ol>
<p class="mt-2"><strong>Note:</strong> Be as specific and concise as possible in your issue description for the best results.</p>
</div>
</div>
<div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
<p class="font-bold">Disclaimer:</p>
<p>This app uses AI to help you learn ITIL concepts but may not provide precise results. Please verify important information. Do not enter sensitive data, as third-party AI processing may pose exposure risks.</p>
</div>
<div class="mb-4">
<label for="affectedCustomers" class="block mb-2 font-bold text-gray-700">Number of affected customers:</label>
<select id="affectedCustomers" class="w-full p-2 border-2 border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300">
<option value="">Select an option</option>
<option value="low">Low amount</option>
<option value="medium">Medium amount</option>
<option value="high">High amount</option>
</select>
</div>
<div class="mb-4">
<label for="deviceCriticality" class="block mb-2 font-bold text-gray-700">Criticality of affected device:</label>
<select id="deviceCriticality" class="w-full p-2 border-2 border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300">
<option value="">Select an option</option>
<option value="non-critical">Non-critical</option>
<option value="critical">Critical</option>
<option value="very-critical">Very critical</option>
</select>
</div>
<div class="mb-4">
<label for="vipAffected" class="block mb-2 font-bold text-gray-700">Is a VIP user affected?</label>
<select id="vipAffected" class="w-full p-2 border-2 border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300">
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<h3 class="text-xl font-bold mb-2 text-gray-700">Issue Description</h3>
<textarea id="ticketSummary" class="w-full h-40 p-4 border-2 border-blue-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300" placeholder="Be as specific and concise as possible in your issue description for the best results. (10 word min.)"></textarea>
<button id="analyzeButton" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transform hover:scale-105">
Analyze Ticket
</button>
<div id="spinner" class="hidden mt-6 text-center">
<i class="fas fa-circle-notch fa-spin text-blue-500 text-5xl"></i>
</div>
<div id="result" class="hidden mt-8 fade-in">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-blue-800">Analysis Result:</h2>
<div id="priorityResult" class="mb-6"></div>
<h3 class="text-xl sm:text-2xl font-bold mb-4 text-blue-700">Explanation:</h3>
<div id="explanation" class="bg-gray-50 p-6 rounded-md border-l-4 border-blue-500">
<div class="input-parameters hidden"></div>
<div class="explanation-content"></div>
</div>
<div class="mt-6 flex space-x-4">
<button id="printButton" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
Print Results
</button>
<button id="writeEmailButton" class="hidden bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 blink">
Write E-mail
</button>
<button id="resetButton" class="hidden bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
Reset
</button>
</div>
<div id="ratingSystem" class="mt-8">
<h3 class="text-xl font-bold mb-4 text-blue-700">Rate these results:</h3>
<div class="star-rating flex">
<span class="star" data-rating="1">★</span>
<span class="star" data-rating="2">★</span>
<span class="star" data-rating="3">★</span>
<span class="star" data-rating="4">★</span>
<span class="star" data-rating="5">★</span>
</div>
<p id="ratingMessage" class="mt-2 text-gray-600"></p>
</div>
</div>
</main>
</div>
</div>
</div>
<footer class="w-full py-4 text-center text-gray-600 flex flex-col sm:flex-row justify-center items-center">
<a href="https://techray.dev" target="_blank" rel="noopener noreferrer" class="hover:text-blue-600 transition duration-300">
©2024 TechRay Apps LLC
</a>
<div class="footer-links mt-2 sm:mt-0 sm:ml-4">
<a href="https://apps.techray.dev/itil/terms/" target="_blank" rel="noopener noreferrer" class="hover:text-blue-600 transition duration-300">
Terms & Conditions
</a>
<span class="mx-2">|</span>
<a href="https://apps.techray.dev/itil/privacy" target="_blank" rel="noopener noreferrer" class="hover:text-blue-600 transition duration-300">
Privacy Policy
</a>
</div>
</footer>
<div id="emailModal" class="modal">
<div class="modal-content rounded-lg">
<h2 class="text-2xl font-bold mb-4">Generated E-mail</h2>
<div id="emailContent" class="bg-gray-50 p-4 rounded-md"></div>
<div class="mt-4 flex justify-between items-center">
<button id="closeModal" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Close
</button>
<button id="copyEmail" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
<i class="fas fa-copy mr-2"></i>Copy to Clipboard
</button>
</div>
</div>
</div>
<script src="https://js.puter.com/v2/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
<script src="script.js"></script>
</body>
</html>