Spaces:

l-g-t
/

web

Paused

App Files Files Community

web / public-html /index.php

l-g-t

Update public-html/index.php

b2f1a40 verified 5 months ago

raw

history blame contribute delete

9.51 kB

	<?php
	// PHP 代码部分
	// 在这里可以进行数据处理、数据库交互等服务器端逻辑
	// 例如，获取当前日期和时间
	date_default_timezone_set('Asia/Shanghai'); // 设置时区
	$currentDateTime = date('Y年m月d日 H:i:s');
	$pageTitle = "精美动态网页示例";
	$welcomeMessage = "欢迎来到我们的动态展示页面！";

	// 也可以根据某些条件动态生成内容
	$randomNumber = rand(1, 100);
	$dynamicContent = "今天您的幸运数字是：<strong>" . $randomNumber . "</strong>。";

	// 搜索结果表明，PHP 可以很好地输出 HTML、CSS 和 JavaScript 内容。
	// 现代网页设计趋势包括视觉效果、简洁风格、3D 效果和动画。
	// 简单的 CSS 动画效果如淡入、悬停效果等可以增加页面的趣味性。
	?>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title><?php echo htmlspecialchars($pageTitle); ?></title>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
	<style>
	/* CSS 代码部分 */
	:root {
	--primary-color: #6a11cb;
	--secondary-color: #2575fc;
	--text-color: #333;
	--bg-light: #f4f7f6;
	--bg-dark: #e0e0e0;
	--shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	--border-radius: 10px;
	}

	body {
	font-family: 'Noto Sans SC', sans-serif;
	margin: 0;
	padding: 0;
	background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-dark) 100%);
	color: var(--text-color);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-x: hidden;
	opacity: 0; /* 用于初始淡入动画 */
	transition: opacity 1s ease-in-out;
	}

	body.loaded {
	opacity: 1;
	}

	.container {
	max-width: 900px;
	width: 90%;
	background-color: #fff;
	padding: 40px;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	text-align: center;
	animation: fadeInScale 1s ease-out forwards;
	position: relative;
	z-index: 1;
	margin: 20px 0;
	}

	@keyframes fadeInScale {
	from {
	opacity: 0;
	transform: scale(0.95) translateY(20px);
	}
	to {
	opacity: 1;
	transform: scale(1) translateY(0);
	}
	}

	header h1 {
	color: var(--primary-color);
	margin-bottom: 20px;
	font-size: 2.5em;
	position: relative;
	display: inline-block;
	}

	header h1::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	border-radius: 2px;
	}

	.message {
	font-size: 1.2em;
	color: #555;
	margin-bottom: 30px;
	}

	.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 25px;
	margin-top: 40px;
	}

	.card {
	background: var(--bg-light);
	padding: 25px;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: left;
	position: relative;
	overflow: hidden;
	}



	.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px; /* 这里是之前截断的地方，应是 height: 5px; */
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	transform: translateX(-100%);
	transition: transform 0.3s ease-out;
	}

	.card:hover::before {
	transform: translateX(0%);
	}

	.card:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}

	.card h3 {
	color: var(--secondary-color);
	margin-top: 0;
	font-size: 1.5em;
	margin-bottom: 15px;
	}

	.card p {
	color: #666;
	font-size: 0.95em;
	}

	.footer {
	margin-top: 40px;
	font-size: 0.85em;
	color: #777;
	padding-top: 20px;
	border-top: 1px solid #eee;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
	.container {
	padding: 25px;
	width: 95%;
	}
	header h1 {
	font-size: 2em;
	}
	.message {
	font-size: 1em;
	}
	.card-grid {
	grid-template-columns: 1fr;
	}
	}

	/* 额外的装饰元素 */
	.decoration-blob-1, .decoration-blob-2 {
	position: absolute;
	background: linear-gradient(135deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
	border-radius: 50%;
	filter: blur(80px);
	z-index: 0;
	}

	.decoration-blob-1 {
	width: 300px;
	height: 300px;
	top: -100px;
	left: -100px;
	animation: floatBlob 10s infinite ease-in-out alternate;
	}

	.decoration-blob-2 {
	width: 400px;
	height: 400px;
	bottom: -150px;
	right: -150px;
	animation: floatBlob 12s infinite ease-in-out alternate-reverse;
	}

	@keyframes floatBlob {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(30px, -30px) scale(1.05); }
	100% { transform: translate(0, 0) scale(1); }
	}

	</style>
	</head>
	<body class="loaded">
	<div class="decoration-blob-1"></div>
	<div class="decoration-blob-2"></div>

	<div class="container">
	<header>
	<h1><?php echo htmlspecialchars($pageTitle); ?></h1>
	<p class="message"><?php echo htmlspecialchars($welcomeMessage); ?></p>
	</header>

	<main>
	<section class="dynamic-info">
	<p>当前时间：<span id="current-time"><?php echo htmlspecialchars($currentDateTime); ?></span></p>
	<p><?php echo $dynamicContent; ?></p>
	</section>

	<section class="card-grid">
	<div class="card">
	<h3>动态内容渲染</h3>
	<p>此卡片内容由 PHP 动态生成，展示了服务器端语言如何为页面提供数据。例如，上方的时间和幸运数字。</p>
	</div>
	<div class="card">
	<h3>响应式设计</h3>
	<p>页面布局会根据您的设备屏幕尺寸自动调整，在手机、平板和桌面电脑上都能提供良好的浏览体验。</p>
	</div>
	<div class="card">
	<h3>CSS 动画与交互</h3>
	<p>鼠标悬停在卡片上或页面加载时，您会看到微妙的动画效果，提升用户体验的趣味性。</p>
	</div>
	</section>
	</main>



	<footer class="footer">
	<p>© <?php echo date('Y'); ?> 动态展示页面. 版权所有。</p>
	<p>感谢您的访问！</p>
	</footer>
	</div>

	<!-- JavaScript 代码部分 -->
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// 页面加载后执行的 JavaScript
	// 更新时间功能
	function updateTime() {
	const timeElement = document.getElementById('current-time');
	if (timeElement) {
	const now = new Date();
	const options = {
	year: 'numeric', month: 'numeric', day: 'numeric',
	hour: '2-digit', minute: '2-digit', second: '2-digit',
	hour12: false
	};
	timeElement.textContent = now.toLocaleString('zh-CN', options).replace(/\//g, '年').replace(/ /g, '日 ').replace(/,/g, '');
	}
	}

	// 每秒更新一次时间
	setInterval(updateTime, 1000);

	// 初始加载淡入效果
	document.body.classList.add('loaded'); // 确保 body 最初是隐藏的，然后淡入

	// 示例：点击卡片可触发一个简单提示 (可选)
	document.querySelectorAll('.card').forEach(card => {
	card.addEventListener('click', function() {
	alert('您点击了卡片: ' + this.querySelector('h3').textContent);
	});
	});
	});
	</script>
	</body>
	</html>