Untitled drop (fork)

Published Oct 27, 2026
<!DOCTYPE html><html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEXORA | دنیای تو</title><style>
:root {
    --bg: #100817;
    --panel: #1d1028;
    --purple: #a855f7;
    --red: #ff3158;
    --text: #ffffff;
    --muted: #c5b6d2;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at top right, #7c174544, transparent 40%),
        radial-gradient(ellipse at bottom left, #7c2be344, transparent 40%);
}

button, input, textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

header {
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #ffffff15;
    background: #100817dd;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(15px);
}

.logo {
    font-size: 23px;
    font-weight: bold;
    background: linear-gradient(90deg, var(--red), var(--purple));
    color: transparent;
    background-clip: text;
}

.user-badge {
    color: var(--muted);
    font-size: 12px;
}

.layout {
    display: flex;
    max-width: 1200px;
    margin: auto;
}

aside {
    width: 205px;
    padding: 20px 12px;
    border-left: 1px solid #ffffff12;
    flex-shrink: 0;
}

.nav-btn {
    width: 100%;
    text-align: right;
    padding: 14px 12px;
    margin-bottom: 8px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 14px;
    transition: .2s;
}

.nav-btn:hover, .nav-btn.active {
    color: white;
    background: linear-gradient(110deg, #a855f733, #ff315822);
    border-color: #b74cff66;
    transform: translateX(-3px);
}

main {
    min-width: 0;
    flex: 1;
    padding: 25px 20px 50px;
}

.page {
    display: none;
    animation: appear .3s ease;
}

.page.active {
    display: block;
}

@keyframes appear {
    from {opacity: 0; transform: translateY(8px);}
    to {opacity: 1; transform: translateY(0);}
}

.hero {
    padding: 30px 22px;
    border: 1px solid #ffffff1c;
    border-radius: 22px;
    background: linear-gradient(135deg, #7c2be333, #ff315822);
    box-shadow: 0 10px 50px #00000025;
}

.hero h1 {
    font-size: clamp(25px, 5vw, 38px);
    line-height: 1.6;
    margin: 8px 0;
}

.gradient-text {
    background: linear-gradient(90deg, #ff5377, #c084fc);
    color: transparent;
    background-clip: text;
}

p {
    line-height: 2;
    color: var(--muted);
}

.primary, .secondary, .danger {
    border: 0;
    border-radius: 12px;
    padding: 12px 17px;
    color: white;
    font-size: 14px;
    transition: .2s;
}

.primary {
    background: linear-gradient(110deg, #8b35e8, #ff3158);
    box-shadow: 0 5px 25px #b82ce833;
}

.secondary {
    background: #ffffff12;
    border: 1px solid #ffffff20;
}

.danger {
    background: #ff315833;
    border: 1px solid #ff315866;
}

.primary:hover, .secondary:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 13px;
    margin-top: 20px;
}

.card {
    background: var(--panel);
    border: 1px solid #ffffff14;
    border-radius: 17px;
    padding: 19px 15px;
    transition: .2s;
}

.card:hover {
    border-color: #b74cff88;
    transform: translateY(-3px);
}

.card .icon {
    font-size: 28px;
}

.card h3 {
    font-size: 15px;
    margin: 12px 0 5px;
}

.card p {
    font-size: 12px;
    margin: 5px 0 14px;
}

h2 {
    font-size: 23px;
}

input, textarea {
    width: 100%;
    background: #0d0713;
    color: white;
    border: 1px solid #ffffff25;
    border-radius: 12px;
    padding: 14px;
    margin: 8px 0 14px;
    font-size: 15px;
    outline: none;
}

input:focus, textarea:focus {
    border-color: var(--purple);
}

.chat-box {
    background: #0d0713;
    border: 1px solid #ffffff15;
    border-radius: 16px;
    padding: 14px;
    min-height: 220px;
    max-height: 380px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.message {
    padding: 12px;
    margin: 8px 0;
    border-radius: 12px;
    line-height: 1.9;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.bot {
    background: #a855f722;
    border: 1px solid #a855f733;
}

.me {
    background: #ff31581c;
    border: 1px solid #ff315833;
}

.row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.row input {
    min-width: 0;
}

.row button {
    flex-shrink: 0;
    align-self: center;
}

.small {
    font-size: 11px;
    color: var(--muted);
}

.color-choice {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 6px;
    border: 2px solid white;
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 11px;
    color: #9c8aa9;
}

@media(max-width: 650px) {
    .layout {
        display: block;
    }

    aside {
        width: 100%;
        display: flex;
        overflow-x: auto;
        padding: 10px;
        border-left: 0;
        border-bottom: 1px solid #ffffff12;
        gap: 7px;
    }

    .nav-btn {
        width: auto;
        min-width: max-content;
        margin: 0;
        text-align: center;
        padding: 11px 13px;
    }

    main {
        padding: 17px 13px 35px;
    }

    header {
        padding: 14px;
    }

    .logo {
        font-size: 19px;
    }
}
</style></head><body><header>
    <div class="logo">✦ NEXORA</div>
    <div class="user-badge" id="headerUser">دنیای تو، قوانین تو ✨</div>
</header><div class="layout"><aside>
    <button class="nav-btn active" data-page="home">🏠 خانه</button>
    <button class="nav-btn" data-page="chat">🤖 گفت‌وگو</button>
    <button class="nav-btn" data-page="challenges">🎯 چالش‌ها</button>
    <button class="nav-btn" data-page="fun">🎮 سرگرمی</button>
    <button class="nav-btn" data-page="profile">👤 پروفایل</button>
    <button class="nav-btn" data-page="themes">🎨 تعویض رنگ</button>
</aside><main><section class="page active" id="home">
    <div class="hero">
        <p>✦ دنیای اختصاصی تو</p>
        <h1>سلام <span class="gradient-text" id="welcomeName">ماجراجو</span>! 👋</h1>
        <h2>به دنیای بی‌نهایتت خوش اومدی.</h2>
        <p>اینجا می‌تونی بازی کنی، چالش انجام بدی، حرف بزنی و لحظه‌های متفاوتی بسازی.</p>
        <button class="primary" onclick="showPage('chat')">🚀 شروع گفت‌وگو</button>
        <button class="secondary" onclick="showPage('challenges')">🔥 چالش امروز</button>
    </div><h2 style="margin-top:30px">✨ دنیای تو در یک نگاه</h2>
<div class="grid">
    <div class="card" onclick="showPage('chat')">
        <div class="icon">🤖</div>
        <h3>دستیار هوشمند</h3>
        <p>گفت‌وگو با دستیار ساده سایت</p>
        <button class="secondary">ورود ←</button>
    </div>
    <div class="card" onclick="showPage('challenges')">
        <div class="icon">🎯</div>
        <h3>چالش‌های جذاب</h3>
        <p>خودت رو به چالش بکش</p>
        <button class="secondary">بزن بریم ←</button>
    </div>
    <div class="card" onclick="showPage('fun')">
        <div class="icon">🎲</div>
        <h3>اتاق سرگرمی</h3>
        <p>بازی و پیشنهادهای تصادفی</p>
        <button class="secondary">بازی کن ←</button>
    </div>
    <div class="card" onclick="showPage('profile')">
        <div class="icon">👤</div>
        <h3>پروفایل من</h3>
        <p>تنظیم اسم و مشخصات نمایشی</p>
        <button class="secondary">مشاهده ←</button>
    </div>
</div>

</section><section class="page" id="chat">
    <h2>🤖 گفت‌وگوی دوستانه</h2>
    <p>هر چی دوست داری بنویس؛ این نسخه پاسخ‌های ساده و ازپیش‌تعریف‌شده داره.</p>
    <div class="chat-box" id="chatBox">
        <div class="message bot">سلام! ✨ من دستیار ساده NEXORA هستم. می‌تونیم گپ بزنیم یا یک بازی انتخاب کنیم!</div>
    </div>
    <form id="chatForm">
        <div class="row">
            <input id="chatInput" maxlength="500" placeholder="پیامت رو بنویس..." autocomplete="off" required>
            <button class="primary" type="submit">ارسال ↗</button>
        </div>
    </form>
    <p class="small">توجه: برای پاسخ‌گویی واقعی و هوشمند به هر موضوع، باید بعداً سرویس هوش مصنوعی متصل شود.</p>
</section><section class="page" id="challenges">
    <h2>🎯 اتاق چالش‌ها</h2>
    <p>یکی از کارت‌ها رو انتخاب کن و یک چالش سرگرم‌کننده بگیر!</p>
    <div class="grid">
        <div class="card">
            <div class="icon">🧠</div>
            <h3>چالش فکری</h3>
            <p>ذهنت رو به کار بنداز.</p>
            <button class="primary" onclick="challenge('brain')">شروع</button>
        </div>
        <div class="card">
            <div class="icon">😂</div>
            <h3>چالش خنده</h3>
            <p>یکم حال‌وهوات رو عوض کن.</p>
            <button class="primary" onclick="challenge('fun')">شروع</button>
        </div>
        <div class="card">
            <div class="icon">💬</div>
            <h3>چالش گفت‌وگو</h3>
            <p>به یک سؤال جالب جواب بده.</p>
            <button class="primary" onclick="challenge('talk')">شروع</button>
        </div>
    </div>
    <div class="card" style="margin-top:20px">
        <h3>🎲 چالش تو:</h3>
        <p id="challengeText">هنوز چالشی انتخاب نکردی!</p>
        <button class="secondary" onclick="nextChallenge()">چالش تصادفی</button>
    </div>
</section><section class="page" id="fun">
    <h2>🎮 اتاق سرگرمی</h2>
    <div class="card">
        <div class="icon">🎲</div>
        <h3>عدد شانسی</h3>
        <p>یک عدد بین ۱ تا ۱۰۰ برات انتخاب می‌کنم.</p>
        <button class="primary" onclick="randomNumber()">انتخاب عدد</button>
        <h2 id="randomResult" class="gradient-text"></h2>
    </div>
    <div class="card" style="margin-top:15px">
        <div class="icon">🔮</div>
        <h3>جمله امروز</h3>
        <p id="quoteText">برای دیدن یک جمله تصادفی دکمه رو بزن!</p>
        <button class="secondary" onclick="randomQuote()">یه جمله بهم بده ✨</button>
    </div>
    <div class="card" style="margin-top:15px">
        <div class="icon">🪨</div>
        <h3>سنگ، کاغذ، قیچی</h3>
        <p id="rpsResult">یک گزینه انتخاب کن!</p>
        <button class="secondary" onclick="playRPS('سنگ')">🪨 سنگ</button>
        <button class="secondary" onclick="playRPS('کاغذ')">📄 کاغذ</button>
        <button class="secondary" onclick="playRPS('قیچی')">✂️ قیچی</button>
    </div>
</section><section class="page" id="profile">
    <h2>👤 پروفایل من</h2>
    <div class="card">
        <p>اسمت رو وارد کن تا در مراجعات بعدی روی همین مرورگر نمایش داده بشه.</p>
        <label for="nameInput">اسم نمایشی تو</label>
        <input id="nameInput" maxlength="30" placeholder="مثلاً آراد">
        <button class="primary" onclick="saveName()">💾 ذخیره اسم</button>
        <p id="profileStatus"></p>
        <p class="small">اسم فقط در حافظه همین مرورگر ذخیره می‌شه؛ این قابلیت حساب کاربری آنلاین نیست.</p>
    </div>
</section><section class="page" id="themes">
    <h2>🎨 دنیای رنگ‌ها</h2>
    <p>تم موردعلاقه‌ات رو انتخاب کن.</p>
    <div class="card">
        <button class="color-choice" style="background:linear-gradient(135deg,#a855f7,#ff3158)" aria-label="بنفش و قرمز" onclick="setTheme('purple')"></button>
        <button class="color-choice" style="background:linear-gradient(135deg,#168cff,#15d6c5)" aria-label="آبی و فیروزه‌ای" onclick="setTheme('blue')"></button>
        <button class="color-choice" style="background:linear-gradient(135deg,#ff70b7,#ffb347)" aria-label="صورتی و نارنجی" onclick="setTheme('pink')"></button>
        <button class="color-choice" style="background:linear-gradient(135deg,#36d399,#a3e635)" aria-label="سبز" onclick="setTheme('green')"></button>
        <p id="themeStatus">تم بنفش و قرمز فعاله 💜❤️</p>
    </div>
</section></main>
</div><footer>NEXORA ✦ ساخته‌شده برای لحظه‌های متفاوت تو</footer><script>
const $ = id => document.getElementById(id);

function safeGet(key, fallback = "") {
    try {
        return localStorage.getItem(key) || fallback;
    } catch (e) {
        return fallback;
    }
}

function safeSet(key, value) {
    try {
        localStorage.setItem(key, value);
        return true;
    } catch (e) {
        return false;
    }
}

function showPage(id) {
    document.querySelectorAll(".page").forEach(p => p.classList.remove("active"));
    document.querySelectorAll(".nav-btn").forEach(b => b.classList.remove("active"));

    const page = $(id);
    if (page) page.classList.add("active");

    const nav = document.querySelector('[data-page="' + id + '"]');
    if (nav) nav.classList.add("active");

    window.scrollTo({top: 0, behavior: "smooth"});
}

document.querySelectorAll(".nav-btn").forEach(btn => {
    btn.addEventListener("click", () => showPage(btn.dataset.page));
});

function saveName() {
    const name = $("nameInput").value.trim();

    if (!name) {
        $("profileStatus").textContent = "اول اسمت رو بنویس! 😊";
        return;
    }

    if (safeSet("nexora_name", name)) {
        updateName(name);
        $("profileStatus").textContent = "اسمت ذخیره شد! خوش اومدی " + name + " 💜";
    } else {
        $("profileStatus").textContent = "ذخیره‌سازی در این مرورگر در دسترس نیست.";
    }
}

function updateName(name) {
    $("welcomeName").textContent = name || "ماجراجو";
    $("headerUser").textContent = name ? "خوش اومدی، " + name + " ✨" : "دنیای تو، قوانین تو ✨";
    $("nameInput").value = name;
}

function setTheme(theme) {
    const themes = {
        purple: ["#100817", "#1d1028", "#a855f7", "#ff3158", "#ffffff", "#c5b6d2"],
        blue: ["#071321", "#102638", "#168cff", "#15d6c5", "#ffffff", "#b5d4e5"],
        pink: ["#1a0b15", "#301323", "#ff70b7", "#ffb347", "#ffffff", "#e5bfd3"],
        green: ["#09150f", "#14291e", "#36d399", "#a3e635", "#ffffff", "#bfe0c9"]
    };

    const t = themes[theme] || themes.purple;
    const root = document.documentElement;

    ["--bg", "--panel", "--purple", "--red", "--text", "--muted"].forEach((key, i) => {
        root.style.setProperty(key, t[i]);
    });

    safeSet("nexora_theme", theme);

    const labels = {
        purple: "بنفش و قرمز 💜❤️",
        blue: "آبی و فیروزه‌ای 💙",
        pink: "صورتی و نارنجی 💗",
        green: "سبز 💚"
    };

    $("themeStatus").textContent = "تم " + labels[theme] + " فعاله!";
}

const challenges = {
    brain: [
        "چی همیشه جلو می‌ره ولی هیچ‌وقت راه نمی‌ره؟ جواب رو حدس بزن!",
        "سه چیز نام ببر که بدون برق هم کار می‌کنن.",
        "اگر ۵ سیب داشته باشی و ۲ تا بدی، چند سیب می‌مونه؟"
    ],
    fun: [
        "یک اسم خنده‌دار برای یک ربات اختراع کن!",
        "در سه کلمه یک داستان عجیب تعریف کن.",
        "یک قدرت ابرقهرمانی عجیب برای خودت انتخاب کن!"
    ],
    talk: [
        "اگر می‌تونستی به هر جایی سفر کنی، کجا می‌رفتی؟",
        "چه مهارتی رو دوست داری یاد بگیری؟",
        "اگر یک بازی می‌ساختی، موضوعش چی بود؟"
    ]
};

function challenge(type) {
    const list = challenges[type] || Object.values(challenges).flat();
    $("challengeText").textContent = list[Math.floor(Math.random() * list.length)];
}

function nextChallenge() {
    const list = Object.values(challenges).flat();
    $("challengeText").textContent = list[Math.floor(Math.random() * list.length)];
}

function randomNumber() {
    $("randomResult").textContent = Math.floor(Math.random() * 100) + 1;
}

const quotes = [
    "قدم‌های کوچیک هم تو رو به هدف می‌رسونن. ✨",
    "هر روز یک فرصت تازه برای یادگیریه. 💜",
    "ایده‌هات ارزش امتحان کردن دارن. 🚀",
    "قرار نیست کامل باشی؛ فقط ادامه بده. 🌱"
];

function randomQuote() {
    $("quoteText").textContent = quotes[Math.floor(Math.random() * quotes.length)];
}

function playRPS(choice) {
    const options = ["سنگ", "کاغذ", "قیچی"];
    const bot = options[Math.floor(Math.random() * 3)];
    let result;

    if (choice === bot) result = "مساوی شدین! 😄";
    else if (
        (choice === "سنگ" && bot === "قیچی") ||
        (choice === "کاغذ" && bot === "سنگ") ||
        (choice === "قیچی" && bot === "کاغذ")
    ) result = "تو بردی! 🎉";
    else result = "این دور من بردم! 🤖";

    $("rpsResult").textContent = "تو: " + choice + " | من: " + bot + " — " + result;
}

function addMessage(text, type) {
    const box = $("chatBox");
    const msg = document.createElement("div");
    msg.className = "message " + type;
    msg.textContent = text;
    box.appendChild(msg);
    box.scrollTop = box.scrollHeight;
}

function getReply(text) {
    const t = text.toLowerCase();

    if (t.includes("سلام") || t.includes("درود")) {
        return "سلام " + (safeGet("nexora_name", "دوست من")) + "! 💜 چه خبر؟";
    }
    if (t.includes("اسمت") || t.includes("اسم تو")) {
        return "من دستیار ساده NEXORA هستم! 🤖";
    }
    if (t.includes("خوبی") || t.includes("حالت")) {
        return "ممنون که پرسیدی! 😊 تو چطوری؟";
    }
    if (t.includes("بازی") || t.includes("سرگرمی")) {
        return "بریم سرگرمی! از منوی کناری بخش 🎮 سرگرمی رو باز کن.";
    }
    if (t.includes("چالش")) {
        return "یک چالش تازه می‌خوای؟ بخش 🎯 چالش‌ها رو امتحان کن!";
    }
    if (t.includes("خداحافظ") || t.includes("فعلا")) {
        return "فعلاً! هر وقت برگشتی می‌تونی دوباره گپ بزنی. 💜";
    }
    if (t.includes("ممنون") || t.includes("مرسی")) {
        return "خواهش می‌کنم! ✨";
    }

    return "جالبه! 💜 بیشتر برام تعریف کن. فعلاً پاسخ‌های من ساده و ازپیش‌تعریف‌شده هستن؛ برای پاسخ هوشمند واقعی باید یک سرویس هوش مصنوعی به سایت وصل کنیم.";
}

$("chatForm").addEventListener("submit", function(event) {
    event.preventDefault();

    const input = $("chatInput");
    const text = input.value.trim();
    if (!text) return;

    addMessage(text, "me");
    input.value = "";

    setTimeout(() => addMessage(getReply(text), "bot"), 250);
});

updateName(safeGet("nexora_name"));
setTheme(safeGet("nexora_theme", "purple"));
</script></body>
</html>
Explore more drops →
Forked from ExI9U-JkbemI.