-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathintegrations.html
More file actions
149 lines (145 loc) · 9.76 KB
/
Copy pathintegrations.html
File metadata and controls
149 lines (145 loc) · 9.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrations — Lumora</title>
<meta name="description" content="Configure third-party integrations for Lumora notifications.">
<meta property="og:title" content="Integrations — Lumora">
<meta property="og:description" content="Configure third-party integrations for Lumora notifications.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://hellenicdev.github.io/lumora/integrations.html">
<base href="/lumora/">
<link rel="icon" type="image/svg+xml" href="/lumora/favicon.svg">
<link rel="alternate icon" href="/lumora/favicon.ico">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dashboard.css">
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9FWQFZME3Z"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-9FWQFZME3Z');</script>
<style>
.integration-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.integration-card .info { flex: 1; }
.integration-card .info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; }
.integration-card .info p { font-size: 0.85rem; color: var(--text-secondary); }
.integration-card .info .events { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.integration-card .info .events span { font-size: 0.7rem; background: var(--bg-subtle); padding: 0.15rem 0.5rem; border-radius: 4px; color: var(--text-secondary); }
.integration-card .actions { display: flex; gap: 0.5rem; align-items: center; }
.integration-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.integration-modal { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; }
.integration-modal h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.25rem; }
.integration-modal .form-group { margin-bottom: 1rem; }
.integration-modal .form-group label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--text-secondary); }
.integration-modal .form-group .input, .integration-modal .form-group select { width: 100%; }
.integration-modal .modal-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; }
.integrations-empty { text-align: center; padding: 4rem 0; }
.integrations-empty svg { opacity: 0.4; margin-bottom: 1rem; }
.integrations-empty h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.integrations-empty p { color: var(--text-secondary); font-size: 0.9rem; max-width: 400px; margin: 0 auto 1.5rem; line-height: 1.5; }
</style>
</head>
<body>
<div class="dashboard-layout">
<aside class="sidebar">
<div class="sidebar-header">
<a href="/lumora/" class="logo">Lumora</a>
<button class="sidebar-close" id="sidebarClose"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
</div>
<nav class="sidebar-nav">
<div class="nav-section-label">Main</div>
<a href="/lumora/dashboard.html" class="nav-item">Dashboard</a>
<a href="/lumora/repositories.html" class="nav-item">Repositories</a>
<a href="/lumora/documentation.html" class="nav-item">Documentation</a>
<a href="/lumora/chat.html" class="nav-item">AI Chat</a>
<a href="/lumora/health.html" class="nav-item">Health</a>
<a href="/lumora/team.html" class="nav-item">Team</a>
<div class="nav-section-label">Organization</div>
<a href="/lumora/audit.html" class="nav-item">Audit Log</a>
<a href="/lumora/integrations.html" class="nav-item active">Integrations</a>
</nav>
<div class="sidebar-footer">
<div class="sidebar-user" id="userMenuTrigger">
<div class="sidebar-user-avatar" id="userAvatar">U</div>
<div class="sidebar-user-info">
<div class="sidebar-user-name" id="userName">User</div>
<div class="sidebar-user-email" id="userEmail">user@example.com</div>
<div id="planBadge"></div>
</div>
</div>
<a href="#" id="logoutBtn" class="nav-item" style="color:var(--danger);margin-top:8px">Logout</a>
</div>
</aside>
<main class="main-content">
<header class="topbar">
<div class="topbar-left">
<button class="sidebar-toggle" id="sidebarToggle" aria-label="Open sidebar">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
<div class="topbar-right">
<button id="themeToggle" class="icon-btn theme-btn" aria-label="Toggle theme">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path class="sun" 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"/>
<path class="moon" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</svg>
</button>
<div style="position:relative">
<button class="icon-btn" id="notifTrigger" aria-label="Notifications">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
<span class="dot" id="notifDot"></span>
</button>
<div class="notification-dropdown" id="notifDropdown">
<div class="notification-header"><h4>Notifications</h4></div>
<div class="notification-list" id="notifList"></div>
</div>
</div>
<div style="position:relative">
<button class="icon-btn" id="userMenuTrigger2" aria-label="User menu">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</button>
<div class="user-menu-dropdown" id="userMenuDropdown">
<a href="#" class="user-menu-item" data-action="settings">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
Settings
</a>
<hr style="border:none;border-top:1px solid var(--border);margin:4px 0">
<a href="#" class="user-menu-item danger" data-action="logout">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
Log out
</a>
</div>
</div>
</div>
</header>
<div class="page-content">
<div id="pageContent">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem">
<div>
<h2 style="font-size:1.1rem;font-weight:600">Connected Integrations</h2>
<p style="color:var(--text-secondary);font-size:0.85rem">Receive notifications in Slack, webhooks, and more.</p>
</div>
<button class="btn btn-primary" id="addIntegrationBtn">Add Integration</button>
</div>
<div id="integrationsList">
<p style="text-align:center;padding:3rem 0;color:var(--text-muted)">Loading integrations...</p>
</div>
</div>
</div>
</main>
</div>
<div id="integrationModal" style="display:none"></div>
<script src="/lumora/js/theme.js"></script>
<script src="/lumora/js/config.js"></script>
<script src="/lumora/js/api.js"></script>
<script src="/lumora/js/dashboard.js"></script>
<script src="/lumora/js/integrations.js"></script>
<div class="cookie-consent" id="cookieConsent">
<p>We use cookies to improve your experience. <a href="/lumora/privacy.html">Learn more</a></p>
<div class="cookie-buttons">
<button class="btn btn-ghost" id="cookieDecline">Decline</button>
<button class="btn btn-primary" id="cookieAccept">Accept</button>
</div>
</div>
<script src="/lumora/js/cookie-consent.js"></script>
</body>
</html>