feat: add dev tools page and update sidebar toggle and team mood dashboard UI
This commit is contained in:
@@ -268,11 +268,11 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
<div class="db-stat-link">Open Vault →</div>
|
||||
</a>
|
||||
|
||||
<!-- Projects -->
|
||||
<!-- Files -->
|
||||
<a href="?action=projects" class="db-stat-card" style="border-top:3px solid #F59E0B;">
|
||||
<div class="db-stat-label">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
Projects & Files
|
||||
Files
|
||||
</div>
|
||||
<div class="db-stat-value" style="color:#F59E0B;"><?= $projects_count ?></div>
|
||||
<div class="db-stat-sub">
|
||||
@@ -295,36 +295,45 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ── Team Moods + Activity Log ───────────────────────────────────────────── -->
|
||||
<div class="two-col">
|
||||
|
||||
<!-- Team Moods -->
|
||||
<div class="card">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
|
||||
<h3 style="font-size:1rem; font-weight:700;">👥 Team Mood</h3>
|
||||
<span style="font-size:0.75rem; color:var(--text-light); font-style:italic;">Live from colleagues</span>
|
||||
</div>
|
||||
<?php if(empty($team_moods)): ?>
|
||||
<p style="color:var(--text-light); font-size:0.85rem;">No one else has set a mood yet.</p>
|
||||
<?php else: ?>
|
||||
<div class="team-mood-row">
|
||||
<?php foreach($team_moods as $tm): ?>
|
||||
<div class="team-mood-chip" title="Updated: <?= date('M j, H:i', strtotime($tm['mood_updated_at'])) ?>">
|
||||
<span class="em"><?= $tm['mood'] ?></span>
|
||||
<span><?= htmlspecialchars($tm['username']) ?></span>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if($my_mood): ?>
|
||||
<div style="margin-top:1rem; padding-top:0.75rem; border-top:1px dashed var(--border); font-size:0.8rem; color:var(--text-light);">
|
||||
Your mood is visible to your team: <strong style="color:var(--text);"><?= $my_mood ?></strong>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<!-- ── Team Moods ───────────────────────────────────────────── -->
|
||||
<div class="card" style="margin-bottom:1.5rem;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
|
||||
<h3 style="font-size:1rem; font-weight:700;">👥 Team Mood</h3>
|
||||
<span style="font-size:0.75rem; color:var(--text-light); font-style:italic;">Live from colleagues</span>
|
||||
</div>
|
||||
<?php if(empty($team_moods)): ?>
|
||||
<p style="color:var(--text-light); font-size:0.85rem;">No one else has set a mood yet.</p>
|
||||
<?php else: ?>
|
||||
<div class="team-mood-row" style="display:flex; flex-wrap:nowrap; overflow-x:auto; gap:1rem; padding-bottom:0.5rem;">
|
||||
<?php
|
||||
$avatar_colors_tm = ['#4F46E5','#10B981','#F59E0B','#EF4444','#8B5CF6','#06B6D4','#EC4899','#84CC16'];
|
||||
foreach($team_moods as $tm):
|
||||
$initial = strtoupper(mb_substr($tm['username'], 0, 1));
|
||||
$color = $avatar_colors_tm[crc32($tm['username']) % count($avatar_colors_tm)];
|
||||
?>
|
||||
<div style="position:relative; flex-shrink:0; cursor:pointer;" title="<?= htmlspecialchars($tm['username']) ?> (Updated: <?= date('M j, H:i', strtotime($tm['mood_updated_at'])) ?>)">
|
||||
<div style="width:40px; height:40px; border-radius:50%; background:<?= $color ?>; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem;">
|
||||
<?= $initial ?>
|
||||
</div>
|
||||
<div style="position:absolute; top:-4px; right:-4px; background:var(--surface); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:0.8rem; box-shadow:0 2px 4px rgba(0,0,0,0.1);">
|
||||
<?= $tm['mood'] ?>
|
||||
</div>
|
||||
<div style="font-size:0.65rem; color:var(--text-light); text-align:center; margin-top:4px; max-width:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
|
||||
<?= htmlspecialchars($tm['username']) ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if($my_mood): ?>
|
||||
<div style="margin-top:0.5rem; font-size:0.8rem; color:var(--text-light);">
|
||||
Your mood is visible to your team: <strong style="color:var(--text);"><?= $my_mood ?></strong>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Activity Log -->
|
||||
<div class="card">
|
||||
<!-- ── Activity Log ───────────────────────────────────────────── -->
|
||||
<div class="card" style="flex:1; display:flex; flex-direction:column; min-height:0;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
|
||||
<div style="display:flex; align-items:center; gap:0.65rem;">
|
||||
<h3 style="font-size:1rem; font-weight:700;">🕓 Recent Activity</h3>
|
||||
@@ -393,7 +402,6 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- .db-wrapper -->
|
||||
|
||||
<script>
|
||||
@@ -401,7 +409,7 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const el = document.getElementById('current-datetime');
|
||||
if (el) el.textContent = now.toLocaleString('id-ID', {
|
||||
if (el) el.textContent = now.toLocaleString('en-US', {
|
||||
weekday:'long', year:'numeric', month:'long', day:'numeric',
|
||||
hour:'2-digit', minute:'2-digit', second:'2-digit'
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user