به Dashboard Admin Thunder AI ، یک قالب داشبورد مدیر AI مدرن ، تمیز و بسیار قابل تنظیم ، با استفاده از متغیرهای Bootstrap 5 ، HTML و CSS قدرتمند خوش آمدید. طراحی شده برای پانل های سرپرست AI محور ، دارای چندین طرح ، مضامین و ماژول های ضروری برای تسریع در توسعه داشبورد شما است.
این راهنما شما را با راه اندازی و استفاده از ویژگی های اصلی موضوع ، از جمله نحوه تهیه منبع ، درک ساختار پرونده و کار با ابزارهای ساخت ، پیاده می کند. اگر در طول مسیر به هر سؤالی رسیدگی کردید ، دریغ نکنید که به ما دسترسی پیدا کنید!
✅ گزینه ۱: مستقیماً در مرورگر باز کنید
مستند سازیindex.html را در مرورگر خود باز کنید.✅ گزینه ۲: استفاده از سرور توسعه محلی (توصیه میشود)
اگر در محیط توسعه کار میکنید:
index.html راستکلیک کنید → "Open with Live Server".http://localhost:5500 (یا مشابه) باز میشود.این مراحل را برای پیکربندی کلید API خود برای قالب داشبورد مدیر AI Thunder AI دنبال کنید:
فایل مثال را در فهرست پروژه خود پیدا کرده و آن را از این طریق تغییر نام دهید:
html/assets/js/env.js.exampleHTML/assets/js/env.jsاین کار پیکربندی محیط مورد استفاده داشبورد را فعال می کند.
پرونده تازه تغییر نام یافته env.js را در ویرایشگر کد مورد نظر خود باز کنید.
کلید نگهدارنده مکان را پیدا کنید و آن را با کلید API Gemini واقعی خود جایگزین کنید:
کلید API Gemini خود را در اینجا ایجاد کنیدgemini_api_key = "your_actual_api_key_here" ؛حتماً کلید API خود را محرمانه نگه دارید و هرگز آن را در مخازن عمومی قرار ندهید.
داشبورد ما از متغیرهای CSS برای رنگ ها ، فاصله ها و تایپوگرافی استفاده می کند و سفارشی سازی را بسیار آسان می کند.
باز:
/assets/css/theme.cssمتغیرهای CSS را ویرایش کنید:
[data-thunderal="theme-indigo"] {
--bs-primary: #6c50bf;
--bs-primary-rgb: 108, 80, 191;
--bs-primary-bg-subtle: #babdfd;
--bs-btn-bg: #6c50bf;
--bs-waginal-color: var(--bs-primary);
--bs-a-active-bg: var(--bs-primary);
--bs-nav-pills-link-active-bg: #6c50bf;
/* مثال گرادینت */
--classic-gradient: linear-gradient(-45deg, var(--bs-primary), var(--bs-secondary));
}بین 4 قلم از پیش تنظیم شده از طریق تنظیمات UI یا کلاس به روزرسانی در کلاس بدن = ""
/assets/css/style.cssIMPORT URL ('https://fonts.googleapis.com/css2؟family=raleway: italy،wght@0،100..900 ؛ 1،100..900&display=swap') ؛ Import url ('https://fonts.googleapis.com/css2؟family=open+sans:wght@300 ؛ 400 ؛500 ؛600 ؛700&display=swap') ؛ Import url ('https://fonts.googleapis.com/css2؟family=dosis:wght@200..800&display=swap') ؛ Import url ('https://fonts.googleapis.com/css2؟family=jost:ital ، wht@0،100..900 ؛1،100..900&display=swap') ؛دور بوردر را از تنظیمات استفاده یا حذف کنید کلاس بدن = "شعاع -0"
در اینجا تفکیک ساختار پرونده در Thunder AI آورده شده است:
assets : فایلهای منبع برای قالب.CSS : CSS سفارشی و فریمورک CSS (Bootstrap)images : فایلهای تصویری.js : فایلهای منبع JavaScript.plugins : افزونههای شخص ثالث JS.index.htmlLICENSE.md : مجوز قالب.README.md : بررسی اجمالی قالب.ما مجموعه ای از مؤلفه های UI قابل استفاده مجدد را درج کرده ایم:
هر مؤلفه با کلاس های Bootstrap 5 و کلاس های ابزار اضافی ساخته شده است تا طرح پاسخگو و انعطاف پذیر باشد.
برای اجرای داشبورد به صورت محلی ، نیاز دارید:
لینکهای CDN را میتوانید در فایل index.html یا بهصورت محلی در پوشه assets/ پیدا کنید.
بله این 100 ٪ با استفاده از شبکه Bootstrap و CSS Flexbox 100 ٪ پاسخگو و دوستانه است.
کاملا ساختار HTML تمیز و آماده برای ادغام در هر چارچوب است.
متغیرهای CSS را در ویرایش کنید /assets/css/theme.css.
یک بار دیگر ، از خرید این قالب بسیار سپاسگزارم. همانطور که در ابتدا گفتم ، خوشحال می شوم اگر سؤالی در رابطه با این قالب دارید ، به شما کمک کنم. ما امیدواریم که این پروژه شما را قدرتمند ، سریع و آسان مدیریت کند.
فراموش نکنید که به ما امتیاز دهید ممتاز اگر قالب را دوست دارید!
هر زمان با ما تماس بگیرید!