mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
1463 lines
92 KiB
Plaintext
1463 lines
92 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Dashboards - Visualize All Your Data in One Place</title>
|
|
<meta name="description"
|
|
content="Build custom dashboards to visualize metrics, logs, traces, and status data. Drag-and-drop builder, real-time updates, and shareable views for your entire team.">
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
</head>
|
|
|
|
<body>
|
|
<%- include('nav') -%>
|
|
|
|
<main id="main-content">
|
|
<!-- Hero Section -->
|
|
<div class="relative isolate overflow-hidden bg-white" id="dashboards-hero-section">
|
|
<!-- Subtle grid pattern background -->
|
|
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
|
|
|
<!-- Grid glow effect that follows cursor - indigo color -->
|
|
<div id="dashboards-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(99, 102, 241, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 102, 241, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
|
|
|
|
<div class="py-20 sm:py-28 lg:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Minimal badge -->
|
|
<p class="text-sm font-medium text-indigo-600 mb-4">Unified Observability</p>
|
|
|
|
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
Visualize everything in one place
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
Build beautiful, real-time dashboards that bring together metrics, logs, traces, and status data. Get complete visibility into your systems.
|
|
</p>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
</a>
|
|
<a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
|
|
Request demo <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Subtle feature list -->
|
|
<div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
|
|
<span>Drag & drop builder</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Real-time updates</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Multiple data sources</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Shareable links</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clean hero image -->
|
|
<div class="mt-16 sm:mt-20">
|
|
<div class="relative mx-auto max-w-5xl">
|
|
<div class="rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
|
|
<img src="/img/apm-3.png" alt="OneUptime custom dashboard" width="2432" height="1442"
|
|
class="rounded-lg shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- How It Works -->
|
|
<div class="relative bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<p class="text-sm font-medium text-indigo-600 uppercase tracking-wide mb-3">How It Works</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Build dashboards in minutes
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Create powerful visualizations without any coding. Drag, drop, and customize.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<!-- Connecting line for desktop -->
|
|
<div class="hidden lg:block relative">
|
|
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-indigo-200"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Step 1 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">1</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Create Dashboard</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Start with a blank canvas or choose from pre-built templates.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">2</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Add Widgets</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Drag and drop charts, tables, and visualizations.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">3</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Connect Data</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Link widgets to metrics, logs, traces, or status data.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">4</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Share & Monitor</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Share with your team or display on TV screens.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Why OneUptime Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section Header -->
|
|
<div class="mx-auto max-w-2xl text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
Why OneUptime
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Build beautiful dashboards in minutes
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Create stunning, real-time dashboards with our intuitive drag-and-drop builder. Visualize all your data in one place with powerful widgets and integrations.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Blocks -->
|
|
<div class="space-y-24 lg:space-y-32">
|
|
<!-- Feature 1: Drag & Drop Builder -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Drag & Drop</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Build dashboards without code</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Our intuitive drag-and-drop builder lets you create professional dashboards in minutes. No coding required - just drag widgets, resize, and customize.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Intuitive click, drag, and drop interface
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Flexible layouts with resizable widgets
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Responsive design for any screen size
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="relative lg:order-last">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Dashboard Grid Builder -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Browser header -->
|
|
<div class="bg-gray-50 px-4 py-2.5 flex items-center justify-between border-b border-gray-100">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-gray-500">Edit Mode</span>
|
|
<div class="w-8 h-4 bg-blue-500 rounded-full relative">
|
|
<div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard grid content -->
|
|
<div class="p-4 bg-gray-50">
|
|
<!-- Toolbar -->
|
|
<div class="flex items-center gap-2 mb-3 pb-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-1 px-2 py-1 bg-blue-50 rounded text-xs text-blue-600 border border-blue-200">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Add Widget
|
|
</div>
|
|
<div class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
|
|
</svg>
|
|
Layout
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid layout -->
|
|
<div class="grid grid-cols-4 gap-2">
|
|
<!-- Large chart widget -->
|
|
<div class="col-span-2 row-span-2 bg-white rounded-lg border-2 border-dashed border-blue-300 p-3 min-h-[100px] flex flex-col">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs font-medium text-gray-700">Request Rate</span>
|
|
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
|
|
</svg>
|
|
</div>
|
|
<!-- Mini chart SVG -->
|
|
<svg class="w-full flex-1" viewBox="0 0 100 40" preserveAspectRatio="none">
|
|
<path d="M0 35 Q25 20, 50 25 T100 15" fill="none" stroke="#3b82f6" stroke-width="2"/>
|
|
<path d="M0 35 Q25 20, 50 25 T100 15 L100 40 L0 40 Z" fill="url(#blueGrad)" opacity="0.2"/>
|
|
<defs>
|
|
<linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.3" />
|
|
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Small stat widget -->
|
|
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
|
|
<span class="text-lg font-bold text-gray-800">99.9%</span>
|
|
<span class="text-[10px] text-gray-500">Uptime</span>
|
|
</div>
|
|
|
|
<!-- Small stat widget -->
|
|
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
|
|
<span class="text-lg font-bold text-blue-600">142ms</span>
|
|
<span class="text-[10px] text-gray-500">Avg Latency</span>
|
|
</div>
|
|
|
|
<!-- Small gauge widget -->
|
|
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
|
|
<svg class="w-8 h-8" viewBox="0 0 36 36">
|
|
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e5e7eb" stroke-width="3"/>
|
|
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#22c55e" stroke-width="3" stroke-dasharray="75, 100"/>
|
|
</svg>
|
|
<span class="text-[10px] text-gray-500">CPU</span>
|
|
</div>
|
|
|
|
<!-- Small list widget -->
|
|
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2">
|
|
<div class="space-y-1">
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
|
<span class="text-[9px] text-gray-600 truncate">api-prod</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
|
<span class="text-[9px] text-gray-600 truncate">web-app</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wide bar chart -->
|
|
<div class="col-span-2 bg-white rounded-lg border-2 border-dashed border-gray-200 p-2">
|
|
<div class="flex items-end justify-around h-8 gap-1">
|
|
<div class="w-3 bg-blue-200 rounded-t" style="height: 60%"></div>
|
|
<div class="w-3 bg-blue-300 rounded-t" style="height: 80%"></div>
|
|
<div class="w-3 bg-blue-400 rounded-t" style="height: 45%"></div>
|
|
<div class="w-3 bg-blue-500 rounded-t" style="height: 90%"></div>
|
|
<div class="w-3 bg-blue-600 rounded-t" style="height: 70%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty placeholder -->
|
|
<div class="col-span-2 bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 p-3 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<svg class="w-5 h-5 text-gray-400 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
<span class="text-[10px] text-gray-400">Drop widget here</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Block 2: Rich Visualizations -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
|
<div class="relative lg:order-first">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Chart Type Cards Grid -->
|
|
<div class="relative max-w-md mx-auto">
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<!-- Line Chart -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 flex items-end">
|
|
<svg class="w-full h-full" viewBox="0 0 60 30" preserveAspectRatio="none">
|
|
<path d="M0 25 L15 18 L30 22 L45 10 L60 15" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="15" cy="18" r="2" fill="#3b82f6"/>
|
|
<circle cx="30" cy="22" r="2" fill="#3b82f6"/>
|
|
<circle cx="45" cy="10" r="2" fill="#3b82f6"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Line Chart</div>
|
|
</div>
|
|
|
|
<!-- Bar Chart -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 flex items-end justify-around gap-1">
|
|
<div class="w-2 bg-blue-300 rounded-t" style="height: 50%"></div>
|
|
<div class="w-2 bg-blue-400 rounded-t" style="height: 80%"></div>
|
|
<div class="w-2 bg-blue-500 rounded-t" style="height: 60%"></div>
|
|
<div class="w-2 bg-blue-600 rounded-t" style="height: 90%"></div>
|
|
<div class="w-2 bg-blue-500 rounded-t" style="height: 70%"></div>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Bar Chart</div>
|
|
</div>
|
|
|
|
<!-- Area Chart -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3">
|
|
<svg class="w-full h-full" viewBox="0 0 60 30" preserveAspectRatio="none">
|
|
<path d="M0 28 Q15 20, 30 22 T60 12 L60 30 L0 30 Z" fill="url(#areaGrad)" opacity="0.6"/>
|
|
<path d="M0 28 Q15 20, 30 22 T60 12" fill="none" stroke="#3b82f6" stroke-width="1.5"/>
|
|
<defs>
|
|
<linearGradient id="areaGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.4" />
|
|
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.1" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Area Chart</div>
|
|
</div>
|
|
|
|
<!-- Gauge -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 flex items-center justify-center">
|
|
<svg class="w-10 h-10" viewBox="0 0 36 36">
|
|
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e5e7eb" stroke-width="3"/>
|
|
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="72, 100"/>
|
|
<text x="18" y="21" text-anchor="middle" class="text-[8px] fill-gray-600 font-medium">72%</text>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Gauge</div>
|
|
</div>
|
|
|
|
<!-- Pie Chart -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 flex items-center justify-center">
|
|
<svg class="w-10 h-10" viewBox="0 0 32 32">
|
|
<circle cx="16" cy="16" r="12" fill="#dbeafe"/>
|
|
<path d="M16 4 A12 12 0 0 1 28 16 L16 16 Z" fill="#3b82f6"/>
|
|
<path d="M28 16 A12 12 0 0 1 16 28 L16 16 Z" fill="#60a5fa"/>
|
|
<path d="M16 28 A12 12 0 0 1 4 16 L16 16 Z" fill="#93c5fd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Pie Chart</div>
|
|
</div>
|
|
|
|
<!-- Stat Card -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 flex flex-col items-center justify-center">
|
|
<span class="text-xl font-bold text-blue-600">1.2K</span>
|
|
<span class="text-[9px] text-green-500 flex items-center gap-0.5">
|
|
<svg class="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
|
|
</svg>
|
|
12%
|
|
</span>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Stat Card</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 flex flex-col justify-center gap-1">
|
|
<div class="h-2 bg-gray-200 rounded w-full"></div>
|
|
<div class="h-1.5 bg-blue-100 rounded w-full"></div>
|
|
<div class="h-1.5 bg-blue-50 rounded w-full"></div>
|
|
<div class="h-1.5 bg-blue-100 rounded w-full"></div>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Table</div>
|
|
</div>
|
|
|
|
<!-- Heatmap -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 grid grid-cols-5 grid-rows-3 gap-0.5">
|
|
<div class="bg-blue-100 rounded-sm"></div>
|
|
<div class="bg-blue-300 rounded-sm"></div>
|
|
<div class="bg-blue-200 rounded-sm"></div>
|
|
<div class="bg-blue-500 rounded-sm"></div>
|
|
<div class="bg-blue-100 rounded-sm"></div>
|
|
<div class="bg-blue-400 rounded-sm"></div>
|
|
<div class="bg-blue-200 rounded-sm"></div>
|
|
<div class="bg-blue-600 rounded-sm"></div>
|
|
<div class="bg-blue-300 rounded-sm"></div>
|
|
<div class="bg-blue-100 rounded-sm"></div>
|
|
<div class="bg-blue-200 rounded-sm"></div>
|
|
<div class="bg-blue-500 rounded-sm"></div>
|
|
<div class="bg-blue-300 rounded-sm"></div>
|
|
<div class="bg-blue-400 rounded-sm"></div>
|
|
<div class="bg-blue-200 rounded-sm"></div>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Heatmap</div>
|
|
</div>
|
|
|
|
<!-- Log Stream -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
|
<div class="w-full h-12 mb-3 flex flex-col justify-center gap-0.5 font-mono">
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-1 h-1 rounded-full bg-green-500"></span>
|
|
<span class="text-[7px] text-gray-500 truncate">INFO: OK</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-1 h-1 rounded-full bg-yellow-500"></span>
|
|
<span class="text-[7px] text-gray-500 truncate">WARN: slow</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-1 h-1 rounded-full bg-green-500"></span>
|
|
<span class="text-[7px] text-gray-500 truncate">INFO: done</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium text-center">Log Stream</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer label -->
|
|
<div class="mt-4 text-center text-xs text-gray-400">
|
|
+ Scatter plots, sparklines, status grids & more
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:pl-8">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Visualizations</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
|
|
20+ widget types to choose from
|
|
</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
From simple counters to complex time series charts, we have the right visualization for every type of data. Customize colors, legends, and labels to match your brand.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Time series, area, bar, and stacked charts
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Tables, logs, and real-time data streams
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Gauges, stat cards, and progress indicators
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Block 3: Multiple Data Sources -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
|
<div class="lg:pr-8">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Data Sources</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
|
|
All your data in one view
|
|
</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Combine metrics, logs, traces, and status data on a single dashboard. See the complete picture of your system's health without switching between tools.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
OpenTelemetry metrics and APM data
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Log streams filtered by service or severity
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Status, incidents, and on-call schedules
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="relative lg:order-last">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Data Sources Connection UI -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Browser header -->
|
|
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">Data Sources</span>
|
|
</div>
|
|
|
|
<!-- Content area -->
|
|
<div class="p-4">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="text-gray-800 text-sm font-medium">Connected Sources</div>
|
|
<span class="flex items-center gap-1 px-2 py-1 bg-blue-50 rounded text-xs text-blue-600 border border-blue-200">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Add Source
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Data source cards -->
|
|
<div class="space-y-2">
|
|
<!-- Metrics -->
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-700 text-sm font-medium">Metrics</div>
|
|
<div class="text-gray-400 text-xs">OpenTelemetry</div>
|
|
</div>
|
|
</div>
|
|
<span class="flex items-center gap-1 text-xs text-green-600">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
|
Active
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Logs -->
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-700 text-sm font-medium">Logs</div>
|
|
<div class="text-gray-400 text-xs">Log Management</div>
|
|
</div>
|
|
</div>
|
|
<span class="flex items-center gap-1 text-xs text-green-600">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
|
Active
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Traces -->
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-700 text-sm font-medium">Traces</div>
|
|
<div class="text-gray-400 text-xs">Distributed Tracing</div>
|
|
</div>
|
|
</div>
|
|
<span class="flex items-center gap-1 text-xs text-green-600">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
|
Active
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Status Page -->
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-700 text-sm font-medium">Status</div>
|
|
<div class="text-gray-400 text-xs">Status Page Data</div>
|
|
</div>
|
|
</div>
|
|
<span class="flex items-center gap-1 text-xs text-green-600">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
|
Active
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Monitors -->
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-700 text-sm font-medium">Monitors</div>
|
|
<div class="text-gray-400 text-xs">Uptime & Health</div>
|
|
</div>
|
|
</div>
|
|
<span class="flex items-center gap-1 text-xs text-green-600">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
|
Active
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-3 pt-3 border-t border-gray-100 text-center text-xs text-gray-400">
|
|
All data unified in one dashboard
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Block 4: Sharing & Collaboration -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
|
<div class="relative lg:order-first">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Sharing & Permissions UI -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Browser header -->
|
|
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">Share Dashboard</span>
|
|
</div>
|
|
|
|
<!-- Content area -->
|
|
<div class="p-4">
|
|
<!-- Share link section -->
|
|
<div class="mb-4">
|
|
<div class="text-gray-800 text-sm font-medium mb-2">Share Link</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 bg-gray-50 rounded-lg px-3 py-2 text-xs text-gray-500 font-mono truncate border border-gray-200">
|
|
https://oneuptime.com/dash/prod-overview
|
|
</div>
|
|
<button class="px-3 py-2 bg-blue-600 text-white text-xs font-medium rounded-lg hover:bg-blue-700">
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Access control -->
|
|
<div class="mb-4">
|
|
<div class="text-gray-800 text-sm font-medium mb-2">Access Control</div>
|
|
<div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg border border-gray-200">
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
<span class="text-xs text-gray-600">Team members only</span>
|
|
<svg class="w-3 h-3 text-gray-400 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team members with access -->
|
|
<div class="mb-4">
|
|
<div class="text-gray-800 text-sm font-medium mb-2">People with access</div>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium">JD</div>
|
|
<div>
|
|
<div class="text-gray-700 text-xs font-medium">John Doe</div>
|
|
<div class="text-gray-400 text-[10px]">john@company.com</div>
|
|
</div>
|
|
</div>
|
|
<span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">Owner</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-medium">SA</div>
|
|
<div>
|
|
<div class="text-gray-700 text-xs font-medium">Sarah Adams</div>
|
|
<div class="text-gray-400 text-[10px]">sarah@company.com</div>
|
|
</div>
|
|
</div>
|
|
<span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">Edit</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-medium">MK</div>
|
|
<div>
|
|
<div class="text-gray-700 text-xs font-medium">Mike Kim</div>
|
|
<div class="text-gray-400 text-[10px]">mike@company.com</div>
|
|
</div>
|
|
</div>
|
|
<span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">View</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TV Mode toggle -->
|
|
<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="text-xs font-medium text-blue-700">TV Mode</span>
|
|
</div>
|
|
<div class="w-8 h-4 bg-blue-500 rounded-full relative">
|
|
<div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:pl-8">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Sharing</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
|
|
Share insights with anyone
|
|
</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Share dashboards with your team or create public links for stakeholders. Control who can view and edit with fine-grained permissions.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Public or private shareable links
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Full-screen TV mode for NOC displays
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Role-based access control
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Grid Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-indigo-700">More Features</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
Comprehensive dashboard features
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Powerful features to create the perfect visualization for your team.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-7xl">
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Feature 1 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-indigo-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Real-time Updates</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Dashboards automatically refresh with the latest data. See changes as they happen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Time Range Selector</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Quickly switch between time ranges. Zoom in on incidents or view long-term trends.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-violet-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
|
<svg class="h-6 w-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Templates</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Start with pre-built templates for common use cases. Customize to fit your needs.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-indigo-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Dark Mode</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Switch between light and dark themes. Perfect for different environments and preferences.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Variables & Filters</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Create dashboard variables to filter data dynamically. Build one dashboard for multiple use cases.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-violet-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Export & Reports</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Export dashboards as images or PDFs. Schedule automated reports to stakeholders.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Use Cases Section -->
|
|
<div class="relative bg-gray-900 py-24 sm:py-32 overflow-hidden">
|
|
<div class="relative mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur border border-white/20 mb-6">
|
|
<svg class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-white">Use Cases</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
|
|
Dashboards for every team
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-300">
|
|
Create dashboards tailored to different roles and use cases across your organization.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div class="group relative">
|
|
<div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15 hover:shadow-lg">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
|
|
<svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-white">NOC Displays</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">Real-time monitoring walls for operations centers</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15 hover:shadow-lg">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200 mb-6">
|
|
<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-white">Executive Reports</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">High-level KPIs and SLA compliance for leadership</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15 hover:shadow-lg">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200 mb-6">
|
|
<svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-white">DevOps Metrics</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">Deployment frequency, lead time, and DORA metrics</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Notifications Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<!-- Content -->
|
|
<div class="relative">
|
|
<p class="text-sm font-medium text-indigo-600 uppercase tracking-wide mb-3">Team Notifications</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Dashboard alerts where your team already works
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
|
|
Get instant notifications in Slack and Microsoft Teams when metrics cross thresholds. Share dashboard insights without context switching.
|
|
</p>
|
|
|
|
<!-- Integration cards -->
|
|
<div class="mt-10 space-y-3">
|
|
<!-- Slack -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
|
|
<path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
|
|
<path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
|
|
<path d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#ECB22E"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Slack</h3>
|
|
<p class="text-sm text-gray-500">Instant alerts with interactive actions</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microsoft Teams -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
|
|
<circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
|
|
<path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
|
|
<circle cx="10" cy="3" r="3" fill="#7B83EB"/>
|
|
<path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
|
|
<p class="text-sm text-gray-500">Native adaptive cards integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features list -->
|
|
<div class="mt-8 grid grid-cols-2 gap-4">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Threshold alerts
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Scheduled reports
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Anomaly detection
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Action buttons
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Illustration - Interactive Slack Notification -->
|
|
<div class="mt-16 lg:mt-0">
|
|
<div class="relative" id="dashboards-slack-demo">
|
|
<!-- Decorative background elements -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Slack Window -->
|
|
<div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
|
|
<!-- Slack window header -->
|
|
<div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
|
|
</svg>
|
|
<span class="text-white text-sm font-semibold">dashboards</span>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
|
|
<span class="text-white text-xs font-bold">M</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages area -->
|
|
<div class="bg-[#1a1d21] px-4 py-4" id="dashboards-slack-messages">
|
|
<!-- Original dashboard message -->
|
|
<div class="group relative">
|
|
<div class="flex items-start gap-3">
|
|
<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime</span>
|
|
<span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
|
|
<span class="text-gray-500 text-xs">10:15 AM</span>
|
|
</div>
|
|
|
|
<!-- Dashboard card -->
|
|
<div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
|
|
<div class="h-1 bg-gradient-to-r from-amber-500 to-orange-500"></div>
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-medium">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
|
|
Warning
|
|
</span>
|
|
</div>
|
|
<h4 class="text-white font-semibold mt-2">CPU Usage exceeded 85%</h4>
|
|
<p class="text-gray-400 text-sm mt-1">Production servers threshold: 80%</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
Infrastructure Dashboard
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Triggered 5m ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="mt-3 flex flex-wrap gap-2" id="dashboards-slack-buttons">
|
|
<button onclick="dashboardsViewDashboard()" id="dashboards-btn-view" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
View Dashboard
|
|
</button>
|
|
<button onclick="dashboardsSnooze()" id="dashboards-btn-snooze" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Snooze 1hr
|
|
</button>
|
|
<button onclick="dashboardsCreateIncident()" id="dashboards-btn-incident" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
Create Incident
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reactions -->
|
|
<div class="mt-3 flex items-center gap-2" id="dashboards-slack-reactions">
|
|
<div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
|
|
<span>👀</span>
|
|
<span class="text-gray-300">2</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thread replies container -->
|
|
<div id="dashboards-slack-thread" class="mt-4 space-y-3"></div>
|
|
|
|
<!-- Thread count indicator -->
|
|
<div id="dashboards-thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
|
|
<div class="flex -space-x-1" id="dashboards-thread-avatars"></div>
|
|
<span id="dashboards-thread-count"></span>
|
|
<span class="text-gray-500">Last reply 1m ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message input -->
|
|
<div class="bg-[#1a1d21] px-4 pb-4">
|
|
<div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
<span class="text-gray-500 text-sm">Message #dashboards</span>
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
let dashboardsViewClicked = false;
|
|
let dashboardsSnoozeClicked = false;
|
|
let dashboardsIncidentClicked = false;
|
|
let dashboardsReplyCount = 0;
|
|
const dashboardsAvatars = [];
|
|
|
|
function updateDashboardsThreadIndicator() {
|
|
const indicator = document.getElementById('dashboards-thread-indicator');
|
|
const countEl = document.getElementById('dashboards-thread-count');
|
|
const avatarsEl = document.getElementById('dashboards-thread-avatars');
|
|
|
|
if (dashboardsReplyCount > 0) {
|
|
indicator.classList.remove('hidden');
|
|
indicator.classList.add('flex');
|
|
countEl.textContent = dashboardsReplyCount + (dashboardsReplyCount === 1 ? ' reply' : ' replies');
|
|
avatarsEl.innerHTML = dashboardsAvatars.slice(-3).map(a =>
|
|
a.isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
|
|
: `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
|
|
<span class="text-white text-[8px] font-bold">${a.initial}</span>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
}
|
|
|
|
function addDashboardsReaction(emoji) {
|
|
const reactions = document.getElementById('dashboards-slack-reactions');
|
|
const newReaction = document.createElement('div');
|
|
newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors';
|
|
newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
|
|
newReaction.style.animation = 'bounceIn 0.3s ease-out';
|
|
reactions.appendChild(newReaction);
|
|
}
|
|
|
|
function addDashboardsThreadReply(avatar, name, time, message, isBot) {
|
|
const thread = document.getElementById('dashboards-slack-thread');
|
|
const reply = document.createElement('div');
|
|
reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-blue-500/30';
|
|
reply.style.animation = 'fadeSlideIn 0.3s ease-out';
|
|
|
|
const avatarClass = avatar;
|
|
const initial = name.charAt(0);
|
|
|
|
if (!isBot) {
|
|
dashboardsAvatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
|
|
} else {
|
|
dashboardsAvatars.push({ bg: '', initial: 'O', isBot: true });
|
|
}
|
|
dashboardsReplyCount++;
|
|
updateDashboardsThreadIndicator();
|
|
|
|
const avatarHtml = isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
|
|
: `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;
|
|
|
|
reply.innerHTML = `
|
|
${avatarHtml}
|
|
<div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-semibold text-white text-sm">${name}</span>
|
|
${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
|
|
<span class="text-gray-500 text-[11px]">${time}</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
|
|
</div>
|
|
`;
|
|
thread.appendChild(reply);
|
|
}
|
|
|
|
window.dashboardsViewDashboard = function() {
|
|
if (dashboardsViewClicked) return;
|
|
dashboardsViewClicked = true;
|
|
|
|
const btn = document.getElementById('dashboards-btn-view');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Opening...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Viewing</span>';
|
|
btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');
|
|
|
|
addDashboardsReaction('📊');
|
|
addDashboardsThreadReply('from-indigo-400 to-indigo-600', 'Mike Chen', '10:17 AM', 'Looking at this now. Checking the server metrics...', false);
|
|
|
|
setTimeout(() => {
|
|
addDashboardsThreadReply('from-indigo-400 to-indigo-600', 'Mike Chen', '10:19 AM', 'Found it! The batch job at 10:00 AM caused the spike. It should auto-resolve in ~10 minutes.', false);
|
|
addDashboardsReaction('👍');
|
|
}, 1200);
|
|
}, 800);
|
|
};
|
|
|
|
window.dashboardsSnooze = function() {
|
|
if (dashboardsSnoozeClicked) return;
|
|
dashboardsSnoozeClicked = true;
|
|
|
|
const btn = document.getElementById('dashboards-btn-snooze');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Snoozing...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Snoozed</span>';
|
|
btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400');
|
|
|
|
addDashboardsReaction('😴');
|
|
addDashboardsThreadReply('from-green-400 to-green-600', 'OneUptime', '10:20 AM', '⏰ Alert snoozed for 1 hour by <strong class="text-white">Mike Chen</strong><br/><span class="text-gray-400">Will re-alert at 11:20 AM if still above threshold</span>', true);
|
|
}, 800);
|
|
};
|
|
|
|
window.dashboardsCreateIncident = function() {
|
|
if (dashboardsIncidentClicked) return;
|
|
dashboardsIncidentClicked = true;
|
|
|
|
const btn = document.getElementById('dashboards-btn-incident');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Creating...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Created</span>';
|
|
btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
|
|
btn.classList.add('bg-rose-600/20', 'border', 'border-rose-500/50', 'text-rose-400');
|
|
|
|
addDashboardsReaction('🚨');
|
|
addDashboardsThreadReply('from-green-400 to-green-600', 'OneUptime', '10:21 AM', '🎫 Incident <strong class="text-white">#INC-2847</strong> created<br/><span class="text-gray-400">High CPU Usage - Production Servers<br/>Assigned to: SRE Team</span>', true);
|
|
}, 800);
|
|
};
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes fadeSlideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes bounceIn {
|
|
0% { opacity: 0; transform: scale(0.8); }
|
|
50% { transform: scale(1.1); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
|
|
<%- include('footer') -%>
|
|
|
|
<style>
|
|
@keyframes fadeInSlack {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.animate-fadeInSlack {
|
|
opacity: 0;
|
|
animation: fadeInSlack 0.5s ease-out forwards;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Grid glow effect for dashboards hero section
|
|
(function() {
|
|
const heroSection = document.getElementById('dashboards-hero-section');
|
|
const gridGlow = document.getElementById('dashboards-grid-glow');
|
|
|
|
if (heroSection && gridGlow) {
|
|
heroSection.addEventListener('mousemove', (e) => {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
gridGlow.style.setProperty('--mouse-x', `${x}px`);
|
|
gridGlow.style.setProperty('--mouse-y', `${y}px`);
|
|
gridGlow.style.opacity = '1';
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', () => {
|
|
gridGlow.style.opacity = '0';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|