static/cloudpc.html

<!DOCTYPE html>
<html> 
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>云电脑 - 一只猫的小家</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: "Microsoft Yahei", sans-serif;
		}

		body {
			background: linear-gradient(to bottom right, #fde2e4, #e2dafa, #d7f0e6);
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 2rem 0;
		}

		.container {
			width: 90%;
			max-width: 800px;
			background: rgba(255, 255, 255, 0.92);
			border-radius: 16px;
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
			padding: 2.5rem;
			margin-bottom: 2rem;
		}

		.title {
			font-size: 2rem;
			color: #2d3748;
			text-align: center;
			margin-bottom: 2rem;
			position: relative;
		}

		.title::after {
			content: "";
			display: block;
			width: 80px;
			height: 3px;
			background-color: #e2a8c0;
			margin: 0.8rem auto 0;
			border-radius: 3px;
		}

		.pc-spec {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 1.5rem;
			margin: 2rem 0;
		}

		.spec-card {
			background: linear-gradient(135deg, #f8bbd0 0%, #c1b3f0 100%);
			border-radius: 12px;
			padding: 1.5rem;
			color: white;
			text-align: center;
		}

		.spec-card h3 {
			margin-bottom: 1rem;
			font-size: 1.2rem;
		}

		.connect-btn {
			padding: 1rem 2rem;
			border-radius: 8px;
			border: none;
			background: linear-gradient(135deg, #f8bbd0 0%, #c1b3f0 100%);
			color: white;
			font-size: 1.1rem;
			cursor: pointer;
			transition: all 0.3s ease;
			margin: 1rem 0;
		}

		.connect-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(248, 187, 208, 0.3);
		}

		.back-btn {
			display: inline-block;
			margin: 1rem auto 0;
			padding: 0.8rem 1.8rem;
			border-radius: 8px;
			border: none;
			background: linear-gradient(135deg, #f8bbd0 0%, #c1b3f0 100%);
			color: white;
			font-size: 1rem;
			cursor: pointer;
			transition: all 0.3s ease;
			text-decoration: none;
		}

		.back-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(248, 187, 208, 0.3);
		}

		.center {
			text-align: center;
		}

		.tips {
			color: #718096;
			font-size: 0.9rem;
			margin-top: 1rem;
			line-height: 1.6;
		}
	</style>
</head>
<body>
	<div class="container">
		<h2 class="title">☁️云电脑</h2>
		<p style="text-align:center; color:#718096; margin-bottom:1rem;">随时随地使用高性能云电脑～</p>
		
		<div class="pc-spec">
			<div class="spec-card">
				<h3>基础配置</h3>
				<p>CPU：4核</p>
				<p>内存：8GB</p>
				<p>存储：100GB</p>
			</div>
			<div class="spec-card">
				<h3>进阶配置</h3>
				<p>CPU：8核</p>
				<p>内存：16GB</p>
				<p>存储：500GB</p>
			</div>
			<div class="spec-card">
				<h3>高端配置</h3>
				<p>CPU：16核</p>
				<p>内存：32GB</p>
				<p>存储：1TB</p>
			</div>
		</div>

		<div class="center">
			<button class="connect-btn">连接云电脑</button>
			<p class="tips">提示：连接前请确保网络稳定，建议使用5G/WiFi网络</p>
			<br>
			<a href="index.html" class="back-btn">返回主页</a>
		</div>
	</div>
</body>
</html>