Image for an AI Agent
Prompt
The user wants to render your response in an iframe that will render the response in a web browser. If you use any external libraries, your answer should include the full HTML in the same code block. This includes any <script> or <link> tags. Do not mention the iframe in your response. user : generate an The image is a clean, modern, slightly futuristic diagram-style illustration, not a photograph. It's split into two panels, connected by a central flow of light or data. Left Panel (The Input - The Problem): Represents the "before" state. It shows a stylized, slightly chaotic Jira ticket queue. Tickets are represented as different colored and shaped cards (some for bugs, features, requests) flowing in. A few are highlighted with yellow caution symbols or question marks, indicating the challenge of manual classification. Central "Engine" (The Agent - Our Solution): In the middle, acting as a powerful processor, is a sleek, complex core. This represents the "MCO Support AI System." It's visualized as a intricate, luminous neural network or a series of interlocking gears made of light and code. Data streams from the left panel flow into this core. A prominent, clean "94%" is displayed on or above this engine, glowing with a confident blue or green light. Right Panel (The Output - The Impact): Representing the "after" state. The stream of tickets now flows out of the engine into three neat, clearly labeled lanes or channels (e.g., "Bug Fix," "Feature Request," "Data Inquiry"). The lanes are color-coded and organized. A small checkmark icon sits on most tickets, with one or two having a gentle "flag" icon, visually acknowledging the high accuracy while being transparent about the margin of error. This panel feels orderly, efficient, and resolved. Overall Vibe: Professional, intelligent, and impactful. It uses a palette of dark blues/blacks (for a "lab" feel) with accents of energizing green (success) and orange/yellow (intelligence/action). It doesn't look like science fiction; it looks like a sophisticated diagram of a system we built and that is delivering real, measurable value.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI System Diagram</title>
<!-- External Libraries: Google Fonts & Font Awesome -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* --- Base Styles & CSS Variables --- */
:root {
--bg-color: #0a192f;
--text-color: #ccd6f6;
--accent-green: #64ffda;
--accent-blue: #57b1ff;
--accent-orange: #ffb764;
--light-slate: #8892b0;
--slate: #a8b2d1;
--panel-bg: #112240;
--border-color: #1d355e;
}
/* Animate conic-gradient angle */
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: var(--bg-color);
font-family: 'Poppins', sans-serif;
color: var(--text-color);
display: flex;
align-items: center;
justify-content: center;
}
/* --- Main Diagram Layout --- */
.diagram-container {
display: grid;
grid-template-columns: 1fr 280px 1fr;
align-items: stretch;
width: 95%;
max-width: 1400px;
height: 75vh;
max-height: 600px;
gap: 0px;
}
.center-column {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* --- Panels (Left & Right) --- */
.panel {
background-color: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px -15px rgba(2,12,27,0.7);
}
.panel-header {
text-align: center;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 15px;
}
.panel-header h3 {
font-family: 'Roboto Mono', monospace;
color: var(--accent-green);
font-size: 14px;
margin: 0 0 5px 0;
font-weight: 400;
}
.panel-header h2 {
margin: 0;
font-size: 1.4rem;
color: var(--slate);
}
/* --- Left Panel: Chaotic Queue --- */
.left-panel .ticket-queue {
position: relative;
flex-grow: 1;
animation: fadeIn 1s ease-out forwards;
}
.ticket {
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.ticket.chaotic {
position: absolute;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
width: 150px;
animation: float 8s ease-in-out infinite;
}
.ticket.chaotic i { color: yellow; opacity: 0.9; }
.ticket.bug { background-color: #e67e22; color: #fff; }
.ticket.feature { background-color: #3498db; color: #fff; }
.ticket.request { background-color: #9b59b6; color: #fff; }
.ticket.chaotic:nth-child(1) { top: 10%; left: 20%; transform: rotate(-5deg); animation-delay: 0s; }
.ticket.chaotic:nth-child(2) { top: 30%; left: 55%; transform: rotate(8deg); animation-delay: -1s; }
.ticket.chaotic:nth-child(3) { top: 5%; left: 60%; transform: rotate(3deg); animation-delay: -2s; }
.ticket.chaotic:nth-child(4) { top: 60%; left: 15%; transform: rotate(-10deg); animation-delay: -3s; }
.ticket.chaotic:nth-child(5) { top: 80%; left: 40%; transform: rotate(5deg); animation-delay: -4s; }
.ticket.chaotic:nth-child(6) { top: 45%; left: 5%; transform: rotate(12deg); animation-delay: -5s; }
/* --- Central Engine & Flow --- */
.engine-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 250px;
z-index: 5;
}
.engine-core {
width: 180px;
height: 180px;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2.5s infinite ease-in-out;
}
.engine-core::before, .engine-core::after {
content: '';
position: absolute;
border-radius: 50%;
inset: 0;
}
.engine-core::before {
background: radial-gradient(circle, rgba(87,177,255,0.3) 0%, rgba(87,177,255,0) 70%);
animation: fadeIn 2s ease-out forwards;
}
.engine-core::after {
background: conic-gradient(from var(--angle), transparent 20%, var(--accent-blue), transparent 60%);
animation: spin 6s linear infinite;
}
.accuracy-display {
position: absolute;
font-size: 3.5rem;
font-weight: bold;
color: var(--accent-green);
text-shadow: 0 0 10px var(--accent-green), 0 0 25px var(--accent-green);
opacity: 0;
animation: fadeInScale 1.5s 1.5s ease-out forwards;
}
.engine-label {
position: absolute;
bottom: 10px;
font-family: 'Roboto Mono', monospace;
font-size: 14px;
color: var(--accent-blue);
text-shadow: 0 0 5px rgba(87,177,255,0.5);
text-align: center;
letter-spacing: 1px;
opacity: 0;
animation: fadeIn 1s 2s ease-out forwards;
}
.data-flow {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.flow-line {
position: absolute;
height: 3px;
left: 50%;
top: 50%;
transform-origin: left center;
}
.flow-line::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, var(--color), transparent);
background-size: 40% 100%;
background-repeat: no-repeat;
opacity: 0;
animation: flow 1.8s ease-in-out infinite, fadeIn 0.5s ease forwards;
}
.flow-in {
--color: var(--accent-orange);
width: 50%;
transform: translateX(-100%) scaleX(-1);
animation-delay: 1.2s, 1.2s;
}
.flow-out-1 {
--color: var(--accent-green);
width: 50%;
transform: rotate(-20deg);
animation-delay: 3s, 3s;
}
.flow-out-2 {
--color: var(--accent-green);
width: 50%;
transform: rotate(0deg);
animation-delay: 3.1s, 3.1s;
}
.flow-out-3 {
--color: var(--accent-green);
width: 50%;
transform: rotate(20deg);
animation-delay: 3.2s, 3.2s;
}
.flow-in::before, .flow-out-1::before, .flow-out-2::before, .flow-out-3::before {
animation-delay: inherit;
}
/* --- Right Panel: Organized Lanes --- */
.right-panel .lanes-container {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 15px;
justify-content: space-around;
}
.lane {
border-left: 2px solid var(--border-color);
padding-left: 15px;
}
.lane h4 {
margin: 0 0 12px 0;
font-size: 14px;
color: var(--slate);
position: relative;
}
.lane h4::before {
content: '';
position: absolute;
left: -19px;
top: 50%;
transform: translateY(-50%);
height: 10px;
width: 10px;
border-radius: 50%;
background-color: var(--lane-color);
}
#lane-bug { --lane-color: #e67e22; }
#lane-feature { --lane-color: #3498db; }
#lane-data { --lane-color: #9b59b6; }
.organized-tickets {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ticket.organized {
position: static;
opacity: 0;
width: auto;
flex-grow: 1;
min-width: 120px;
animation: fadeIn 0.5s ease-out forwards;
justify-content: space-between;
}
.ticket.organized i.fa-check-circle { color: var(--accent-green); text-shadow: 0 0 5px var(--accent-green);}
.ticket.organized i.fa-flag { color: var(--accent-orange); text-shadow: 0 0 5px var(--accent-orange);}
/* Staggered animation delays for organized tickets */
.lane:nth-of-type(1) .organized:nth-of-type(1) { animation-delay: 4.0s; }
.lane:nth-of-type(1) .organized:nth-of-type(2) { animation-delay: 4.2s; }
.lane:nth-of-type(2) .organized:nth-of-type(1) { animation-delay: 4.1s; }
.lane:nth-of-type(2) .organized:nth-of-type(2) { animation-delay: 4.3s; }
.lane:nth-of-type(3) .organized:nth-of-type(1) { animation-delay: 4.0s; }
.lane:nth-of-type(3) .organized:nth-of-type(2) { animation-delay: 4.4s; }
/* --- Keyframe Animations --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(87,177,255, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(87,177,255, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(87,177,255, 0); }
}
@keyframes spin { to { --angle: 360deg; } }
@keyframes float {
0% { transform: translateY(0px) rotate(-5deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(-5deg); }
}
@keyframes flow {
from { background-position: -100% 0; }
to { background-position: 200% 0; }
}
</style>
</head>
<body>
<div class="diagram-container">
<!-- LEFT PANEL (INPUT) -->
<div class="panel left-panel">
<div class="panel-header">
<h3>INPUT</h3>
<h2>Chaotic Ticket Queue</h2>
</div>
<div class="ticket-queue">
<div class="ticket chaotic bug">
<span>[MCO-1138]</span> <i class="fa-solid fa-question-circle"></i>
</div>
<div class="ticket chaotic feature">
<span>[MCO-998]</span>
</div>
<div class="ticket chaotic request">
<span>[MCO-1201]</span> <i class="fa-solid fa-exclamation-triangle"></i>
</div>
<div class="ticket chaotic bug">
<span>[MCO-1055]</span>
</div>
<div class="ticket chaotic request">
<span>[MCO-1198]</span> <i class="fa-solid fa-question-circle"></i>
</div>
<div class="ticket chaotic feature">
<span>[MCO-1210]</span>
</div>
</div>
</div>
<!-- CENTRAL COLUMN (ENGINE & FLOW) -->
<div class="center-column">
<div class="engine-container">
<div class="engine-core"></div>
<div class="accuracy-display">94%</div>
<div class="engine-label">MCO Support AI System</div>
</div>
<div class="data-flow">
<div class="flow-line flow-in"></div>
<!-- Splitting flow to match lane positions -->
<div class="flow-line flow-out-1"></div>
<div class="flow-line flow-out-2"></div>
<div class="flow-line flow-out-3"></div>
</div>
</div>
<!-- RIGHT PANEL (OUTPUT) -->
<div class="panel right-panel">
<div class="panel-header">
<h3>OUTPUT</h3>
<h2>Organized & Classified</h2>
</div>
<div class="lanes-container">
<div class="lane" id="lane-bug">
<h4>Bug Fix</h4>
<div class="organized-tickets">
<div class="ticket bug organized"><span>[MCO-1138]</span><i class="fa-solid fa-check-circle"></i></div>
<div class="ticket bug organized"><span>[MCO-1055]</span><i class="fa-solid fa-check-circle"></i></div>
</div>
</div>
<div class="lane" id="lane-feature">
<h4>Feature Request</h4>
<div class="organized-tickets">
<div class="ticket feature organized"><span>[MCO-998]</span><i class="fa-solid fa-check-circle"></i></div>
<div class="ticket feature organized"><span>[MCO-1210]</span><i class="fa-solid fa-flag"></i></div>
</div>
</div>
<div class="lane" id="lane-data">
<h4>Data Inquiry</h4>
<div class="organized-tickets">
<div class="ticket request organized"><span>[MCO-1201]</span><i class="fa-solid fa-check-circle"></i></div>
<div class="ticket request organized"><span>[MCO-1198]</span><i class="fa-solid fa-check-circle"></i></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```Drag to resize
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="1200" height="800">
<defs>
<linearGradient id="glow" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#00ffaa" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#0066ff" stop-opacity="0.4"/>
</linearGradient>
<filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
<!-- Background -->
<rect width="100%" height="100%" fill="#0a0a1a"/>
<!-- Left Panel (Input) -->
<g transform="translate(100,200)">
<text x="0" y="-30" fill="#fff" font-family="Arial" font-size="24">Input: Chaotic Jira Queue</text>
<!-- Tickets -->
<g transform="translate(0,0)">
<rect x="0" y="0" width="120" height="80" rx="5" fill="#ff6b6b" opacity="0.8"/>
<rect x="150" y="40" width="120" height="80" rx="5" fill="#48dbfb" opacity="0.8"/>
<rect x="300" y="-20" width="120" height="80" rx="5" fill="#1dd1a1" opacity="0.8"/>
<circle cx="60" cy="40" r="15" fill="#ffdd00" opacity="0.9"/>
<path d="M45 35h30v10H45z" fill="#333"/>
</g>
</g>
<!-- Central Engine -->
<g transform="translate(600,400)">
<circle cx="0" cy="0" r="80" fill="url(#glow)" filter="url(#blur)"/>
<circle cx="0" cy="0" r="60" fill="none" stroke="#00ffaa" stroke-width="2"/>
<text x="0" y="10" fill="#fff" font-family="Arial" font-size="32" text-anchor="middle">94%</text>
<!-- Data Streams -->
<path d="M-200,0 Q-100,50 0,0" stroke="#00ffaa" fill="none" stroke-width="3"/>
<path d="M200,0 Q100,50 0,0" stroke="#00ffaa" fill="none" stroke-width="3"/>
</g>
<!-- Right Panel (Output) -->
<g transform="translate(900,200)">
<text x="0" y="-30" fill="#fff" font-family="Arial" font-size="24">Output: Organized Workflow</text>
<!-- Lanes -->
<g transform="translate(0,0)">
<rect x="0" y="0" width="150" height="200" fill="none" stroke="#48dbfb" stroke-width="2"/>
<text x="75" y="30" fill="#48dbfb" font-family="Arial" font-size="18" text-anchor="middle">Bug Fix</text>
<rect x="0" y="250" width="150" height="200" fill="none" stroke="#1dd1a1" stroke-width="2"/>
<text x="75" y="280" fill="#1dd1a1" font-family="Arial" font-size="18" text-anchor="middle">Feature Request</text>
<rect x="0" y="500" width="150" height="200" fill="none" stroke="#ff6b6b" stroke-width="2"/>
<text x="75" y="530" fill="#ff6b6b" font-family="Arial" font-size="18" text-anchor="middle">Data Inquiry</text>
</g>
<!-- Tickets in Lanes -->
<g transform="translate(-120,50)">
<rect x="0" y="0" width="100" height="60" rx="5" fill="#48dbfb"/>
<rect x="0" y="80" width="100" height="60" rx="5" fill="#48dbfb"/>
<path d="M40 30h20v10H40z" fill="#333"/>
</g>
<g transform="translate(-120,300)">
<rect x="0" y="0" width="100" height="60" rx="5" fill="#1dd1a1"/>
<rect x="0" y="80" width="100" height="60" rx="5" fill="#1dd1a1"/>
<path d="M40 30h20v10H40z" fill="#333"/>
</g>
<g transform="translate(-120,550)">
<rect x="0" y="0" width="100" height="60" rx="5" fill="#ff6b6b"/>
<rect x="0" y="80" width="100" height="60" rx="5" fill="#ff6b6b"/>
<path d="M40 30h20v10H40z" fill="#333"/>
</g>
</g>
</svg>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MCO Support AI System: Challenge & Solution Diagram</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600,400&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(120deg, #101622 0%, #192436 100%);
color: #fff;
font-family: 'Montserrat', Arial, sans-serif;
overflow: hidden;
}
.diagram-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
height: 100vh;
width: 100vw;
padding: 40px 60px;
box-sizing: border-box;
}
.panel {
background: rgba(18,25,41, 0.96);
border-radius: 22px;
margin: 0 18px;
flex: 1.15;
position: relative;
padding: 38px 28px 38px 28px;
box-shadow: 0 6px 38px rgba(20, 30, 45, 0.48);
display: flex;
flex-direction: column;
justify-content: center;
min-width: 310px;
max-width: 440px;
z-index: 1;
}
.panel-label {
font-size: 1.1rem;
letter-spacing: 0.04em;
font-weight: 600;
color: #74fe92;
margin-bottom: 18px;
opacity: .92;
}
.tickets-flow-in,
.tickets-flow-out {
position: absolute;
left: 98%;
top: 50%;
width: 44px;
height: 0;
z-index: 0;
pointer-events: none;
}
.tickets-flow-in {
left: 99%;
}
.tickets-flow-out {
right: 99%;
left: auto;
transform: scaleX(-1);
}
.jira-tickets {
min-height: 280px;
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
}
.jira-ticket {
width: 112px;
height: 34px;
border-radius: 9px;
margin-left: 0;
display: flex;
align-items: center;
padding: 0 11px;
font-size: 16px;
font-weight: 600;
color: #131923;
box-shadow: 0 2px 10px 1px rgba(20,30,35,0.18);
position: relative;
cursor: default;
transition: transform 0.18s;
user-select: none;
}
/* Different ticket colorings for bugs, request, feature */
.jira-bug { background: linear-gradient(105deg, #ffe080 60%, #ffd553 100%);}
.jira-feature { background: linear-gradient(105deg, #8becf3 60%, #3ce7e6 100%);}
.jira-request { background: linear-gradient(105deg, #e3a6ff 60%, #a66df7 100%);}
/* Highlighted tickets */
.jira-highlight {
border: 2.5px solid #ffe254;
box-shadow: 0 0 18px 2px rgba(255,232,80,0.13);
}
.jira-icon {
margin-right: 6px;
font-size: 1.1em;
line-height: 0;
}
.jira-warning {
color: #e7b42d;
margin-left: 8px;
font-size: 1.15em;
}
/* Central Engine */
.engine-center {
width: 370px;
height: 420px;
background: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: .9;
position: relative;
z-index: 2;
margin-top: 25px;
margin-bottom: 15px;
}
.ai-engine-graphics {
position: relative;
width: 255px;
height: 250px;
margin-bottom: 18px;
}
.ai-engine-glow {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%,-50%);
width: 230px;
height: 230px;
border-radius: 50%;
background: radial-gradient(ellipse at 55% 40%, #3ebfe1e0 0px, #223a5cff 90%);
opacity: 0.63;
filter: blur(12px);
z-index: 1;
}
.neural-network-svg {
position: absolute;
top: 0; left: 0; width: 255px; height: 250px;
z-index: 2;
pointer-events: none;
}
.ai-engine-core {
position: absolute;
left: 50%; top: 52%;
width: 88px; height: 88px;
border-radius: 50%;
background: linear-gradient(119deg, #09e698 45%, #2493f7 100%);
box-shadow: 0 0 36px 6px #2bfec9cc, 0 0 60px 18px #2477e3bb;
border: 4px solid #eef8fb12;
transform: translate(-50%,-50%);
z-index: 4;
display: flex; align-items: center; justify-content: center;
}
.engine-label {
color: #6ffe99;
background: rgba(20, 30, 50, 0.23);
font-weight: 700;
letter-spacing: 0.09em;
font-size: .99em;
border-radius: 7px;
padding: 2px 11px;
margin-top: 16px;
margin-bottom: 12px;
text-align: center;
display: inline-block;
}
.accuracy {
display: flex; align-items: center; justify-content: center;
font-size: 2.94em;
font-weight: 800;
color: #20f08e;
position: absolute;
left: 50%; top: -38px; transform: translateX(-50%);
text-shadow: 0 3px 25px #0ecf89bb, 0 2px 6px #0e2b47cc;
letter-spacing: -0.04em;
background: rgba(11, 31, 55, 0.38);
padding: 4px 22px 4px 18px;
border-radius: 1.5em;
border: 2.5px solid #2786ffe0;
z-index: 16;
box-shadow: 0 0 15px 0 #3fecff61;
}
.accuracy-label {
font-size: 0.67em;
letter-spacing: 0.06em;
color: #a0eae0;
margin-left: 12px;
margin-top: 9px;
opacity: 0.67;
}
/* Output */
.output-ticket-flows {
display: flex;
flex-direction: row;
gap: 12px;
margin-top: 25px;
align-items: flex-start;
justify-content: center;
min-height: 250px;
height: 100%;
}
.output-lane {
background: linear-gradient(108deg, #1d283d 70%, #102852 110%);
border-radius: 15px;
flex: 1;
min-width: 88px;
margin: 0 6px;
padding: 18px 4px 14px 4px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
box-shadow: 0 2px 19px 2px #17336e26;
/* color bar */
border-bottom: 4.5px solid #26e475;
}
.output-lane.bug {
border-bottom-color: #ffe359;
}
.output-lane.feature {
border-bottom-color: #59effa;
}
.output-lane.data {
border-bottom-color: #c17bfa;
}
.output-lane-label {
color: #20e89d;
font-size: 1em;
font-weight: 700;
letter-spacing: 0.07em;
margin-bottom: 10px;
margin-top: 6px;
opacity: 0.94;
background: #12244055;
padding: 2px 11px 2.5px 11px;
border-radius: 7px;
white-space: nowrap;
}
.output-lane.bug .output-lane-label {
color: #ffe359;
background: #2d2d0e33;
}
.output-lane.feature .output-lane-label {
color: #26effa;
background: #08303927;
}
.output-lane.data .output-lane-label {
color: #c889fe;
background: #220d2f2a;
}
.output-ticket {
width: 93px;
height: 24px;
border-radius: 7px;
margin-bottom: 12px;
margin-top: 2px;
background: #16243bfc;
display: flex;
align-items: center;
padding: 0 9px;
font-size: 0.98em;
font-weight: 500;
color: #ebfefa;
position: relative;
box-shadow: 0 1px 7px 0.5px #1bd28d10;
border: 1.5px solid transparent;
transition: border 0.17s;
}
.output-ticket.bug {
border-color: #ffe35999;
}
.output-ticket.feature {
border-color: #37e4ffcc;
}
.output-ticket.data {
border-color: #a66fff99;
}
.output-check {
font-size: 1.09em;
color: #19ff75;
margin-left: 8px;
}
.output-flag {
font-size: 1.09em;
color: #ffc559;
margin-left: 8px;
}
.branding {
position: absolute; right: 32px; bottom: 15px;
font-size: 1em; color: #257ab9; opacity: .52;
font-family: monospace;
font-weight: 500;
display: flex; align-items: center;
user-select: none;
z-index: 30;
letter-spacing: 0.05em;
}
@media (max-width: 1200px) {
.diagram-container { flex-direction: column; padding: 15px 0; }
.panel, .engine-center { min-width: unset !important; max-width: 99vw; width: 99vw; }
.engine-center { height: 260px; }
}
@media (max-width: 800px) {
.ai-engine-graphics { width: 180px; height: 160px; }
.engine-center { width: 240px; height: 230px; }
.engine-label { font-size: 0.87em; }
.accuracy { font-size: 2.1em; }
.panel { padding: 24px 5px 24px 14px;; }
}
</style>
</head>
<body>
<div class="diagram-container">
<!-- Input Panel -->
<div class="panel" style="z-index:3;">
<div class="panel-label">Input: Jira Ticket Queue</div>
<div class="jira-tickets">
<div class="jira-ticket jira-bug jira-highlight">
<span class="jira-icon">🐞</span> Login Bug
<span class="jira-warning" title="Hard to classify">⚠️</span>
</div>
<div class="jira-ticket jira-feature">
<span class="jira-icon">✨</span> Add Export CSV
</div>
<div class="jira-ticket jira-request">
<span class="jira-icon">📊</span> Report Metrics?
<span class="jira-warning" title="Uncertain classification">❓</span>
</div>
<div class="jira-ticket jira-bug">
<span class="jira-icon">🐞</span> UI Glitch
</div>
<div class="jira-ticket jira-feature jira-highlight">
<span class="jira-icon">✨</span> Mobile Auth
<span class="jira-warning" title="Manual classification needed">⚠️</span>
</div>
<div class="jira-ticket jira-request">
<span class="jira-icon">📊</span> API Throttle
</div>
</div>
<!-- Animated flow lines into the engine -->
<svg class="tickets-flow-in" height="130" width="44" style="z-index:6;">
<defs>
<linearGradient id="ticket-flow-left" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fbea68"/>
<stop offset="75%" stop-color="#1beed6"/>
</linearGradient>
<filter id="glow" x="-70%" y="-70%" width="300%" height="300%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path d="M8,20 Q23,60 37,116" stroke="url(#ticket-flow-left)" stroke-width="7" fill="none" filter="url(#glow)"/>
</svg>
</div>
<!-- Center Engine -->
<div class="engine-center">
<div class="accuracy">94% <span class="accuracy-label">Classification Accuracy</span></div>
<div class="ai-engine-graphics">
<span class="ai-engine-glow"></span>
<svg class="neural-network-svg" width="255" height="250" viewBox="0 0 255 250">
<g opacity="0.93">
<!-- Outer ring "code gears" -->
<ellipse
cx="127.5" cy="125"
rx="100" ry="98"
fill="none"
stroke="#23e5a1" stroke-width="7"
stroke-dasharray="16,22"
opacity="0.28"/>
<!-- Data flows (light beams) -->
<path d="M60,125 Q128,72 195,125" stroke="#43f6e1" stroke-width="2.5" fill="none" opacity="0.4"/>
<path d="M60,125 Q128,178 195,125" stroke="#4ca3ff" stroke-width="2.5" fill="none" opacity="0.35"/>
<!-- Neural nodes and connectors -->
<circle cx="68" cy="64" r="14" fill="#0dfc9b" opacity="0.65"/>
<circle cx="127.5" cy="39" r="10" fill="#41ffe6" opacity="0.56"/>
<circle cx="187" cy="64" r="14" fill="#0ee7e7" opacity="0.52"/>
<circle cx="68" cy="185" r="12" fill="#ffea8a" opacity="0.51"/>
<circle cx="127.5" cy="211" r="10.5" fill="#13f769" opacity="0.42"/>
<circle cx="187" cy="185" r="11.5" fill="#faff8e" opacity="0.44"/>
<line x1="68" y1="64" x2="127.5" y2="39" stroke="#27e1ab" stroke-width="2.6" opacity="0.24"/>
<line x1="127.5" y1="39" x2="187" y2="64" stroke="#27e1ab" stroke-width="2.6" opacity="0.24"/>
<line x1="68" y1="185" x2="127.5" y2="211" stroke="#27e1ab" stroke-width="2.6" opacity="0.24"/>
<line x1="127.5" y1="211" x2="187" y2="185" stroke="#27e1ab" stroke-width="2.6" opacity="0.24"/>
<line x1="127.5" y1="39" x2="127.5" y2="211" stroke="#24bbfe" stroke-width="3" opacity="0.22"/>
<!-- More connections -->
<line x1="68" y1="64" x2="68" y2="185" stroke="#2eface" stroke-width="3" opacity="0.25"/>
<line x1="187" y1="64" x2="187" y2="185" stroke="#37befe" stroke-width="3" opacity="0.23"/>
<!-- Inner glow core -->
<circle cx="127.5" cy="125" r="47" fill="url(#enginecoregrad)" opacity="0.71"/>
<defs>
<radialGradient id="enginecoregrad" cx="50%" cy="50%" r="100%">
<stop offset="20%" stop-color="#2bfec9"/>
<stop offset="75%" stop-color="#0c1c26"/>
<stop offset="100%" stop-color="#14233e" />
</radialGradient>
</defs>
</g>
</svg>
<span class="ai-engine-core"></span>
</div>
<div class="engine-label"> MCO Support AI System </div>
<!-- Data flow lines to Right panel -->
<svg class="tickets-flow-out" height="130" width="44">
<defs>
<linearGradient id="ticket-flow-right" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#13fca9"/>
<stop offset="100%" stop-color="#33bbff"/>
</linearGradient>
</defs>
<path d="M8,20 Q23,60 37,116" stroke="url(#ticket-flow-right)" stroke-width="7" fill="none" filter="url(#glow)"/>
</svg>
</div>
<!-- Output Panel -->
<div class="panel" style="z-index:3;">
<div class="panel-label">Output: Automated Ticket Routing</div>
<div class="output-ticket-flows">
<div class="output-lane bug">
<div class="output-lane-label">Bug Fix</div>
<div class="output-ticket bug">🐞 Login Bug <span class="output-check" title="Classified OK">✔️</span></div>
<div class="output-ticket bug">🐞 UI Glitch <span class="output-check" title="Classified OK">✔️</span></div>
</div>
<div class="output-lane feature">
<div class="output-lane-label">Feature Request</div>
<div class="output-ticket feature">✨ Add Export CSV <span class="output-check" title="Classified OK">✔️</span></div>
<div class="output-ticket feature">✨ Mobile Auth <span class="output-check" title="Classified OK">✔️</span></div>
</div>
<div class="output-lane data">
<div class="output-lane-label">Data Inquiry</div>
<div class="output-ticket data">📊 Report Metrics <span class="output-flag" title="Low confidence">🚩</span></div>
<div class="output-ticket data">📊 API Throttle <span class="output-check" title="Classified OK">✔️</span></div>
</div>
</div>
</div>
</div>
<div class="branding">
Ⓜ️ MCO Support AI System — Impact in Action
</div>
</body>
</html>
```
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCO Support AI System Diagram</title>
<style>
body {
background-color: #0a0a1e; /* Dark blue/black */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
svg {
width: 100%;
max-width: 1200px;
height: auto;
}
</style>
</head>
<body>
<svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="1200" height="400" fill="#0a0a1e" />
<!-- Left Panel: Input - The Problem -->
<rect x="0" y="0" width="400" height="400" fill="#1a1a3a" stroke="#00ff99" stroke-width="2" />
<text x="100" y="30" fill="#ffffff" font-size="20" font-weight="bold">Input: The Problem</text>
<!-- Chaotic tickets -->
<rect x="50" y="100" width="80" height="50" fill="#ffcc00" rx="5" transform="rotate(-10 90 125)" /> <!-- Yellow card -->
<text x="60" y="125" fill="#000" font-size="14" transform="rotate(-10 90 125)">Bug</text>
<circle cx="110" cy="110" r="10" fill="#ffff00" transform="rotate(-10 90 125)" /> <!-- Caution symbol -->
<text x="105" y="115" fill="#000" font-size="12" transform="rotate(-10 90 125)">!</text>
<rect x="150" y="150" width="80" height="50" fill="#ff6600" rx="5" transform="rotate(15 190 175)" /> <!-- Orange card -->
<text x="160" y="175" fill="#fff" font-size="14" transform="rotate(15 190 175)">Feature</text>
<text x="210" y="165" fill="#ffff00" font-size="20" transform="rotate(15 190 175)">?</text>
<rect x="100" y="220" width="80" height="50" fill="#00ccff" rx="5" transform="rotate(-5 140 245)" /> <!-- Blue card -->
<text x="110" y="245" fill="#000" font-size="14" transform="rotate(-5 140 245)">Request</text>
<rect x="250" y="80" width="80" height="50" fill="#ff99cc" rx="5" transform="rotate(10 290 105)" /> <!-- Pink card -->
<text x="260" y="105" fill="#000" font-size="14" transform="rotate(10 290 105)">Inquiry</text>
<circle cx="310" cy="90" r="10" fill="#ffff00" transform="rotate(10 290 105)" />
<text x="305" y="95" fill="#000" font-size="12" transform="rotate(10 290 105)">!</text>
<!-- Central Engine: MCO Support AI System -->
<rect x="400" y="0" width="400" height="400" fill="#0a0a1e" stroke="#00ff99" stroke-width="2" />
<text x="500" y="30" fill="#ffffff" font-size="20" font-weight="bold">MCO Support AI System</text>
<!-- Neural network / gears visualization -->
<circle cx="600" cy="200" r="80" fill="none" stroke="#00ff99" stroke-width="4" stroke-dasharray="5,5" />
<circle cx="600" cy="200" r="60" fill="none" stroke="#00cc66" stroke-width="3" />
<circle cx="550" cy="150" r="30" fill="none" stroke="#ffcc00" stroke-width="2" />
<circle cx="650" cy="150" r="30" fill="none" stroke="#ffcc00" stroke-width="2" />
<circle cx="550" cy="250" r="30" fill="none" stroke="#ffcc00" stroke-width="2" />
<circle cx="650" cy="250" r="30" fill="none" stroke="#ffcc00" stroke-width="2" />
<line x1="600" y1="200" x2="550" y2="150" stroke="#00ff99" stroke-width="2" />
<line x1="600" y1="200" x2="650" y2="150" stroke="#00ff99" stroke-width="2" />
<line x1="600" y1="200" x2="550" y2="250" stroke="#00ff99" stroke-width="2" />
<line x1="600" y1="200" x2="650" y2="250" stroke="#00ff99" stroke-width="2" />
<!-- 94% display -->
<rect x="570" y="50" width="60" height="40" fill="#00cc66" rx="5" />
<text x="575" y="75" fill="#ffffff" font-size="24" font-weight="bold">94%</text>
<!-- Data flow from left to center -->
<path d="M400 200 Q450 180 500 200 Q550 220 600 200" fill="none" stroke="#ffcc00" stroke-width="10" stroke-opacity="0.5" />
<path d="M400 150 Q450 130 500 150 Q550 170 600 150" fill="none" stroke="#00ff99" stroke-width="8" stroke-opacity="0.5" />
<path d="M400 250 Q450 230 500 250 Q550 270 600 250" fill="none" stroke="#ff6600" stroke-width="6" stroke-opacity="0.5" />
<!-- Right Panel: Output - The Impact -->
<rect x="800" y="0" width="400" height="400" fill="#1a1a3a" stroke="#00ff99" stroke-width="2" />
<text x="900" y="30" fill="#ffffff" font-size="20" font-weight="bold">Output: The Impact</text>
<!-- Organized lanes -->
<rect x="820" y="60" width="100" height="300" fill="#003366" rx="5" /> <!-- Bug Fix lane -->
<text x="835" y="80" fill="#ffffff" font-size="14">Bug Fix</text>
<rect x="830" y="100" width="80" height="40" fill="#00ccff" rx="3" />
<text x="840" y="125" fill="#000" font-size="12">Ticket</text>
<path d="M870 110 L875 115 L880 105" fill="none" stroke="#00ff99" stroke-width="3" /> <!-- Checkmark -->
<rect x="830" y="150" width="80" height="40" fill="#00ccff" rx="3" />
<text x="840" y="175" fill="#000" font-size="12">Ticket</text>
<path d="M870 160 L875 165 L880 155" fill="none" stroke="#00ff99" stroke-width="3" />
<rect x="940" y="60" width="100" height="300" fill="#004d00" rx="5" /> <!-- Feature Request lane -->
<text x="945" y="80" fill="#ffffff" font-size="14">Feature Request</text>
<rect x="950" y="100" width="80" height="40" fill="#ff6600" rx="3" />
<text x="960" y="125" fill="#fff" font-size="12">Ticket</text>
<path d="M990 110 L995 115 L1000 105" fill="none" stroke="#00ff99" stroke-width="3" />
<rect x="950" y="150" width="80" height="40" fill="#ff6600" rx="3" />
<text x="960" y="175" fill="#fff" font-size="12">Ticket</text>
<rect x="990" y="160" width="10" height="20" fill="#ffcc00" /> <!-- Flag -->
<rect x="1060" y="60" width="100" height="300" fill="#663300" rx="5" /> <!-- Data Inquiry lane -->
<text x="1065" y="80" fill="#ffffff" font-size="14">Data Inquiry</text>
<rect x="1070" y="100" width="80" height="40" fill="#ffcc00" rx="3" />
<text x="1080" y="125" fill="#000" font-size="12">Ticket</text>
<path d="M1110 110 L1115 115 L1120 105" fill="none" stroke="#00ff99" stroke-width="3" />
<rect x="1070" y="150" width="80" height="40" fill="#ffcc00" rx="3" />
<text x="1080" y="175" fill="#000" font-size="12">Ticket</text>
<path d="M1110 160 L1115 165 L1120 155" fill="none" stroke="#00ff99" stroke-width="3" />
<!-- Data flow from center to right -->
<path d="M800 200 Q750 180 700 200 Q650 220 600 200" fill="none" stroke="#ffcc00" stroke-width="10" stroke-opacity="0.5" transform="scale(-1,1) translate(-1200,0)" />
<path d="M800 150 Q750 130 700 150 Q650 170 600 150" fill="none" stroke="#00ff99" stroke-width="8" stroke-opacity="0.5" transform="scale(-1,1) translate(-1200,0)" />
<path d="M800 250 Q750 230 700 250 Q650 270 600 250" fill="none" stroke="#ff6600" stroke-width="6" stroke-opacity="0.5" transform="scale(-1,1) translate(-1200,0)" />
</svg>
</body>
</html>
```Drag to resize
Here is a simple HTML representation of your detailed illustration description.
```html
<!DOCTYPE html>
<html>
<head>
<title>MCO Support AI System Diagram</title>
<style>
body {
background-color: #2f4f7f; /* dark blue background */
font-family: Arial, sans-serif;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 800px;
margin: 50px auto;
}
.panel {
background-color: #1a1d23; /* dark panel background */
padding: 20px;
border-radius: 10px;
width: 300px;
}
.left-panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ticket {
width: 50px;
height: 50px;
margin: 5px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.bug {
background-color: #ff3737; /* red for bugs */
}
.feature {
background-color: #34c759; /* green for features */
}
.request {
background-color: #007bff; /* blue for requests */
}
.caution {
border: 2px solid yellow;
}
.engine {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 150px;
margin: 0 20px;
}
.neural-network {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100px;
}
.node {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 2px;
}
.accuracy {
font-size: 24px;
color: #34c759; /* green for accuracy */
font-weight: bold;
margin-top: 10px;
}
.right-panel {
display: flex;
flex-direction: column;
}
.lane {
background-color: #444;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.lane-header {
color: #fff;
font-weight: bold;
margin-bottom: 5px;
}
.ticket-out {
background-color: #fff;
padding: 5px;
border-radius: 5px;
margin-bottom: 5px;
}
.checkmark {
color: #34c759; /* green for checkmark */
}
.flag {
color: #ff3737; /* red for flag */
}
</style>
</head>
<body>
<div class="container">
<div class="panel left-panel">
<div class="ticket bug caution">B</div>
<div class="ticket feature">F</div>
<div class="ticket request caution">R</div>
<div class="ticket bug">B</div>
<div class="ticket feature caution">F</div>
<div class="ticket request">R</div>
</div>
<div class="engine">
<div class="neural-network">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="accuracy">94%</div>
</div>
<div class="panel right-panel">
<div class="lane">
<div class="lane-header">Bug Fix</div>
<div class="ticket-out"><span class="checkmark">✓</span> Ticket 1</div>
<div class="ticket-out"><span class="checkmark">✓</span> Ticket 2</div>
</div>
<div class="lane">
<div class="lane-header">Feature Request</div>
<div class="ticket-out"><span class="checkmark">✓</span> Ticket 3</div>
<div class="ticket-out"><span class="flag">&flag;</span> Ticket 4</div>
</div>
<div class="lane">
<div class="lane-header">Data Inquiry</div>
<div class="ticket-out"><span class="checkmark">✓</span> Ticket 5</div>
<div class="ticket-out"><span class="checkmark">✓</span> Ticket 6</div>
</div>
</div>
</div>
</body>
</html>
```
This HTML representation includes a simple diagram illustrating the MCO Support AI System. The diagram is divided into three main parts: the left panel representing the input or the problem, the central engine representing the AI system, and the right panel representing the output or the impact. The illustration uses a palette of dark blues and blacks with accents of green and yellow to convey a professional, intelligent, and impactful vibe.Drag to resize
# MCO Support AI System Diagram
I've created a modern, futuristic diagram illustrating the AI ticketing system described in your requirements. The design features a three-panel visualization split into the "problem, solution, and impact" view with a central data-flow engine.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCO Support AI System Visualization</title>
<style>
:root {
--dark-bg: #0a1620;
--neural-core: #2a9df4;
--success-green: #00d26a;
--action-orange: #ff8a4c;
--caution-yellow: #ffd166;
--bug-color: #ff3b30;
--feature-color: #07c6e6;
--inquiry-color: #9d5bff;
--text-color: #f1f5f9;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: var(--dark-bg);
color: var(--text-color);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
.container {
width: 1200px;
max-width: 95%;
text-align: center;
padding: 20px 10px;
}
h1 {
font-weight: 400;
font-size: 2.4rem;
margin-bottom: 0.8rem;
letter-spacing: -0.5px;
background: linear-gradient(to right, #f1f5f9, #b3d5ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subtitle {
margin-bottom: 40px;
font-size: 1.1rem;
opacity: 0.83;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.diagram-container {
display: flex;
justify-content: center;
margin: 40px 0;
height: 550px;
position: relative;
z-index: 2;
}
/* Diagram Panels */
.panel {
width: 30%;
height: 500px;
background: rgba(16, 30, 43, 0.8);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
padding: 25px 20px;
position: relative;
overflow: hidden;
backdrop-filter: blur(6px);
z-index: 5;
}
.panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--neural-core);
opacity: 0.6;
}
.panel-left::before { background: linear-gradient(90deg, var(--caution-yellow), var(--action-orange)); }
.panel-right::before { background: linear-gradient(90deg, var(--feature-color), var(--success-green)); }
.panel h2 {
font-size: 1.35rem;
font-weight: 500;
margin-bottom: 24px;
opacity: 0.9;
}
.panel .desc {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
font-size: 0.9rem;
font-weight: 300;
opacity: 0.7;
text-align: left;
}
/* Center Panel & Engine */
.center-panel {
width: 40%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.neural-core {
width: 320px;
height: 320px;
background: radial-gradient(circle at center, #0b1f2f, #050a10);
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 1px rgba(66, 153, 225, 0.15),
0 0 40px 10px rgba(42, 157, 244, 0.2);
z-index: 10;
}
.core-design {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(circle, rgba(42, 157, 244, 0.2) 1px, transparent 2px),
radial-gradient(circle, rgba(42, 157, 244, 0.12) 1px, transparent 3px),
radial-gradient(circle, rgba(42, 157, 244, 0.08) 1px, transparent 4px);
background-size: 70px 70px, 120px 120px, 200px 200px;
animation: rotate 45s infinite linear;
}
.inner-core {
position: absolute;
width: 180px;
height: 180px;
background: radial-gradient(circle, #061220, #0a1620 70%);
border-radius: 50%;
border: 2px solid rgba(42, 157, 244, 0.3);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: 0 0 30px rgba(42, 157, 244, 0.4);
}
.accuracy-percent {
font-size: 3rem;
font-weight: 700;
background: linear-gradient(to bottom, var(--success-green), #52d4c6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 20px rgba(42, 224, 180, 0.3);
}
.core-label {
font-size: 0.9rem;
font-weight: 300;
opacity: 0.8;
margin-top: 5px;
}
@keyframes rotate {
to { transform: rotate(1turn); }
}
.data-flow {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg,
rgba(255, 209, 102, 0.3),
rgba(42, 157, 244, 0.8),
rgba(0, 210, 106, 0.3));
z-index: 1;
}
.data-flow::after,
.data-flow::before {
content: '';
position: absolute;
width: 100px;
height: 150%;
background: rgba(42, 157, 244, 0.1);
border-radius: 50%;
top: -25%;
filter: blur(15px);
}
.data-point {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--neural-core);
z-index: 1;
animation: dataPointFlow 4s linear infinite;
box-shadow: 0 0 12px rgba(42, 157, 244, 0.8);
}
.data-point:nth-child(1) { animation-delay: 0s; top: 30% }
.data-point:nth-child(2) { animation-delay: -0.8s; top: 40% }
.data-point:nth-child(3) { animation-delay: -1.6s; top: 50% }
.data-point:nth-child(4) { animation-delay: -2.4s; top: 35%; background: var(--caution-yellow); }
.data-point:nth-child(5) { animation-delay: -3.2s; top: 45%; background: var(--caution-yellow); }
@keyframes dataPointFlow {
0% {
left: 0;
opacity: 0;
}
10% {
opacity: 1;
transform: scale(1);
}
40% {
background: var(--neural-core);
transform: scale(1.1);
}
60% {
background: var(--success-green);
}
90% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
transform: scale(0.8);
}
}
/* Left Panel - Ticket Queue */
.ticket-queue {
height: 360px;
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.ticket {
width: 90%;
min-height: 55px;
padding: 12px 15px;
border-radius: 8px;
text-align: left;
font-size: 0.9rem;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.ticket:hover {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}
.ticket.bug { background: linear-gradient(45deg, #ff5c49, #ff3b30); }
.ticket.feature { background: linear-gradient(45deg, #2cb1e5, #07c6e6); }
.ticket.request { background: linear-gradient(45deg, #a56afb, #9d5bff); }
.ticket .title {
font-weight: 500;
margin-bottom: 4px;
}
.ticket .info {
font-size: 0.8rem;
opacity: 0.85;
}
.ticket-queue .ticket:nth-child(3) .issue {
animation: pulseCaution 1.4s infinite;
}
.issue {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.caution {
background: var(--caution-yellow);
color: #7c5200;
}
.unknown {
background: #c2c6cf;
color: #383e4d;
}
@keyframes pulseCaution {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
/* Right Panel - Output Lanes */
.lanes {
height: 430px;
display: flex;
flex-direction: column;
gap: 18px;
padding: 10px 0 0;
}
.lane {
position: relative;
width: 100%;
height: 120px;
background: rgba(24, 44, 65, 0.6);
border-radius: 8px;
overflow: hidden;
text-align: center;
}
.lane-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 8px;
font-size: 0.95rem;
font-weight: 500;
z-index: 10;
}
.lane.bug-fix .lane-header { background: rgba(255, 59, 48, 0.15); }
.lane.feature-req .lane-header { background: rgba(7, 198, 230, 0.15); }
.lane.data-inq .lane-header { background: rgba(157, 91, 255, 0.15); }
.clear-icon {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
background: var(--success-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #006611;
font-size: 14px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.flag {
position: absolute;
top: 8px;
right: 38px;
width: 38px;
height: 42px;
display: flex;
flex-direction: column;
justify-content: center;
transform: rotate(-5deg);
font-size: 12px;
background: linear-gradient(to bottom, #ffbd86, #ff8a4c);
clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
opacity: 0.9;
}
.flag::after {
content: '';
position: absolute;
width: 6px;
height: 100%;
background: #ff8a4c;
left: 100%;
top: 0;
}
.tickets-flow {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
display: flex;
gap: 8px;
justify-content: center;
}
.output-ticket {
width: 45px;
height: 45px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0.9;
}
.bug-output { background: var(--bug-color); }
.feature-output { background: var(--feature-color); }
.inquiry-output { background: var(--inquiry-color); }
.completed-icon {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 26px;
background: rgba(0, 210, 106, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--success-green);
font-weight: bold;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<h1>MCO Support AI System</h1>
<p class="subtitle">Automated ticket classification with 94% accuracy improving support efficiency and response times</p>
<div class="diagram-container">
<!-- Left Panel - Input -->
<div class="panel panel-left">
<h2>The Input - Ticket Queue</h2>
<div class="ticket-queue">
<div class="ticket bug">
<div class="title">Login Failure</div>
<div class="info">64 reports, Critical</div>
<div class="issue caution">!</div>
</div>
<div class="ticket feature">
<div class="title">Search Enhancement</div>
<div class="info">UI/UX improvement</div>
</div>
<div class="ticket request">
<div class="title">API Access Issue</div>
<div class="info">Priority: High</div>
<div class="issue caution">!</div>
</div>
<div class="ticket feature">
<div class="title">New Dashboard View</div>
<div class="info">User requested feature</div>
</div>
<div class="ticket request">
<div class="title">Data Export Error</div>
<div class="info">CSV Generation Failure</div>
<div class="issue unknown">?</div>
</div>
</div>
<div class="desc">Chaotic influx of mixed ticket types requiring manual classification</div>
</div>
<!-- Center Panel - Engine -->
<div class="center-panel">
<div class="neural-core">
<div class="core-design"></div>
<div class="inner-core">
<div class="accuracy-percent">94%</div>
<div class="core-label">AI Classification Accuracy</div>
</div>
</div>
<div class="data-flow"></div>
<div class="data-point"></div>
<div class="data-point"></div>
<div class="data-point"></div>
<div class="data-point"></div>
<div class="data-point"></div>
</div>
<!-- Right Panel - Output -->
<div class="panel panel-right">
<h2>The Output - Automated Classification</h2>
<div class="lanes">
<!-- Bug Fix Lane -->
<div class="lane bug-fix">
<div class="lane-header">Bug Fix</div>
<div class="clear-icon">✓</div>
<div class="tickets-flow">
<div class="output-ticket bug-output">#412</div>
<div class="output-ticket bug-output">#428</div>
<div class="output-ticket bug-output">#431</div>
</div>
<div class="completed-icon">✓</div>
</div>
<!-- Feature Request Lane -->
<div class="lane feature-req">
<div class="lane-header">Feature Request</div>
<div class="clear-icon">✓</div>
<div class="tickets-flow">
<div class="output-ticket feature-output">#417</div>
<div class="output-ticket feature-output">#423</div>
</div>
<div class="completed-icon">✓</div>
</div>
<!-- Data Inquiry Lane -->
<div class="lane data-inq">
<div class="lane-header">Data Inquiry</div>
<div class="clear-icon">✓</div>
<div class="flag">Review</div>
<div class="tickets-flow">
<div class="output-ticket inquiry-output">#415</div>
<div class="output-ticket inquiry-output">#421</div>
<div class="output-ticket inquiry-output">#430</div>
<div class="output-ticket inquiry-output">#433</div>
</div>
<div class="completed-icon">✓</div>
</div>
</div>
<div class="desc">Tickets automatically categorized into accurate resolution channels</div>
</div>
</div>
</div>
<script>
// Animation to simulate ticket processing
document.addEventListener('DOMContentLoaded', () => {
const tickets = document.querySelectorAll('.ticket');
const bugFixes = document.querySelector('.bug-fix .tickets-flow');
const featureReqs = document.querySelector('.feature-req .tickets-flow');
const dataInqs = document.querySelector('.data-inq .tickets-flow');
let counter = 100;
function processTicket() {
const ticket = document.querySelector('.ticket-queue .ticket:first-child');
if (ticket) {
ticket.style.opacity = '0';
ticket.style.transform = 'translateX(-20px)';
setTimeout(() => {
ticket.remove();
// Create new ticket at the end
const clone = ticket.cloneNode(true);
clone.style.opacity = '0';
clone.style.transform = 'none';
document.querySelector('.ticket-queue').appendChild(clone);
// Animate in
setTimeout(() => {
clone.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
clone.style.opacity = '1';
}, 10);
// Create corresponding categorized ticket
const output = document.createElement('div');
output.className = 'output-ticket';
if(ticket.classList.contains('bug')) {
output.classList.add('bug-output');
output.textContent = `#${counter++}`;
bugFixes.insertBefore(output, bugFixes.firstChild);
// Remove the oldest if more than 3
if(bugFixes.children.length > 3) {
bugFixes.lastChild.style.opacity = '0';
setTimeout(() => bugFixes.removeChild(bugFixes.lastChild), 300);
}
}
else if(ticket.classList.contains('feature')) {
output.classList.add('feature-output');
output.textContent = `#${counter++}`;
featureReqs.insertBefore(output, featureReqs.firstChild);
// Remove the oldest if more than 2
if(featureReqs.children.length > 2) {
featureReqs.lastChild.style.opacity = '0';
setTimeout(() => featureReqs.removeChild(featureReqs.lastChild), 300);
}
}
else {
output.classList.add('inquiry-output');
output.textContent = `#${counter++}`;
dataInqs.insertBefore(output, dataInqs.firstChild);
// Remove the oldest if more than 4
if(dataInqs.children.length > 4) {
dataInqs.lastChild.style.opacity = '0';
setTimeout(() => dataInqs.removeChild(dataInqs.lastChild), 300);
}
}
setTimeout(() => {
output.style.opacity = '1';
}, 10);
}, 300);
}
}
setInterval(processTicket, 1000);
});
</script>
</body>
</html>
```
## Features of the Visualization
1. **Three Distinct Panels**:
- Input (Problem): Shows a chaotic Jira ticket queue with mixed ticket types
- Processing (Solution): Displays the AI engine as a neural network hub with 94% accuracy
- Output (Impact): Organizes tickets into categorized lanes with resolution status
2. **Visual Elements**:
- Central data flow line with animated points
- Modern neural-core engine with pulsing effects
- Color-coded tickets and lanes (orange/yellow for actions, green for success, blues for technology)
- Caution symbols on problematic or unclear tickets
- Checkmarks on successfully processed tickets
3. **Interactive Elements**:
- Animated ticket processing cycle
- Continuous data stream flow
- Live ticket classification simulation
- Hover animations on tickets
The design uses a dark, modern aesthetic that matches the requested futuristic diagram style while maintaining a professional and technical aesthetic. The color scheme uses blues/blacks with green/orange accents as requested.Drag to resize
To create the described image using HTML, CSS, and a bit of SVG for the graphics, we can put together a simple web page. This example won't perfectly replicate the detailed description due to the limitations of basic web technologies without extensive graphics, but it will give a good starting point.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diagram Illustration</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.diagram-container {
display: flex;
align-items: center;
}
.panel {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
}
.tickets {
display: flex;
flex-wrap: wrap;
width: 200px;
justify-content: center;
}
.ticket {
margin: 5px;
padding: 5px;
border-radius: 5px;
width: 20px;
height: 20px;
}
.bug {
background-color: #ff0000;
}
.feature {
background-color: #00ff00;
}
.request {
background-color: #0000ff;
}
.caution {
position: relative;
}
.caution::after {
content: "";
position: absolute;
top: -5px;
right: -5px;
width: 10px;
height: 10px;
background-color: yellow;
border-radius: 50%;
}
.engine {
margin: 0 20px;
background-color: #444;
padding: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.engine .percentage {
font-size: 24px;
color: #0f0;
}
.output-lanes {
display: flex;
flex-direction: column;
align-items: center;
}
.lane {
display: flex;
align-items: center;
margin: 5px;
padding: 5px;
border-radius: 5px;
width: 200px;
justify-content: space-around;
}
.lane .ticket {
width: 20px;
height: 20px;
}
.checkmark {
color: green;
}
.flag {
color: orange;
}
</style>
</head>
<body>
<div class="diagram-container">
<div class="panel">
<h2>The Input - The Problem</h2>
<div class="tickets">
<div class="ticket bug"></div>
<div class="ticket feature"></div>
<div class="ticket request caution"></div>
<div class="ticket bug"></div>
<div class="ticket feature"></div>
<div class="ticket request"></div>
</div>
</div>
<div class="engine">
<h2>The Agent - Our Solution</h2>
<div style="background-color: #666; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
<!-- Simple representation, could be replaced with a more complex SVG or canvas for better graphics -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="white" stroke-width="3" fill="transparent" />
<circle cx="50" cy="50" r="20" fill="#0f0" />
</svg>
</div>
<span class="percentage">94%</span>
</div>
<div class="panel">
<h2>The Output - The Impact</h2>
<div class="output-lanes">
<div class="lane" style="background-color: #ffcccc;">
<span>Bug Fix</span>
<div class="ticket bug checkmark">✔</div>
<div class="ticket bug checkmark">✔</div>
</div>
<div class="lane" style="background-color: #ccffcc;">
<span>Feature Request</span>
<div class="ticket feature checkmark">✔</div>
<div class="ticket feature flag">⚠</div>
</div>
<div class="lane" style="background-color: #ccccff;">
<span>Data Inquiry</span>
<div class="ticket request checkmark">✔</div>
<div class="ticket request checkmark">✔</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
This example provides a basic representation. For a more sophisticated and detailed illustration that closely matches your description, consider using a professional graphic design tool or a more advanced SVG/canvas implementation in conjunction with JavaScript libraries. Adjustments can be made to better align with the specified color palette and detailed visual elements.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCO Support AI System Flow Diagram</title>
<style>
body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #0a1628 0%, #1a2332 100%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
overflow-x: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.02);
border-radius: 15px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.diagram {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-height: 500px;
}
.panel {
flex: 1;
padding: 20px;
border-radius: 12px;
position: relative;
}
.left-panel {
background: linear-gradient(145deg, rgba(255, 152, 0, 0.1), rgba(255, 193, 7, 0.05));
border: 2px solid rgba(255, 152, 0, 0.3);
}
.right-panel {
background: linear-gradient(145deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.05));
border: 2px solid rgba(76, 175, 80, 0.3);
}
.panel-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.left-panel .panel-title {
color: #ffa726;
}
.right-panel .panel-title {
color: #66bb6a;
}
.tickets {
display: flex;
flex-direction: column;
gap: 10px;
}
.ticket {
padding: 12px 16px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
animation: float 3s ease-in-out infinite;
}
.ticket.bug {
background: linear-gradient(45deg, #f44336, #e53935);
animation-delay: 0s;
}
.ticket.feature {
background: linear-gradient(45deg, #2196f3, #1976d2);
animation-delay: 0.5s;
}
.ticket.request {
background: linear-gradient(45deg, #9c27b0, #7b1fa2);
animation-delay: 1s;
}
.ticket.data {
background: linear-gradient(45deg, #ff9800, #f57c00);
animation-delay: 1.5s;
}
.warning-icon {
color: #ffc107;
font-weight: bold;
}
.question-icon {
color: #ff5722;
font-weight: bold;
}
.check-icon {
color: #4caf50;
font-weight: bold;
}
.flag-icon {
color: #ff9800;
font-weight: bold;
}
.central-engine {
flex: 0 0 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.engine-core {
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(0, 188, 212, 0.8), rgba(0, 150, 136, 0.6), rgba(63, 81, 181, 0.4));
border-radius: 50%;
position: relative;
animation: pulse 2s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid rgba(0, 188, 212, 0.5);
box-shadow: 0 0 50px rgba(0, 188, 212, 0.3);
}
.neural-network {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
}
.node {
position: absolute;
width: 8px;
height: 8px;
background: #00bcd4;
border-radius: 50%;
animation: glow 1.5s ease-in-out infinite alternate;
}
.node:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.node:nth-child(2) { top: 40%; left: 70%; animation-delay: 0.2s; }
.node:nth-child(3) { top: 60%; left: 20%; animation-delay: 0.4s; }
.node:nth-child(4) { top: 80%; left: 60%; animation-delay: 0.6s; }
.node:nth-child(5) { top: 30%; left: 80%; animation-delay: 0.8s; }
.accuracy-display {
font-size: 48px;
font-weight: bold;
color: #4caf50;
text-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
margin-top: 20px;
animation: glow-text 2s ease-in-out infinite alternate;
}
.engine-label {
font-size: 14px;
color: #00bcd4;
text-align: center;
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.flow-line {
position: absolute;
height: 3px;
background: linear-gradient(90deg, transparent, #00bcd4, transparent);
animation: flow 2s linear infinite;
}
.flow-left {
left: -60px;
width: 80px;
top: 50%;
}
.flow-right {
right: -60px;
width: 80px;
top: 50%;
}
.organized-lanes {
display: flex;
flex-direction: column;
gap: 15px;
}
.lane {
padding: 15px;
border-radius: 8px;
border-left: 4px solid;
background: rgba(255, 255, 255, 0.05);
}
.lane.bug-fix {
border-left-color: #f44336;
}
.lane.feature-req {
border-left-color: #2196f3;
}
.lane.data-inquiry {
border-left-color: #ff9800;
}
.lane-title {
font-weight: bold;
margin-bottom: 8px;
font-size: 16px;
}
.lane-content {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
opacity: 0.8;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes glow {
0% { box-shadow: 0 0 5px #00bcd4; }
100% { box-shadow: 0 0 15px #00bcd4, 0 0 25px #00bcd4; }
}
@keyframes glow-text {
0% { text-shadow: 0 0 20px rgba(76, 175, 80, 0.8); }
100% { text-shadow: 0 0 30px rgba(76, 175, 80, 1), 0 0 40px rgba(76, 175, 80, 0.8); }
}
@keyframes flow {
0% { transform: translateX(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
@media (max-width: 768px) {
.diagram {
flex-direction: column;
gap: 30px;
}
.central-engine {
flex: none;
order: 2;
}
.flow-line {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="diagram">
<!-- Left Panel: Input -->
<div class="panel left-panel">
<div class="panel-title">The Input - The Problem</div>
<div class="tickets">
<div class="ticket bug">
<span class="warning-icon">⚠</span>
<span>Critical Bug Report</span>
</div>
<div class="ticket feature">
<span class="question-icon">?</span>
<span>Feature Enhancement</span>
</div>
<div class="ticket request">
<span class="warning-icon">⚠</span>
<span>User Support Request</span>
</div>
<div class="ticket data">
<span class="question-icon">?</span>
<span>Data Analysis Query</span>
</div>
<div class="ticket bug">
<span class="warning-icon">⚠</span>
<span>System Error Report</span>
</div>
</div>
</div>
<!-- Central Engine -->
<div class="central-engine">
<div class="engine-core">
<div class="neural-network">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="flow-line flow-left"></div>
<div class="flow-line flow-right"></div>
</div>
<div class="accuracy-display">94%</div>
<div class="engine-label">MCO Support AI System</div>
</div>
<!-- Right Panel: Output -->
<div class="panel right-panel">
<div class="panel-title">The Output - The Impact</div>
<div class="organized-lanes">
<div class="lane bug-fix">
<div class="lane-title">Bug Fix</div>
<div class="lane-content">
<span class="check-icon">✓</span>
<span>Critical issues routed to dev team</span>
</div>
</div>
<div class="lane feature-req">
<div class="lane-title">Feature Request</div>
<div class="lane-content">
<span class="check-icon">✓</span>
<span>Enhancements categorized by priority</span>
</div>
</div>
<div class="lane data-inquiry">
<div class="lane-title">Data Inquiry</div>
<div class="lane-content">
<span class="flag-icon">🏃</span>
<span>Analytics requests processed efficiently</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCO Support AI System Visualization</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #0a1128;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 900px;
height: 500px;
position: relative;
overflow: hidden;
}
.panel {
position: absolute;
width: 300px;
height: 400px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.left-panel {
left: 0;
background: linear-gradient(145deg, #0a1128, #1a2a47);
border-left: 1px solid rgba(61, 90, 128, 0.5);
}
.right-panel {
right: 0;
background: linear-gradient(145deg, #0a1128, #1a2a47);
border-right: 1px solid rgba(61, 90, 128, 0.5);
}
.center-engine {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: radial-gradient(circle, #1a82ff 0%, #0038a8 100%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 30px rgba(26, 130, 255, 0.6);
z-index: 10;
}
.accuracy {
position: absolute;
top: -50px;
font-size: 42px;
font-weight: bold;
color: #2ecc71;
text-shadow: 0 0 10px rgba(46, 204, 113, 0.7);
}
.center-core {
width: 80%;
height: 80%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="white" stroke-width="0.5"><circle cx="50" cy="50" r="40" stroke-opacity="0.3"/><circle cx="50" cy="50" r="30" stroke-opacity="0.5"/><circle cx="50" cy="50" r="20" stroke-opacity="0.7"/></g></svg>');
background-size: cover;
border-radius: 50%;
animation: rotate 20s linear infinite;
}
.data-stream {
position: absolute;
height: 5px;
background: linear-gradient(90deg, #ff9500, #2ecc71);
z-index: 5;
}
.left-stream {
width: 160px;
left: 300px;
top: 50%;
transform: translateY(-50%);
border-radius: 5px;
}
.right-stream {
width: 160px;
right: 300px;
top: 50%;
transform: translateY(-50%);
border-radius: 5px;
}
.panel-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #f0f0f0;
text-align: center;
}
.ticket {
width: 70px;
height: 40px;
border-radius: 8px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
animation: float 3s infinite ease-in-out;
}
.bug {
background-color: #e74c3c;
}
.feature {
background-color: #3498db;
}
.inquiry {
background-color: #9b59b6;
}
.caution {
position: absolute;
top: -8px;
right: -8px;
width: 16px;
height: 16px;
background-color: #f1c40f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 10px;
color: #111;
}
.lane {
width: 80%;
height: 80px;
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
}
.lane-title {
font-size: 14px;
margin-bottom: 5px;
}
.lane-content {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.lane-ticket {
width: 50px;
height: 30px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.checkmark {
position: absolute;
top: -5px;
right: -5px;
width: 14px;
height: 14px;
background-color: #2ecc71;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 8px;
}
.flag {
position: absolute;
top: -5px;
right: -5px;
width: 14px;
height: 14px;
background-color: #f39c12;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 8px;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(46, 204, 113, 0); }
100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
</style>
</head>
<body>
<div class="container">
<div class="panel left-panel">
<div class="panel-title">Jira Ticket Queue</div>
<div class="ticket bug" style="top: 100px; left: 30px;">BUG</div>
<div class="ticket feature" style="top: 160px; left: 80px;">FEAT</div>
<div class="ticket inquiry" style="top: 220px; left: 40px;">DATA</div>
<div class="ticket bug" style="top: 280px; left: 90px;">BUG
<div class="caution">?</div>
</div>
<div class="ticket feature" style="top: 140px; left: 170px;">FEAT
<div class="caution">!</div>
</div>
<div class="ticket inquiry" style="top: 240px; left: 160px;">DATA
<div class="caution">?</div>
</div>
</div>
<div class="data-stream left-stream"></div>
<div class="center-engine">
<div class="accuracy">94%</div>
<div class="center-core"></div>
</div>
<div class="data-stream right-stream"></div>
<div class="panel right-panel">
<div class="panel-title">Classified Tickets</div>
<div class="lane">
<div class="lane-title">Bug Fix</div>
<div class="lane-content">
<div class="lane-ticket bug">
<div class="checkmark">✓</div>
</div>
<div class="lane-ticket bug">
<div class="checkmark">✓</div>
</div>
<div class="lane-ticket bug">
<div class="flag">!</div>
</div>
</div>
</div>
<div class="lane">
<div class="lane-title">Feature Request</div>
<div class="lane-content">
<div class="lane-ticket feature">
<div class="checkmark">✓</div>
</div>
<div class="lane-ticket feature">
<div class="checkmark">✓</div>
</div>
</div>
</div>
<div class="lane">
<div class="lane-title">Data Inquiry</div>
<div class="lane-content">
<div class="lane-ticket inquiry">
<div class="checkmark">✓</div>
</div>
<div class="lane-ticket inquiry">
<div class="checkmark">✓</div>
</div>
</div>
</div>
</div>
<div class="particles" id="particles"></div>
</div>
<script>
// Create particles
const particlesContainer = document.getElementById('particles');
const particlesCount = 50;
for (let i = 0; i < particlesCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// Random size between 1 and 3px
const size = Math.random() * 2 + 1;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Random position
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
// Random opacity
particle.style.opacity = Math.random() * 0.5 + 0.1;
// Animation
const duration = Math.random() * 20 + 10;
particle.style.animation = `float ${duration}s infinite ease-in-out ${Math.random() * 10}s`;
particlesContainer.appendChild(particle);
}
</script>
</body>
</html>
```Drag to resize
**Prompt for a clean, modern, slightly futuristic diagram‑style illustration** ``` Create a two‑panel diagram illustration (vector‑style, not a photograph) with a sleek, futuristic aesthetic. --- Overall style --- - Professional, intelligent, and impactful design. - Dark‑blue/black background (lab‑like atmosphere) with bright accent colors: energizing green (success), orange/yellow (intelligence/action). - Minimalist, clean lines; subtle gradients and soft glows. - Slightly futuristic but grounded – think high‑tech data flow diagram rather than sci‑fi. --- Left Panel (Input – “The Problem”) --- - Title at top: “The Input – The Problem”. - Stylized Jira ticket queue stretching across the panel. - Tickets are rectangular cards of varying colors and shapes: * Red‑orange cards for bugs. * Blue cards for feature requests. * Grey/white cards for general inquiries. - Cards appear in a loosely‑ordered, semi‑chaotic flow moving toward the centre. - A few cards are highlighted with a small yellow caution triangle or a question‑mark icon, indicating classification challenges. - Light “data stream” arrows (thin, semi‑transparent lines) point from the tickets toward the centre. --- Central Engine (Solution) --- - Positioned at the exact centre, spanning the gap between the two panels. - Depict a sleek, luminous core titled “MCO Support AI System”. - Visualize the core as: * An intricate neural‑network mesh of glowing nodes and connections, **or** * Interlocking translucent gears made of light and code snippets. - The core should radiate a soft blue/green glow. - Data streams from the left panel converge into the core. - Prominently display “94%” above or within the core in bold, confident typography, glowing in teal‑green. --- Right Panel (Output – “The Impact”) --- - Title at top: “The Output – The Impact”. - The processed data stream exits the core and splits into three neat, parallel lanes labeled: 1. **Bug Fix** – green lane, tickets now uniform green cards with small check‑mark icons. 2. **Feature Request** – blue lane, tickets in uniform blue cards with check‑marks. 3. **Data Inquiry** – orange lane, tickets in uniform orange cards with check‑marks. - The lanes are clearly separated by thin white dividers; each lane has a subtle background tint matching its label color. - Most tickets carry a small green check‑mark; one or two tickets in each lane carry a gentle “flag” icon (light amber) to acknowledge the small margin of error. - The flow looks orderly, efficient, and resolved; the lanes move smoothly from left to right. --- Additional details --- - Use subtle drop‑shadows and glows to give depth without clutter. - Include faint grid or circuitry lines in the background for a “lab” feel. - Keep the illustration vector‑friendly (SVG‑compatible) for scalability. ``` You can feed this prompt directly into an AI image generation tool (e.g., Midjourney, Stable Diffusion, DALL·E) or give it to a graphic designer to produce the requested diagram.
Drag to resize