<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creative Edge Institute</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.9/babel.min.js"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; width: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0a0a1a;
color: #fff;
}
.app-wrapper {
min-height: 100vh;
width: 100%;
background: linear-gradient(135deg, #0a0a1a 0%, #1a1040 50%, #0a0a1a 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.app-inner {
width: 100%;
max-width: 1264px;
}
/* Header */
.header {
text-align: center;
margin-bottom: 16px;
}
.header h1 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(90deg, #22d3ee, #a855f7, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header p {
color: rgba(255,255,255,0.45);
font-size: clamp(0.65rem, 1.2vw, 0.85rem);
margin-top: 4px;
}
/* Infographic container */
.infographic {
position: relative;
width: 100%;
aspect-ratio: 1.490566; /* 1264 / 848 */
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.15);
overflow: hidden;
box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}
.infographic img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
user-select: none;
-webkit-user-drag: none;
}
/* Hotspot buttons */
.hotspot {
position: absolute;
border-radius: 12px;
cursor: pointer;
border: 2px solid transparent;
background: transparent;
transition: all 0.2s ease-out;
outline: none;
padding: 0;
}
.hotspot:hover, .hotspot:focus-visible {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.35);
box-shadow: 0 0 20px rgba(168,85,247,0.25), inset 0 0 20px rgba(255,255,255,0.05);
}
.hotspot:focus-visible {
outline: 2px solid rgba(34,211,238,0.7);
outline-offset: 2px;
}
/* Tooltip */
.tooltip-wrap {
position: absolute;
z-index: 50;
pointer-events: none;
animation: tooltipIn 0.15s ease-out;
}
.tooltip-box {
background: rgba(15,23,42,0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.tooltip-title {
font-size: 0.85rem;
font-weight: 700;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 4px;
}
.tooltip-desc {
font-size: 0.72rem;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
@keyframes tooltipIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Modal overlay */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 16px;
animation: fadeIn 0.15s ease-out;
}
.modal-card {
background: rgba(15,23,42,0.95);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
box-shadow: 0 25px 60px rgba(0,0,0,0.6);
max-width: 480px;
width: 100%;
padding: 24px;
position: relative;
animation: tooltipIn 0.2s ease-out;
}
.modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: transparent;
color: rgba(255,255,255,0.5);
font-size: 16px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.modal-close:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.modal-title {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-weight: 800;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modal-subtitle {
font-size: 0.8rem;
color: rgba(255,255,255,0.35);
margin: 4px 0 16px;
}
.modal-body {
font-size: 0.95rem;
color: rgba(255,255,255,0.85);
line-height: 1.7;
}
.modal-btn {
display: inline-block;
margin-top: 20px;
padding: 8px 20px;
border: none;
border-radius: 8px;
background: linear-gradient(90deg, #06b6d4, #a855f7);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 16px rgba(168,85,247,0.3);
transition: all 0.15s;
}
.modal-btn:hover {
filter: brightness(1.15);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Footer */
.footer {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255,255,255,0.35);
font-size: 0.7rem;
}
.footer-left {
display: flex;
align-items: center;
gap: 8px;
}
.pulse-dot {
width: 8px;
height: 8px;
background: #22d3ee;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useRef } = React;
const IMAGE_ASPECT = 1264 / 848;
const bubbles = [
{
id: "ethics",
label: "Ethical Considerations & Responsible Use",
definition: "Explore fairness, bias, transparency, privacy, copyright, and safe classroom use. Learners practice making responsible choices when using AI tools.",
gradient: "linear-gradient(90deg, #60a5fa, #22d3ee)",
position: { left: "1.6%", top: "1.8%", width: "22.9%", height: "23%" },
},
{
id: "music",
label: "AI Music Production",
definition: "Create, remix, and analyze music using AI-assisted composition tools. Students learn prompts, iteration, and how creative intent shapes outputs.",
gradient: "linear-gradient(90deg, #34d399, #2dd4bf)",
position: { left: "29.3%", top: "4.7%", width: "19%", height: "23.6%" },
},
{
id: "career",
label: "Explore AI Career Paths",
definition: "Connect AI creativity to future-ready careers: design, media, data, education, product, engineering, and ethics. Students map skills to real roles.",
gradient: "linear-gradient(90deg, #f87171, #fb7185)",
position: { left: "72%", top: "2.4%", width: "22.9%", height: "29.5%" },
},
{
id: "imageVideo",
label: "AI Image & Video Creation",
definition: "Generate images, storyboards, and short videos with AI. Students learn visual prompting, style control, iteration, and responsible use of media.",
gradient: "linear-gradient(90deg, #60a5fa, #818cf8)",
position: { left: "0.8%", top: "27.1%", width: "15.8%", height: "24.8%" },
},
{
id: "resourceHub",
label: "AI Resource Hub",
definition: "A curated collection of tools, lesson ideas, templates, and examples. Helps educators quickly find classroom-ready AI resources and guidance.",
gradient: "linear-gradient(90deg, #4ade80, #10b981)",
position: { left: "15%", top: "33%", width: "19.8%", height: "27.1%" },
},
{
id: "handsOn",
label: "Hands On With AI Tools",
definition: "Practice using classroom-friendly AI tools for brainstorming, drafting, revising, tutoring, and feedback. Emphasis is on process, not shortcuts.",
gradient: "linear-gradient(90deg, #f87171, #f472b6)",
position: { left: "64.1%", top: "29.5%", width: "20.6%", height: "28.3%" },
},
{
id: "zoom",
label: "Live ZOOM Sessions",
definition: "Live, interactive sessions for modeling AI workflows, answering questions, and building educator confidence through guided practice.",
gradient: "linear-gradient(90deg, #fb923c, #fbbf24)",
position: { left: "0.8%", top: "56.6%", width: "16.6%", height: "23.6%" },
},
{
id: "plc",
label: "Collaborative Online PLC",
definition: "A supportive community of practice where educators share wins, challenges, lesson ideas, and examples of effective AI integration.",
gradient: "linear-gradient(90deg, #fb7185, #ef4444)",
position: { left: "39.6%", top: "44.8%", width: "21.4%", height: "22.4%" },
},
{
id: "worlds",
label: "3D World Models",
definition: "Design immersive 3D environments and simulations. Students explore spatial thinking, creative design, and how AI can accelerate prototyping.",
gradient: "linear-gradient(90deg, #c084fc, #8b5cf6)",
position: { left: "30.9%", top: "66%", width: "16.6%", height: "21.2%" },
},
{
id: "vibeCoding",
label: "Vibe Coding Apps",
definition: "Build apps quickly with AI-assisted coding workflows. Learners move from idea → prototype → iteration, while practicing debugging and design thinking.",
gradient: "linear-gradient(90deg, #fbbf24, #eab308)",
position: { left: "64.9%", top: "66%", width: "23.7%", height: "22.4%" },
},
];
function Tooltip({ bubble }) {
const posLeft = parseFloat(bubble.position.left) + parseFloat(bubble.position.width) / 2;
const posTop = parseFloat(bubble.position.top) + parseFloat(bubble.position.height);
const above = posTop > 75;
const tipTop = above ? parseFloat(bubble.position.top) - 2 : posTop + 1;
return (
<div
className="tooltip-wrap"
style={{
left: `${Math.min(Math.max(posLeft - 12, 2), 72)}%`,
top: `${tipTop}%`,
width: "26%",
transform: above ? "translateY(-100%)" : "none",
}}
>
<div className="tooltip-box">
<div className="tooltip-title" style={{ backgroundImage: bubble.gradient }}>
{bubble.label}
</div>
<div className="tooltip-desc">{bubble.definition}</div>
</div>
</div>
);
}
function App() {
const [hoveredBubble, setHoveredBubble] = useState(null);
const [activeBubble, setActiveBubble] = useState(null);
return (
<div className="app-wrapper">
<div className="app-inner">
<div className="header">
<h1>Creative Edge Institute</h1>
<p>Hover over any bubble to explore AI learning areas • Click for details</p>
</div>
<div
className="infographic"
onMouseLeave={() => setHoveredBubble(null)}
>
<img
src="https://creativeed.ai/wp-content/uploads/2026/02/creativeedgebannerv2.png"
alt="Creative Edge Institute AI Literacy Infographic"
/>
{bubbles.map((bubble) => (
<button
key={bubble.id}
className="hotspot"
style={{
left: bubble.position.left,
top: bubble.position.top,
width: bubble.position.width,
height: bubble.position.height,
}}
onMouseEnter={() => setHoveredBubble(bubble)}
onMouseLeave={() => setHoveredBubble(null)}
onClick={() => setActiveBubble(bubble)}
aria-label={bubble.label}
/>
))}
{hoveredBubble && <Tooltip bubble={hoveredBubble} />}
</div>
{activeBubble && (
<div className="modal-overlay" onClick={() => setActiveBubble(null)}>
<div className="modal-card" onClick={(e) => e.stopPropagation()}>
<button className="modal-close" onClick={() => setActiveBubble(null)}>✕</button>
<div className="modal-title" style={{ backgroundImage: activeBubble.gradient }}>
{activeBubble.label}
</div>
<div className="modal-subtitle">AI Learning Area</div>
<div className="modal-body">{activeBubble.definition}</div>
<div style={{ textAlign: "right" }}>
<button className="modal-btn" onClick={() => setActiveBubble(null)}>Close</button>
</div>
</div>
</div>
)}
<div className="footer">
<div className="footer-left">
<div className="pulse-dot"></div>
Interactive — hover & click any bubble
</div>
<div>JFYNet AI Leadership Institute</div>
</div>
</div>
</div>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>