Spaces:

banao-tech
/

scn-consultation-api

Paused

App Files Files Community

scn-consultation-api / src /template /system_design /comparison_table.html

SS-2005

Initial HF Space deployment

59ec65a 25 days ago

Raw

History Blame Contribute Delete

9.55 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ title }}</title>
	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
	<style>
	:root {
	/* Palette maintained from your example */
	--bg-root: #f8fafc;
	--glass-bg: rgba(255, 255, 255, 0.75);
	--glass-surface: rgba(255, 255, 255, 0.4);

	--primary: #4f46e5; /* Indigo 600 */
	--primary-light: #818cf8;
	--primary-dim: rgba(79, 70, 229, 0.08);
	--accent: #ec4899; /* Pink 500 */

	--text-main: #0f172a; /* Slate 900 */
	--text-muted: #64748b; /* Slate 500 */
	--success: #10b981; /* Emerald 500 */
	--danger: #ef4444; /* Red 500 */

	--font-main: 'Plus Jakarta Sans', sans-serif;
	--font-code: 'JetBrains Mono', monospace;
	}

	* { box-sizing: border-box; margin: 0; padding: 0; }

	body {
	font-family: var(--font-main);
	background: #eef2f6;
	background-image:
	radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
	radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%);
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	/* --- Layout Skeleton (Identical to reference) --- */
	.slide-wrap {
	width: 1920px;
	height: 1080px;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	box-shadow:
	0 25px 50px -12px rgba(0, 0, 0, 0.1),
	0 0 0 1px rgba(255, 255, 255, 0.5) inset;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	display: flex;
	}

	.sidebar-decor {
	width: 12px;
	height: 100%;
	background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
	flex-shrink: 0;
	}

	.slide {
	flex: 1;
	padding: 60px 80px;
	height: 100%;
	display: flex;
	flex-direction: column;
	z-index: 10;
	position: relative;
	}

	/* --- Typography --- */
	.header {
	margin-bottom: 40px;
	flex-shrink: 0;
	position: relative;
	}

	.header::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 80px;
	height: 4px;
	background: var(--primary);
	border-radius: 2px;
	}

	.title {
	font-size: 52px;
	font-weight: 800;
	color: var(--text-main);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin-bottom: 12px;
	}

	.subtitle {
	font-size: 22px;
	color: var(--text-muted);
	font-weight: 500;
	}

	/* --- Table Container --- */
	.table-container {
	background: var(--glass-surface);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	box-shadow:
	inset 0 0 20px rgba(255, 255, 255, 0.5),
	0 10px 30px rgba(0,0,0,0.03);
	flex: 1;
	overflow: hidden; /* Rounded corners for inner table */
	position: relative;
	display: flex;
	flex-direction: column;
	}

	/* Scrollable area if content is long */
	.table-scroll {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 0;
	}

	table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	}

	/* Table Header */
	thead {
	position: sticky;
	top: 0;
	z-index: 2;
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(10px);
	}

	th {
	padding: 24px 32px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-muted);
	font-weight: 700;
	border-bottom: 2px solid var(--primary-dim);
	}

	/* Table Body */
	td {
	padding: 20px 32px;
	color: var(--text-main);
	font-size: 18px;
	font-weight: 500;
	border-bottom: 1px solid rgba(0,0,0,0.04);
	transition: background 0.2s;
	}

	tr:last-child td {
	border-bottom: none;
	}

	tr:hover td {
	background: rgba(255, 255, 255, 0.5);
	}

	/* --- "Winner" / Highlighted Column Styling --- */
	/* This class is applied via Jinja if a column is marked highlighted */
	.col-highlight {
	background: rgba(79, 70, 229, 0.03);
	position: relative;
	}

	th.col-highlight {
	color: var(--primary);
	background: rgba(79, 70, 229, 0.08);
	border-bottom: 2px solid var(--primary);
	}

	td.col-highlight {
	font-weight: 700; /* Bolder text for the winner */
	background: rgba(79, 70, 229, 0.03);
	}

	/* "Best Choice" Badge for the header */
	.badge-best {
	display: inline-block;
	margin-left: 8px;
	padding: 4px 8px;
	font-size: 10px;
	background: var(--primary);
	color: white;
	border-radius: 4px;
	vertical-align: middle;
	transform: translateY(-2px);
	}

	/* Feature/Label Column (First Column) styling */
	td:first-child {
	font-weight: 600;
	color: var(--text-muted);
	width: 25%; /* Fixed width for labels */
	background: rgba(255,255,255,0.3); /* Slight dim */
	}

	/* --- Icons & Badges --- */
	.icon-check {
	color: var(--success);
	width: 24px;
	height: 24px;
	background: rgba(16, 185, 129, 0.1);
	border-radius: 50%;
	padding: 4px;
	}

	.icon-cross {
	color: var(--text-muted);
	opacity: 0.5;
	width: 24px;
	height: 24px;
	}

	.text-mono {
	font-family: var(--font-code);
	font-size: 0.9em;
	color: var(--primary);
	background: rgba(79, 70, 229, 0.1);
	padding: 4px 8px;
	border-radius: 6px;
	}

	/* --- Background Blobs & Floating Elements --- */
	.blob {
	position: absolute;
	filter: blur(80px);
	opacity: 0.4;
	z-index: 1;
	}
	.blob-1 { top: -10%; right: -5%; width: 600px; height: 600px; background: var(--primary-light); }
	.blob-2 { bottom: -10%; left: -5%; width: 500px; height: 500px; background: var(--accent); }

	.float-tag {
	position: absolute;
	bottom: 30px;
	right: 30px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	padding: 8px 16px;
	border-radius: 50px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	z-index: 20;
	}

	.dot {
	width: 8px;
	height: 8px;
	background: var(--accent);
	border-radius: 50%;
	animation: pulse 2s infinite;
	}

	.tag-text {
	font-family: var(--font-code);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-main);
	}

	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7); }
	70% { box-shadow: 0 0 0 6px rgba(236, 72, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
	}
	</style>
	</head>
	<body>
	<div class="slide-wrap">

	<div class="sidebar-decor"></div>

	<div class="blob blob-1"></div>
	<div class="blob blob-2"></div>

	<div class="slide">
	<div class="header">
	<h1 class="title">{{ title }}</h1>
	{% if subtitle %}
	<p class="subtitle">{{ subtitle }}</p>
	{% endif %}
	</div>

	<div class="table-container">
	<div class="table-scroll">
	<table>
	<thead>
	<tr>
	<th>Feature</th>

	{% for col in columns %}
	<th class="{{ 'col-highlight' if loop.index0 == highlight_index else '' }}">
	{{ col }}
	{% if loop.index0 == highlight_index %}
	<span class="badge-best">RECOMMENDED</span>
	{% endif %}
	</th>
	{% endfor %}
	</tr>
	</thead>
	<tbody>
	{% for row in rows %}
	<tr>
	<td>{{ row[0] }}</td>

	{% for cell in row[1:] %}
	<td class="{{ 'col-highlight' if loop.index0 == highlight_index else '' }}">

	{% if cell is boolean %}
	{% if cell %}
	<svg class="icon-check" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
	{% else %}
	<svg class="icon-cross" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
	{% endif %}

	{% elif cell == "Unlimited" or cell == "Enterprise" %}
	<span style="color: var(--primary); font-weight: 800;">{{ cell }}</span>

	{% else %}
	{{ cell }}
	{% endif %}

	</td>
	{% endfor %}
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<div class="float-tag">
	<div class="dot"></div>
	<span class="tag-text">{{ footer_tag or 'Comparison View' }}</span>
	</div>

	</div>
	</body>
	</html>