517 lines
34 KiB
HTML
517 lines
34 KiB
HTML
SafeValue must use [property]=binding:
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EventVerse</div><ul class="nav-1-nav-links"><li><a href="home.html">Platform Home</a></li><li><a href="about.html">Our Vision</a></li><li><a href="contact.html">Get In Touch</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">Help Center</a></li><li class="nav-1-dropdown"><a href="#">Resources<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Attend Event</button><button class="nav-1-btn nav-1-solid">Host an Event</button></div></nav></div>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User Profile Overview</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<section class="user-profile-overview">
|
|
<div class="profile-main-content">
|
|
<!-- Profile Summary Card -->
|
|
<div class="profile-card">
|
|
<div class="profile-header">
|
|
<div class="profile-avatar">
|
|
<img src="https://via.placeholder.com/96x96/6a40f2/FFFFFF?text=JP" alt="User Profile Picture">
|
|
</div>
|
|
<div class="profile-info">
|
|
<h1>John P. Doe</h1>
|
|
<p>Virtual Events Enthusiast | Speaker | Organizer</p>
|
|
<p>Location: New York, USA</p>
|
|
</div>
|
|
<div style="margin-left: auto;">
|
|
<button class="btn">Edit Profile</button>
|
|
</div>
|
|
</div>
|
|
<div class="profile-bio">
|
|
<p>
|
|
A passionate advocate for engaging virtual experiences. Specializing in creating interactive
|
|
environments for large-scale conferences and intimate breakout sessions. Excited by new technologies
|
|
like spatial audio and avatar-based networking to enhance online interaction.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">Virtual Conferences</span>
|
|
<span class="tag">Event Tech</span>
|
|
<span class="tag">Networking</span>
|
|
<span class="tag">Spatial Audio</span>
|
|
<span class="tag">Community Building</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity Card -->
|
|
<div class="profile-card">
|
|
<h2 class="section-header">Recent Activity</h2>
|
|
<ul class="activity-list">
|
|
<li class="activity-item">
|
|
<div class="activity-icon">
|
|
<!-- Placeholder icon -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l10 10-10 10-10-10z"></path></svg>
|
|
</div>
|
|
<div class="activity-text">
|
|
Attended "Future of Remote Work Summit 2024".
|
|
</div>
|
|
<div class="activity-time">5 mins ago</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon">
|
|
<!-- Placeholder icon -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
|
</div>
|
|
<div class="activity-text">
|
|
Connected with Sarah Lee.
|
|
</div>
|
|
<div class="activity-time">2 hours ago</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon">
|
|
<!-- Placeholder icon -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.5 8.5 0 017.6 4.7z"></path></svg>
|
|
</div>
|
|
<div class="activity-text">
|
|
Posted a comment in "Networking Best Practices" breakout room.
|
|
</div>
|
|
<div class="activity-time">1 day ago</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon">
|
|
<!-- Placeholder icon -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="10" y2="9"></line></svg>
|
|
</div>
|
|
<div class="activity-text">
|
|
Downloaded "Conference Agenda Q3 2024".
|
|
</div>
|
|
<div class="activity-time">3 days ago</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- My Connections Card -->
|
|
<div class="profile-card">
|
|
<h2 class="section-header">My Connections (124)</h2>
|
|
<ul class="connections-list">
|
|
<li class="connection-item">
|
|
<div class="connection-avatar">
|
|
<img src="https://via.placeholder.com/40x40/FF5733/FFFFFF?text=AL" alt="Connection Avatar">
|
|
</div>
|
|
<div class="connection-details">
|
|
<strong>Alice Wonderland</strong>
|
|
<span>Head of Events, Acme Corp</span>
|
|
</div>
|
|
<div class="connection-actions">
|
|
<button class="btn btn-outline">Message</button>
|
|
</div>
|
|
</li>
|
|
<li class="connection-item">
|
|
<div class="connection-avatar">
|
|
<img src="https://via.placeholder.com/40x40/33FF57/FFFFFF?text=BW" alt="Connection Avatar">
|
|
</div>
|
|
<div class="connection-details">
|
|
<strong>Bob Williams</strong>
|
|
<span>CEO, Event Solutions Inc.</span>
|
|
</div>
|
|
<div class="connection-actions">
|
|
<button class="btn btn-outline">Message</button>
|
|
</div>
|
|
</li>
|
|
<li class="connection-item">
|
|
<div class="connection-avatar">
|
|
<img src="https://via.placeholder.com/40x40/3357FF/FFFFFF?text=CC" alt="Connection Avatar">
|
|
</div>
|
|
<div class="connection-details">
|
|
<strong>Carol Chen</strong>
|
|
<span>Marketing Director, Global Connect</span>
|
|
</div>
|
|
<div class="connection-actions">
|
|
<button class="btn btn-outline">Message</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div style="text-align: center; margin-top: var(--spacing-md);">
|
|
<button class="btn btn-outline">View All Connections</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="profile-sidebar">
|
|
<!-- Upcoming Events Card -->
|
|
<div class="profile-card">
|
|
<h2 class="section-header">Upcoming Events</h2>
|
|
<ul class="activity-list">
|
|
<li class="upcoming-event-item">
|
|
<div class="event-title">Global Tech Summit 2024</div>
|
|
<div class="event-details">
|
|
<span>Oct 26-28, 2024</span> | <span>Virtual Hall 1</span>
|
|
</div>
|
|
<div class="event-actions">
|
|
<button class="btn">Join</button>
|
|
<button class="btn btn-outline">Details</button>
|
|
</div>
|
|
</li>
|
|
<li class="upcoming-event-item">
|
|
<div class="event-title">Creative Industries Meetup</div>
|
|
<div class="event-details">
|
|
<span>Nov 15, 2024</span> | <span>Avatar Room Beta</span>
|
|
</div>
|
|
<div class="event-actions">
|
|
<button class="btn">Join</button>
|
|
<button class="btn btn-outline">Details</button>
|
|
</div>
|
|
</li>
|
|
<li class="upcoming-event-item">
|
|
<div class="event-title">Annual Marketing Conference</div>
|
|
<div class="event-details">
|
|
<span>Dec 2-4, 2024</span> | <span>Main Stage</span>
|
|
</div>
|
|
<div class="event-actions">
|
|
<button class="btn">Join</button>
|
|
<button class="btn btn-outline">Details</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Quick Links / Resources Card -->
|
|
<div class="profile-card">
|
|
<h2 class="section-header">Quick Links</h2>
|
|
<nav>
|
|
<ul class="activity-list">
|
|
<li class="activity-item">
|
|
<div class="activity-icon">
|
|
<!-- Placeholder icon -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
|
</div>
|
|
<div class="activity-text"><a href="#" style="text-decoration: none; color: inherit;">Manage Subscriptions</a></div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon">
|
|
<!-- Placeholder icon -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-3 3a5 5 0 00-1.74 4.3Z"></path><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l3-3a5 5 0 001.74-4.3Z"></path></svg>
|
|
</div>
|
|
<div class="activity-text"><a href="#" style="text-decoration: none; color: inherit;">My Saved Sessions</a></div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon">
|
|
<!-- Placeholder icon -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="3"></line></svg>
|
|
</div>
|
|
<div class="activity-text"><a href="#" style="text-decoration: none; color: inherit;">Payment & Billing</a></div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<section id="my-registered-events" class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-8 text-center">My Registered Events</h2>
|
|
|
|
<nav class="flex justify-center space-x-4 mb-8" aria-label="Event Categories">
|
|
<button type="button" class="px-5 py-2 text-sm font-medium rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Upcoming</button>
|
|
<button type="button" class="px-5 py-2 text-sm font-medium rounded-md text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Past</button>
|
|
<button type="button" class="px-5 py-2 text-sm font-medium rounded-md text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">All Events</button>
|
|
</nav>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Event Card 1: Upcoming Event -->
|
|
<article class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 flex items-center justify-center text-gray-500 text-sm">
|
|
<img src="https://via.placeholder.com/400x225?text=Event+Image+1" alt="Placeholder image for AI & Future Tech Summit" class="w-full h-auto object-cover">
|
|
</div>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">AI & Future Tech Summit</h3>
|
|
<p class="text-gray-600 mb-1"><time datetime="2023-10-26T09:00">October 26, 2023</time> | 9:00 AM - 5:00 PM GMT+1</p>
|
|
<p class="text-indigo-600 font-medium mb-4">Virtual Conference - Upcoming</p>
|
|
<div class="mt-auto">
|
|
<button type="button" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
|
|
Join Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Event Card 2: Upcoming Event -->
|
|
<article class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 flex items-center justify-center text-gray-500 text-sm">
|
|
<img src="https://via.placeholder.com/400x225?text=Event+Image+2" alt="Placeholder image for Virtual Design Conference" class="w-full h-auto object-cover">
|
|
</div>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Virtual Design Conference</h3>
|
|
<p class="text-gray-600 mb-1"><time datetime="2023-11-15T10:00">November 15, 2023</time> | 10:00 AM - 6:00 PM EST</p>
|
|
<p class="text-indigo-600 font-medium mb-4">Online Workshop - Upcoming</p>
|
|
<div class="mt-auto">
|
|
<button type="button" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
|
|
Join Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Event Card 3: Past Event -->
|
|
<article class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 flex items-center justify-center text-gray-500 text-sm">
|
|
<img src="https://via.placeholder.com/400x225?text=Event+Image+3" alt="Placeholder image for Global Climate Change Forum" class="w-full h-auto object-cover">
|
|
</div>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Global Climate Change Forum</h3>
|
|
<p class="text-gray-600 mb-1"><time datetime="2023-09-01T14:00">September 01, 2023</time> | 2:00 PM - 7:00 PM CET</p>
|
|
<p class="text-gray-500 font-medium mb-4">Virtual Summit - Completed</p>
|
|
<div class="mt-auto">
|
|
<button type="button" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
|
|
Watch Replay
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Event Card 4: Upcoming Event -->
|
|
<article class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 flex items-center justify-center text-gray-500 text-sm">
|
|
<img src="https://via.placeholder.com/400x225?text=Event+Image+4" alt="Placeholder image for Web Development Bootcamp" class="w-full h-auto object-cover">
|
|
</div>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Web Development Bootcamp</h3>
|
|
<p class="text-gray-600 mb-1"><time datetime="2023-12-05T09:30">December 05, 2023</time> | 9:30 AM - 4:30 PM PT</p>
|
|
<p class="text-indigo-600 font-medium mb-4">Online Course - Upcoming</p>
|
|
<div class="mt-auto">
|
|
<button type="button" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
|
|
Join Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Event Card 5: Past Event -->
|
|
<article class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 flex items-center justify-center text-gray-500 text-sm">
|
|
<img src="https://via.placeholder.com/400x225?text=Event+Image+5" alt="Placeholder image for Digital Marketing Summit" class="w-full h-auto object-cover">
|
|
</div>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Digital Marketing Summit</h3>
|
|
<p class="text-gray-600 mb-1"><time datetime="2023-08-10T11:00">August 10, 2023</time> | 11:00 AM - 6:00 PM BST</p>
|
|
<p class="text-gray-500 font-medium mb-4">Virtual Conference - Completed</p>
|
|
<div class="mt-auto">
|
|
<button type="button" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
|
|
Watch Replay
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Event Card 6: Upcoming Event -->
|
|
<article class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 flex items-center justify-center text-gray-500 text-sm">
|
|
<img src="https://via.placeholder.com/400x225?text=Event+Image+6" alt="Placeholder image for Future of Work Symposium" class="w-full h-auto object-cover">
|
|
</div>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Future of Work Symposium</h3>
|
|
<p class="text-gray-600 mb-1"><time datetime="2023-11-28T13:00">November 28, 2023</time> | 1:00 PM - 5:00 PM AEST</p>
|
|
<p class="text-indigo-600 font-medium mb-4">Virtual Summit - Upcoming</p>
|
|
<div class="mt-auto">
|
|
<button type="button" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
|
|
Join Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="upcoming-sessions">
|
|
<div class="container">
|
|
<h2 class="section-title">Upcoming Sessions</h2>
|
|
<div class="session-filters">
|
|
<button class="filter-btn active" data-filter="all">All Sessions</button>
|
|
<button class="filter-btn" data-filter="keynotes">Keynotes</button>
|
|
<button class="filter-btn" data-filter="breakouts">Breakouts</button>
|
|
<button class="filter-btn" data-filter="workshops">Workshops</button>
|
|
</div>
|
|
<div class="sessions-grid">
|
|
<article class="session-card">
|
|
<div class="session-meta">
|
|
<time datetime="2024-10-26T10:00:00-08:00">Oct 26 | 10:00 AM - 11:00 AM PST</time>
|
|
<span class="session-type">Keynote</span>
|
|
</div>
|
|
<h3 class="session-title">The Future of Virtual Collaboration: A Paradigm Shift</h3>
|
|
<div class="speaker-info">
|
|
<img src="https://via.placeholder.com/40" alt="Speaker Avatar" class="speaker-avatar">
|
|
<span class="speaker-name">Dr. Alex Johnson</span>
|
|
<span class="speaker-title">CEO, Innovate Corp.</span>
|
|
</div>
|
|
<p class="session-description">An insightful discussion on the evolving landscape of digital interaction and networking platforms. Discover new trends.</p>
|
|
<a href="#session-details-1" class="btn-primary">View Details</a>
|
|
</article>
|
|
|
|
<article class="session-card">
|
|
<div class="session-meta">
|
|
<time datetime="2024-10-26T11:30:00-08:00">Oct 26 | 11:30 AM - 12:15 PM PST</time>
|
|
<span class="session-type">Breakout</span>
|
|
</div>
|
|
<h3 class="session-title">Designing Engaging Breakout Rooms for Interactive Learning</h3>
|
|
<div class="speaker-info">
|
|
<img src="https://via.placeholder.com/40" alt="Speaker Avatar" class="speaker-avatar">
|
|
<span class="speaker-name">Maria Rodriguez</span>
|
|
<span class="speaker-title">UX Lead, Connectify</span>
|
|
</div>
|
|
<p class="session-description">Explore best practices for creating dynamic and productive small group interactions within virtual environments.</p>
|
|
<a href="#session-details-2" class="btn-primary">View Details</a>
|
|
</article>
|
|
|
|
<article class="session-card">
|
|
<div class="session-meta">
|
|
<time datetime="2024-10-26T13:00:00-08:00">Oct 26 | 01:00 PM - 02:00 PM PST</time>
|
|
<span class="session-type">Workshop</span>
|
|
</div>
|
|
<h3 class="session-title">Mastering Spatial Audio for Immersive Networking</h3>
|
|
<div class="speaker-info">
|
|
<img src="https://via.placeholder.com/40" alt="Speaker Avatar" class="speaker-avatar">
|
|
<span class="speaker-name">David Chen</span>
|
|
<span class="speaker-title">Audio Engineer, SoundSphere</span>
|
|
</div>
|
|
<p class="session-description">A hands-on workshop to understand and implement spatial audio techniques for realistic virtual networking experiences.</p>
|
|
<a href="#session-details-3" class="btn-primary">View Details</a>
|
|
</article>
|
|
|
|
<article class="session-card">
|
|
<div class="session-meta">
|
|
<time datetime="2024-10-26T14:30:00-08:00">Oct 26 | 02:30 PM - 03:15 PM PST</time>
|
|
<span class="session-type">Breakout</span>
|
|
</div>
|
|
<h3 class="session-title">Leveraging AI for Personalized Attendee Experiences</h3>
|
|
<div class="speaker-info">
|
|
<img src="https://via.placeholder.com/40" alt="Speaker Avatar" class="speaker-avatar">
|
|
<span class="speaker-name">Sarah Miller</span>
|
|
<span class="speaker-title">AI Strategist, DataStream</span>
|
|
</div>
|
|
<p class="session-description">Discover how artificial intelligence can enhance attendee engagement, recommendations, and real-time support.</p>
|
|
<a href="#session-details-4" class="btn-primary">View Details</a>
|
|
</article>
|
|
|
|
<article class="session-card">
|
|
<div class="session-meta">
|
|
<time datetime="2024-10-27T09:00:00-08:00">Oct 27 | 09:00 AM - 10:00 AM PST</time>
|
|
<span class="session-type">Keynote</span>
|
|
</div>
|
|
<h3 class="session-title">The Metaverse & Events: Beyond the Hype</h3>
|
|
<div class="speaker-info">
|
|
<img src="https://via.placeholder.com/40" alt="Speaker Avatar" class="speaker-avatar">
|
|
<span class="speaker-name">Ethan Brooks</span>
|
|
<span class="speaker-title">Futurist, NexGen Lab</span>
|
|
</div>
|
|
<p class="session-description">An exploration into the practical applications and future potential of metaverse technologies for virtual conferences.</p>
|
|
<a href="#session-details-5" class="btn-primary">View Details</a>
|
|
</article>
|
|
|
|
<article class="session-card">
|
|
<div class="session-meta">
|
|
<time datetime="2024-10-27T10:30:00-08:00">Oct 27 | 10:30 AM - 11:15 AM PST</time>
|
|
<span class="session-type">Breakout</span>
|
|
</div>
|
|
<h3 class="session-title">Optimizing Video Streaming for Large-Scale Virtual Events</h3>
|
|
<div class="speaker-info">
|
|
<img src="https://via.placeholder.com/40" alt="Speaker Avatar" class="speaker-avatar">
|
|
<span class="speaker-name">Jessica Lee</span>
|
|
<span class="speaker-title">Solutions Architect, VideoStream Inc.</span>
|
|
</div>
|
|
<p class="session-description">Technical deep dive into video encoding, CDN strategies, and latency reduction for seamless live event delivery.</p>
|
|
<a href="#session-details-6" class="btn-primary">View Details</a>
|
|
</article>
|
|
</div>
|
|
<div class="view-all-cta">
|
|
<a href="#all-sessions-page" class="btn-secondary">View All Sessions</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Networking Connections</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<section id="networking-connections" class="networking-connections">
|
|
<div class="container">
|
|
<header>
|
|
<h2>Forge Meaningful Connections</h2>
|
|
<p class="lead">Our platform goes beyond just presentations, offering robust tools for real-time attendee networking, mirroring the best aspects of in-person events.</p>
|
|
</header>
|
|
|
|
<div class="features-grid">
|
|
<article class="feature-card">
|
|
<div class="icon" role="img" aria-label="Avatar Icon">👤</div> <!-- Placeholder for avatar icon -->
|
|
<h3>Avatar-Based Rooms</h3>
|
|
<p>Navigate vibrant, interactive virtual spaces where attendees can create personalized avatars and engage in natural, spatial conversations.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="icon" role="img" aria-label="Audio Wave Icon">🎥</div> <!-- Placeholder for audio wave icon -->
|
|
<h3>Spatial Audio</h3>
|
|
<p>Experience realistic audio environments where sound fades as you move away from speakers, making group conversations intuitive and engaging.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="icon" role="img" aria-label="Speech Bubble Icon">💬</div> <!-- Placeholder for speech bubble icon -->
|
|
<h3>Live Chat & Q&A</h3>
|
|
<p>Facilitate real-time text conversations, public and private chats, and structured Q&A sessions within any room or breakout.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="icon" role="img" aria-label="Video Camera Icon">📺</div> <!-- Placeholder for video camera icon -->
|
|
<h3>Video Calling & Screen Share</h3>
|
|
<p>Seamlessly transition from spatial audio to direct video calls or screen sharing for more in-depth, personal interactions.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="icon" role="img" aria-label="Users Icon">👥</div> <!-- Placeholder for users icon -->
|
|
<h3>Attendee Directory & Matching</h3>
|
|
<p>Discover relevant connections with a searchable directory, interest-based matching, and one-click meeting scheduling.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="icon" role="img" aria-label="Breakout Room Icon">🏪</div> <!-- Placeholder for breakout room icon -->
|
|
<h3>Dynamic Breakout Rooms</h3>
|
|
<p>Create and manage ad-hoc or pre-defined breakout rooms for focused discussions, networking rounds, or private meetings.</p>
|
|
</article>
|
|
</div>
|
|
|
|
<footer>
|
|
<a href="#demo" class="cta-button">Explore Networking Features</a>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<div class="support-wrapper"><section class="support-section"><h2 class="support-heading">Dedicated Support & Assistance</h2><p class="support-subtext">Get the assistance you need to make your virtual event a resounding success. Our dedicated team is here to help you every step of the way.</p><div class="support-item"><div class="support-icon">?</div><div class="support-content"><h3>Comprehensive Knowledge Base</h3><p>Find instant answers, tutorials, and best practices for all platform features.</p></div></div><div class="support-item"><div class="support-icon">💬</div><div class="support-content"><h3>Real-time Chat Support</h3><p>Connect with our expert team instantly for immediate assistance during your event.</p></div></div><div class="support-item"><div class="support-icon">✉️</div><div class="support-content"><h3>Direct Email & Phone Support</h3><p>Reach out for personalized assistance, technical issues, or custom inquiries.</p></div></div></section></div>
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">EventSphere</h3><p class="footer-1-newsletter-text">Stay connected with EventSphere! Join our newsletter for the latest features, event tips, and platform updates.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"></input><button class="footer-1-subscribe-btn">Get Updates</button></div><p class="footer-1-privacy-note"><span>By subscribing, you agree to EventSphere's </span><a href="#">Privacy Policy</a><span> and provide consent to receive insightful updates and offers.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Platform</h4><ul><li><a href="#">Virtual Conferences</a></li><li><a href="#">Breakout Rooms</a></li><li><a href="#">Live Streaming</a></li><li><a href="#">Networking Tools</a></li><li><a href="#">Spatial Audio</a></li></ul></div><div class="footer-1-column"><h4>Solutions</h4><ul><li><a href="#">Enterprise Events</a></li><li><a href="#">Educational Webinars</a></li><li><a href="#">Product Launches</a></li><li><a href="#">Event Hosting Guide</a></li><li><a href="#">API & Integrations</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2024 EventSphere. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> (see https://g.co/ng/security#xss) |