Spaces:

banao-tech
/

scn-consultation-api

Paused

App Files Files Community

scn-consultation-api / src /template /slide /visualization_base.html

SS-2005

Initial HF Space deployment

59ec65a 25 days ago

Raw

History Blame Contribute Delete

5.75 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ main_title }}</title>
	<style>
	@import url('[https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap](https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap)');

	:root {
	--bg-color: #f0f4f9;
	--slide-bg: linear-gradient(135deg, #ffffff 0%, #eef5fc 100%);
	--title-color: #1a3a6e;
	/* --subtitle-color: #3b5998; -- No longer needed */
	--text-color: #333;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	--border: 1px solid rgba(255, 255, 255, 0.5);
	--radius: 12px;
	--font-main: 'Poppins', sans-serif;

	/* These are placeholders Claude will replace */
	--circle-large-color: {{ circle_large_color }};
	--circle-small-color: {{ circle_small_color }};
	--bullet-color: {{ bullet_color }};
	}

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

	body, html {
	width: 1920px;
	height: 1080px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font-main);
	background-color: var(--bg-color);
	overflow: hidden;
	}

	.slide-container {
	width: 1920px;
	height: 1080px;
	background: var(--slide-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: var(--border);
	padding: 60px 80px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	}

	/* Decorative Circles */
	.circle {
	position: absolute;
	border-radius: 50%;
	opacity: 0.1;
	background: linear-gradient(45deg, var(--circle-large-color), var(--circle-small-color));
	z-index: 1;
	}
	.circle-1 { width: 300px; height: 300px; top: -100px; left: -100px; }
	.circle-2 { width: 450px; height: 450px; bottom: -150px; right: -150px; opacity: 0.15; }
	.circle-3 { width: 150px; height: 150px; bottom: 100px; left: 20%; opacity: 0.05; }

	header {
	z-index: 10;
	}

	.main-title {
	font-size: 72px;
	font-weight: 700;
	color: var(--title-color);
	margin-bottom: 10px; /* You might want to adjust this padding/margin */
	}

	/* .subtitle {
	font-size: 36px;
	font-weight: 400;
	color: var(--subtitle-color);
	border-left: 5px solid var(--bullet-color);
	padding-left: 20px;
	}
	*/

	/*
	.logo {
	position: absolute;
	top: 60px;
	right: 80px;
	width: 180px;
	z-index: 10;
	}
	*/

	.content-area {
	flex-grow: 1;
	margin-top: 40px;
	z-index: 5;
	position: relative;
	display: flex; /* Make it a flex container */
	gap: 20px; /* Add some space between avatar and viz */
	}

	.avatar-placeholder {
	width: 500px; /* Set a fixed width for the empty space */
	height: 100%;
	flex-shrink: 0; /* Prevent it from shrinking */
	}

	.visualization-wrapper {
	flex-grow: 1; /* This will take up the remaining space */
	height: 100%;
	position: relative;
	}

	.bullet-points {
	list-style: none;
	padding-left: 20px;
	margin-top: 30px;
	max-width: 800px;
	}

	.bullet-points li {
	font-size: 28px;
	color: var(--text-color);
	margin-bottom: 25px;
	line-height: 1.6;
	display: flex;
	align-items: flex-start;
	}

	.bullet-points li::before {
	content: '•';
	color: var(--bullet-color);
	font-size: 40px;
	font-weight: 700;
	margin-right: 20px;
	line-height: 0.8;
	}

	/* Canvas container styles (for Claude to use) */
	.visualization-container {
	width: 100%;
	height: 100%;
	}

	.canvas-wrapper {
	width: 100%;
	height: 100%;
	border-radius: var(--radius);
	box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
	background: #fff;
	position: relative;
	overflow: hidden;
	}

	canvas {
	width: 100%;
	height: 100%;
	display: block;
	}

	</style>
	</head>
	<body>
	<div class="slide-container">
	<div class="circle circle-1"></div>
	<div class="circle circle-2"></div>
	<div class="circle circle-3"></div>

	<header>
	<h1 class="main-title">{{ main_title }}</h1>
	</header>

	<main class="content-area">

	<div class="avatar-placeholder"></div>

	<div class="visualization-wrapper">

	<ul class="bullet-points">
	<li>{{ bullet_point_1 }}</li>
	<li>{{ bullet_point_2 }}</li>
	<li>{{ bullet_point_3 }}</li>
	<li>{{ bullet_point_4 }}</li>
	</ul>

	</div>

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