1888 lines
68 KiB
HTML
1888 lines
68 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>Live Event Room</title>
|
||
|
|
<style id="page-styles">
|
||
|
|
.nav-1-wrapper {
|
||
|
|
margin: 0;
|
||
|
|
font-family: sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-navbar {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 16px 40px;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-logo {
|
||
|
|
font-family: cursive;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-nav-links {
|
||
|
|
list-style: none;
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-nav-links li a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #111;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-dropdown i {
|
||
|
|
font-size: 10px;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-nav-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-btn {
|
||
|
|
padding: 6px 14px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 2px solid #111;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-outline {
|
||
|
|
background-color: transparent;
|
||
|
|
color: #111;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-1-solid {
|
||
|
|
background-color: #111;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-tutorial-container {
|
||
|
|
font-family: sans-serif;
|
||
|
|
background-color: #f9f6f3;
|
||
|
|
color: #1f2a38;
|
||
|
|
padding: 40px;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-circle {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
background-color: #1f2a38;
|
||
|
|
color: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-weight: bold;
|
||
|
|
position: absolute;
|
||
|
|
top: 40px;
|
||
|
|
left: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-title {
|
||
|
|
margin-top: 120px;
|
||
|
|
font-size: 48px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #1f2a38;
|
||
|
|
}
|
||
|
|
|
||
|
|
.play-icon {
|
||
|
|
width: 150px;
|
||
|
|
height: 150px;
|
||
|
|
background-color: #1f2a38;
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: 100px;
|
||
|
|
right: 100px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.play-triangle {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 30px solid white;
|
||
|
|
border-top: 20px solid transparent;
|
||
|
|
border-bottom: 20px solid transparent;
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button {
|
||
|
|
margin-top: 40px;
|
||
|
|
background-color: #1f2a38;
|
||
|
|
color: white;
|
||
|
|
padding: 16px 32px;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
border: none;
|
||
|
|
border-radius: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.footer-2-wrapper {
|
||
|
|
font-family: sans-serif;
|
||
|
|
background: #F5F5F5;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-section {
|
||
|
|
background: #fff;
|
||
|
|
padding: 40px 30px 20px;
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-top {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 40px;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-left {
|
||
|
|
flex: 1 1 300px;
|
||
|
|
max-width: 350px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-left .logo {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-left p {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-left a {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #000;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-social-icons {
|
||
|
|
margin-top: 12px;
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-social-icons i {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #000;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-links-columns {
|
||
|
|
flex: 2 1 400px;
|
||
|
|
display: flex;
|
||
|
|
gap: 80px;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-links-columns ul {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-links-columns ul li {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-links-columns ul li a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-bottom {
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
padding-top: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-bottom .footer-2-links {
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-2-bottom .footer-2-links li a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
font-family: 'Segoe UI', sans-serif !important;
|
||
|
|
}
|
||
|
|
.page-wrapper {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
.section-content {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</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>
|
||
|
|
<div class="video-tutorial-container"><div class="logo-circle">CONNECT</div><div class="play-icon"></div><h1 class="video-title">Experience Seamless Virtual Events</h1><button class="cta-button">Watch How It Works</button></div>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Chat Panel Section</title>
|
||
|
|
<style>
|
||
|
|
/* Basic Reset & Box-sizing */
|
||
|
|
*, *::before, *::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||
|
|
background-color: #f0f2f5;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
min-height: 100vh;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Chat Panel Section Styling */
|
||
|
|
.chat-panel-section {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 400px; /* Typical sidebar width for chat */
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 80vh; /* Make it take up a good portion of the viewport height */
|
||
|
|
min-height: 500px;
|
||
|
|
border: 1px solid #e0e0e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Header */
|
||
|
|
.chat-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 16px;
|
||
|
|
border-bottom: 1px solid #eef1f4;
|
||
|
|
background-color: #f7f9fc;
|
||
|
|
color: #1a1a1a;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-header h2 {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin: 0;
|
||
|
|
color: #1a1a1a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-header .chat-options {
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-header .chat-options button {
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: #666;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 4px;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: background-color 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-header .chat-options button:hover {
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Message Area */
|
||
|
|
.chat-messages {
|
||
|
|
flex-grow: 1;
|
||
|
|
padding: 16px;
|
||
|
|
overflow-y: auto;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
background-color: #fdfdfd;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message.self {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message.other {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message .avatar {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #ccc; /* Placeholder color */
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: #fff;
|
||
|
|
flex-shrink: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message .avatar img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message.self .avatar {
|
||
|
|
background-color: #007bff; /* Example for self-avatar */
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message .message-bubble {
|
||
|
|
max-width: 75%;
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-radius: 18px;
|
||
|
|
line-height: 1.4;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
word-wrap: break-word;
|
||
|
|
min-width: 0; /* Ensure content can shrink */
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message.other .message-bubble {
|
||
|
|
background-color: #e2eafc;
|
||
|
|
color: #212529;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message.self .message-bubble {
|
||
|
|
background-color: #007bff;
|
||
|
|
color: #ffffff;
|
||
|
|
border-bottom-right-radius: 4px;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message .message-author {
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: #555;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
display: block; /* Ensures it takes full width for flex-direction column */
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message.self .message-author {
|
||
|
|
display: none; /* Self messages don't typically show author */
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message .message-time {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: #888;
|
||
|
|
margin-top: 4px;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Message Input Area */
|
||
|
|
.chat-input-area {
|
||
|
|
padding: 16px;
|
||
|
|
border-top: 1px solid #eef1f4;
|
||
|
|
background-color: #f7f9fc;
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area textarea {
|
||
|
|
flex-grow: 1;
|
||
|
|
padding: 12px 14px;
|
||
|
|
border: 1px solid #d0d7de;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
resize: none;
|
||
|
|
min-height: 40px;
|
||
|
|
max-height: 100px; /* Limit expansion */
|
||
|
|
overflow-y: auto;
|
||
|
|
font-family: inherit;
|
||
|
|
color: #333;
|
||
|
|
line-height: 1.4;
|
||
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area textarea:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #007bff;
|
||
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area button {
|
||
|
|
background-color: #007bff;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.2s ease, transform 0.1s ease;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area button:hover {
|
||
|
|
background-color: #0056b3;
|
||
|
|
transform: translateY(-1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area button:active {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scrollbar Styling (Webkit) */
|
||
|
|
.chat-messages::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-messages::-webkit-scrollbar-track {
|
||
|
|
background: #f1f1f1;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-messages::-webkit-scrollbar-thumb {
|
||
|
|
background: #ccc;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-messages::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #a0a0a0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Adjustments */
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.chat-panel-section {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
height: 100vh; /* Full height on small screens */
|
||
|
|
border-radius: 0;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-header {
|
||
|
|
padding: 12px;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-header h2 {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-header .chat-options button {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-messages {
|
||
|
|
padding: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message .message-bubble {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
padding: 8px 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area {
|
||
|
|
padding: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area textarea {
|
||
|
|
padding: 10px 12px;
|
||
|
|
min-height: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-input-area button {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="chat-panel-section" aria-labelledby="chatPanelHeader">
|
||
|
|
<header class="chat-header">
|
||
|
|
<h2 id="chatPanelHeader">Live Chat</h2>
|
||
|
|
<div class="chat-options">
|
||
|
|
<button aria-label="Search messages">🔍</button>
|
||
|
|
<button aria-label="Chat settings">⚙️</button>
|
||
|
|
<button aria-label="Close chat">❌</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="chat-messages" role="log" aria-live="polite" aria-atomic="false">
|
||
|
|
<div class="chat-message other">
|
||
|
|
<div class="avatar" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/32/FF5733/FFFFFF?text=A" alt="Avatar for Alice">
|
||
|
|
</div>
|
||
|
|
<div class="message-content">
|
||
|
|
<span class="message-author">Alice Johnson</span>
|
||
|
|
<div class="message-bubble">
|
||
|
|
<p>Welcome everyone to the main stage discussion!</p>
|
||
|
|
</div>
|
||
|
|
<time class="message-time" datetime="2024-07-20T10:05">10:05 AM</time>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-message self">
|
||
|
|
<div class="message-content">
|
||
|
|
<div class="message-bubble">
|
||
|
|
<p>Hi Alice! Excited for the session.</p>
|
||
|
|
</div>
|
||
|
|
<time class="message-time" datetime="2024-07-20T10:06">10:06 AM</time>
|
||
|
|
</div>
|
||
|
|
<div class="avatar" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/32/007bff/FFFFFF?text=Y" alt="Your Avatar">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-message other">
|
||
|
|
<div class="avatar" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/32/33FF57/FFFFFF?text=B" alt="Avatar for Bob">
|
||
|
|
</div>
|
||
|
|
<div class="message-content">
|
||
|
|
<span class="message-author">Bob Williams</span>
|
||
|
|
<div class="message-bubble">
|
||
|
|
<p>Is there a Q&A section planned after the main presentation?</p>
|
||
|
|
<p>Looking forward to hearing from the speakers.</p>
|
||
|
|
</div>
|
||
|
|
<time class="message-time" datetime="2024-07-20T10:08">10:08 AM</time>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-message self">
|
||
|
|
<div class="message-content">
|
||
|
|
<div class="message-bubble">
|
||
|
|
<p>Yes, Bob, there will be a dedicated Q&A session. Feel free to submit your questions in the "Questions" tab!</p>
|
||
|
|
</div>
|
||
|
|
<time class="message-time" datetime="2024-07-20T10:10">10:10 AM</time>
|
||
|
|
</div>
|
||
|
|
<div class="avatar" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/32/007bff/FFFFFF?text=Y" alt="Your Avatar">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-message other">
|
||
|
|
<div class="avatar" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/32/FF33E9/FFFFFF?text=C" alt="Avatar for Carol">
|
||
|
|
</div>
|
||
|
|
<div class="message-content">
|
||
|
|
<span class="message-author">Carol White</span>
|
||
|
|
<div class="message-bubble">
|
||
|
|
<p>Having a great time so far!</p>
|
||
|
|
</div>
|
||
|
|
<time class="message-time" datetime="2024-07-20T10:12">10:12 AM</time>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-message other">
|
||
|
|
<div class="avatar" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/32/5733FF/FFFFFF?text=D" alt="Avatar for David">
|
||
|
|
</div>
|
||
|
|
<div class="message-content">
|
||
|
|
<span class="message-author">David Green</span>
|
||
|
|
<div class="message-bubble">
|
||
|
|
<p>The video quality is excellent!</p>
|
||
|
|
</div>
|
||
|
|
<time class="message-time" datetime="2024-07-20T10:15">10:15 AM</time>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form class="chat-input-area" aria-label="Send a new message">
|
||
|
|
<label for="chatMessageInput" class="sr-only">Type your message</label>
|
||
|
|
<textarea id="chatMessageInput" placeholder="Type your message..." rows="1" aria-label="Message input"></textarea>
|
||
|
|
<button type="submit" aria-label="Send message">➡️</button>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Attendee List / Networking</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@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--primary-color: #6B4EE8; /* A vibrant purple */
|
||
|
|
--secondary-color: #F0F2F5; /* Light grey for backgrounds */
|
||
|
|
--text-color: #333333;
|
||
|
|
--light-text-color: #666666;
|
||
|
|
--border-color: #E0E0E0;
|
||
|
|
--background-dark: #2C3E50; /* Darker background for some elements */
|
||
|
|
--white: #FFFFFF;
|
||
|
|
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
|
|
--border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: var(--secondary-color);
|
||
|
|
color: var(--text-color);
|
||
|
|
line-height: 1.6;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-start; /* Align to top for longer content */
|
||
|
|
padding: 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-section {
|
||
|
|
background-color: var(--white);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
box-shadow: var(--box-shadow);
|
||
|
|
width: 100%;
|
||
|
|
max-width: 1200px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-header {
|
||
|
|
padding: 24px 30px;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background-color: var(--white);
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-header h2 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 1.8rem;
|
||
|
|
color: var(--text-color);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-controls {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input {
|
||
|
|
padding: 10px 15px 10px 40px;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
font-size: 0.95rem;
|
||
|
|
width: 250px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
box-shadow: 0 0 0 3px rgba(107, 78, 232, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar::before {
|
||
|
|
content: "🔍"; /* Placeholder for search icon */
|
||
|
|
position: absolute;
|
||
|
|
left: 15px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
color: var(--light-text-color);
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-button, .view-toggle {
|
||
|
|
padding: 10px 18px;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
background-color: var(--white);
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-button:hover, .view-toggle:hover {
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
.filter-button.active, .view-toggle.active {
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-toggle span:first-child {
|
||
|
|
padding-right: 8px;
|
||
|
|
border-right: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
.view-toggle.active span:first-child {
|
||
|
|
border-right-color: var(--white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-content {
|
||
|
|
display: flex;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-list-container {
|
||
|
|
flex: 2;
|
||
|
|
padding: 20px 30px;
|
||
|
|
overflow-y: auto;
|
||
|
|
max-height: calc(100vh - 200px); /* Adjust based on header/footer */
|
||
|
|
min-height: 400px;
|
||
|
|
border-right: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-list-container h3 {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
margin-top: 0;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
color: var(--text-color);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-card {
|
||
|
|
background-color: var(--white);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
padding: 15px;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-avatar {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: var(--secondary-color);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 2.5rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
overflow: hidden; /* For image placeholders */
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-avatar img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-name {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
color: var(--text-color);
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-role, .attendee-company {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
margin-bottom: 3px;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-tags {
|
||
|
|
margin-top: 10px;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 6px;
|
||
|
|
max-height: 40px; /* Limit height for tags */
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
background-color: #E6EFFF; /* Light blue */
|
||
|
|
color: #4A90E2; /* Darker blue */
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connect-button {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--white);
|
||
|
|
border: none;
|
||
|
|
padding: 8px 15px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
margin-top: 15px;
|
||
|
|
transition: background-color 0.2s ease;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connect-button:hover {
|
||
|
|
background-color: #5A3FC0; /* Darker primary */
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-zone {
|
||
|
|
flex: 1;
|
||
|
|
padding: 20px 30px;
|
||
|
|
background-color: #F8F9FA; /* Slightly different background for distinction */
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-zone h3 {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
margin-top: 0;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
color: var(--text-color);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spatial-audio-room, .avatar-room {
|
||
|
|
background-color: var(--white);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
padding: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 15px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-header h4 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.live-indicator {
|
||
|
|
background-color: #28A745; /* Green */
|
||
|
|
color: var(--white);
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 500;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 5px;
|
||
|
|
}
|
||
|
|
.live-indicator::before {
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
background-color: var(--white);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-description {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-attendees {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-thumbnails {
|
||
|
|
display: flex;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thumbnail-avatar {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: var(--secondary-color);
|
||
|
|
border: 2px solid var(--white);
|
||
|
|
margin-left: -10px; /* Overlap */
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.thumbnail-avatar:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
.thumbnail-avatar img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thumbnail-avatar.more-count {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--white);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-count {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.join-button {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--white);
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
transition: background-color 0.2s ease;
|
||
|
|
width: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.join-button:hover {
|
||
|
|
background-color: #5A3FC0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-sessions {
|
||
|
|
margin-top: 30px;
|
||
|
|
padding-top: 20px;
|
||
|
|
border-top: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-sessions h3 {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.session-card {
|
||
|
|
background-color: var(--white);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.session-card h4 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--text-color);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.session-card p {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.session-card .time {
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive adjustments */
|
||
|
|
@media (max-width: 992px) {
|
||
|
|
.networking-content {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-list-container {
|
||
|
|
border-right: none;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
max-height: none; /* Allow full height on smaller screens */
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-header {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-controls {
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-button, .view-toggle {
|
||
|
|
flex-grow: 1;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.networking-section {
|
||
|
|
margin-top: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-grid {
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-header {
|
||
|
|
padding: 15px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-header h2 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-list-container, .networking-zone {
|
||
|
|
padding: 15px 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.networking-controls {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.filter-button, .view-toggle {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.attendee-grid {
|
||
|
|
grid-template-columns: 1fr; /* Single column on very small screens */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="networking-section">
|
||
|
|
<header class="networking-header">
|
||
|
|
<h2>Attendee List & Networking Zone</h2>
|
||
|
|
<div class="networking-controls">
|
||
|
|
<div class="search-bar" role="search">
|
||
|
|
<label for="attendee-search" class="sr-only">Search Attendees</label>
|
||
|
|
<input type="search" id="attendee-search" placeholder="Search attendees by name or role...">
|
||
|
|
</div>
|
||
|
|
<button class="filter-button" aria-controls="filter-menu" aria-expanded="false">
|
||
|
|
⚙️ Filters
|
||
|
|
</button>
|
||
|
|
<div class="view-toggle" role="group" aria-label="Toggle View">
|
||
|
|
<button class="active" aria-label="Grid View">🗂️ Grid</button>
|
||
|
|
<button aria-label="List View">📄 List</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="networking-content">
|
||
|
|
<aside class="attendee-list-container" aria-label="Attendee List">
|
||
|
|
<h3>Attendees (123)</h3>
|
||
|
|
<div class="attendee-grid">
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/6B4EE8/FFFFFF?text=AA" alt="Avatar of Alex Johnson">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">Alex Johnson</h4>
|
||
|
|
<p class="attendee-role">Software Engineer</p>
|
||
|
|
<p class="attendee-company">Tech Solutions Inc.</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">AI</span>
|
||
|
|
<span class="tag">Cloud</span>
|
||
|
|
<span class="tag">VR</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/4A90E2/FFFFFF?text=BM" alt="Avatar of Ben Miller">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">Ben Miller</h4>
|
||
|
|
<p class="attendee-role">Product Manager</p>
|
||
|
|
<p class="attendee-company">Innovate Co.</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">UX/UI</span>
|
||
|
|
<span class="tag">Marketing</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/28A745/FFFFFF?text=CS" alt="Avatar of Chloe Smith">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">Chloe Smith</h4>
|
||
|
|
<p class="attendee-role">Data Scientist</p>
|
||
|
|
<p class="attendee-company">Analytics Hub</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">Big Data</span>
|
||
|
|
<span class="tag">Machine Learning</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/F0F2F5/6B4EE8?text=DW" alt="Avatar of David Wilson">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">David Wilson</h4>
|
||
|
|
<p class="attendee-role">UI/UX Designer</p>
|
||
|
|
<p class="attendee-company">Creative Labs</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">Design</span>
|
||
|
|
<span class="tag">Figma</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/6B4EE8/FFFFFF?text=EA" alt="Avatar of Emily Adams">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">Emily Adams</h4>
|
||
|
|
<p class="attendee-role">Marketing Specialist</p>
|
||
|
|
<p class="attendee-company">Global Reach</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">SEO</span>
|
||
|
|
<span class="tag">Content</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/4A90E2/FFFFFF?text=FJ" alt="Avatar of Frank Jones">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">Frank Jones</h4>
|
||
|
|
<p class="attendee-role">Backend Developer</p>
|
||
|
|
<p class="attendee-company">Web Innovations</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">Node.js</span>
|
||
|
|
<span class="tag">Databases</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/28A745/FFFFFF?text=GR" alt="Avatar of Grace Riley">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">Grace Riley</h4>
|
||
|
|
<p class="attendee-role">HR Manager</p>
|
||
|
|
<p class="attendee-company">People Solutions</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">Recruitment</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="attendee-card">
|
||
|
|
<div class="attendee-avatar">
|
||
|
|
<img src="https://via.placeholder.com/80/F0F2F5/6B4EE8?text=HL" alt="Avatar of Henry Lee">
|
||
|
|
</div>
|
||
|
|
<h4 class="attendee-name">Henry Lee</h4>
|
||
|
|
<p class="attendee-role">Cybersecurity Analyst</p>
|
||
|
|
<p class="attendee-company">SecureNet</p>
|
||
|
|
<div class="attendee-tags">
|
||
|
|
<span class="tag">Security</span>
|
||
|
|
<span class="tag">Network</span>
|
||
|
|
</div>
|
||
|
|
<button class="connect-button">Connect</button>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<section class="networking-zone" aria-label="Networking Rooms">
|
||
|
|
<h3>Networking Rooms</h3>
|
||
|
|
|
||
|
|
<article class="spatial-audio-room">
|
||
|
|
<div class="room-header">
|
||
|
|
<h4>"Future of AI" Spatial Audio Room</h4>
|
||
|
|
<span class="live-indicator">LIVE</span>
|
||
|
|
</div>
|
||
|
|
<p class="room-description">Join a discussion on the latest advancements and ethical considerations in Artificial Intelligence. Walk around and talk to others as if you're in the same physical space.</p>
|
||
|
|
<div class="room-attendees">
|
||
|
|
<div class="attendee-thumbnails">
|
||
|
|
<div class="thumbnail-avatar"><img src="https://via.placeholder.com/30/6B4EE8/FFFFFF?text=A" alt="Attendee A"></div>
|
||
|
|
<div class="thumbnail-avatar"><img src="https://via.placeholder.com/30/4A90E2/FFFFFF?text=B" alt="Attendee B"></div>
|
||
|
|
<div class="thumbnail-avatar"><img src="https://via.placeholder.com/30/28A745/FFFFFF?text=C" alt="Attendee C"></div>
|
||
|
|
<div class="thumbnail-avatar"><img src="https://via.placeholder.com/30/F0F2F5/6B4EE8?text=D" alt="Attendee D"></div>
|
||
|
|
<div class="thumbnail-avatar more-count">+8</div>
|
||
|
|
</div>
|
||
|
|
<span class="attendee-count">12 people currently in room</span>
|
||
|
|
</div>
|
||
|
|
<button class="join-button">Join Spatial Audio</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="avatar-room">
|
||
|
|
<div class="room-header">
|
||
|
|
<h4>"Web3 & Blockchain" Avatar Room</h4>
|
||
|
|
<span class="live-indicator">LIVE</span>
|
||
|
|
</div>
|
||
|
|
<p class="room-description">Explore the decentralized web in our interactive avatar-based room. Choose your avatar and mingle with peers interested in blockchain, NFTs, and dApps.</p>
|
||
|
|
<div class="room-attendees">
|
||
|
|
<div class="attendee-thumbnails">
|
||
|
|
<div class="thumbnail-avatar"><img src="https://via.placeholder.com/30/2C3E50/FFFFFF?text=E" alt="Attendee E"></div>
|
||
|
|
<div class="thumbnail-avatar"><img src="https://via.placeholder.com/30/6B4EE8/FFFFFF?text=F" alt="Attendee F"></div>
|
||
|
|
<div class="thumbnail-avatar"><img src="https://via.placeholder.com/30/4A90E2/FFFFFF?text=G" alt="Attendee G"></div>
|
||
|
|
<div class="thumbnail-avatar more-count">+5</div>
|
||
|
|
</div>
|
||
|
|
<span class="attendee-count">8 people currently in room</span>
|
||
|
|
</div>
|
||
|
|
<button class="join-button">Enter Avatar Room</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<div class="upcoming-sessions">
|
||
|
|
<h3>Upcoming Networking Sessions</h3>
|
||
|
|
<div class="session-card">
|
||
|
|
<h4>Fireside Chat: Building Startups</h4>
|
||
|
|
<p><span class="time">10:00 AM - 10:45 AM PDT</span></p>
|
||
|
|
<p>With John Doe, CEO of Startup XYZ</p>
|
||
|
|
</div>
|
||
|
|
<div class="session-card">
|
||
|
|
<h4>Topic Table: Sustainable Tech</h4>
|
||
|
|
<p><span class="time">11:00 AM - 12:00 PM PDT</span></p>
|
||
|
|
<p>Moderated by Jane Smith</p>
|
||
|
|
</div>
|
||
|
|
<div class="session-card">
|
||
|
|
<h4>Coffee Break & Open Networking</h4>
|
||
|
|
<p><span class="time">12:30 PM - 01:00 PM PDT</span></p>
|
||
|
|
<p>Casual chats in the main lobby.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<section id="breakout-rooms-section">
|
||
|
|
<div class="section-container">
|
||
|
|
<h2 class="section-title">Explore Breakout Rooms & Sessions</h2>
|
||
|
|
|
||
|
|
<div class="session-filters">
|
||
|
|
<div class="search-bar">
|
||
|
|
<input type="search" placeholder="Search sessions..." aria-label="Search sessions">
|
||
|
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
|
||
|
|
</div>
|
||
|
|
<div class="filter-controls">
|
||
|
|
<select aria-label="Filter by category">
|
||
|
|
<option value="">All Categories</option>
|
||
|
|
<option value="tech">Technology</option>
|
||
|
|
<option value="marketing">Marketing</option>
|
||
|
|
<option value="networking">Networking</option>
|
||
|
|
<option value="qa">Q&A</option>
|
||
|
|
</select>
|
||
|
|
<button>Apply Filters</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="session-grid">
|
||
|
|
<article class="session-card">
|
||
|
|
<h3 class="session-title">Deep Dive into Web3 & Metaverse</h3>
|
||
|
|
<p class="session-host">Hosted by: Jane Doe & John Smith</p>
|
||
|
|
<p class="session-description">Explore the foundational concepts of Web3, blockchain technology, and the evolving metaverse landscape. Interactive discussion.</p>
|
||
|
|
<div class="session-meta">
|
||
|
|
<span class="session-participants">
|
||
|
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zM544 144a160 160 0 1 0 0 320 160 160 0 1 0 0-320z"></path></svg>
|
||
|
|
35 attendees
|
||
|
|
</span>
|
||
|
|
<span class="session-status status-live">Live Now</span>
|
||
|
|
</div>
|
||
|
|
<button class="session-join-button">Join Room</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="session-card">
|
||
|
|
<h3 class="session-title">Networking: Spatial Audio Lounge</h3>
|
||
|
|
<p class="session-host">Hosted by: Conference Organizers</p>
|
||
|
|
<p class="session-description">Mingle with fellow attendees in an immersive spatial audio environment. Discover new connections.</p>
|
||
|
|
<div class="session-meta">
|
||
|
|
<span class="session-participants">
|
||
|
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zM544 144a160 160 0 1 0 0 320 160 160 0 1 0 0-320z"></path></svg>
|
||
|
|
20 attendees
|
||
|
|
</span>
|
||
|
|
<span class="session-status status-soon">Starting Soon</span>
|
||
|
|
</div>
|
||
|
|
<button class="session-join-button">Join Room</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="session-card">
|
||
|
|
<h3 class="session-title">AI in Business: Case Studies</h3>
|
||
|
|
<p class="session-host">Hosted by: Dr. Sarah Chen</p>
|
||
|
|
<p class="session-description">Real-world applications of AI, discussing successes, challenges, and future trends across various industries.</p>
|
||
|
|
<div class="session-meta">
|
||
|
|
<span class="session-participants">
|
||
|
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zM544 144a160 160 0 1 0 0 320 160 160 0 1 0 0-320z"></path></svg>
|
||
|
|
48 attendees
|
||
|
|
</span>
|
||
|
|
<span class="session-status status-ended">Ended</span>
|
||
|
|
</div>
|
||
|
|
<button class="session-button-disabled" disabled>View Summary</button>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="session-card">
|
||
|
|
<h3 class="session-title">Fireside Chat: Future of Remote Work</h3>
|
||
|
|
<p class="session-host">Hosted by: Tech Innovators Panel</p>
|
||
|
|
<p class="session-description">An open discussion on the evolution of remote work, hybrid models, and digital collaboration tools.</p>
|
||
|
|
<div class="session-meta">
|
||
|
|
<span class="session-participants">
|
||
|
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zM544 144a160 160 0 1 0 0 320 160 160 0 1 0 0-320z"></path></svg>
|
||
|
|
15 attendees
|
||
|
|
</span>
|
||
|
|
<span class="session-status status-upcoming">Upcoming (14:00 GMT)</span>
|
||
|
|
</div>
|
||
|
|
<button class="session-action-button">Add to Calendar</button>
|
||
|
|
</article>
|
||
|
|
</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>Resources & Downloads - [Platform Name]</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">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--primary-color: #6C5CE7; /* A vibrant purple */
|
||
|
|
--secondary-color: #00B894; /* A teal/green for accents */
|
||
|
|
--text-color: #333;
|
||
|
|
--light-text-color: #666;
|
||
|
|
--background-color: #F8F9FA;
|
||
|
|
--card-background: #FFFFFF;
|
||
|
|
--border-color: #E0E0E0;
|
||
|
|
--shadow-light: rgba(0, 0, 0, 0.05);
|
||
|
|
--shadow-medium: rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
*, *::before, *::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: var(--text-color);
|
||
|
|
background-color: var(--background-color);
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header h1 {
|
||
|
|
font-size: 2.8rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header p {
|
||
|
|
font-size: 1.15rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
max-width: 700px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-filters {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-filters button {
|
||
|
|
background-color: var(--card-background);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
padding: 0.75rem 1.25rem;
|
||
|
|
border-radius: 25px;
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
white-space: nowrap; /* Prevent wrapping for individual buttons */
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-filters button:hover,
|
||
|
|
.resource-filters button.active {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--card-background);
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: var(--shadow-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card {
|
||
|
|
background-color: var(--card-background);
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: var(--shadow-light);
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: var(--shadow-medium);
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__image {
|
||
|
|
width: 100%;
|
||
|
|
height: 200px;
|
||
|
|
background-color: #F0F2F5; /* Placeholder background */
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
overflow: hidden; /* Ensure image doesn't overflow rounded corners */
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__image img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__content {
|
||
|
|
padding: 1.5rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__type {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: var(--secondary-color);
|
||
|
|
color: var(--card-background);
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 0.3rem 0.7rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card h3 {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
color: var(--text-color);
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 1.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card p {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: var(--light-text-color);
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__link {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__link:hover {
|
||
|
|
color: var(--secondary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__link svg {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__link:hover svg {
|
||
|
|
transform: translateX(4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.call-to-action {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 4rem;
|
||
|
|
padding: 3rem 1.5rem;
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--card-background);
|
||
|
|
border-radius: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.call-to-action h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.call-to-action p {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
opacity: 0.9;
|
||
|
|
max-width: 700px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.call-to-action .btn-primary {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: var(--secondary-color);
|
||
|
|
color: var(--card-background);
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
||
|
|
box-shadow: var(--shadow-medium);
|
||
|
|
}
|
||
|
|
|
||
|
|
.call-to-action .btn-primary:hover {
|
||
|
|
background-color: #00997B; /* Darker secondary color */
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Adjustments */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.section-header h1 {
|
||
|
|
font-size: 2.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header p {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-filters {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-filters button {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 250px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.call-to-action h2 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.call-to-action p {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.container {
|
||
|
|
padding: 1.5rem 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card__content {
|
||
|
|
padding: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card h3 {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section id="resources-downloads" class="resources-downloads">
|
||
|
|
<div class="container">
|
||
|
|
<header class="section-header">
|
||
|
|
<h1>Unlock the Power of Virtual Events</h1>
|
||
|
|
<p>Dive into our extensive library of resources including guides, case studies, whitepapers, and templates designed to help you master our platform and elevate your virtual events.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="resource-filters">
|
||
|
|
<button type="button" class="active" data-filter="all">All Resources</button>
|
||
|
|
<button type="button" data-filter="guides">Guides & Tutorials</button>
|
||
|
|
<button type="button" data-filter="webinars">Webinars</button>
|
||
|
|
<button type="button" data-filter="case-studies">Case Studies</button>
|
||
|
|
<button type="button" data-filter="whitepapers">Whitepapers</button>
|
||
|
|
<button type="button" data-filter="templates">Templates</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="resource-grid">
|
||
|
|
<article class="resource-card" data-category="guides">
|
||
|
|
<div class="resource-card__image" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/400x200/F0F2F5/A3A9B3?text=Setup+Guide" alt="Thumbnail for 'Quick Start Guide: Hosting Your First Event'">
|
||
|
|
</div>
|
||
|
|
<div class="resource-card__content">
|
||
|
|
<span class="resource-card__type">Guide</span>
|
||
|
|
<h3>Quick Start Guide: Hosting Your First Event</h3>
|
||
|
|
<p>Learn how to set up your virtual conference, add attendees, and go live in under 30 minutes.</p>
|
||
|
|
<a href="/downloads/quick-start-guide.pdf" class="resource-card__link" download>
|
||
|
|
Download Guide
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0l-3.75 3.75M21 3L16.5 7.5" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="resource-card" data-category="webinars">
|
||
|
|
<div class="resource-card__image" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/400x200/EAF2F6/9CA4B1?text=Webinar+Replay" alt="Thumbnail for 'Webinar Replay: Maximizing Attendee Engagement'">
|
||
|
|
</div>
|
||
|
|
<div class="resource-card__content">
|
||
|
|
<span class="resource-card__type">Webinar</span>
|
||
|
|
<h3>Webinar Replay: Maximizing Attendee Engagement</h3>
|
||
|
|
<p>Discover advanced tips and tricks for leveraging interactive features like Q&A, polls, and breakout rooms.</p>
|
||
|
|
<a href="/webinars/engagement-replay" class="resource-card__link">
|
||
|
|
Watch Replay
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0l-3.75 3.75M21 3L16.5 7.5" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="resource-card" data-category="case-studies">
|
||
|
|
<div class="resource-card__image" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/400x200/F0F2F5/A3A9B3?text=Case+Study" alt="Thumbnail for 'Case Study: Global Tech Summit Achieves 95% Attendee Satisfaction'">
|
||
|
|
</div>
|
||
|
|
<div class="resource-card__content">
|
||
|
|
<span class="resource-card__type">Case Study</span>
|
||
|
|
<h3>Case Study: Global Tech Summit Achieves 95% Attendee Satisfaction</h3>
|
||
|
|
<p>Read how a leading tech company used our platform to host a successful 5-day virtual summit.</p>
|
||
|
|
<a href="/downloads/tech-summit-case-study.pdf" class="resource-card__link" download>
|
||
|
|
Download Study
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0l-3.75 3.75M21 3L16.5 7.5" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="resource-card" data-category="whitepapers">
|
||
|
|
<div class="resource-card__image" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/400x200/EAF2F6/9CA4B1?text=Whitepaper" alt="Thumbnail for 'Whitepaper: The Future of Virtual Networking with Spatial Audio'">
|
||
|
|
</div>
|
||
|
|
<div class="resource-card__content">
|
||
|
|
<span class="resource-card__type">Whitepaper</span>
|
||
|
|
<h3>Whitepaper: The Future of Virtual Networking with Spatial Audio</h3>
|
||
|
|
<p>Explore the benefits and implementation of spatial audio for immersive virtual interactions.</p>
|
||
|
|
<a href="/downloads/spatial-audio-whitepaper.pdf" class="resource-card__link" download>
|
||
|
|
Download Paper
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0l-3.75 3.75M21 3L16.5 7.5" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="resource-card" data-category="templates">
|
||
|
|
<div class="resource-card__image" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/400x200/F0F2F5/A3A9B3?text=Agenda+Template" alt="Thumbnail for 'Event Agenda Planning Template'">
|
||
|
|
</div>
|
||
|
|
<div class="resource-card__content">
|
||
|
|
<span class="resource-card__type">Template</span>
|
||
|
|
<h3>Event Agenda Planning Template</h3>
|
||
|
|
<p>A customizable template to help you plan and organize your virtual event schedule efficiently.</p>
|
||
|
|
<a href="/downloads/agenda-template.xlsx" class="resource-card__link" download>
|
||
|
|
Download Template
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0l-3.75 3.75M21 3L16.5 7.5" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="resource-card" data-category="guides">
|
||
|
|
<div class="resource-card__image" aria-hidden="true">
|
||
|
|
<img src="https://via.placeholder.com/400x200/EAF2F6/9CA4B1?text=Speaker+Guide" alt="Thumbnail for 'Speaker Onboarding Guide'">
|
||
|
|
</div>
|
||
|
|
<div class="resource-card__content">
|
||
|
|
<span class="resource-card__type">Guide</span>
|
||
|
|
<h3>Speaker Onboarding & Best Practices Guide</h3>
|
||
|
|
<p>Essential tips for speakers to deliver engaging presentations and utilize platform features effectively.</p>
|
||
|
|
<a href="/downloads/speaker-guide.pdf" class="resource-card__link" download>
|
||
|
|
Download Guide
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0l-3.75 3.75M21 3L16.5 7.5" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<aside class="call-to-action">
|
||
|
|
<h2>Ready to Host Your Next Unforgettable Event?</h2>
|
||
|
|
<p>Experience the full potential of our platform. Schedule a personalized demo and see how our features can transform your virtual conferences.</p>
|
||
|
|
<a href="/request-demo" class="btn-primary">Request a Demo</a>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const filterButtons = document.querySelectorAll('.resource-filters button');
|
||
|
|
const resourceCards = document.querySelectorAll('.resource-card');
|
||
|
|
|
||
|
|
filterButtons.forEach(button => {
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
// Remove active class from all buttons
|
||
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||
|
|
// Add active class to the clicked button
|
||
|
|
button.classList.add('active');
|
||
|
|
|
||
|
|
const filter = button.dataset.filter;
|
||
|
|
|
||
|
|
resourceCards.forEach(card => {
|
||
|
|
const category = card.dataset.category;
|
||
|
|
if (filter === 'all' || category === filter) {
|
||
|
|
card.style.display = 'flex'; // Show card
|
||
|
|
} else {
|
||
|
|
card.style.display = 'none'; // Hide card
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">VirtuCon</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Virtual Plaza, Innovation City, CA 90210</span></p><p><strong>Contact:</strong><br></br><span>1-800-CONNECT</span><br></br><a href="mailto:info@relume.io">info@virtucon.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Platform Features</a></li><li><a href="#">Pricing Plans</a></li><li><a href="#">Success Stories</a></li><li><a href="#">Event Solutions</a></li><li><a href="#">Resource Hub</a></li></ul><ul><li><a href="#">About VirtuCon</a></li><li><a href="#">Help Center</a></li><li><a href="#">FAQs</a></li><li><a href="#">Join Our Team</a></li><li><a href="#">Get In Touch</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2024 VirtuCon. All rights reserved.</p><ul class="footer-2-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)
|