1242 lines
50 KiB
HTML
1242 lines
50 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>
|
||
|
|
<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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.support-wrapper {
|
||
|
|
font-family: sans-serif;
|
||
|
|
background: #fff;
|
||
|
|
padding: 40px 20px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.support-section {
|
||
|
|
max-width: 400px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.support-heading {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 800;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.support-subtext {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.support-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
text-align: left;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.support-icon {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
background: #f1f5f9;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-right: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.support-content h3 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.support-content p {
|
||
|
|
margin: 4px 0 0;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-wrapper {
|
||
|
|
background: #F8F8F8;
|
||
|
|
font-family: sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding:20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-section {
|
||
|
|
background: #fff;
|
||
|
|
padding: 40px 30px 20px;
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-top {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 40px;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-brand {
|
||
|
|
flex: 1 1 300px;
|
||
|
|
max-width: 350px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-logo {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-newsletter-text {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-newsletter-form {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-newsletter-form input[type="email"] {
|
||
|
|
padding: 10px;
|
||
|
|
flex: 1;
|
||
|
|
font-size: 14px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-subscribe-btn {
|
||
|
|
padding: 10px 16px;
|
||
|
|
font-size: 14px;
|
||
|
|
border: 1px solid #000;
|
||
|
|
background: #000;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-privacy-note {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-privacy-note a {
|
||
|
|
text-decoration: underline;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-columns {
|
||
|
|
display: flex;
|
||
|
|
gap: 40px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
flex: 2 1 500px;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-column {
|
||
|
|
min-width: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-column h4 {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-column ul {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-column ul li {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-column ul li a {
|
||
|
|
color: #000;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-social ul li {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-social ul li i {
|
||
|
|
width: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-bottom {
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
padding-top: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-links {
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-1-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>
|
||
|
|
<!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">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--primary-color: #6a40f2;
|
||
|
|
--secondary-color: #8c5af7;
|
||
|
|
--text-color-dark: #2c2c2c;
|
||
|
|
--text-color-light: #5e5e5e;
|
||
|
|
--background-light: #f9f9f9;
|
||
|
|
--background-white: #ffffff;
|
||
|
|
--border-color: #e0e0e0;
|
||
|
|
--shadow-light: rgba(0, 0, 0, 0.05);
|
||
|
|
--border-radius-base: 8px;
|
||
|
|
--border-radius-large: 12px;
|
||
|
|
--spacing-xs: 8px;
|
||
|
|
--spacing-sm: 12px;
|
||
|
|
--spacing-md: 16px;
|
||
|
|
--spacing-lg: 24px;
|
||
|
|
--spacing-xl: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 20px;
|
||
|
|
background-color: var(--background-light);
|
||
|
|
color: var(--text-color-dark);
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-profile-overview {
|
||
|
|
max-width: 960px;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: var(--spacing-lg);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.user-profile-overview {
|
||
|
|
grid-template-columns: 2fr 1fr; /* Main content and sidebar */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-main-content {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: var(--spacing-lg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-card {
|
||
|
|
background-color: var(--background-white);
|
||
|
|
border-radius: var(--border-radius-large);
|
||
|
|
box-shadow: 0 4px 12px var(--shadow-light);
|
||
|
|
padding: var(--spacing-lg);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--spacing-md);
|
||
|
|
margin-bottom: var(--spacing-lg);
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-avatar {
|
||
|
|
width: 96px;
|
||
|
|
height: 96px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
overflow: hidden;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-avatar img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-info h1 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
margin: 0;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-info p {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: var(--text-color-light);
|
||
|
|
margin: 4px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-bio p {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: var(--text-color-dark);
|
||
|
|
margin-bottom: var(--spacing-md);
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-bio .tags {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: var(--spacing-xs);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
background-color: #f0ebfe;
|
||
|
|
color: var(--primary-color);
|
||
|
|
padding: 6px 12px;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: var(--spacing-md);
|
||
|
|
color: var(--text-color-dark);
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
padding-bottom: var(--spacing-sm);
|
||
|
|
}
|
||
|
|
|
||
|
|
.activity-list, .connections-list {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.activity-item, .connection-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--spacing-md);
|
||
|
|
padding: var(--spacing-sm) 0;
|
||
|
|
border-bottom: 1px dashed var(--border-color);
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.activity-item:last-child, .connection-item:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.activity-icon, .connection-avatar {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background-color: #e6e6e6;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.activity-text {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.activity-time {
|
||
|
|
color: var(--text-color-light);
|
||
|
|
font-size: 0.8rem;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-avatar img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-details {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-details strong {
|
||
|
|
display: block;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-color-dark);
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-details span {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: var(--text-color-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-actions {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: white;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--border-radius-base);
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: background-color 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn:hover {
|
||
|
|
background-color: var(--secondary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-outline {
|
||
|
|
background-color: transparent;
|
||
|
|
color: var(--primary-color);
|
||
|
|
border: 1px solid var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-outline:hover {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-sidebar {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: var(--spacing-lg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-event-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--spacing-sm);
|
||
|
|
padding: var(--spacing-md) 0;
|
||
|
|
border-bottom: 1px dashed var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-event-item:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-title {
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-details {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: var(--text-color-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-details span:first-child {
|
||
|
|
margin-right: var(--spacing-xs);
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-actions {
|
||
|
|
margin-top: var(--spacing-sm);
|
||
|
|
display: flex;
|
||
|
|
gap: var(--spacing-xs);
|
||
|
|
}
|
||
|
|
|
||
|
|
.placeholder-text {
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
color: #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: inline-block;
|
||
|
|
min-height: 1em;
|
||
|
|
width: 100%;
|
||
|
|
height: 1em; /* Placeholder height */
|
||
|
|
}
|
||
|
|
.placeholder-short { width: 70%; }
|
||
|
|
.placeholder-medium { width: 85%; }
|
||
|
|
.placeholder-long { width: 100%; }
|
||
|
|
|
||
|
|
.placeholder-avatar {
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 96px;
|
||
|
|
height: 96px;
|
||
|
|
}
|
||
|
|
.placeholder-square {
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
border-radius: var(--border-radius-base);
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-placeholder {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.circular-placeholder {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</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">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--primary-color: #6C63FF; /* A vibrant purple for primary actions */
|
||
|
|
--secondary-color: #555555; /* Dark grey for text */
|
||
|
|
--background-color: #F8F9FA; /* Light grey for section background */
|
||
|
|
--card-background: #FFFFFF; /* White for content cards */
|
||
|
|
--border-color: #E0E0E0; /* Light grey for borders */
|
||
|
|
--text-light: #777777; /* Lighter grey for descriptions */
|
||
|
|
--heading-color: #333333; /* Darker grey for headings */
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: var(--background-color);
|
||
|
|
color: var(--secondary-color);
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
background-color: var(--background-color);
|
||
|
|
padding: 4rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-connections {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-connections h2 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
color: var(--heading-color);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-connections p.lead {
|
||
|
|
font-size: 1.15rem;
|
||
|
|
color: var(--text-light);
|
||
|
|
max-width: 700px;
|
||
|
|
margin: 0 auto 3rem auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.features-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card {
|
||
|
|
background-color: var(--card-background);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2rem;
|
||
|
|
text-align: left;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card .icon {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 8px;
|
||
|
|
background-color: rgba(108, 99, 255, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card h3 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: var(--heading-color);
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card p {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: var(--text-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: #FFFFFF;
|
||
|
|
padding: 0.9rem 2.2rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-top: 3rem;
|
||
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||
|
|
box-shadow: 0 4px 10px rgba(108, 99, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button:hover {
|
||
|
|
background-color: #5d56d6;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive adjustments */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.networking-connections h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-connections p.lead {
|
||
|
|
font-size: 1rem;
|
||
|
|
padding: 0 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.features-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card {
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.container {
|
||
|
|
padding: 1.5rem 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
padding: 3rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.networking-connections h2 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button {
|
||
|
|
padding: 0.8rem 1.8rem;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</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)
|