69 lines
3.7 KiB
Plaintext
69 lines
3.7 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang="id">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title><%= title %></title>
|
||
|
|
<style>
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f7fa; }
|
||
|
|
.topbar { background: <%= brandColor %>; color: white; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
|
||
|
|
.topbar-brand { font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
|
||
|
|
.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
|
||
|
|
.avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
|
||
|
|
.logout-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; text-decoration: none; }
|
||
|
|
.logout-btn:hover { background: rgba(255,255,255,0.3); }
|
||
|
|
.main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
|
||
|
|
.welcome { margin-bottom: 28px; }
|
||
|
|
.welcome h1 { font-size: 22px; color: #1a1a2e; font-weight: 600; }
|
||
|
|
.welcome p { font-size: 14px; color: #666; margin-top: 4px; }
|
||
|
|
.section-title { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
|
||
|
|
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
|
||
|
|
.app-card { background: white; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; border: 1px solid #e8ecf0; text-decoration: none; display: block; }
|
||
|
|
.app-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); border-color: <%= brandColor %>; }
|
||
|
|
.app-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; }
|
||
|
|
.app-name { font-size: 14px; font-weight: 600; color: #1a1a2e; margin-bottom: 4px; }
|
||
|
|
.app-desc { font-size: 12px; color: #888; }
|
||
|
|
.status-bar { background: white; border-radius: 12px; padding: 16px 20px; border: 1px solid #e8ecf0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; }
|
||
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
|
||
|
|
.sso-badge { background: #e1f5ee; color: #085041; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; margin-left: auto; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="topbar">
|
||
|
|
<div class="topbar-brand">🚀 OpenSuite</div>
|
||
|
|
<div class="topbar-user">
|
||
|
|
<div class="avatar"><%= user.name.slice(0,2).toUpperCase() %></div>
|
||
|
|
<span><%= user.name %></span>
|
||
|
|
<a href="/auth/logout" class="logout-btn">Keluar</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="main">
|
||
|
|
<div class="welcome">
|
||
|
|
<h1>Selamat datang, <%= user.name.split(' ')[0] %> 👋</h1>
|
||
|
|
<p>Akses semua aplikasi OpenSuite dari satu tempat</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-title">Aplikasi</div>
|
||
|
|
<div class="app-grid">
|
||
|
|
<% apps.forEach(app => { %>
|
||
|
|
<a href="<%= app.url %>" class="app-card" target="_blank">
|
||
|
|
<div class="app-icon" style="background:<%= app.color %>">
|
||
|
|
<%= app.icon %>
|
||
|
|
</div>
|
||
|
|
<div class="app-name"><%= app.name %></div>
|
||
|
|
<div class="app-desc"><%= app.desc %></div>
|
||
|
|
</a>
|
||
|
|
<% }) %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="status-bar">
|
||
|
|
<div class="status-dot"></div>
|
||
|
|
<span>Semua sistem berjalan normal</span>
|
||
|
|
<span class="sso-badge">SSO Aktif · <%= user.email %></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|