Event_Conference_Schedule
반응형 이벤트/컨퍼런스 일정 구성 요소로, 종이/인쇄물에서 영감을 받은 디자인과 포레스트 그린 색상 팔레트가 적용되어 있으며, 다크 모드 지원이 포함됩니다. 다른 요일에 대한 탭 탐색과 확장 가능한 세션 세부 정보가 특징입니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
<!-- Schedule Header -->
<div class="mb-8 text-center">
<h1 class="text-4xl sm:text-5xl font-extrabold text-green-900 dark:text-green-300 mb-2 tracking-tight drop-shadow-sm">Conference Schedule</h1>
<p class="text-lg sm:text-xl text-green-700 dark:text-green-400 font-medium">Stay informed about all the exciting sessions.</p>
</div>
<!-- Schedule Container - Mimics a printed page -->
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative border border-green-200 dark:border-gray-700">
<!-- Page texture/border element -->
<div class="absolute inset-0 border-4 border-dashed border-green-100 dark:border-gray-750 rounded-lg pointer-events-none"></div>
<div class="p-4 sm:p-6 lg:p-8 relative z-10">
<!-- Day Tabs Navigation -->
<div role="tablist" aria-label="Conference Days" class="flex flex-wrap justify-center mb-6 border-b border-green-200 dark:border-gray-700">
<button role="tab" id="tab-day1" aria-controls="panel-day1" aria-selected="true" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-800 dark:text-green-300 border-b-4 border-green-600 dark:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-900 dark:hover:text-green-200 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
<span class="relative">
<span class="block">Day 1</span>
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
</span>
</button>
<button role="tab" id="tab-day2" aria-controls="panel-day2" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
<span class="relative">
<span class="block">Day 2</span>
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
</span>
</button>
<button role="tab" id="tab-day3" aria-controls="panel-day3" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
<span class="relative">
<span class="block">Day 3</span>
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
</span>
</button>
</div>
<!-- Schedule Content for Day 1 -->
<div id="panel-day1" role="tabpanel" aria-labelledby="tab-day1" class="space-y-6">
<!-- Session Item 1 -->
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Opening Keynote: The Future of Sustainable Tech</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T09:00">09:00 AM</time> - <time datetime="2024-10-27T10:00">10:00 AM</time> | Grand Ballroom</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Alice Johnson</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">Join Dr. Alice Johnson, a leading innovator in sustainable technologies, as she outlines the challenges and opportunities for a greener future. This session will explore cutting-edge advancements and their potential impact on our planet.</p>
<p>Topics include renewable energy solutions, eco-friendly materials, and circular economy principles. A Q&A session will follow the presentation.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<!-- Session Item 2 -->
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relative">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Workshop: Hands-on AI for Environmental Monitoring</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T10:30">10:30 AM</time> - <time datetime="2024-10-27T12:00">12:00 PM</time> | Innovation Lab</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Ben Carter</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">This interactive workshop will guide participants through building and deploying AI models for real-world environmental data analysis. Bring your laptops for a practical session on data collection, feature engineering, and model training.</p>
<p>Prerequisites: Basic understanding of Python and data science concepts. Limited seating available. Pre-registration recommended.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<!-- Lunch Break -->
<div class="bg-green-100 dark:bg-gray-700 rounded-lg p-4 sm:p-6 text-center shadow-md border border-green-300 dark:border-gray-600">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1">Lunch Break</h3>
<p class="text-base text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T12:00">12:00 PM</time> - <time datetime="2024-10-27T13:00">01:00 PM</time> | Conference Dining Hall</p>
</div>
</div>
<!-- Schedule Content for Day 2 (hidden by default) -->
<div id="panel-day2" role="tabpanel" aria-labelledby="tab-day2" class="space-y-6 hidden">
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Panel: Green Investments and Impact Funding</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-28T09:30">09:30 AM</time> - <time datetime="2024-10-28T10:30">10:30 AM</time> | Executive Boardroom</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm -ml-4">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Multiple Speakers</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">A moderated discussion with leading investors and fund managers on the growing landscape of green investments, ESG criteria, and how to effectively fund sustainable projects for maximum impact and returns.</p>
<p>Panelists will share insights on emerging markets, risk assessment, and the future of responsible investing.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Schedule Content for Day 3 (hidden by default) -->
<div id="panel-day3" role="tabpanel" aria-labelledby="tab-day3" class="space-y-6 hidden">
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Closing Ceremony & Future Initiatives</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-29T15:00">03:00 PM</time> - <time datetime="2024-10-29T16:00">04:00 PM</time> | Grand Ballroom</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Organizer Team</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">Join us for the closing ceremony to reflect on the insights gained, key takeaways, and discuss the collective impact. We will also announce future initiatives and opportunities for collaboration based on this year's themes.</p>
<p>Networking reception to follow. Don't miss this opportunity to connect with fellow attendees and speakers.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Simple Script for Tab and Accordion Functionality -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const tabButtons = document.querySelectorAll('.tab-button');
const tabPanels = document.querySelectorAll('[role="tabpanel"]');
const expandButtons = document.querySelectorAll('.expand-button');
// Tab functionality
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const targetPanelId = button.getAttribute('aria-controls');
// Deactivate all tabs and hide all panels
tabButtons.forEach(btn => {
btn.setAttribute('aria-selected', 'false');
btn.classList.remove('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
btn.classList.add('border-transparent');
});
tabPanels.forEach(panel => panel.classList.add('hidden'));
// Activate clicked tab and show its panel
button.setAttribute('aria-selected', 'true');
button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
button.classList.remove('border-transparent');
document.getElementById(targetPanelId).classList.remove('hidden');
});
// Set initial active tab state (Day 1)
if (button.getAttribute('aria-selected') === 'true') {
button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
button.classList.remove('border-transparent');
}
});
// Accordion functionality
expandButtons.forEach(button => {
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
// Toggle text within the button
const hideText = button.querySelector('.expand-text-hide');
const showText = button.querySelector('.expand-text-show');
if (isExpanded) {
hideText.classList.remove('hidden');
showText.classList.add('hidden');
} else {
hideText.classList.add('hidden');
showText.classList.remove('hidden');
}
});
});
});
</script>
</div>관련 구성 요소
Functional Components 구성 요소
브루탈리즘(Brutalism) 스타일과 파스텔 색상으로 디자인된 소셜 미디어 구성 요소로, 다크 모드를 지원하는 상호 작용을 위한 복잡한 인터페이스를 갖추고 있습니다.
종이/인쇄에서 영감을 받은 단색 정부 구성 요소
실제 종이 및 인쇄 자료를 모방한 중간 복잡성 구성 요소로, 단색 색 구성표와 다크 모드 지원을 포함한 완전한 응답성을 갖춘 정부/공공 서비스 웹사이트용으로 설계되었습니다.
Functional Components 구성 요소
3D 디자인, 반응형 효과 및 다크 모드 지원을 제공하는 기능적 구성 요소로, Tailwind CSS를 사용하여 구현됩니다.