نگران نباش! کدی که دادم یک «نمونه اولیه» (Prototype) بود و برای اجرا نیاز به نصب پایتون و کتابخانه‌های جانبی داره. اگر پایتون نداری، راحت‌ترین راه اینه که از HTML و JavaScript استفاده کنی که مستقیم توی مرورگر (مثل کروم) اجرا میشه و نیاز به نصب هیچ چیزی نداره.
این کد رو کپی کن و توی یک فایل متنی ذخیره کن و پسوندش رو بذار .html (مثلاً insta.html). بعد روش دابل کلیک کن تا باز بشه:
<!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>
<style>
body { font-family: sans-serif; background-color: #fafafa; margin: 0; padding: 0; }
.header { background: white; padding: 10px; border-bottom: 1px solid #dbdbdb; text-align: center; font-weight: bold; font-size: 20px; }
.container { max-width: 400px; margin: 0 auto; background: white; min-height: 100vh; }
.post { border-bottom: 1px solid #dbdbdb; padding: 10px; }
.user-info { display: flex; align-items: center; margin-bottom: 10px; }
.avatar { width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin-left: 10px; }
.username { font-weight: bold; }
.image-placeholder { width: 100%; height: 300px; background: #eee; display: flex; align-items: center; justify-content: center; color: #888; }
.actions { margin-top: 10px; }
.btn { background: #0095f6; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<div class="header">اینستاگرام من</div>
<div class="container">
<!-- پست اول -->
<div class="post">
<div class="user-info">
<div class="avatar"></div>
<span class="username">کاربر_۱</span>
</div>
<div class="image-placeholder">تصویر اینجا قرار می‌گیرد</div>
<div class="actions">
<button class="btn" onclick="likePost(this)">لایک ❤️</button>
</div>
</div>
<!-- پست دوم -->
<div class="post">
<div class="user-info">
<div class="avatar"></div>
<span class="username">کاربر_۲</span>
</div>
<div class="image-placeholder">تصویر اینجا قرار می‌گیرد</div>
<div class="actions">
<button class="btn" onclick="likePost(this)">لایک ❤️</button>
</div>
</div>
</div>
<script>
function likePost(btn) {
if (btn.innerText.includes('❤️')) {
btn.innerText = 'لایک شد 👍';
btn.style.backgroundColor = '#dbdbdb';
btn.style.color = '#000';
} else {
btn.innerText = 'لایک ❤️';
btn.style.backgroundColor = '#0095f6';
btn.style.color = 'white';
}
}
</script>
</body>
</html>چطور این رو اجرا کنی؟
- برنامه Notepad (در ویندوز) یا TextEdit (در مک) رو باز کن.
- کد بالا رو کامل کپی کن و اونجا پیست کن.
- فایل رو با نام
index.html ذخیره کن (مطمئن شو پسوندش .html باشه، نه .txt).
- روی فایل ذخیره شده دابل کلیک کن.
این یه ظاهر ساده‌ست. برای اینکه واقعاً کار کنه (عکس آپلود بشه، کاربر ثبت‌نام کنه و پول در بیاری)، باید یک سرور و دیتابیس هم داشته باشی که کار پیچیده‌تری هست. ولی این کد برای شروع و دیدن ظاهر کار عالیه! 😊
نگران نباش! کدی که دادم یک «نمونه اولیه» (Prototype) بود و برای اجرا نیاز به نصب پایتون و کتابخانه‌های جانبی داره. اگر پایتون نداری، راحت‌ترین راه اینه که از HTML و JavaScript استفاده کنی که مستقیم توی مرورگر (مثل کروم) اجرا میشه و نیاز به نصب هیچ چیزی نداره.
این کد رو کپی کن و توی یک فایل متنی ذخیره کن و پسوندش رو بذار
.html(مثلاًinsta.html). بعد روش دابل کلیک کن تا باز بشه:چطور این رو اجرا کنی؟
index.htmlذخیره کن (مطمئن شو پسوندش.htmlباشه، نه.txt).این یه ظاهر ساده‌ست. برای اینکه واقعاً کار کنه (عکس آپلود بشه، کاربر ثبت‌نام کنه و پول در بیاری)، باید یک سرور و دیتابیس هم داشته باشی که کار پیچیده‌تری هست. ولی این کد برای شروع و دیدن ظاهر کار عالیه! 😊