Spaces:

samlax12
/

pay

Running

App Files Files Community

pay / index3.html

samlax12

Create index3.html

873bac3 verified 10 months ago

raw

history blame contribute delete

23.5 kB

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>💖 收款 💖</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 35%, #90caf9 100%);
	min-height: 100vh;
	color: #1a3a52;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	.container {
	max-width: 480px;
	margin: 0 auto;
	padding: 15px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	}

	.header {
	text-align: center;
	margin-bottom: 20px;
	padding-top: 10px;
	}

	.header h1 {
	font-size: 24px;
	color: #1976d2;
	font-weight: 600;
	text-shadow: 2px 2px 4px rgba(25, 118, 210, 0.2);
	}

	.profile-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 8px 32px rgba(33, 150, 243, 0.15);
	backdrop-filter: blur(10px);
	margin-bottom: 20px;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 15px;
	}

	.avatar-wrapper {
	position: relative;
	flex-shrink: 0;
	}

	.avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
	background: #bbdefb;
	}

	.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	.sparkle {
	position: absolute;
	color: #42a5f5;
	font-size: 16px;
	animation: sparkle 2s ease-in-out infinite;
	}

	.sparkle:nth-child(2) { top: -8px; right: -8px; animation-delay: 0.3s; }
	.sparkle:nth-child(3) { bottom: -8px; left: -8px; animation-delay: 0.6s; }

	@keyframes sparkle {
	0%, 100% { opacity: 0; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
	}

	.profile-info {
	text-align: left;
	flex: 1;
	}

	.profile-info h2 {
	font-size: 18px;
	color: #1976d2;
	margin-bottom: 3px;
	}

	.profile-info p {
	color: #666666;
	font-size: 14px;
	}

	.amount-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 20px 15px;
	box-shadow: 0 8px 32px rgba(33, 150, 243, 0.15);
	backdrop-filter: blur(10px);
	flex: 1;
	display: flex;
	flex-direction: column;
	}

	.amount-display {
	text-align: center;
	margin-bottom: 20px;
	}

	.amount-label {
	font-size: 13px;
	color: #2196f3;
	margin-bottom: 8px;
	font-weight: 500;
	}

	.amount-value {
	font-size: 36px;
	font-weight: 700;
	background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.payment-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 20px;
	flex: 1;
	align-content: start;
	grid-auto-rows: min-content;
	}

	.payment-item {
	background: rgba(227, 242, 253, 0.8);
	padding: 12px;
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	position: relative;
	overflow: hidden;
	}

	.payment-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
	}

	.payment-item.active {
	border-color: #2196f3;
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
	}

	.payment-item .emoji {
	font-size: 20px;
	margin-bottom: 6px;
	display: block;
	filter: drop-shadow(2px 2px 4px rgba(33, 150, 243, 0.2));
	transition: transform 0.3s ease;
	}

	.payment-item:hover .emoji {
	transform: scale(1.1);
	}

	.payment-item .price {
	font-size: 15px;
	font-weight: 600;
	color: #1976d2;
	}

	.payment-item .quantity {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	background: #2196f3;
	color: white;
	padding: 1px 6px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	min-width: 20px;
	text-align: center;
	}

	.note-section {
	margin-bottom: 15px;
	}

	.note-label {
	font-size: 13px;
	color: #2196f3;
	margin-bottom: 6px;
	font-weight: 500;
	}

	.note-input {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #bbdefb;
	border-radius: 10px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
	color: #1a3a52;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	}

	.note-input:focus {
	outline: none;
	border-color: #42a5f5;
	background: white;
	box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.15);
	}

	.note-input::placeholder {
	color: #64b5f6;
	}

	.pay-button {
	background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
	color: white;
	border: none;
	padding: 14px 30px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 25px;
	cursor: pointer;
	width: 100%;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
	position: relative;
	overflow: hidden;
	}

	.pay-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
	}

	.pay-button:hover::before {
	width: 300px;
	height: 300px;
	}

	.pay-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
	}

	.pay-button:active {
	transform: translateY(0);
	}

	/* 模态框样式 */
	.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(66, 165, 245, 0.95);
	backdrop-filter: blur(10px);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	}

	.modal-content {
	background: white;
	padding: 30px 25px;
	border-radius: 25px;
	text-align: center;
	max-width: 320px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(25, 118, 210, 0.3);
	position: relative;
	animation: modalFadeIn 0.4s ease-out;
	}

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

	.modal-title {
	font-size: 18px;
	color: #1976d2;
	margin-bottom: 15px;
	font-weight: 600;
	}

	.qr-wrapper {
	position: relative;
	display: inline-block;
	padding: 12px;
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	border-radius: 18px;
	margin-bottom: 15px;
	}

	.qr-code-image {
	width: 180px;
	height: 180px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(33, 150, 243, 0.2);
	}

	.qr-code-image img {
	width: 100%;
	height: 100%;
	display: block;
	}

	.payment-tips {
	font-size: 13px;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 15px;
	}

	.payment-amount-display {
	font-size: 22px;
	color: #1976d2;
	font-weight: 600;
	margin: 10px 0;
	}

	.close-button {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #bbdefb;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #1976d2;
	transition: all 0.3s ease;
	}

	.close-button:hover {
	background: #42a5f5;
	color: white;
	transform: rotate(90deg);
	}

	/* 使用说明样式 */
	.usage-tip {
	font-size: 12px;
	color: #64b5f6;
	text-align: center;
	margin-top: 10px;
	opacity: 0.8;
	}

	/* 装饰元素 */
	.decoration {
	position: fixed;
	pointer-events: none;
	opacity: 0.5;
	animation: float 6s ease-in-out infinite;
	font-size: 20px;
	}

	.decoration:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
	.decoration:nth-child(2) { top: 20%; right: 5%; animation-delay: 1s; }
	.decoration:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 2s; }
	.decoration:nth-child(4) { bottom: 10%; right: 10%; animation-delay: 3s; }

	@keyframes float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-15px) rotate(10deg); }
	}

	/* 响应式优化 */
	@media (max-height: 700px) {
	.container {
	padding: 10px;
	}
	.header {
	margin-bottom: 15px;
	padding-top: 5px;
	}
	.header h1 {
	font-size: 22px;
	}
	.profile-card {
	padding: 15px;
	margin-bottom: 15px;
	}
	.avatar {
	width: 50px;
	height: 50px;
	}
	.amount-section {
	padding: 15px 12px;
	}
	.amount-value {
	font-size: 32px;
	}
	.payment-items {
	gap: 8px;
	}
	.payment-item {
	padding: 10px;
	}
	}

	@media (max-height: 600px) {
	.amount-display {
	margin-bottom: 15px;
	}
	.payment-items {
	margin-bottom: 15px;
	}
	.note-section {
	margin-bottom: 12px;
	}
	.pay-button {
	padding: 12px 25px;
	font-size: 15px;
	}
	}
	</style>
	</head>
	<body>
	<!-- 装饰元素 -->
	<div class="decoration">💙</div>
	<div class="decoration">🌊</div>
	<div class="decoration">⭐</div>
	<div class="decoration">✨</div>

	<div class="container">
	<div class="header">
	<h1>ଘ(੭ˊ꒳ˋ)੭ 收款页面</h1>
	</div>

	<div class="profile-card">
	<div class="avatar-wrapper">
	<div class="avatar">
	<!-- 自定义头像图片 -->
	<img src="avatar.jpg" alt="头像" onerror="this.style.display='none'; this.parentElement.innerHTML='👧';">
	</div>
	<span class="sparkle">✨</span>
	<span class="sparkle">✨</span>
	</div>
	<div class="profile-info">
	<h2>给小可爱的打赏</h2>
	<p>鱼习习(**怡)</p>
	</div>
	</div>

	<div class="amount-section">
	<div class="amount-display">
	<div class="amount-label">打赏金额</div>
	<div class="amount-value">¥<span id="totalAmount">1.00</span></div>
	</div>

	<div class="payment-items">
	<div class="payment-item active" data-amount="1.00" onclick="selectItem(this)">
	<span class="emoji">⊂(˃̶͈̀ε ˂̶͈́ ⊂ )</span>
	<div class="price">¥1.00</div>
	<span class="quantity">×1</span>
	</div>
	<div class="payment-item" data-amount="5.20" onclick="selectItem(this)">
	<span class="emoji">ฅ՞•ﻌ•՞ฅ</span>
	<div class="price">¥5.20</div>
	</div>
	<div class="payment-item" data-amount="6.66" onclick="selectItem(this)">
	<span class="emoji">૮₍ ˃ ⤙ ˂ ₎ა</span>
	<div class="price">¥6.66</div>
	</div>
	<div class="payment-item" data-amount="8.88" onclick="selectItem(this)">
	<span class="emoji">(´・(oo)・｀)</span>
	<div class="price">¥8.88</div>
	</div>
	<div class="payment-item" data-amount="13.14" onclick="selectItem(this)">
	<span class="emoji">((づ￣ ³￣)づ</span>
	<div class="price">¥13.14</div>
	</div>
	<div class="payment-item" data-amount="52.00" onclick="selectItem(this)">
	<span class="emoji">(｡･ω･｡)ﾉ♡</span>
	<div class="price">¥52.00</div>
	</div>
	</div>

	<div class="usage-tip">
	点击选择项目 \| 长按或右键减少数量
	</div>

	<div class="note-section">
	<div class="note-label">💌 留言</div>
	<input type="text" class="note-input" placeholder="写点什么暖心的话吧~ ♡">
	</div>

	<button class="pay-button" onclick="showPayment()">
	💙 确认打赏 💙
	</button>
	</div>
	</div>

	<!-- 支付模态框 -->
	<div class="modal" id="paymentModal">
	<div class="modal-content">
	<button class="close-button" onclick="closeModal()">×</button>
	<h3 class="modal-title">扫码支付 (｡･ω･｡)ﾉ♡</h3>
	<div class="qr-wrapper">
	<div class="qr-code-image">
	<!-- 微信赞赏码 -->
	<img src="wechat_pay.jpg" alt="赞赏码" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'180\' height=\'180\' viewBox=\'0 0 180 180\'%3E%3Crect width=\'180\' height=\'180\' fill=\'%23bbdefb\'/%3E%3Ctext x=\'90\' y=\'90\' text-anchor=\'middle\' dy=\'.3em\' font-size=\'13\' fill=\'%232196f3\'%3E请添加赞赏码%3C/text%3E%3C/svg%3E'">
	</div>
	</div>
	<div class="payment-amount-display">
	¥<span id="modalAmount">0.00</span>
	</div>
	<p class="payment-tips">
	请使用微信扫描上方二维码<br>
	完成支付 ~ 感谢您的支持<br>
	ଘ(੭ˊ꒳ˋ)੭
	</p>
	</div>
	</div>

	<script>
	let selectedItems = new Set();
	let itemQuantities = {};

	// 初始化第一个项目
	selectedItems.add('1.00');
	itemQuantities['1.00'] = 1;

	function selectItem(element) {
	const amount = element.dataset.amount;

	if (selectedItems.has(amount)) {
	// 已选中的项目，增加数量
	itemQuantities[amount] = (itemQuantities[amount] \|\| 1) + 1;

	// 更新数量显示
	const qtyElement = element.querySelector('.quantity');
	if (qtyElement) {
	qtyElement.textContent = `×${itemQuantities[amount]}`;
	}
	} else {
	// 新选中项目
	element.classList.add('active');
	selectedItems.add(amount);
	itemQuantities[amount] = 1;

	const span = document.createElement('span');
	span.className = 'quantity';
	span.textContent = '×1';
	element.appendChild(span);
	}

	updateTotalAmount();
	}

	// 添加长按或右键点击来减少数量的功能
	function handleRightClick(element, event) {
	event.preventDefault(); // 阻止默认的右键菜单
	const amount = element.dataset.amount;

	if (selectedItems.has(amount) && itemQuantities[amount] > 0) {
	if (itemQuantities[amount] === 1) {
	// 如果数量为1，取消选择
	element.classList.remove('active');
	selectedItems.delete(amount);
	delete itemQuantities[amount];

	// 移除数量标签
	const qtyElement = element.querySelector('.quantity');
	if (qtyElement) {
	qtyElement.remove();
	}
	} else {
	// 数量大于1，减少数量
	itemQuantities[amount]--;
	const qtyElement = element.querySelector('.quantity');
	if (qtyElement) {
	qtyElement.textContent = `×${itemQuantities[amount]}`;
	}
	}

	// 确保至少有一个项目被选中
	if (selectedItems.size === 0) {
	const firstItem = document.querySelector('.payment-item');
	firstItem.classList.add('active');
	const firstAmount = firstItem.dataset.amount;
	selectedItems.add(firstAmount);
	itemQuantities[firstAmount] = 1;

	const span = document.createElement('span');
	span.className = 'quantity';
	span.textContent = '×1';
	firstItem.appendChild(span);
	}

	updateTotalAmount();
	}
	}

	// 初始化事件监听
	document.addEventListener('DOMContentLoaded', function() {
	// 为所有付款项目添加右键点击事件
	document.querySelectorAll('.payment-item').forEach(item => {
	item.addEventListener('contextmenu', function(e) {
	handleRightClick(this, e);
	});

	// 添加长按事件（移动端）
	let pressTimer;
	item.addEventListener('touchstart', function(e) {
	pressTimer = setTimeout(() => {
	handleRightClick(this, e);
	// 添加触觉反馈（如果设备支持）
	if (navigator.vibrate) {
	navigator.vibrate(50);
	}
	}, 2000); // 2000毫秒（2秒）长按
	});

	item.addEventListener('touchend', function() {
	clearTimeout(pressTimer);
	});

	item.addEventListener('touchmove', function() {
	clearTimeout(pressTimer);
	});
	});
	});

	function updateTotalAmount() {
	let total = 0;
	selectedItems.forEach(amount => {
	total += parseFloat(amount) * (itemQuantities[amount] \|\| 1);
	});
	document.getElementById('totalAmount').textContent = total.toFixed(2);
	document.getElementById('modalAmount').textContent = total.toFixed(2);
	}

	function showPayment() {
	document.getElementById('paymentModal').style.display = 'flex';
	setTimeout(() => {
	document.querySelector('.modal-content').style.animation = 'modalFadeIn 0.4s ease-out';
	}, 10);
	}

	function closeModal() {
	const modal = document.getElementById('paymentModal');
	modal.style.display = 'none';
	}

	// 点击模态框背景关闭
	document.getElementById('paymentModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeModal();
	}
	});

	// 初始化总金额
	updateTotalAmount();

	// 添加交互效果
	document.querySelectorAll('.payment-item').forEach(item => {
	item.addEventListener('mouseenter', function() {
	this.querySelector('.emoji').style.transform = 'scale(1.1)';
	});
	item.addEventListener('mouseleave', function() {
	this.querySelector('.emoji').style.transform = 'scale(1)';
	});
	});
	</script>
	</body>
	</html>