/* Base styles */
:root {
--color-indigo-300: #a5b4fc;
--color-indigo-400: #818cf8;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-orange-500: #f97316;
--color-red-500: #ef4444;
--color-green-500: #10b981;
--color-blue-300: #93c5fd;
--color-blue-500: #3b82f6;
--color-purple-500: #8b5cf6;
--color-amber-500: #f59e0b;
}
.dashboard-container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--color-gray-50);
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 1200px;
margin: 0 auto;
}
/* Header styles */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.brand h1 {
font-size: 2.25rem;
font-weight: 500;
margin: 0;
}
.text-light {
color: var(--color-indigo-400);
}
.text-dark {
color: var(--color-indigo-600);
}
.tagline {
color: var(--color-indigo-300);
margin: 0;
}
.actions {
display: flex;
align-items: center;
gap: 1rem;
}
.realtime-indicator {
display: flex;
align-items: center;
color: var(--color-indigo-500);
font-size: 0.875rem;
}
.btn {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
}
.btn-primary {
background-color: var(--color-indigo-600);
color: white;
border: none;
}
.btn-secondary {
background-color: var(--color-gray-200);
color: var(--color-gray-700);
border: none;
}
.btn-text {
background: none;
border: none;
color: var(--color-indigo-600);
font-size: 0.875rem;
cursor: pointer;
display: flex;
align-items: center;
}
.icon {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
/* Section Header */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-header h2 {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-700);
margin: 0;
}
/* Website Cards */
.website-cards {
display: grid;
gap: 1rem;
}
.website-card {
background-color: white;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: box-shadow 0.2s;
}
.website-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
background-color: var(--color-gray-50);
border-bottom: 1px solid var(--color-gray-200);
}
.rank-info {
display: flex;
align-items: center;
}
.rank-badge {
width: 2rem;
height: 2rem;
background-color: var(--color-gray-200);
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
color: var(--color-indigo-600);
margin-right: 0.75rem;
}
.change {
display: flex;
align-items: center;
font-size: 0.75rem;
margin-right: 0.75rem;
}
.change.up {
color: var(--color-indigo-500);
}
.change.down {
color: var(--color-red-500);
}
.website-identity {
display: flex;
align-items: center;
}
.website-icon {
width: 2rem;
height: 2rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
overflow: hidden;
}
.inner-icon {
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.75rem;
}
.website-identity h3 {
font-size: 0.875rem;
font-weight: 600;
margin: 0;
color: var(--color-gray-800);
}
.domain {
font-size: 0.75rem;
color: var(--color-gray-500);
margin: 0;
}
/* Card Content */
.card-content {
display: grid;
grid-template-columns: 25% 41.66% 33.33%;
gap: 1rem;
padding: 1rem;
}
/* Score Section */
.score-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.circular-progress {
position: relative;
width: 100px;
height: 100px;
}
.progress-circle {
transition: stroke-dashoffset 1s ease;
}
.score-value {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.875rem;
font-weight: 700;
color: var(--color-gray-800);
}
.live-indicator {
position: absolute;
top: -0.5rem;
right: -0.5rem;
background-color: var(--color-blue-500);
color: white;
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
display: flex;
align-items: center;
}
.score-label {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-indigo-400);
font-weight: 500;
}
/* Modality Section */
.modality-section {
padding: 0.5rem;
}
.section-title {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
font-size: 0.875rem;
color: var(--color-indigo-600);
font-weight: 500;
}
.feature-count {
background-color: var(--color-indigo-50);
color: var(--color-indigo-600);
font-size: 0.875rem;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
margin-left: auto;
}
.modality-bars {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.modality-bar {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bar-label {
display: flex;
align-items: center;
gap: 0.5rem;
width: 6rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-700);
}
.progress-bar {
flex: 1;
height: 0.5rem;
background-color: var(--color-gray-200);
border-radius: 9999px;
position: relative;
}
.progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: 9999px;
transition: width 1s ease;
}
/* Impact Section */
.impact-section {
padding: 0.5rem;
}
.impact-metrics {
display: flex;
flex-direction: column;
gap: 1rem;
}
.impact-metric {
display: flex;
align-items: center;
}
.impact-label {
display: flex;
align-items: center;
width: 7rem;
font-size: 0.875rem;
color: var(--color-gray-700);
}
.impact-ring {
position: relative;
width: 48px;
height: 48px;
}
.impact-circle {
transition: stroke-dashoffset 1s ease;
}
.impact-value {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-gray-800);
}
/* Info Boxes */
.info-box {
background-color: white;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-top: 2rem;
}
.info-box h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
margin-top: 0;
margin-bottom: 0.75rem;
}
.subtitle {
font-size: 0.875rem;
color: var(--color-indigo-400);
margin-bottom: 1.5rem;
}
.modality-icons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.modality-icon {
text-align: center;
}
.icon-container {
width: 3rem;
height: 3rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
}
.icon-container .icon {
width: 1.5rem;
height: 1.5rem;
}
.modality-icon h4 {
font-weight: 500;
color: var(--color-gray-800);
margin: 0 0 0.25rem;
}
.modality-icon p {
font-size: 0.75rem;
color: var(--color-gray-500);
margin: 0;
}
.impact-info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.impact-info-card {
background-color: var(--color-gray-50);
border-radius: 0.75rem;
padding: 1rem;
}
.impact-info-header {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
}
.impact-info-header .icon {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.5rem;
}
.impact-info-header h4 {
font-weight: 500;
color: var(--color-gray-800);
margin: 0;
}
.impact-info-card p {
font-size: 0.875rem;
color: var(--color-gray-600);
margin: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.actions {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.card-content {
grid-template-columns: 1fr;
}
.impact-info-cards {
grid-template-columns: 1fr;
}
}unless — Luminadocument.addEventListener('DOMContentLoaded', function() {
// Set up circular progress bars
document.querySelectorAll('.circular-progress').forEach(function(el) {
const value = parseInt(el.getAttribute('data-value'));
const circle = el.querySelector('.progress-circle');
const radius = parseInt(circle.getAttribute('r'));
const circumference = 2 * Math.PI * radius;
circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference - (value / 100) * circumference;
});
// Set up impact rings
document.querySelectorAll('.impact-ring').forEach(function(el) {
const value = parseInt(el.getAttribute('data-value'));
const circle = el.querySelector('.impact-circle');
const radius = parseInt(circle.getAttribute('r'));
const circumference = 2 * Math.PI * radius;
circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference - (value / 100) * circumference;
});
// Add more websites (simplified)
const addMoreWebsites = function() {
const template = document.querySelector('.website-card');
const container = document.querySelector('.website-cards');
// Only proceed if there's a template card
if (!template) return;
// Sample data for additional websites
const websites = [
{
name: "Instagram",
domain: "instagram.com",
rank: 2,
change: 1,
iconColor: "#E1306C20",
score: 80,
modalities: {
speech: 65,
vision: 30,
hearing: 12,
language: 90
},
impacts: {
productivity: 68,
creativity: 92,
adaptability: 79
},
featureCount: "6/12"
},
// You can add more websites here
];
// Simplified way to add more websites - in a real implementation,
// you would create DOM elements for each website
if (websites.length > 0) {
const clonedTemplate = template.cloneNode(true);
// Update cloned template with data from the first website in the array
const website = websites[0];
// Update website name, domain, rank, etc.
clonedTemplate.querySelector('h3').textContent = website.name;
clonedTemplate.querySelector('.domain').textContent = website.domain;
clonedTemplate.querySelector('.rank-badge').textContent = website.rank;
// Add the cloned card to the container
container.appendChild(clonedTemplate);
}
};
// Call function to add more websites
addMoreWebsites();
// Toggle expand/collapse for older entries
document.querySelector('.btn-text').addEventListener('click', function() {
// In a more complete implementation, this would toggle visibility
// of collapsed website cards
this.textContent = this.textContent.includes('Expand') ? 'Collapse All' : 'Expand All';
});
});