mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 11:26:25 +00:00
bb921e10eb
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
766 lines
21 KiB
HTML
766 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>회의록 목록 - 회의록 서비스</title>
|
|
<link rel="stylesheet" href="common.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--color-gray-50);
|
|
}
|
|
|
|
/* Header */
|
|
.page-header {
|
|
background-color: var(--color-white);
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
padding: var(--spacing-6);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.back-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
color: var(--color-gray-600);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-body-small);
|
|
margin-bottom: var(--spacing-4);
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.back-button:hover {
|
|
color: var(--color-primary-main);
|
|
}
|
|
|
|
.header-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--font-size-h1);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-gray-900);
|
|
}
|
|
|
|
/* Filters */
|
|
.filters-section {
|
|
display: flex;
|
|
gap: var(--spacing-6);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: var(--spacing-4) 0;
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-gray-700);
|
|
font-weight: var(--font-weight-semibold);
|
|
margin-right: var(--spacing-2);
|
|
}
|
|
|
|
.filter-button {
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
border: none;
|
|
background-color: transparent;
|
|
color: var(--color-gray-600);
|
|
font-size: var(--font-size-body);
|
|
font-weight: var(--font-weight-medium);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.filter-button:hover {
|
|
background-color: var(--color-gray-100);
|
|
color: var(--color-gray-900);
|
|
}
|
|
|
|
.filter-button.active {
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
box-shadow: 0 2px 4px rgba(0, 217, 177, 0.2);
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: var(--radius-md);
|
|
background-color: var(--color-white);
|
|
flex: 1;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.search-box input {
|
|
border: none;
|
|
outline: none;
|
|
flex: 1;
|
|
font-size: var(--font-size-body);
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-6);
|
|
}
|
|
|
|
.stats-bar {
|
|
display: flex;
|
|
gap: var(--spacing-4);
|
|
margin-bottom: var(--spacing-6);
|
|
padding: var(--spacing-4);
|
|
background-color: var(--color-white);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.stat-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: var(--font-size-h4);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-gray-900);
|
|
}
|
|
|
|
/* Meeting List */
|
|
.meeting-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.meeting-item {
|
|
background-color: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-5);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.meeting-item:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-primary-main);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.meeting-item-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-3);
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.meeting-item-left {
|
|
flex: 1;
|
|
}
|
|
|
|
.meeting-item-title {
|
|
font-size: var(--font-size-h3);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.meeting-item-meta {
|
|
display: flex;
|
|
gap: var(--spacing-4);
|
|
flex-wrap: wrap;
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
.meeting-item-status {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.status-badge {
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-size-body-small);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.status-badge.confirmed {
|
|
background-color: rgba(0, 217, 177, 0.1);
|
|
color: var(--color-primary-main);
|
|
}
|
|
|
|
.status-badge.scheduled {
|
|
background-color: rgba(99, 102, 241, 0.1);
|
|
color: #6366f1;
|
|
}
|
|
|
|
.status-badge.in-progress {
|
|
background-color: rgba(245, 158, 11, 0.1);
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.meeting-item-description {
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-gray-700);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
|
|
.meeting-item-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: var(--spacing-3);
|
|
border-top: 1px solid var(--color-gray-100);
|
|
}
|
|
|
|
.attendees-list {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.attendee-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--font-size-body-small);
|
|
font-weight: var(--font-weight-bold);
|
|
border: 2px solid var(--color-white);
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.attendee-avatar:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.attendee-count {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
margin-left: var(--spacing-2);
|
|
}
|
|
|
|
.meeting-stats {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
.stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--spacing-10) var(--spacing-4);
|
|
color: var(--color-gray-500);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 64px;
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
.empty-message {
|
|
font-size: var(--font-size-h4);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.empty-description {
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-gray-400);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 767px) {
|
|
.page-header {
|
|
padding: var(--spacing-3);
|
|
}
|
|
|
|
.main-content {
|
|
padding: var(--spacing-3);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--font-size-h3);
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
|
|
.header-top {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
/* 필터 섹션 개선 */
|
|
.filters-section {
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3) 0;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
.filter-group::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari */
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: var(--font-size-body-small);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.filter-button {
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
font-size: var(--font-size-body-small);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 요약카드 개선 - 가로 스크롤 */
|
|
.stats-bar {
|
|
flex-direction: row;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3);
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.stats-bar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.stat-item {
|
|
flex-shrink: 0;
|
|
min-width: 140px;
|
|
padding: var(--spacing-2);
|
|
background-color: var(--color-gray-50);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: var(--font-size-h3);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--font-size-caption);
|
|
}
|
|
|
|
/* 회의록 카드 */
|
|
.meeting-item {
|
|
padding: var(--spacing-4);
|
|
}
|
|
|
|
.meeting-item-title {
|
|
font-size: var(--font-size-h4);
|
|
}
|
|
|
|
.meeting-item-header {
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.meeting-item-status {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.meeting-item-meta {
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.meeting-item-footer {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.search-box {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.back-button {
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="page-header">
|
|
<div class="header-content">
|
|
<a href="02-대시보드.html" class="back-button">
|
|
← 대시보드
|
|
</a>
|
|
|
|
<div class="header-top">
|
|
<h1 class="page-title">회의록 목록</h1>
|
|
<div class="search-box">
|
|
<span>🔍</span>
|
|
<input type="text" placeholder="회의록 검색..." id="searchInput">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters-section">
|
|
<div class="filter-group">
|
|
<span class="filter-label">상태:</span>
|
|
<button class="filter-button active" data-filter="all">전체</button>
|
|
<button class="filter-button" data-filter="confirmed">확정</button>
|
|
<button class="filter-button" data-filter="scheduled">예정</button>
|
|
<button class="filter-button" data-filter="in-progress">진행중</button>
|
|
</div>
|
|
<div class="filter-group">
|
|
<span class="filter-label">기간:</span>
|
|
<button class="filter-button active" data-period="all">전체</button>
|
|
<button class="filter-button" data-period="week">1주</button>
|
|
<button class="filter-button" data-period="month">1개월</button>
|
|
<button class="filter-button" data-period="quarter">3개월</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Stats Bar -->
|
|
<div class="stats-bar">
|
|
<div class="stat-item">
|
|
<span class="stat-icon">📋</span>
|
|
<div class="stat-text">
|
|
<span class="stat-label">전체 회의록</span>
|
|
<span class="stat-value" id="totalCount">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">✅</span>
|
|
<div class="stat-text">
|
|
<span class="stat-label">확정 완료</span>
|
|
<span class="stat-value" id="confirmedCount">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">📌</span>
|
|
<div class="stat-text">
|
|
<span class="stat-label">진행 중 Todo</span>
|
|
<span class="stat-value" id="todoCount">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meeting List -->
|
|
<div class="meeting-list" id="meetingList">
|
|
<!-- Meetings will be rendered here -->
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div class="empty-state" id="emptyState" style="display: none;">
|
|
<div class="empty-icon">📭</div>
|
|
<div class="empty-message">회의록이 없습니다</div>
|
|
<div class="empty-description">새로운 회의를 예약하고 회의록을 작성해보세요</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="common.js"></script>
|
|
<script>
|
|
// Use MeetingApp utilities directly without destructuring
|
|
|
|
// Sample meeting data
|
|
const meetings = [
|
|
{
|
|
id: 'm-001',
|
|
title: '2025년 1분기 제품 기획 회의',
|
|
date: '2025-10-25 14:00',
|
|
location: '본사 2층 대회의실',
|
|
status: 'confirmed',
|
|
attendees: ['김민준', '박서연', '이준호', '최유진'],
|
|
description: '신규 회의록 서비스 기획 논의 및 개발 일정 수립',
|
|
duration: 90,
|
|
decisions: 3,
|
|
todos: 5
|
|
},
|
|
{
|
|
id: 'm-002',
|
|
title: '주간 스크럼 회의',
|
|
date: '2025-10-21 10:00',
|
|
location: 'Zoom',
|
|
status: 'confirmed',
|
|
attendees: ['김민준', '이준호', '최유진'],
|
|
description: '지난 주 진행 상황 공유 및 이번 주 계획 수립',
|
|
duration: 30,
|
|
decisions: 2,
|
|
todos: 8
|
|
},
|
|
{
|
|
id: 'm-003',
|
|
title: 'AI 기능 개선 회의',
|
|
date: '2025-10-23 15:00',
|
|
location: '본사 3층 소회의실',
|
|
status: 'in-progress',
|
|
attendees: ['박서연', '이준호'],
|
|
description: 'LLM 기반 회의록 자동 작성 개선 방안 논의',
|
|
duration: 60,
|
|
decisions: 4,
|
|
todos: 3
|
|
},
|
|
{
|
|
id: 'm-004',
|
|
title: '2024 Q4 마케팅 전략 회의',
|
|
date: '2024-01-15 14:00',
|
|
location: '본사 대회의실',
|
|
status: 'confirmed',
|
|
attendees: ['김민준', '박서연', '이준호', '최유진', '정도현'],
|
|
description: 'Q4 마케팅 예산 증액 및 인플루언서 마케팅 캠페인 론칭 결정',
|
|
duration: 90,
|
|
decisions: 3,
|
|
todos: 12
|
|
},
|
|
{
|
|
id: 'm-005',
|
|
title: 'UI/UX 개선 워크샵',
|
|
date: '2025-10-18 13:00',
|
|
location: '본사 4층 세미나실',
|
|
status: 'confirmed',
|
|
attendees: ['최유진', '김민준', '박서연'],
|
|
description: '사용자 피드백 기반 UI/UX 개선 방안 도출',
|
|
duration: 120,
|
|
decisions: 5,
|
|
todos: 7
|
|
},
|
|
{
|
|
id: 'm-006',
|
|
title: '월간 전체 회의',
|
|
date: '2025-11-01 16:00',
|
|
location: '본사 대강당',
|
|
status: 'scheduled',
|
|
attendees: ['김민준', '박서연', '이준호', '최유진', '정도현', '송주영'],
|
|
description: '월간 실적 공유 및 다음 달 목표 설정',
|
|
duration: 60,
|
|
decisions: 0,
|
|
todos: 0
|
|
}
|
|
];
|
|
|
|
// Render meetings
|
|
function renderMeetings(filteredMeetings = meetings) {
|
|
const meetingList = document.getElementById('meetingList');
|
|
const emptyState = document.getElementById('emptyState');
|
|
|
|
if (filteredMeetings.length === 0) {
|
|
meetingList.style.display = 'none';
|
|
emptyState.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
meetingList.style.display = 'flex';
|
|
emptyState.style.display = 'none';
|
|
|
|
meetingList.innerHTML = filteredMeetings.map(meeting => {
|
|
const attendeeAvatars = meeting.attendees.slice(0, 4).map((name, index) => {
|
|
const initial = name.charAt(0);
|
|
const colors = ['#00d9b1', '#6366f1', '#f59e0b', '#ec4899'];
|
|
return `<div class="attendee-avatar" style="background-color: ${colors[index % 4]}">${initial}</div>`;
|
|
}).join('');
|
|
|
|
const extraCount = meeting.attendees.length > 4 ? `+${meeting.attendees.length - 4}` : '';
|
|
|
|
const statusClass = {
|
|
'confirmed': 'confirmed',
|
|
'scheduled': 'scheduled',
|
|
'in-progress': 'in-progress'
|
|
}[meeting.status] || 'scheduled';
|
|
|
|
const statusLabel = {
|
|
'confirmed': '✓ 확정 완료',
|
|
'scheduled': '📅 예정',
|
|
'in-progress': '🔄 진행중'
|
|
}[meeting.status] || '예정';
|
|
|
|
return `
|
|
<div class="meeting-item" onclick="window.MeetingApp.navigateTo('13-회의록상세조회.html')">
|
|
<div class="meeting-item-header">
|
|
<div class="meeting-item-left">
|
|
<h3 class="meeting-item-title">${meeting.title}</h3>
|
|
<div class="meeting-item-meta">
|
|
<span class="meta-item">📅 ${formatDateTime(meeting.date)}</span>
|
|
<span class="meta-item">📍 ${meeting.location}</span>
|
|
<span class="meta-item">⏱️ ${meeting.duration}분</span>
|
|
</div>
|
|
</div>
|
|
<div class="meeting-item-status">
|
|
<span class="status-badge ${statusClass}">${statusLabel}</span>
|
|
</div>
|
|
</div>
|
|
<div class="meeting-item-description">
|
|
${meeting.description}
|
|
</div>
|
|
<div class="meeting-item-footer">
|
|
<div class="attendees-list">
|
|
${attendeeAvatars}
|
|
${extraCount ? `<span class="attendee-count">${extraCount}</span>` : ''}
|
|
</div>
|
|
<div class="meeting-stats">
|
|
<span class="stat">✅ 결정사항 ${meeting.decisions}개</span>
|
|
<span class="stat">📌 Todo ${meeting.todos}개</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
// Update stats
|
|
updateStats(filteredMeetings);
|
|
}
|
|
|
|
// Format date time
|
|
function formatDateTime(dateStr) {
|
|
const date = new Date(dateStr);
|
|
return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
|
}
|
|
|
|
// Update stats
|
|
function updateStats(filteredMeetings) {
|
|
const totalCount = filteredMeetings.length;
|
|
const confirmedCount = filteredMeetings.filter(m => m.status === 'confirmed').length;
|
|
const todoCount = filteredMeetings.reduce((sum, m) => sum + m.todos, 0);
|
|
|
|
document.getElementById('totalCount').textContent = totalCount;
|
|
document.getElementById('confirmedCount').textContent = confirmedCount;
|
|
document.getElementById('todoCount').textContent = todoCount;
|
|
}
|
|
|
|
// Filter by status
|
|
const filterButtons = document.querySelectorAll('.filter-button[data-filter]');
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
|
|
const filterValue = button.dataset.filter;
|
|
const filtered = filterValue === 'all'
|
|
? meetings
|
|
: meetings.filter(m => m.status === filterValue);
|
|
|
|
renderMeetings(filtered);
|
|
});
|
|
});
|
|
|
|
// Filter by period
|
|
const periodButtons = document.querySelectorAll('.filter-button[data-period]');
|
|
periodButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
periodButtons.forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
|
|
const periodValue = button.dataset.period;
|
|
let filtered = meetings;
|
|
|
|
if (periodValue !== 'all') {
|
|
const now = new Date();
|
|
const daysMap = { week: 7, month: 30, quarter: 90 };
|
|
const days = daysMap[periodValue];
|
|
|
|
filtered = meetings.filter(m => {
|
|
const meetingDate = new Date(m.date);
|
|
const diffTime = now - meetingDate;
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
return diffDays <= days;
|
|
});
|
|
}
|
|
|
|
renderMeetings(filtered);
|
|
});
|
|
});
|
|
|
|
// Search
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('input', (e) => {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
const filtered = meetings.filter(m =>
|
|
m.title.toLowerCase().includes(searchTerm) ||
|
|
m.description.toLowerCase().includes(searchTerm) ||
|
|
m.location.toLowerCase().includes(searchTerm)
|
|
);
|
|
renderMeetings(filtered);
|
|
});
|
|
|
|
// Initial render
|
|
renderMeetings();
|
|
</script>
|
|
</body>
|
|
</html>
|