232 lines
8.0 KiB
HTML
232 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SOLVR Virtual Agent Team - Proposal</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
background: #0a1628;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
.slideshow {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.slide {
|
|
display: none;
|
|
max-width: 95vw;
|
|
max-height: 90vh;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
|
}
|
|
.slide.active {
|
|
display: block;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: scale(0.98); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.controls {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 15px 30px;
|
|
border-radius: 50px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.nav-btn {
|
|
background: linear-gradient(135deg, #14b8a6, #0891b2);
|
|
border: none;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-btn:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 5px 20px rgba(20, 184, 166, 0.4);
|
|
}
|
|
.nav-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
.slide-counter {
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
.slide-title {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: white;
|
|
font-size: 14px;
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 10px 25px;
|
|
border-radius: 25px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.keyboard-hint {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: rgba(255,255,255,0.4);
|
|
font-size: 12px;
|
|
}
|
|
.fullscreen-btn {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(255,255,255,0.1);
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 15px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.fullscreen-btn:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="slideshow">
|
|
<img class="slide active" src="01-cover.png" alt="Cover">
|
|
<img class="slide" src="02-executive-summary.png" alt="Executive Summary">
|
|
<img class="slide" src="03-architecture.png" alt="Platform Architecture">
|
|
<img class="slide" src="04-agent-dot.png" alt="Agent: Dot">
|
|
<img class="slide" src="05-agent-rose.png" alt="Agent: Rose">
|
|
<img class="slide" src="06-agent-miles.png" alt="Agent: Miles">
|
|
<img class="slide" src="07-mcp-inventory.png" alt="MCP Server Inventory">
|
|
<img class="slide" src="08-coordination.png" alt="Coordination Layer">
|
|
<img class="slide" src="09-timeline.png" alt="6-Week Implementation">
|
|
<img class="slide" src="10-investment.png" alt="Investment">
|
|
<img class="slide" src="11-included.png" alt="What's Included">
|
|
<img class="slide" src="12-why-openclaw.png" alt="Why OpenClaw">
|
|
<img class="slide" src="13-ongoing-costs.png" alt="Ongoing Costs">
|
|
<img class="slide" src="14-handoffs.png" alt="Agent Coordination">
|
|
<img class="slide" src="15-next-steps.png" alt="Next Steps">
|
|
</div>
|
|
|
|
<div class="slide-title" id="slideTitle">Cover</div>
|
|
|
|
<div class="controls">
|
|
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← Previous</button>
|
|
<span class="slide-counter"><span id="currentSlide">1</span> / <span id="totalSlides">15</span></span>
|
|
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">Next →</button>
|
|
</div>
|
|
|
|
<div class="keyboard-hint">Use ← → arrow keys or click to navigate</div>
|
|
|
|
<button class="fullscreen-btn" onclick="toggleFullscreen()">⛶ Fullscreen</button>
|
|
|
|
<script>
|
|
let currentIndex = 0;
|
|
const slides = document.querySelectorAll('.slide');
|
|
const titles = [
|
|
'Cover',
|
|
'Executive Summary',
|
|
'Platform Architecture',
|
|
'Agent: Dorothy "Dot" Ashby',
|
|
'Agent: Rose Callahan',
|
|
'Agent: Miles Thornton',
|
|
'MCP Server Inventory',
|
|
'Coordination Layer',
|
|
'6-Week Implementation',
|
|
'Investment - $20,000',
|
|
'What\'s Included',
|
|
'Why OpenClaw',
|
|
'Ongoing Costs',
|
|
'Agent Coordination',
|
|
'Next Steps'
|
|
];
|
|
|
|
function showSlide(index) {
|
|
slides.forEach(s => s.classList.remove('active'));
|
|
slides[index].classList.add('active');
|
|
document.getElementById('currentSlide').textContent = index + 1;
|
|
document.getElementById('slideTitle').textContent = titles[index];
|
|
document.getElementById('prevBtn').disabled = index === 0;
|
|
document.getElementById('nextBtn').disabled = index === slides.length - 1;
|
|
}
|
|
|
|
function changeSlide(direction) {
|
|
currentIndex += direction;
|
|
if (currentIndex < 0) currentIndex = 0;
|
|
if (currentIndex >= slides.length) currentIndex = slides.length - 1;
|
|
showSlide(currentIndex);
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') changeSlide(1);
|
|
if (e.key === 'ArrowLeft') changeSlide(-1);
|
|
if (e.key === 'Home') { currentIndex = 0; showSlide(0); }
|
|
if (e.key === 'End') { currentIndex = slides.length - 1; showSlide(currentIndex); }
|
|
if (e.key === 'f' || e.key === 'F') toggleFullscreen();
|
|
});
|
|
|
|
// Click on slide to advance
|
|
document.querySelector('.slideshow').addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('slide')) {
|
|
const rect = e.target.getBoundingClientRect();
|
|
const clickX = e.clientX - rect.left;
|
|
if (clickX > rect.width / 2) {
|
|
changeSlide(1);
|
|
} else {
|
|
changeSlide(-1);
|
|
}
|
|
}
|
|
});
|
|
|
|
function toggleFullscreen() {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
// Touch swipe support
|
|
let touchStartX = 0;
|
|
document.addEventListener('touchstart', e => touchStartX = e.changedTouches[0].screenX);
|
|
document.addEventListener('touchend', e => {
|
|
const diff = touchStartX - e.changedTouches[0].screenX;
|
|
if (Math.abs(diff) > 50) {
|
|
changeSlide(diff > 0 ? 1 : -1);
|
|
}
|
|
});
|
|
|
|
document.getElementById('totalSlides').textContent = slides.length;
|
|
</script>
|
|
</body>
|
|
</html>
|