Hugging Face's logo

Spaces:
maomaobj
/
home6
Running

App Files Community
home6 / index.html
maomaobj's picture
maomaobj
去掉右侧滚动条 - Initial Deployment
bfd5da6 verified
Raw
History Blame Contribute Delete
15.7 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>服务预约 - 智能家居</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 'wechat-green': '#07C160',
 'gold': '#FFD700',
 'light-gold': '#FFF9C4'
 }
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
 font-family: 'Noto Sans SC', sans-serif;
 background-color: #f5f5f5;
 }
.card-shadow {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
.gold-gradient {
 background: linear-gradient(135deg, #FFD700, #FFA500);
 }
.star-rating {
 color: #FFD700;
 }
.custom-select {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 0.75rem center;
 background-size: 1.5rem;
 }
.date-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 0.5rem;
 }
.time-slot {
 transition: all 0.2s ease;
 }
.time-slot:hover, .time-slot.selected {
 background-color: #FFD700;
 color: #333;
 }
.pulse {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
 70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
 }
 </style>
</head>
<body class="bg-gray-100 pb-20 overflow-y-hidden">
 <!-- Header -->
 <header class="bg-white py-4 px-4 shadow-sm sticky top-0 z-10">
 <div class="container mx-auto flex items-center">
 <button class="text-gray-600 mr-4">
 <i class="fas fa-chevron-left text-lg"></i>
 </button>
 <h1 class="text-xl font-bold text-gray-800">服务预约</h1>
 <div class="ml-auto flex space-x-3">
 <button class="text-gray-600">
 <i class="fas fa-share-alt"></i>
 </button>
 <button class="text-gray-600">
 <i class="fas fa-ellipsis-h"></i>
 </button>
 </div>
 </div>
 </header>
<main class="container mx-auto px-4 mt-2">
 <!-- Service Card -->
 <div class="card-shadow bg-white rounded-xl overflow-hidden mb-6">
 <div class="flex p-5">
 <div class="flex-shrink-0 w-24 h-24 bg-gray-200 rounded-lg overflow-hidden">
 <img src="https://images.unsplash.com/photo-1611606063065-ee7946f0787a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80"
alt="空调清洗服务" class="w-full h-full object-cover">
 </div>
 <div class="ml-4 flex-1">
 <h2 class="font-bold text-lg text-gray-800">空调清洗服务</h2>
 <p class="text-gray-600 text-sm mt-1">深度清洁 + 滤网更换</p>
 <div class="mt-2 flex items-center">
 <span class="text-red-500 font-bold">￥198 起</span>
 <span class="ml-2 text-xs text-gray-500 line-through">￥298</span>
 <span class="ml-2 bg-red-100 text-red-600 text-xs px-2 py-1 rounded">限时优惠</span>
 </div>
 <div class="mt-3 flex items-center text-xs text-gray-500">
 <i class="fas fa-check-circle text-green-500 mr-1"></i>
 <span>已服务 1823 家庭</span>
 </div>
 </div>
 </div>
 </div>
<!-- Provider Card -->
 <div class="card-shadow bg-white rounded-xl overflow-hidden mb-6">
 <div class="p-5">
 <div class="flex items-center">
 <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
 <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80"
alt="北京优洁到家" class="w-full h-full object-cover">
 </div>
 <div class="ml-3">
 <h3 class="font-bold text-gray-800">北京优洁到家</h3>
 <div class="flex items-center mt-1">
 <div class="star-rating">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star-half-alt"></i>
 </div>
 <span class="text-sm text-gray-600 ml-1">4.8</span>
 </div>
 </div>
 <button class="ml-auto bg-wechat-green text-white px-4 py-2 rounded-full text-sm font-medium flex items-center">
 <i class="fas fa-comment-dots mr-1"></i> 联系服务商
 </button>
 </div>
<div class="mt-4 pt-4 border-t border-gray-100">
 <div class="flex text-sm text-gray-600">
 <div class="flex items-center mr-6">
 <i class="fas fa-tools text-gray-500 mr-2"></i>
 <span>服务次数: 1823</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i>
 <span>服务区域: 朝阳, 海淀, 昌平</span>
 </div>
 </div>
<div class="mt-3 bg-blue-50 rounded-lg p-3">
 <div class="flex items-center text-blue-800 text-sm">
 <i class="fas fa-info-circle mr-2"></i>
 <span>专业认证服务商 | 30天无忧售后 | 免费上门检查</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Appointment Form -->
 <div class="card-shadow bg-white rounded-xl overflow-hidden mb-6">
 <div class="p-5">
 <h3 class="font-bold text-lg text-gray-800 mb-4">预约信息</h3>
<!-- Device Selection -->
 <div class="mb-5">
 <label class="block text-gray-700 text-sm font-medium mb-2">选择设备</label>
 <div class="relative">
 <select class="custom-select w-full bg-white border border-gray-300 rounded-lg py-3 px-4 pr-10 text-gray-700 focus:outline-none focus:ring-2 focus:ring-gold">
 <option>空调1 (客厅)</option>
 <option>空调2 (主卧)</option>
 <option>空调3 (次卧)</option>
 <option>空调4 (书房)</option>
 </select>
 </div>
 </div>
<!-- Date Selection -->
 <div class="mb-5">
 <label class="block text-gray-700 text-sm font-medium mb-2">选择日期</label>
 <div class="date-grid">
 <div class="text-center py-2 rounded-lg bg-gray-100 text-gray-500">
 <div class="text-xs">今天</div>
 <div class="font-medium">15</div>
 </div>
 <div class="text-center py-2 rounded-lg bg-gray-100 text-gray-500">
 <div class="text-xs">周二</div>
 <div class="font-medium">16</div>
 </div>
 <div class="text-center py-2 rounded-lg bg-gray-100 text-gray-500">
 <div class="text-xs">周三</div>
 <div class="font-medium">17</div>
 </div>
 <div class="text-center py-2 rounded-lg bg-gray-100 text-gray-500">
 <div class="text-xs">周四</div>
 <div class="font-medium">18</div>
 </div>
 <div class="text-center py-2 rounded-lg bg-gray-100 text-gray-500">
 <div class="text-xs">周五</div>
 <div class="font-medium">19</div>
 </div>
 <div class="text-center py-2 rounded-lg bg-gray-100 text-gray-500">
 <div class="text-xs">周六</div>
 <div class="font-medium">20</div>
 </div>
 <div class="text-center py-2 rounded-lg bg-gray-100 text-gray-500">
 <div class="text-xs">周日</div>
 <div class="font-medium">21</div>
 </div>
 </div>
 </div>
<!-- Time Selection -->
 <div class="mb-5">
 <label class="block text-gray-700 text-sm font-medium mb-2">选择时间段</label>
 <div class="grid grid-cols-3 gap-3">
 <div class="time-slot text-center py-3 rounded-lg bg-gray-100 text-gray-700 cursor-pointer">
 上午<br>8:00-12:00
 </div>
 <div class="time-slot text-center py-3 rounded-lg bg-gray-100 text-gray-700 cursor-pointer">
 下午<br>12:00-18:00
 </div>
 <div class="time-slot text-center py-3 rounded-lg bg-gray-100 text-gray-700 cursor-pointer">
 晚上<br>18:00-22:00
 </div>
 </div>
 </div>
<!-- Address -->
 <div class="mb-5">
 <label class="block text-gray-700 text-sm font-medium mb-2">服务地址</label>
 <div class="relative">
 <input type="text"
class="w-full bg-white border border-gray-300 rounded-lg py-3 px-4 pr-10 text-gray-700 focus:outline-none focus:ring-2 focus:ring-gold"
placeholder="请输入详细地址"
 value="北京市朝阳区建国路88号现代城A座1203室">
 <button class="absolute right-3 top-3 text-gray-500">
 <i class="fas fa-map-marker-alt"></i>
 </button>
 </div>
 </div>
<!-- Notes -->
 <div class="mb-2">
 <label class="block text-gray-700 text-sm font-medium mb-2">备注信息 (可选)</label>
 <textarea class="w-full bg-white border border-gray-300 rounded-lg py-3 px-4 text-gray-700 focus:outline-none focus:ring-2 focus:ring-gold"
rows="3"
placeholder="请输入特殊要求或说明..."></textarea>
 </div>
 </div>
 </div>
<!-- Booking Button -->
 <div class="fixed bottom-0 left-0 right-0 bg-white p-4 border-t border-gray-200">
 <div class="container mx-auto px-4">
 <div class="flex items-center justify-between">
 <div>
 <div class="text-gray-600 text-sm">预估费用</div>
 <div class="text-red-500 font-bold text-lg">￥198</div>
 </div>
 <button class="gold-gradient text-white font-bold py-3 px-8 rounded-full text-lg shadow-lg hover:opacity-90 transition-all pulse">
 确认预约
 </button>
 </div>
 </div>
 </div>
 </main>
<script>
 // Time slot selection
 document.querySelectorAll('.time-slot').forEach(slot => {
 slot.addEventListener('click', function() {
 // Remove selected class from all slots
 document.querySelectorAll('.time-slot').forEach(s => {
 s.classList.remove('selected', 'bg-gold', 'text-gray-800');
 s.classList.add('bg-gray-100');
 });
// Add selected class to clicked slot
 this.classList.add('selected', 'bg-gold', 'text-gray-800');
 this.classList.remove('bg-gray-100');
 });
 });
// Date selection
 document.querySelectorAll('.date-grid > div').forEach(date => {
 date.addEventListener('click', function() {
 // Remove selected class from all dates
 document.querySelectorAll('.date-grid > div').forEach(d => {
 d.classList.remove('bg-gold', 'text-gray-800');
 d.classList.add('bg-gray-100');
 });
// Add selected class to clicked date
 this.classList.add('bg-gold', 'text-gray-800');
 this.classList.remove('bg-gray-100');
 });
 });
// Initialize with today selected
 document.querySelector('.date-grid > div:first-child').classList.add('bg-gold', 'text-gray-800');
 document.querySelector('.date-grid > div:first-child').classList.remove('bg-gray-100');
// Initialize with morning selected
 document.querySelector('.time-slot:first-child').classList.add('selected', 'bg-gold', 'text-gray-800');
 document.querySelector('.time-slot:first-child').classList.remove('bg-gray-100');
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/home6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>