Hugging Face's logo

Spaces:
pixip2015
/
co123
Running

App Files Community
co123 / index.html
pixip2015's picture
pixip2015
لطفا نام کامپیوتر یک دو سه را در جاهای مختلف بیار تا مشخص شود این وب سایت اختصاصی متعلق به مجتمع کامپیوتر یک دو سه است. ولطفا نام مشتری را در ابتدا بپرس و تا در پایان یک کلید برای چاپ مشاوره ایجاد کن و نا یک سربرگ اختصاصی برای یک دو سه طراحی کن و موارد لازم و مورد نیاز به عنوان توضیحات جهت جذب مشتری به صفحه اضافه کن . طراحی برای کاغذ آ۴ باشد و لطفا تاریخ روز را باروز هفته در و ساعت فعلی سیستم را درج کن تاریخ به هجری شمسی باشد و در زیر صفحه آدرس را بنویس - کرمان - خیابان شهید بهشتی - نبش کوچه شماره ۹ - مجتمع کامپیوتر یک دو سه - تلفن تماس - ۰۳۴۳ ۲۴۷۷۱۲۳ و ۰۹۱۳۵۰۳۳۱۲۳ لطفا دقت کن رنگ یک دو سه را در تلفنها با رنگ متفاوت بنویس و ادرس وب سایت مجموعه. : www.computer123.ir است و لینک لوگو https://zi2.ir/view.php?id=HF7X است - Initial Deployment
1ec5f2e verified
raw
history blame contribute delete
49.3 kB
 <!DOCTYPE html>
<html lang="fa" dir="rtl">
<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://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Vazirmatn', sans-serif;
background-color: #f5f7fa;
}
.gradient-bg {
background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.progress-bar {
height: 6px;
background-color: #e0e0e0;
border-radius: 3px;
}
.progress-fill {
height: 100%;
background-color: #4f46e5;
border-radius: 3px;
transition: width 0.3s ease;
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.selection-card {
transition: all 0.3s ease;
border: 2px solid transparent;
}
.selection-card:hover {
border-color: #4f46e5;
}
.selection-card.selected {
border-color: #4f46e5;
background-color: #eef2ff;
}
.recommendation-card {
transition: all 0.3s ease;
}
.recommendation-card:hover {
transform: scale(1.02);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="min-h-screen">
<!-- هدر -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<div class="bg-white rounded-full p-2 mr-3">
<img src="https://zi2.ir/view.php?id=HF7X" alt="Computer123 Logo" class="h-8 w-8">
</div>
<h1 class="text-2xl md:text-3xl font-bold">مشاوره هوشمند خرید کامپیوتر <span class="text-blue-600">یک دو سه</span></h1>
</div>
<div class="flex items-center space-x-4 space-x-reverse">
<a href="#" class="hover:text-blue-200 transition">صفحه اصلی</a>
<a href="#" class="hover:text-blue-200 transition">درباره ما</a>
<a href="#" class="hover:text-blue-200 transition">تماس با ما</a>
</div>
</div>
</div>
</header>
<!-- محتوای اصلی -->
<main class="container mx-auto px-4 py-8">
<!-- بخش معرفی -->
<section class="mb-12 text-center">
<h2 class="text-3xl font-bold text-gray-800 mb-4">مشاوره تخصصی خرید کامپیوتر دسکتاپ</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
با پاسخ دادن به چند سوال ساده، سیستم‌های کامپیوتری مناسب با نیازهای شما را معرفی می‌کنیم. ما با توجه به بودجه، نوع استفاده و نیازهای خاص شما، بهترین گزینه‌ها را پیشنهاد خواهیم داد.
</p>
</section>
<!-- فرم مشاوره -->
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
<!-- مرحله 0: نام مشتری -->
<div id="step-0" class="step fade-in">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-4">لطفاً نام خود را وارد نمایید</h3>
<input type="text" id="customer-name" class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="نام و نام خانوادگی">
<div class="mt-8 flex justify-end">
<button class="next-btn px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">مرحله بعد</button>
</div>
</div>
</div>
<!-- نوار پیشرفت -->
<div class="px-6 pt-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium text-gray-600">پیشرفت</span>
<span class="text-sm font-medium text-gray-600" id="progress-text">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill" style="width: 0%"></div>
</div>
</div>
<!-- مراحل فرم -->
<div class="p-6">
<!-- مرحله 1: بودجه -->
<div id="step-1" class="step fade-in">
<h3 class="text-xl font-semibold text-gray-800 mb-4">بودجه شما برای خرید کامپیوتر چقدر است؟</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="5-10">
<div class="flex flex-col items-center">
<span class="text-lg font-medium">۵ - ۱۰ میلیون تومان</span>
<span class="text-sm text-gray-500 mt-1">سیستم‌های پایه‌ای</span>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="10-20">
<div class="flex flex-col items-center">
<span class="text-lg font-medium">۱۰ - ۲۰ میلیون تومان</span>
<span class="text-sm text-gray-500 mt-1">سیستم‌های میان‌رده</span>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="20+">
<div class="flex flex-col items-center">
<span class="text-lg font-medium">بالای ۲۰ میلیون تومان</span>
<span class="text-sm text-gray-500 mt-1">سیستم‌های حرفه‌ای</span>
</div>
</div>
</div>
<div class="mt-8 flex justify-end">
<button class="next-btn px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">مرحله بعد</button>
</div>
</div>
<!-- مرحله 2: نوع استفاده -->
<div id="step-2" class="step hidden">
<h3 class="text-xl font-semibold text-gray-800 mb-4">هدف اصلی شما از خرید کامپیوتر چیست؟</h3>
<p class="text-gray-600 mb-6">می‌توانید چند گزینه را انتخاب کنید</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="gaming">
<div class="flex items-center">
<div class="p-2 bg-blue-100 rounded-full mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
</svg>
</div>
<div>
<h4 class="font-medium">بازی‌های کامپیوتری</h4>
<p class="text-sm text-gray-500">برای اجرای بازی‌های جدید و سنگین</p>
</div>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="design">
<div class="flex items-center">
<div class="p-2 bg-purple-100 rounded-full mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
</div>
<div>
<h4 class="font-medium">طراحی و گرافیک</h4>
<p class="text-sm text-gray-500">فتوشاپ، ایلاستریتور، طراحی سه‌بعدی</p>
</div>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="engineering">
<div class="flex items-center">
<div class="p-2 bg-green-100 rounded-full mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<div>
<h4 class="font-medium">مهندسی و نقشه‌کشی</h4>
<p class="text-sm text-gray-500">اتوکد، سالیدورک، رویت</p>
</div>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="programming">
<div class="flex items-center">
<div class="p-2 bg-yellow-100 rounded-full mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<div>
<h4 class="font-medium">برنامه‌نویسی</h4>
<p class="text-sm text-gray-500">توسعه نرم‌افزار، هوش مصنوعی، دیتاساینس</p>
</div>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="office">
<div class="flex items-center">
<div class="p-2 bg-red-100 rounded-full mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<div>
<h4 class="font-medium">اداری و کارهای روزمره</h4>
<p class="text-sm text-gray-500">ورد، اکسل، اینترنت، تماشای فیلم</p>
</div>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="education">
<div class="flex items-center">
<div class="p-2 bg-indigo-100 rounded-full mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</div>
<div>
<h4 class="font-medium">آموزشی</h4>
<p class="text-sm text-gray-500">تحصیل، آموزش آنلاین، پژوهش</p>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">مرحله قبل</button>
<button class="next-btn px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">مرحله بعد</button>
</div>
</div>
<!-- مرحله 3: نیازهای خاص -->
<div id="step-3" class="step hidden">
<h3 class="text-xl font-semibold text-gray-800 mb-4">آیا نیاز خاصی دارید که باید در نظر گرفته شود؟</h3>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="need-1" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="need-1" class="mr-2 text-gray-700">نیاز به پردازش موازی و رندرینگ سریع</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="need-2" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="need-2" class="mr-2 text-gray-700">حجم زیاد ذخیره‌سازی اطلاعات</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="need-3" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="need-3" class="mr-2 text-gray-700">پشتیبانی از چند مانیتور</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="need-4" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="need-4" class="mr-2 text-gray-700">سکوت سیستم در حین کار</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="need-5" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="need-5" class="mr-2 text-gray-700">قابلیت ارتقا در آینده</label>
</div>
</div>
<div class="mt-8 flex justify-between">
<button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">مرحله قبل</button>
<button class="next-btn px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">مرحله بعد</button>
</div>
</div>
<!-- مرحله 4: ظاهر و طراحی -->
<div id="step-4" class="step hidden">
<h3 class="text-xl font-semibold text-gray-800 mb-4">ترجیح شما در مورد ظاهر و طراحی کیس چیست؟</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="simple">
<div class="flex flex-col items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
</svg>
<span class="mt-2 font-medium">ساده و مینیمال</span>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="gaming">
<div class="flex flex-col items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span class="mt-2 font-medium">گیمینگ و RGB</span>
</div>
</div>
<div class="selection-card p-4 border rounded-lg cursor-pointer" data-value="compact">
<div class="flex flex-col items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
<span class="mt-2 font-medium">کوچک و جمع‌وجور</span>
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">مرحله قبل</button>
<button class="next-btn px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">مرحله بعد</button>
</div>
</div>
<!-- مرحله 5: برندهای مورد علاقه -->
<div id="step-5" class="step hidden">
<h3 class="text-xl font-semibold text-gray-800 mb-4">آیا برند خاصی مد نظر دارید؟ (اختیاری)</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="flex items-center">
<input type="checkbox" id="brand-1" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-1" class="mr-2">ایسوس</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="brand-2" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-2" class="mr-2">ام‌اس‌آی</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="brand-3" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-3" class="mr-2">گیگابایت</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="brand-4" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-4" class="mr-2">اینتل</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="brand-5" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-5" class="mr-2">AMD</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="brand-6" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-6" class="mr-2">انویدیا</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="brand-7" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-7" class="mr-2">کورسیر</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="brand-8" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="brand-8" class="mr-2">دیگر</label>
</div>
</div>
<div class="mt-8 flex justify-between">
<button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">مرحله قبل</button>
<button id="submit-btn" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">دریافت پیشنهادات</button>
</div>
</div>
</div>
</div>
<!-- نتایج پیشنهادی -->
<div id="results" class="hidden max-w-6xl mx-auto mt-12">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-2">پیشنهادات ویژه برای شما</h2>
<p class="text-gray-600">بر اساس پاسخ‌های شما، این سیستم‌ها می‌توانند گزینه‌های مناسبی باشند</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- پیشنهاد 1 -->
<div class="recommendation-card bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 bg-blue-100">
<div class="flex justify-between items-center">
<span class="font-bold text-blue-800">پیشنهاد اقتصادی</span>
<span class="bg-blue-600 text-white px-2 py-1 rounded text-sm">بهترین ارزش</span>
</div>
</div>
<div class="p-6">
<div class="flex justify-center mb-4">
<img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="PC" class="h-40 object-contain">
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">سیستم میان‌رده ایسوس</h3>
<div class="space-y-3 mb-4">
<div class="flex justify-between">
<span class="text-gray-600">پردازنده:</span>
<span class="font-medium">Intel Core i5-12400F</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">کارت گرافیک:</span>
<span class="font-medium">NVIDIA GTX 1660 Super</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">رم:</span>
<span class="font-medium">16GB DDR4</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">ذخیره‌سازی:</span>
<span class="font-medium">512GB SSD + 1TB HDD</span>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<span class="text-2xl font-bold text-gray-800">۱۸,۵۰۰,۰۰۰ تومان</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">جزئیات بیشتر</button>
</div>
</div>
</div>
<!-- پیشنهاد 2 -->
<div class="recommendation-card bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 bg-purple-100">
<div class="flex justify-between items-center">
<span class="font-bold text-purple-800">پیشنهاد حرفه‌ای</span>
<span class="bg-purple-600 text-white px-2 py-1 rounded text-sm">محبوب کاربران</span>
</div>
</div>
<div class="p-6">
<div class="flex justify-center mb-4">
<img src="https://images.unsplash.com/photo-1587202372775-e2293e9a1a1f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="PC" class="h-40 object-contain">
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">سیستم گیمینگ ام‌اس‌آی</h3>
<div class="space-y-3 mb-4">
<div class="flex justify-between">
<span class="text-gray-600">پردازنده:</span>
<span class="font-medium">AMD Ryzen 7 5800X</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">کارت گرافیک:</span>
<span class="font-medium">NVIDIA RTX 3060 Ti</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">رم:</span>
<span class="font-medium">32GB DDR4</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">ذخیره‌سازی:</span>
<span class="font-medium">1TB NVMe SSD</span>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<span class="text-2xl font-bold text-gray-800">۲۷,۹۰۰,۰۰۰ تومان</span>
<button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">جزئیات بیشتر</button>
</div>
</div>
</div>
<!-- پیشنهاد 3 -->
<div class="recommendation-card bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 bg-green-100">
<div class="flex justify-between items-center">
<span class="font-bold text-green-800">پیشنهاد ویژه</span>
<span class="bg-green-600 text-white px-2 py-1 rounded text-sm">پرفورمنس بالا</span>
</div>
</div>
<div class="p-6">
<div class="flex justify-center mb-4">
<img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="PC" class="h-40 object-contain">
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">سیستم حرفه‌ای گیگابایت</h3>
<div class="space-y-3 mb-4">
<div class="flex justify-between">
<span class="text-gray-600">پردازنده:</span>
<span class="font-medium">Intel Core i9-12900K</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">کارت گرافیک:</span>
<span class="font-medium">NVIDIA RTX 3080</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">رم:</span>
<span class="font-medium">32GB DDR5</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">ذخیره‌سازی:</span>
<span class="font-medium">2TB NVMe SSD</span>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<span class="text-2xl font-bold text-gray-800">۴۲,۵۰۰,۰۰۰ تومان</span>
<button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">جزئیات بیشتر</button>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center space-x-4">
<button id="restart-btn" class="px-6 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition">شروع مجدد مشاوره</button>
<button id="print-btn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">چاپ مشاوره</button>
</div>
</div>
</main>
<!-- بخش چاپ -->
<div id="print-template" class="hidden">
<div class="p-8 max-w-4xl mx-auto">
<div class="text-center mb-8">
<img src="https://zi2.ir/view.php?id=HF7X" alt="Computer123 Logo" class="h-20 mx-auto mb-4">
<h1 class="text-3xl font-bold">مجتمع کامپیوتر <span class="text-blue-600">یک دو سه</span></h1>
<p class="text-lg mt-2">مشاوره تخصصی خرید کامپیوتر دسکتاپ</p>
<div class="border-t-2 border-b-2 border-gray-300 py-2 my-4">
<p id="print-date" class="text-sm"></p>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-2">مشخصات مشتری:</h2>
<p id="print-customer-name" class="text-lg"></p>
</div>
<div id="print-recommendations" class="space-y-8"></div>
<div class="mt-12 pt-4 border-t border-gray-300">
<p class="text-sm text-center">
<span class="font-bold">آدرس:</span> کرمان - خیابان شهید بهشتی - نبش کوچه شماره ۹ - مجتمع کامپیوتر یک دو سه<br>
<span class="font-bold">تلفن:</span> <span class="text-blue-600">۰۳۴۳ ۲۴۷۷۱۲۳</span> - <span class="text-green-600">۰۹۱۳۵۰۳۳۱۲۳</span><br>
<span class="font-bold">وب سایت:</span> <a href="http://www.computer123.ir" class="text-blue-600">www.computer123.ir</a>
</p>
<p class="text-xs text-center mt-4 text-gray-500">
این مشاوره توسط سیستم هوشمند مجتمع کامپیوتر یک دو سه تهیه شده است
</p>
</div>
</div>
</div>
<!-- فوتر -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">درباره ما</h3>
<p class="text-gray-400">
<span class="font-bold text-white">مجتمع کامپیوتر یک دو سه</span><br>
با بیش از ۱۵ سال سابقه در زمینه فروش و مشاوره سیستم‌های کامپیوتری، آماده ارائه بهترین پیشنهادات با گارانتی معتبر و قیمت رقابتی می‌باشد.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">لینک‌های مفید</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">مقایسه سیستم‌ها</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">راهنمای خرید</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">وبلاگ تخصصی</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">سوالات متداول</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">تماس با ما</h3>
<ul class="space-y-2">
<li class="flex items-center text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<span class="text-blue-400">۰۳۴۳ ۲۴۷۷۱۲۳</span> - <span class="text-green-400">۰۹۱۳۵۰۳۳۱۲۳</span>
</li>
<li class="flex items-center text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
info@pcadvisor.ir
</li>
<li class="flex items-center text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
کرمان، خیابان شهید بهشتی، نبش کوچه شماره ۹، مجتمع کامپیوتر یک دو سه
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">شبکه‌های اجتماعی</h3>
<div class="flex space-x-4 space-x-reverse">
<a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-blue-600 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
</svg>
</a>
<a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-blue-400 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</a>
<a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-red-500 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
</svg>
</a>
<a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-blue-300 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
<p>© ۱۴۰۲ تمام حقوق برای مشاوره هوشمند خرید کامپیوتر محفوظ است.</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// متغیرهای فرم
const steps = document.querySelectorAll('.step');
const nextButtons = document.querySelectorAll('.next-btn');
const prevButtons = document.querySelectorAll('.prev-btn');
const submitButton = document.getElementById('submit-btn');
const restartButton = document.getElementById('restart-btn');
const resultsSection = document.getElementById('results');
const progressFill = document.getElementById('progress-fill');
const progressText = document.getElementById('progress-text');
const selectionCards = document.querySelectorAll('.selection-card');
let currentStep = 0;
const totalSteps = steps.length;
// انتخاب کارت‌ها
selectionCards.forEach(card => {
card.addEventListener('click', function() {
// حذف انتخاب از همه کارت‌های هم‌گروه
const parent = this.parentElement;
const siblings = Array.from(parent.children).filter(child => child !== this);
siblings.forEach(sibling => {
sibling.classList.remove('selected');
sibling.classList.remove('bg-blue-50');
});
// انتخاب کارت فعلی
this.classList.add('selected');
this.classList.add('bg-blue-50');
});
});
// دکمه بعدی
nextButtons.forEach(button => {
button.addEventListener('click', function() {
if (currentStep < totalSteps - 1) {
steps[currentStep].classList.add('hidden');
currentStep++;
steps[currentStep].classList.remove('hidden');
updateProgress();
}
});
});
// دکمه قبلی
prevButtons.forEach(button => {
button.addEventListener('click', function() {
if (currentStep > 0) {
steps[currentStep].classList.add('hidden');
currentStep--;
steps[currentStep].classList.remove('hidden');
updateProgress();
}
});
});
// ارسال فرم
submitButton.addEventListener('click', function() {
steps[currentStep].classList.add('hidden');
resultsSection.classList.remove('hidden');
progressFill.style.width = '100%';
progressText.textContent = '100%';
// اسکرول به نتایج
resultsSection.scrollIntoView({ behavior: 'smooth' });
});
// چاپ مشاوره
document.getElementById('print-btn').addEventListener('click', function() {
const printTemplate = document.getElementById('print-template');
const printDate = document.getElementById('print-date');
const printCustomer = document.getElementById('print-customer-name');
const printRecs = document.getElementById('print-recommendations');
// Set current Persian date
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const today = new Date().toLocaleDateString('fa-IR', options);
const time = new Date().toLocaleTimeString('fa-IR');
printDate.textContent = `تاریخ: ${today} - ساعت: ${time}`;
// Set customer name
const customerName = document.getElementById('customer-name').value || 'مشتری محترم';
printCustomer.textContent = `نام: ${customerName}`;
// Copy recommendations
const recommendations = document.querySelectorAll('.recommendation-card');
recommendations.forEach(rec => {
const clone = rec.cloneNode(true);
clone.querySelectorAll('button').forEach(btn => btn.remove());
printRecs.appendChild(clone);
});
// Show print template
printTemplate.classList.remove('hidden');
// Print and then hide
setTimeout(() => {
window.print();
printTemplate.classList.add('hidden');
}, 500);
});
// شروع مجدد
restartButton.addEventListener('click', function() {
resultsSection.classList.add('hidden');
currentStep = 0;
steps.forEach((step, index) => {
if (index === 0) {
step.classList.remove('hidden');
} else {
step.classList.add('hidden');
}
});
// ریست انتخاب‌ها
selectionCards.forEach(card => {
card.classList.remove('selected');
card.classList.remove('bg-blue-50');
});
updateProgress();
// اسکرول به بالا
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// به‌روزرسانی نوار پیشرفت
function updateProgress() {
const progress = ((currentStep + 1) / totalSteps) * 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
}
// مقداردهی اولیه پیشرفت
updateProgress();
});
</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=pixip2015/co123" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>