Alph4Centauri/email-summerization-ui
0
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=Edge">6 <meta name="viewport" content="width=device-width, initial-scale=1">7 <title>Email Summarizer</title>8 <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>9 10 <style>11 * { box-sizing: border-box; }12 13 body {14 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;15 margin: 20px;16 background-color: #fafbfc;17 color: #2d3748;18 line-height: 1.5;19 }20 21 .container {22 max-width: 600px;23 margin: 0 auto;24 padding: 30px;25 background: #ffffff;26 border: 1px solid #e2e8f0;27 border-radius: 8px;28 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);29 }30 31 .header {32 margin-bottom: 30px;33 }34 35 .header h2 {36 margin: 0 0 10px 0;37 font-size: 24px;38 font-weight: 600;39 color: #4a5568;40 }41 42 .header p {43 margin: 0;44 color: #718096;45 font-size: 14px;46 }47 48 .summary-options {49 margin: 20px 0;50 }51 52 .summary-options label, .parsing-label {53 display: block;54 margin-bottom: 8px;55 font-weight: 500;56 font-size: 14px;57 color: #4a5568;58 }59 60 .parsing-label-small {61 display: block;62 margin: 15px 0 8px;63 font-weight: 500;64 font-size: 13px;65 color: #4a5568;66 }67 68 .summary-dropdown {69 width: 100%;70 padding: 10px;71 border: 1px solid #cbd5e0;72 border-radius: 6px;73 font-size: 14px;74 background: white;75 color: #2d3748;76 }77 78 .summary-dropdown:focus {79 outline: none;80 border-color: #667eea;81 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);82 }83 84 .parsing-options {85 margin: 20px 0;86 padding: 20px;87 background: #f7fafc;88 border: 1px solid #e2e8f0;89 border-radius: 8px;90 }91 92 .checkbox-group, .radio-group {93 margin: 10px 0;94 }95 96 .checkbox-item, .radio-item {97 display: flex;98 align-items: center;99 margin: 8px 0;100 cursor: pointer;101 font-size: 14px;102 color: #4a5568;103 transition: color 0.2s;104 }105 106 .checkbox-item:hover, .radio-item:hover {107 color: #667eea;108 }109 110 .checkbox-item input, .radio-item input {111 margin-right: 8px;112 accent-color: #667eea;113 }114 115 .radio-item {116 font-size: 13px;117 margin: 5px 0;118 }119 120 .attachment-options, .section-options {121 margin-left: 15px;122 padding-left: 15px;123 border-left: 2px solid #a0aec0;124 }125 126 .disabled {127 opacity: 0.5;128 pointer-events: none;129 }130 131 .button-container {132 text-align: center;133 margin: 20px 0;134 }135 136 .summarize-btn {137 background: #667eea;138 color: white;139 border: none;140 padding: 12px 30px;141 font-size: 14px;142 cursor: pointer;143 border-radius: 6px;144 transition: background 0.3s;145 }146 147 .summarize-btn:hover {148 background: #5a67d8;149 }150 151 .summarize-btn:disabled {152 background: #a0aec0;153 cursor: not-allowed;154 }155 156 .loading {157 text-align: center;158 color: #718096;159 display: none;160 margin: 20px 0;161 font-size: 14px;162 }163 164 .loading-spinner {165 border: 2px solid #e2e8f0;166 border-top: 2px solid #667eea;167 border-radius: 50%;168 width: 20px;169 height: 20px;170 animation: spin 1s linear infinite;171 margin: 0 auto 10px;172 }173 174 @keyframes spin {175 0% { transform: rotate(0deg); }176 100% { transform: rotate(360deg); }177 }178 179 .summary-container {180 display: none;181 margin-top: 20px;182 }183 184 .summary-header {185 display: flex;186 justify-content: space-between;187 align-items: center;188 margin-bottom: 10px;189 }190 191 .summary-title {192 font-weight: 600;193 font-size: 16px;194 color: #4a5568;195 }196 197 .copy-btn {198 background: #48bb78;199 color: white;200 border: none;201 padding: 8px 16px;202 cursor: pointer;203 font-size: 12px;204 border-radius: 4px;205 transition: background 0.3s;206 }207 208 .copy-btn:hover {209 background: #38a169;210 }211 212 .summary-content {213 border: 1px solid #e2e8f0;214 padding: 15px;215 background: #f7fafc;216 white-space: pre-wrap;217 line-height: 1.6;218 max-height: 400px;219 overflow-y: auto;220 font-size: 14px;221 color: #2d3748;222 border-radius: 6px;223 }224 225 .info-bar {226 background: #ebf4ff;227 border-left: 3px solid #667eea;228 padding: 10px;229 margin: 10px 0;230 font-size: 12px;231 color: #2d3748;232 border-radius: 0 4px 4px 0;233 display: none;234 }235 236 .error-message {237 background: #fed7d7;238 border-left: 3px solid #f56565;239 padding: 10px;240 margin: 10px 0;241 color: #c53030;242 font-size: 12px;243 border-radius: 0 4px 4px 0;244 display: none;245 }246 247 .success-message {248 background: #c6f6d5;249 border-left: 3px solid #48bb78;250 padding: 10px;251 margin: 10px 0;252 color: #2f855a;253 font-size: 12px;254 border-radius: 0 4px 4px 0;255 display: none;256 }257 </style>258</head>259 260<body>261 <div class="container">262 <div class="header">263 <h2>Email & Document Summarizer</h2>264 <p>Get summaries of your emails and attachments</p>265 </div>266 267 <div class="summary-options">268 <label for="summary-type">Summary Style:</label>269 <select id="summary-type" class="summary-dropdown">270 <option value="long">Detailed Summary</option>271 <option value="bullets">Bullet Points</option>272 <option value="action">Action Items</option>273 </select>274 </div>275 276 <div class="parsing-options">277 <label class="parsing-label">Content to Summarize:</label>278 <div class="checkbox-group">279 <label class="checkbox-item">280 <input type="checkbox" id="include-email" checked>281 Email Body282 </label>283 <label class="checkbox-item">284 <input type="checkbox" id="include-attachments" checked>285 Attachments286 </label>287 </div>288 289 <div class="attachment-options" id="attachment-options">290 <label class="parsing-label-small">Attachment Processing:</label>291 <div class="radio-group">292 <label class="radio-item">293 <input type="radio" name="attachment-mode" value="combined" checked>294 All attachments together295 </label>296 <label class="radio-item">297 <input type="radio" name="attachment-mode" value="separate">298 Each attachment separately299 </label>300 </div>301 </div>302 303 <div class="section-options" id="section-options">304 <label class="parsing-label-small">Output Format:</label>305 <div class="radio-group">306 <label class="radio-item">307 <input type="radio" name="output-mode" value="combined" checked>308 Single combined summary309 </label>310 <label class="radio-item">311 <input type="radio" name="output-mode" value="sections">312 Separate sections313 </label>314 </div>315 </div>316 </div>317 318 <div class="button-container">319 <button id="summarize-btn" class="summarize-btn">320 Generate Summary321 </button>322 </div>323 324 <div id="loading" class="loading">325 <div class="loading-spinner"></div>326 <p>Processing content...</p>327 </div>328 329 <div id="info-bar" class="info-bar"></div>330 <div id="error-message" class="error-message"></div>331 <div id="success-message" class="success-message"></div>332 333 <div id="summary-container" class="summary-container">334 <div class="summary-header">335 <div class="summary-title">336 Summary:337 </div>338 <button id="copy-btn" class="copy-btn">339 Copy340 </button>341 </div>342 <div id="summary-content" class="summary-content"></div>343 </div>344 </div>345 346 <script src="taskpane.js"></script>347</body>348</html>