kgess-mirror/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-01-16 23:00:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 42

Refactor background colors across multiple views to use a consistent gray tone

Browse source 
- Updated subtle background colors from various shades (e.g., violet, blue, rose, orange, etc.) to a uniform gray (bg-gray-100/50) in the following files:
  - ai-agent.ejs
  - dashboards.ejs
  - exceptions.ejs
  - incident-management.ejs
  - logs-management.ejs
  - metrics.ejs
  - monitoring.ejs
  - on-call.ejs
  - status-page.ejs
  - traces.ejs
  - workflows.ejs

- Adjusted specific UI elements to change color schemes from violet to sky in workflows.ejs for better visual consistency.
This commit is contained in:
Nawaz Dhandala 2026-01-07 12:39:49 +00:00
parent 6f94e3dec9
commit 40b57f8e5f
No known key found for this signature in database
GPG key ID: 96C5DCA24769DBCA
11 changed files with 74 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Home/Views/ai-agent.ejs
View file

@ -213,7 +213,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- AI Chat Interface Mockup -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -286,7 +286,7 @@
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Diagnosis Visualization -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -451,7 +451,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Code Fix Card -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -972,7 +972,7 @@
<div class="mt-16 lg:mt-0">
<div class="relative" id="ai-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-violet-500/10 via-pink-500/10 to-orange-500/10 rounded-3xl blur-2xl"></div>
<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">

10
Home/Views/dashboards.ejs
View file

@ -202,7 +202,7 @@
<div class="relative lg:order-last">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
<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">
@ -333,7 +333,7 @@
<div class="relative lg:order-first">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
<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">
@ -588,7 +588,7 @@
<div class="relative lg:order-last">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
<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">
@ -732,7 +732,7 @@
<div class="relative lg:order-first">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
<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">
@ -1130,7 +1130,7 @@
<div class="mt-16 lg:mt-0">
<div class="relative" id="dashboards-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 rounded-3xl blur-2xl"></div>
<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">

10
Home/Views/exceptions.ejs
View file

@ -202,7 +202,7 @@
<div class="relative lg:order-last">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Stack Trace Viewer -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -295,7 +295,7 @@
<div class="relative lg:order-first">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Error Grouping Dashboard -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -506,7 +506,7 @@
<div class="relative lg:order-last">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- AI Analysis Card -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -597,7 +597,7 @@
<div class="relative lg:order-first">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Release Tracking Dashboard -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -993,7 +993,7 @@
<!-- Slack Demo -->
<div class="relative" id="exceptions-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-orange-500/10 via-amber-500/10 to-yellow-500/10 rounded-3xl blur-2xl"></div>
<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">

2
Home/Views/incident-management.ejs
View file

@ -901,7 +901,7 @@
<!-- Slack Demo -->
<div class="relative" id="incident-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-rose-500/10 via-pink-500/10 to-red-500/10 rounded-3xl blur-2xl"></div>
<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">

52
Home/Views/logs-management.ejs
View file

@ -217,8 +217,8 @@
<div class="px-4 py-3 border-b border-gray-100">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
<svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="w-8 h-8 rounded-lg bg-amber-50 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="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75"/>
</svg>
</div>
@ -227,7 +227,7 @@
<div class="text-gray-400 text-xs">3 policies configured</div>
</div>
</div>
<span class="flex items-center gap-1 px-2 py-1 bg-indigo-50 rounded text-xs text-indigo-600 border border-indigo-200 font-medium">
<span class="flex items-center gap-1 px-2 py-1 bg-amber-50 rounded text-xs text-amber-600 border border-amber-200 font-medium">
Active
</span>
</div>
@ -242,7 +242,7 @@
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
<span class="text-gray-800 text-sm font-medium">Production Logs</span>
</div>
<span class="text-indigo-600 text-xs font-medium">90 days</span>
<span class="text-amber-600 text-xs font-medium">90 days</span>
</div>
<div class="flex items-center gap-3 text-xs text-gray-500">
<span class="flex items-center gap-1">
@ -263,7 +263,7 @@
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
<span class="text-gray-800 text-sm font-medium">Staging Logs</span>
</div>
<span class="text-indigo-600 text-xs font-medium">30 days</span>
<span class="text-amber-600 text-xs font-medium">30 days</span>
</div>
<div class="flex items-center gap-3 text-xs text-gray-500">
<span class="flex items-center gap-1">
@ -284,7 +284,7 @@
<span class="w-2 h-2 rounded-full bg-gray-400"></span>
<span class="text-gray-800 text-sm font-medium">Debug Logs</span>
</div>
<span class="text-indigo-600 text-xs font-medium">7 days</span>
<span class="text-amber-600 text-xs font-medium">7 days</span>
</div>
<div class="flex items-center gap-3 text-xs text-gray-500">
<span class="flex items-center gap-1">
@ -302,7 +302,7 @@
<!-- Footer -->
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
<span class="text-gray-400 text-xs">Total: 3.4 TB across 2 regions</span>
<span class="text-indigo-600 text-xs font-medium cursor-pointer hover:text-indigo-700">+ Add Policy</span>
<span class="text-amber-600 text-xs font-medium cursor-pointer hover:text-amber-700">+ Add Policy</span>
</div>
</div>
</div>
@ -321,8 +321,8 @@
<div class="grid grid-cols-3 gap-3">
<!-- Kubernetes -->
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
</svg>
</div>
@ -332,8 +332,8 @@
<!-- Docker -->
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
</svg>
</div>
@ -343,8 +343,8 @@
<!-- Application -->
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
</div>
@ -354,8 +354,8 @@
<!-- Syslog -->
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
</svg>
</div>
@ -365,8 +365,8 @@
<!-- Files -->
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
@ -376,8 +376,8 @@
<!-- Cloud -->
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
</svg>
</div>
@ -394,8 +394,8 @@
</div>
</div>
<div class="order-1 lg:order-2">
<div class="flex h-14 w-14 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
<svg class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="flex h-14 w-14 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
<svg class="h-7 w-7 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 9V5.25A2.25 2.25 0 0110.5 3h6a2.25 2.25 0 012.25 2.25v13.5A2.25 2.25 0 0116.5 21h-6a2.25 2.25 0 01-2.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H2.25" />
</svg>
</div>
@ -646,7 +646,7 @@
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
<span class="text-gray-800 text-sm font-medium">Slow Queries</span>
</div>
<span class="px-1.5 py-0.5 bg-indigo-100 text-indigo-700 rounded text-[10px] font-medium">Info</span>
<span class="px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded text-[10px] font-medium">Info</span>
</div>
<div class="text-xs text-gray-500 mb-2">
<span class="font-mono bg-gray-100 px-1 py-0.5 rounded">duration_ms &gt; 5000</span>
@ -771,9 +771,9 @@
<!-- Card 3: Workflows -->
<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">
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-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="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>
@ -908,7 +908,7 @@
<!-- Slack Demo -->
<div class="mt-12 lg:mt-0 relative">
<!-- Decorative gradient background -->
<div class="absolute -inset-4 bg-gradient-to-r from-amber-500/20 via-orange-500/20 to-amber-500/20 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<div class="relative rounded-2xl bg-[#1a1d21] shadow-2xl ring-1 ring-white/10 overflow-hidden">
<!-- Slack Window Header -->

2
Home/Views/metrics.ejs
View file

@ -887,7 +887,7 @@
<!-- Slack Demo -->
<div class="mt-12 lg:mt-0 relative">
<!-- Decorative gradient background -->
<div class="absolute -inset-4 bg-gradient-to-r from-purple-500/20 via-violet-500/20 to-purple-500/20 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<div class="relative rounded-2xl bg-[#1a1d21] shadow-2xl ring-1 ring-white/10 overflow-hidden">
<!-- Slack Window Header -->

2
Home/Views/monitoring.ejs
View file

@ -1156,7 +1156,7 @@
<div class="mt-16 lg:mt-0">
<div class="relative" id="slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-orange-500/10 rounded-3xl blur-2xl"></div>
<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">

10
Home/Views/on-call.ejs
View file

@ -211,7 +211,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-orange-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Calendar-style Rotation Schedule -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -318,7 +318,7 @@
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-amber-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Alert Log Timeline -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -498,7 +498,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-orange-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Escalation Chain Visualization -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -608,7 +608,7 @@
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-amber-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Multi-channel Notification Cards -->
<div class="relative max-w-md mx-auto space-y-3">
@ -949,7 +949,7 @@
<!-- Slack Demo -->
<div class="relative" id="oncall-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-emerald-500/10 via-green-500/10 to-teal-500/10 rounded-3xl blur-2xl"></div>
<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">

2
Home/Views/status-page.ejs
View file

@ -1017,7 +1017,7 @@
<!-- Slack Demo -->
<div class="relative" id="status-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-emerald-500/10 via-teal-500/10 to-cyan-500/10 rounded-3xl blur-2xl"></div>
<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">

10
Home/Views/traces.ejs
View file

@ -209,7 +209,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-cyan-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Service Map Visual -->
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@ -318,7 +318,7 @@
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-teal-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Waterfall Trace View -->
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@ -482,7 +482,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-red-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Error Spans in Trace View -->
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@ -571,7 +571,7 @@
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-indigo-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Correlated Logs and Traces View -->
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@ -885,7 +885,7 @@
<!-- Slack Demo -->
<div class="relative" id="traces-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-yellow-500/10 via-amber-500/10 to-orange-500/10 rounded-3xl blur-2xl"></div>
<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">

40
Home/Views/workflows.ejs
View file

@ -209,7 +209,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Workflow Builder Diagram -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -228,15 +228,15 @@
<div class="flex flex-col items-center gap-3">
<!-- Trigger Node -->
<div class="relative">
<div class="bg-violet-600 text-white px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
<div class="w-8 h-8 rounded-lg bg-violet-500 flex items-center justify-center">
<div class="bg-sky-600 text-white px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
<div class="w-8 h-8 rounded-lg bg-sky-500 flex items-center justify-center">
<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="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div>
<div class="text-xs font-semibold">Trigger</div>
<div class="text-[10px] text-violet-200">On Incident Created</div>
<div class="text-[10px] text-sky-200">On Incident Created</div>
</div>
</div>
</div>
@ -305,7 +305,7 @@
<!-- Email Action -->
<div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2 -mt-1 ml-[-60px]">
<div class="w-6 h-6 rounded bg-violet-100 flex items-center justify-center">
<div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
@ -336,7 +336,7 @@
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Workflow Logs Panel -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -404,8 +404,8 @@
</div>
<!-- Running Log -->
<div class="flex items-start gap-3 p-3 bg-violet-50 rounded-lg border border-violet-100">
<div class="w-6 h-6 rounded-full bg-violet-100 flex items-center justify-center flex-shrink-0 mt-0.5">
<div class="flex items-start gap-3 p-3 bg-sky-50 rounded-lg border border-sky-100">
<div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5">
<svg class="w-3.5 h-3.5 text-violet-600 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@ -413,8 +413,8 @@
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-violet-800">Sync User Data</span>
<span class="text-xs text-violet-400">Running...</span>
<span class="text-sm font-medium text-sky-800">Sync User Data</span>
<span class="text-xs text-sky-400">Running...</span>
</div>
<div class="text-xs text-violet-600 mt-0.5">Step 2 of 5 - Processing records</div>
</div>
@ -522,7 +522,7 @@
<div class="mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Variables Panel -->
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@ -550,14 +550,14 @@
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded bg-violet-100 flex items-center justify-center">
<div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-violet-600" 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>
</div>
<span class="text-sm font-medium text-gray-800">SLACK_WEBHOOK_URL</span>
</div>
<span class="px-2 py-0.5 bg-violet-100 text-violet-700 text-[10px] font-medium rounded">Secret</span>
<span class="px-2 py-0.5 bg-sky-100 text-violet-700 text-[10px] font-medium rounded">Secret</span>
</div>
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
<span class="text-gray-400 text-xs font-mono tracking-wider">************************</span>
@ -644,7 +644,7 @@
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
<div class="relative">
<!-- Subtle background -->
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<!-- Code Editor Mockup -->
<div class="relative bg-gray-900 rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-700">
@ -659,7 +659,7 @@
<span class="text-gray-400 text-xs">custom-action.js</span>
</div>
<div class="flex items-center gap-2">
<span class="px-2 py-0.5 bg-violet-600/20 text-violet-400 text-[10px] font-medium rounded">JavaScript</span>
<span class="px-2 py-0.5 bg-sky-600/20 text-sky-400 text-[10px] font-medium rounded">JavaScript</span>
</div>
</div>
@ -667,7 +667,7 @@
<div class="p-4 font-mono text-xs leading-relaxed overflow-x-auto">
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">1</div>
<div><span class="text-violet-400">async</span> <span class="text-sky-400">function</span> <span class="text-yellow-300">execute</span><span class="text-gray-300">(</span><span class="text-orange-300">context</span><span class="text-gray-300">) {</span></div>
<div><span class="text-sky-400">async</span> <span class="text-sky-400">function</span> <span class="text-yellow-300">execute</span><span class="text-gray-300">(</span><span class="text-orange-300">context</span><span class="text-gray-300">) {</span></div>
</div>
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">2</div>
@ -675,7 +675,7 @@
</div>
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">3</div>
<div><span class="text-gray-300"> </span><span class="text-violet-400">const</span> <span class="text-gray-300">{ incident } = context.</span><span class="text-sky-300">data</span><span class="text-gray-300">;</span></div>
<div><span class="text-gray-300"> </span><span class="text-sky-400">const</span> <span class="text-gray-300">{ incident } = context.</span><span class="text-sky-300">data</span><span class="text-gray-300">;</span></div>
</div>
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">4</div>
@ -687,7 +687,7 @@
</div>
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">6</div>
<div><span class="text-gray-300"> </span><span class="text-violet-400">await</span> <span class="text-yellow-300">fetch</span><span class="text-gray-300">(</span><span class="text-emerald-400">process.env.SLACK_URL</span><span class="text-gray-300">, {</span></div>
<div><span class="text-gray-300"> </span><span class="text-sky-400">await</span> <span class="text-yellow-300">fetch</span><span class="text-gray-300">(</span><span class="text-emerald-400">process.env.SLACK_URL</span><span class="text-gray-300">, {</span></div>
</div>
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">7</div>
@ -715,7 +715,7 @@
</div>
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">13</div>
<div><span class="text-gray-300"> </span><span class="text-violet-400">return</span><span class="text-gray-300"> { success: </span><span class="text-orange-400">true</span><span class="text-gray-300"> };</span></div>
<div><span class="text-gray-300"> </span><span class="text-sky-400">return</span><span class="text-gray-300"> { success: </span><span class="text-orange-400">true</span><span class="text-gray-300"> };</span></div>
</div>
<div class="flex">
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">14</div>
@ -974,7 +974,7 @@
<div class="mt-16 lg:mt-0">
<div class="relative" id="workflows-slack-demo">
<!-- Decorative background elements -->
<div class="absolute -inset-4 bg-gradient-to-r from-sky-500/10 via-purple-500/10 to-pink-500/10 rounded-3xl blur-2xl"></div>
<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">