make component

shayestan
nima 4 months ago
parent 09070ffda8
commit c9258682c3
  1. 534
      Webfonts/Fa Numral Help.html
  2. 422
      Webfonts/IranSansX.html
  3. 109
      Webfonts/fontiran.css
  4. BIN
      Webfonts/fonts/woff/IRANSansX-Black.woff
  5. BIN
      Webfonts/fonts/woff/IRANSansX-Bold.woff
  6. BIN
      Webfonts/fonts/woff/IRANSansX-DemiBold.woff
  7. BIN
      Webfonts/fonts/woff/IRANSansX-ExtraBlack.woff
  8. BIN
      Webfonts/fonts/woff/IRANSansX-ExtraBold.woff
  9. BIN
      Webfonts/fonts/woff/IRANSansX-Heavy.woff
  10. BIN
      Webfonts/fonts/woff/IRANSansX-Light.woff
  11. BIN
      Webfonts/fonts/woff/IRANSansX-Medium.woff
  12. BIN
      Webfonts/fonts/woff/IRANSansX-Regular.woff
  13. BIN
      Webfonts/fonts/woff/IRANSansX-Thin.woff
  14. BIN
      Webfonts/fonts/woff/IRANSansX-UltraLight.woff
  15. BIN
      Webfonts/fonts/woff2/IRANSansX-Black.woff2
  16. BIN
      Webfonts/fonts/woff2/IRANSansX-Bold.woff2
  17. BIN
      Webfonts/fonts/woff2/IRANSansX-DemiBold.woff2
  18. BIN
      Webfonts/fonts/woff2/IRANSansX-ExtraBlack.woff2
  19. BIN
      Webfonts/fonts/woff2/IRANSansX-ExtraBold.woff2
  20. BIN
      Webfonts/fonts/woff2/IRANSansX-Heavy.woff2
  21. BIN
      Webfonts/fonts/woff2/IRANSansX-Light.woff2
  22. BIN
      Webfonts/fonts/woff2/IRANSansX-Medium.woff2
  23. BIN
      Webfonts/fonts/woff2/IRANSansX-Regular.woff2
  24. BIN
      Webfonts/fonts/woff2/IRANSansX-Thin.woff2
  25. BIN
      Webfonts/fonts/woff2/IRANSansX-UltraLight.woff2
  26. BIN
      Webfonts/letter-spacing.png
  27. 244
      Webfonts/style.css
  28. 226
      Webfonts/webfont test.html
  29. 3
      index.html
  30. 1
      jsconfig.json
  31. BIN
      public/images/GAME1.png
  32. BIN
      public/images/Resaneh.jpg
  33. BIN
      public/images/alarm-clock.png
  34. BIN
      public/images/bag.png
  35. BIN
      public/images/boy.jpg
  36. BIN
      public/images/boy2.jpg
  37. BIN
      public/images/brain.png
  38. BIN
      public/images/calender.png
  39. BIN
      public/images/chat.png
  40. BIN
      public/images/coin.png
  41. BIN
      public/images/endExam.jpg
  42. BIN
      public/images/entezar.jpg
  43. BIN
      public/images/game.png
  44. BIN
      public/images/gardner.png
  45. BIN
      public/images/goldStar.png
  46. BIN
      public/images/haland.png
  47. BIN
      public/images/hat.png
  48. BIN
      public/images/mbti.png
  49. BIN
      public/images/neo.png
  50. BIN
      public/images/okaner.png
  51. BIN
      public/images/personTest.png
  52. BIN
      public/images/smallcoin.png
  53. BIN
      public/images/sword.png
  54. 29074
      public/style.css
  55. 14
      src/components/StatisticsCard.tsx
  56. 12
      src/components/boy.tsx
  57. 18
      src/components/boy2.tsx
  58. 10
      src/components/calender.tsx
  59. 12
      src/components/chat.tsx
  60. 14
      src/components/coin.tsx
  61. 11
      src/components/endExam.tsx
  62. 13
      src/components/entezar.tsx
  63. 13
      src/components/game.tsx
  64. 17
      src/components/neo.tsx
  65. 12
      src/components/person.tsx
  66. 13
      src/components/resaneh.tsx
  67. 12
      src/components/sword.tsx
  68. 19
      src/components/test.tsx
  69. 1
      src/index.css
  70. 65
      src/pages/landing.jsx
  71. 7
      style.css

File diff suppressed because one or more lines are too long

@ -0,0 +1,422 @@
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>IRANSansX Family Type face: خانواده فونت ایرانسنس</title>
<meta name="fontiran.com:license" content="کد ۶ رقمی لایسنس">
<link href="style.css" rel="stylesheet">
</head>
<body dir="rtl">
<div class="wrapper">
<div class="mainbox">
<div class="titelbox">
<h1>بِسْمِ اللهِ الرَّحْمَنِ الرَّحِيمِ</h1>
</div>
<div class="alphabet" style="line-height:220px" > د </div>
<div class="rightbox">
<br>
<span class="text-xlarge">ن وَالْقَلَمِ وَ مَا يَسْطُرُون</span>
<br>
<span class="text-xlarge"> نون؛ سوگند به قلم و آنچه می نويسند. </span>
<br>
<span class="text-large"> Noon. I swear by the pen and what the angels write </span>
<br>
<br>
</div>
</div>
<div class="mainbox">
<div class="titelbox" style="letter-spacing: 0px">
<h1>نکاتی درباره تایپوگرافی وب</h1>
</div>
<div class="alphabet" style="line-height:250px" > ج </div>
<div class="rightbox">
<p>از زمان پیدایش نخستین وب سایت، متن ها یکی از اجزای مهم صفحات وب بودند. هر چند به مرور زمان با ورود تصاویر، صوت و فیلم کمی از بار مسئولیت متون کم شد اما هنوز جایگاه خود را از دست نداده اند و بخش مهمی از کار را به عهده دارند.</p>
<p>بسیاری از طراحان وب سایت به صورت تجربی بهترین ترکیب و ظاهر را برای نمایش متن ها انتخاب می کنند. اما اصولی وجود دارد که با رعایت آن ها، تاثیرپذیری و زیبایی سایت چند برابر خواهد شد.</p>
<p>در ادامه مطلب قصد داریم تعدادی از اصول مقدماتی تایپوگرافی را به اختصار مرور کنیم. هرچند بسیاری از دوستان با این نکات آشنا هستند؛ اما شاید مرور آن ها خالی از لطف نباشد.</p>
</div>
</div>
<div class="mainbox">
<div class="titelbox" style="letter-spacing: 0px">
<h1>تاثیر اندازه فونت و سلسله مراتب تگها</h1>
</div>
<div class="alphabet" style="line-height:170px"> ن </div>
<div class="rightbox">
<p>فونت های داخل سایت باید به گونه ای قرار گیرند که کاربر به راحتی بتواند آن ها را بخواند. نوع فونت، وزن و کوچک (یا بزرگ) بودن اندازه آن ممکن است تمایل کاربر برای بازگشت به وب سایت را کاهش دهد. قواعد و قوانین زیادی برای انتخاب بهترین فونت وجود دارد.</p>
<p>در زیر می توانید ۱۲ وزن مختلف <strong>خانواده فونت ایرانسنس</strong> را در شرایط یکسان مشاهده کنید. لازم به ذکر است برای این صفحه از وزن معمولی (Normal) استفاده شده است.</p>
</div>
</div>
<div class="mainbox">
<div class="mainbox2">
<div class="text-thin" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Thin)</div>
<div class="text-UltraLight" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (UltraLight)</div>
<div class="text-light" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)</div>
<div class="text-regular" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)</div>
<div class="text-medium" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)</div>
<div class="text-demibold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (demiBold)</div>
<div class="text-bold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)</div>
<div class="text-extrabold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExtraBold)</div>
<div class="text-black" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)</div>
<div class="text-extrablack" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExBlack)</div>
<div class="text-heavy" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Heavy)</div>
</div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2">
<div class="text-thin" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Thin)</div>
<div class="text-UltraLight" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (UltraLight)</div>
<div class="text-light" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)</div>
<div class="text-regular" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)</div>
<div class="text-medium" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)</div>
<div class="text-demibold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (demiBold)</div>
<div class="text-bold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)</div>
<div class="text-extrabold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExtraBold)</div>
<div class="text-black" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)</div>
<div class="text-extrablack" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExBlack)</div>
<div class="text-heavy" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Heavy)</div>
</div>
</div>
<div class="mainbox">
<div class="titelbox" style="letter-spacing: 0px">
<h1>تگهای هدینگ</h1>
</div>
<div class="alphabet" style="line-height:180px"> و </div>
<div class="rightbox">
<p>در این بین، استفاده از تگ های هدینگ مناسب و رعایت سلسله مراتب آن ها، هم مفهوم نوشته را بهتر منتقل می کند و هم تاثیر قابل توجهی در نتایج موتورهای جستجو خواهد داشت. این نکته یکی از فاکتورهای مهم در بهینه سازی وب سایت برای موتورهای جستجو (Search Engine Optimization) است.</p>
<p>نمونه ای از خروجی تگ های هدینگ با سایز استاندارد مربوطه به فونت های فونت ایرانسنس را در زیر مشاهده می کنید.</p>
</div>
</div>
<div class="mainbox">
<div class="mainbox2">
<h1>(H1) نابرده رنج گنج میسر نمی شود. No gain without pain </h1>
<h2>(H2) نابرده رنج گنج میسر نمی شود. No gain without pain</h2>
<h3>(H3) نابرده رنج گنج میسر نمی شود. No gain without pain</h3>
<h4>(H4) نابرده رنج گنج میسر نمی شود. No gain without pain </h4>
<h5>(H5) نابرده رنج گنج میسر نمی شود. No gain without pain</h5>
<h6>(H6) نابرده رنج گنج میسر نمی شود. No gain without pain</h6>
</div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2">
<h1>(H1) نابرده رنج گنج میسر نمی شود. No gain without pain </h1>
<h2>(H2) نابرده رنج گنج میسر نمی شود. No gain without pain</h2>
<h3>(H3) نابرده رنج گنج میسر نمی شود. No gain without pain</h3>
<h4>(H4) نابرده رنج گنج میسر نمی شود. No gain without pain </h4>
<h5>(H5) نابرده رنج گنج میسر نمی شود. No gain without pain</h5>
<h6>(H6) نابرده رنج گنج میسر نمی شود. No gain without pain</h6>
</div>
</div>
<div class="mainbox">
<div class="titelbox" style="letter-spacing: 0px">
<h1>سطر و ستون بندی</h1>
</div>
<div class="alphabet" style="line-height:200px"> م </div>
<div class="rightbox">
<p>معمولاً هرگاه مقدار نوشته از یک سطر بیشتر شود ناگزیر به ستون بندی هستیم. و این کار ما را با چند متغییر مواجه خواهد کرد:</p>
<p>۱- <strong>عرض ستونهای متنی</strong> که حاوی حداقل۷ کلمه باشد بهترین انتخاب است. اگر ستون کوتاهتر باشد چشم بیننده در اثر حرکتهای زود به زود از پایان یک سطر به ابتدای سطر بعدی خسته خواهد شد. علاوه بر این لبه ستونهایی با عرض کم نیز همیشه دندانه ای و بی نظم خواهد بود. ستونهایی با عرض طولانی هم برای خواننده آزار دهنده است چرا که چشم در حرکت بازگشت از انتهای یک سطر به ابتدای سطر بعدی ممکن است دچار اشتباه شود.
<p>۲- <strong>لدینگ یا همان فاصله سطر </strong> هم در ستون بندی اهمیت دارد. ستونهای فشرده اگرچه به لحاظ گرافیکی منسجم و زیبا هستند اما عمل خواندن را مختل می کنند و در مقابل، فاصله سطر زیاد نیز باعث نازیبایی و خستگی چشم خواننده میشود. فاصله سطر همیشه می تواند با توجه به نوع فونت و عرض ستونها تغییر کند. بدین ترتیب که فونتهایی با دندانههای بلندتر و ستونهایی با عرض بیشتر به لدینگ بیشتری نیاز دارند.
<p>۳- <strong>همترازی </strong> هم یکی از متغییرهای پر بحث در ستون بندی است. اما به طور کوتاه و خلاصه باید گفت که بهتر است در متن فارسی از همترازی یا همان Justification استفاده نکنید. این عمل اگرچه لبه پاراگراف شما را مرتب خواهد کرد اما تنظیمات فاصله حروف را تغییر خواهد داد و در نتیجه باعث کاهش خوانایی خواهد شد. </div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX Thin)</div>
<div class="farsiparagraph"><span class="text-thin">ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-thin">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX UltraLight)</div>
<div class="farsiparagraph"><span class="text-UltraLight">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-UltraLight">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX Light)</div>
<div class="farsiparagraph"><span class="text-light">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-light">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX Regular)</div>
<div class="farsiparagraph"><span class="text-regular">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-regular">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX Mediume)</div>
<div class="farsiparagraph"><span class="text-medium">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-medium">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX DemiBold)</div>
<div class="farsiparagraph"><span class="text-demibold">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-demibold">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX Bold)</div>
<div class="farsiparagraph"><span class="text-bold">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-bold">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX ExtraBold)</div>
<div class="farsiparagraph"><span class="text-extrabold">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-extrabold">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX Black)</div>
<div class="farsiparagraph"><span class="text-black">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-black">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX ExtraBlack)</div>
<div class="farsiparagraph"><span class="text-extrablack">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-extrablack">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSansX Heavy)</div>
<div class="farsiparagraph"><span class="text-heavy">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-heavy">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX Thin)</div>
<div class="farsiparagraph"><span class="text-thin">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-thin">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX UltraLight)</div>
<div class="farsiparagraph"><span class="text-UltraLight">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-UltraLight">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX Light)</div>
<div class="farsiparagraph"><span class="text-light">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-light">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX Regular)</div>
<div class="farsiparagraph"><span class="text-regular">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-regular">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX Mediume)</div>
<div class="farsiparagraph"><span class="text-medium">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-medium">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX DemiBold)</div>
<div class="farsiparagraph"><span class="text-demibold">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-demibold">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX Bold)</div>
<div class="farsiparagraph"><span class="text-bold">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-bold">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX ExtraBold)</div>
<div class="farsiparagraph"><span class="text-extrabold">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-extrabold">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX Black)</div>
<div class="farsiparagraph"><span class="text-black">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-black">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX ExtraBlack)</div>
<div class="farsiparagraph"><span class="text-extrablack">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-extrablack">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2negativ">(IRANSansX Heavy)</div>
<div class="farsiparagraph"><span class="text-heavy">
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. </span></div>
<div class="englishparagraph"><span class="text-heavy">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>
</div>
<div class="mainbox">
<div class="titelbox" style="letter-spacing: 0px">
<h1>اعداد و علائم در فونت فارسی</h1>
</div>
<div class="alphabet" style="line-height:470px"> ظ </div>
<div class="rightbox">
<p><span class="text-xlarge">اعداد فارسی: <strong>۱۲۳۴۵۶۷۸۹۰</strong></span><br>
<span class="text-xlarge">اعداد عربی: <strong>۱۲۳٤٥٦۷۸۹۰</strong></span><br>
<span class="text-xlarge">اعداد انگلیسی: <strong>1234567890</strong></span></p>
<p>برای تایپ اعداد فارسی در محیط وب از <a href="http://fontiran.com/%d9%86%d8%b5%d8%a8-%da%a9%db%8c%d8%a8%d9%88%d8%b1%d8%af-%d9%81%d8%a7%d8%b1%d8%b3%db%8c-%d8%a7%d8%b3%d8%aa%d8%a7%d9%86%d8%af%d8%a7%d8%b1%d8%af-%d8%af%d8%b1-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b28-%d9%88/">کیبورد استاندارد فارسی</a> استفاده کنید. در ویندوز ۸ و یا بالاتر این کیبورد، با نام Persian(Standard)Keyboard در لیست کیبوردهای ویندوز وجود دارد. همچنین می توانید از <a href="http://persian-computing.ir/download/Iranian_Standard_Persian_Keyboard_(ISIRI_9147)_(Version_2.0).zip">این آدرس</a> آن را دانلود و نصب کنید.</p>
<span>
<p>با استفاده از کیبورد استاندارد میتوانید ممیز فارسی را تایپ کنید.<br>
<span>میانبر این علامت کلیدهای <span class="text-medium">Shift+3</span> است. به این شکل: <strong class="text-xlarge">۳٫۱۴</strong></span><br>
<span >ممیز فارسی با علامت اسلش تفاوت دارد :<strong class="text-xlarge">۳/۱۴</strong></span>
</p>
<p>با استفاده از کیبورد استاندارد میتوانید جداکننده هزارگان فارسی را تایپ کنید.<br>
<span>میانبر این علامت کلیدهای <strong>Shift+2</strong> است. به این شکل: <strong class="text-xlarge">۹٬۲۱۰٬۰۰۰</strong></span><br>
<span >این علامت با جدا کننده هزارگان انگلیسی تفاوت دارد : <strong class="text-xlarge">۹,۲۱۰,۰۰۰</strong></span>
</p>
</div>
</div>
<div class="mainbox">
<div class="titelbox" style="letter-spacing: 0px">
<h1> نسبتهای طلایی</h1>
</div>
<div class="alphabet2">
<div style="padding-left:20px">
۳٫۷۷۷ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۲٫۳۳۵</span>
<br>
۶٫۱۱۲ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۳٫۷۷۷</span>
<br>
۹٫۸۸۹ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۶٫۱۱۲</span>
<br>
۱۶ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۹٫۸۸۹</span>
<br>
.......................................
<br>
۱۶ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۲۵٫۸۸۸</span>
<br>
۲۵٫۸۸۸ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۴۱٫۸۸۷</span>
<br>
۴۱٫۸۸۷ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۶۷٫۷۷۳</span>
<br>
۶۷٫۷۷۳ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۱۰۹٫۶۵۶</span>
</div>
</div>
<div class="rightbox">
<p>اهمیت اندازه فونت در خوانایی و زیبا شدن صفحه وب سایت بر کسی پوشیده نیست. در کنار این بحث، موارد دیگری مانند ارتفاع خطوط، فاصله ها، ابعاد قسمت های مختلف و ... نیز در بحث تایپوگرافی اهمیت زیادی دارند.</p>
<p>برای محاسبه این اعداد می توانیم از سری اعداد متناسب (Modular Scale) استفاده کنیم. در حقیقت از تعدادی عدد پشت سر هم که بر اساس مضرب خاصی تشکیل شده اند برای تنظیمات ارتفاع خط، فاصله ها، ابعاد و ... استفاده می کنیم. نسبت (عدد) طلایی همان مضرب اعداد است.</p>
<p>به عنوان مثال می خواهیم از سایز 16px <strong>فونت ایرانسنس</strong> به عنوان فونت و سایز اصلی متن صفحات استفاده کنیم. عدد فی (phi) یونانی که معادل ۱٫۶۱۸۰۳۳۹۸۸۷ (به اختصار ۱٫۶۱۸) است را به عنوان نسبت طلایی در نظر می گیریم. بنابراین سری اعدادی به شکل روبرو خواهیم داشت:</p>
<p>
به کمک این اعداد و استفاده از آن ها در صفحات وب سایت خود می توانیم خوانایی و زیبایی آن را افزایش دهیم. علاوه بر آن، اگر از واحدهای نسبی مانند em استفاده شود، امکانات بیشتری در اختیار طراح و بازدیدکننده خواهد بود. البته <strong>سری اعداد بر مبنای نسبت طلایی</strong> فقط در تایپوگرافی وب سایت کاربرد ندارد.
این اعداد می تواند ادامه داشته باشد (<span class="text-regular text-underline">۱٬۲۱۵٫۹۸۱</span> ، <span class="text-regular text-underline">۱٬۹۶۷٫۴۵۷</span> ، <span class="text-regular text-underline">۳٬۱۸۳٫۳۴۵</span> و ...).
</p>
ایرانسنس
</div>
</div>
<div class="mainbox">
<div class="rightbox">
<br>
در این فایل سعی کردیم همراه با یک مطلب آموزشی کوتاه، نحوه استفاده از خانواده فونت ایرانسنس و پیش نمایشی از قسمت های مختلف آن را مرور کنیم.
<br>
برای مشاهده راهنمای نحوه قراردادن فونت ها در وب سایت خود، به <a href="http://fontiran.com/%d9%86%d8%b5%d8%a8-%d9%81%d9%88%d9%86%d8%aa-%d8%a7%db%8c%d8%b1%d8%a7%d9%86-%d8%b3%d9%86%d8%b3-iransans-%d8%b1%d9%88%db%8c-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa/" target="_blank">این آدرس</a> مراجعه کنید.
<br>
<br>
<br>
</div>
<div class="alphabet" style="line-height:110px">ء</div>
</div>
<br>
<div class="footer">
Copyright (c) 2021 by <a href="http://fontiran.com">www.fontiran.com</a> (Moslem Ebrahimi). All rights reserved.
<br>
To use this font, it is necessary to obtain the license from www.fontiran.com
</div>
</div>
</body>
</html>

@ -0,0 +1,109 @@
/**
*
* Name: IRANSansX Fonts
* Version: 3
* Author: Moslem Ebrahimi (moslemebrahimi.com)
* Created on: Apr 22, 2021
* Updated on: Jul 12, 2023
* Website: http://fontiran.com
* Copyright: Commercial/Proprietary Software
--------------------------------------------------------------------------------------
فونتایران سنس یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید
--------------------------------------------------------------------------------------
IRANSansX fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com
--------------------------------------------------------------------------------------
This set of fonts are used in this project under the license: (.....)
------------------------------------------------------------------------------------- fonts/-
*
**/
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 100;
src: url('fonts/woff/IRANSansX-Thin.woff') format('woff'),
url('fonts/woff2/IRANSansX-Thin.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 200;
src: url('fonts/woff/IRANSansX-UltraLight.woff') format('woff'),
url('fonts/woff2/IRANSansX-UltraLight.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 300;
src: url('fonts/woff/IRANSansX-Light.woff') format('woff'),
url('fonts/woff2/IRANSansX-Light.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 500;
src: url('fonts/woff/IRANSansX-Medium.woff') format('woff'),
url('fonts/woff2/IRANSansX-Medium.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 600;
src: url('fonts/woff/IRANSansX-DemiBold.woff') format('woff'),
url('fonts/woff2/IRANSansX-DemiBold.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 800;
src: url('fonts/woff/IRANSansX-ExtraBold.woff') format('woff'),
url('fonts/woff2/IRANSansX-ExtraBold.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 900;
src: url('fonts/woff/IRANSansX-Black.woff') format('woff'),
url('fonts/woff2/IRANSansX-Black.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 950;
src: url('fonts/woff/IRANSansX-ExtraBlack.woff') format('woff'),
url('fonts/woff2/IRANSansX-ExtraBlack.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 1000;
src: url('fonts/woff/IRANSansX-Heavy.woff') format('woff'),
url('fonts/woff2/IRANSansX-Heavy.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: bold;
src: url('fonts/woff/IRANSansX-Bold.woff') format('woff'),
url('fonts/woff2/IRANSansX-Bold.woff2') format('woff2');
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: normal;
src: url('fonts/woff/IRANSansX-Regular.woff') format('woff'),
url('fonts/woff2/IRANSansX-Regular.woff2') format('woff2');
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

@ -0,0 +1,244 @@
@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
body {
font-family: IRANSansX !important;
direction: rtl;
background-color: #cdcdcd;
margin: 0;
}
h1, h2, h3, h4, h5, h6,input, textarea {
font-family: IRANSansX !important;
}
h1 {
font-weight: bold;
}
.wrapper {
max-width: 900px;
margin: 0 auto;
}
.ltr {
direction: ltr;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-small {
font-size: 0.8em;
}
.text-xsmall {
font-size: 0.6em;
}
.text-large {
font-size: 1.2em;
}
.text-xlarge {
font-size: 1.4em;
}
.text-underline {
text-decoration:underline;
}
.text-thin {
font-weight: 100;
}
.text-UltraLight {
font-weight: 200;
}
.text-light {
font-weight: 300;
}
.text-regular {
font-weight: normal;
}
.text-medium {
font-weight: 500;
}
.text-demibold {
font-weight: 600;
}
.text-bold {
font-weight: bold;
}
.text-extrabold {
font-weight: 800;
}
.text-black {
font-weight: 900;
}
.text-extrablack {
font-weight: 950;
}
.text-heavy {
font-weight: 1000;
}
blockquote {
font-weight: 700;
padding: 10px;
border: 1px dashed #666666;
}
.mainbox {
width: 100%;
background-color: #EFEFEF;
display: table;
margin-bottom: 30px;
border-right: 8px solid #df79ff;
}
.mainboxnegativ {
width: 100%;
background-color: #000000;
display: table;
margin-bottom: 30px;
border-right: 8px solid #df79ff;
color: #F9F9F9;
}
.mainbox2 {
font-size: 1em;
width: 90%;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.mainboxitalic {
font-size: 1em;
font-style: italic;
width: 90%;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.mainbox3 {
width: 100%;
background-color: #DFDFDF;
display: table;
margin-bottom: 30px;
border-right: 8px solid #FF5EAA;
}
.mainbox2negativ {
font-size: 1em;
color: #F9F9F9;
background-color: #000000;
padding-right: 20px;
}
.farsiparagraph {
font-size: 1em;
width: 47%;
float:right;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.farsiparagraph_negativ {
font-size: 1em;
color: #F9F9F9;
background-color: #000000;
width: 47%;
float:right;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.englishparagraph {
font-size: 1em;
width: 47%;
float: left;
direction:ltr;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.englishparagraph_negativ {
font-size: 1em;
color: #F9F9F9;
background-color: #000000;
width: 47%;
float: left;
direction:ltr;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.rightbox {
width: 60%;
padding-right: 20px;
padding-left: 5px;
float: right;
margin-left: 10px;
margin-bottom: 0px;
min-width: 0px;
background-color: #F7F7F7;
}
.titelbox {
width: 60%;
padding-right: 25px;
padding-left: 0px;
float: right;
margin-left: 10px;
margin-bottom: 0px;
min-width: 0px;
background-color: #d5d5d5;
color: #4B4B4B;
}
.lefttbox {
padding-right: 20px;
padding-left: 4px;
float: right;
margin-bottom: 10px;
min-width: 0px;
}
.alphabet {
width: 35%;
float: left;
font-size: 20em;
text-align: center;
font-weight: 700;
color: #999999;
}
.alphabet2 {
width: 35%;
float: left;
direction: ltr;
font-size: 1.6em;
text-align: left;
font-weight: 600;
color: #333333;
margin-top: 100px;
}
.footer {
font-weight: 400;
font-size: 0.7em;
text-align: center;
direction: ltr;
margin-bottom: 0px;
padding-bottom: 0px;
}

@ -0,0 +1,226 @@
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>IRANSansX</title>
<style type="text/css" media="screen">
@font-face { font-family: 'WOFF IRANSansX-Thin'; src: url('fonts/woff/IRANSansX-Thin.woff'); }
@font-face { font-family: 'WOFF IRANSansX-UltraLight'; src: url('fonts/woff/IRANSansX-UltraLight.woff'); }
@font-face { font-family: 'WOFF IRANSansX-Light'; src: url('fonts/woff/IRANSansX-Light.woff'); }
@font-face { font-family: 'WOFF IRANSansX-Regular'; src: url('fonts/woff/IRANSansX-Regular.woff'); }
@font-face { font-family: 'WOFF IRANSansX-Medium'; src: url('fonts/woff/IRANSansX-Medium.woff'); }
@font-face { font-family: 'WOFF IRANSansX-DemiBold'; src: url('fonts/woff/IRANSansX-DemiBold.woff'); }
@font-face { font-family: 'WOFF IRANSansX-Bold'; src: url('fonts/woff/IRANSansX-Bold.woff'); }
@font-face { font-family: 'WOFF IRANSansX-ExtraBold'; src: url('fonts/woff/IRANSansX-ExtraBold.woff'); }
@font-face { font-family: 'WOFF IRANSansX-Black'; src: url('fonts/woff/IRANSansX-Black.woff'); }
@font-face { font-family: 'WOFF IRANSansX-ExtraBlack'; src: url('fonts/woff/IRANSansX-ExtraBlack.woff'); }
@font-face { font-family: 'WOFF IRANSansX-Heavy'; src: url('fonts/woff/IRANSansX-Heavy.woff'); }
@font-face { font-family: 'WOFF2 IRANSansX-Thin'; src: url('fonts/woff2/IRANSansX-Thin.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-UltraLight'; src: url('fonts/woff2/IRANSansX-UltraLight.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-Light'; src: url('fonts/woff2/IRANSansX-Light.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-Regular'; src: url('fonts/woff2/IRANSansX-Regular.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-Medium'; src: url('fonts/woff2/IRANSansX-Medium.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-DemiBold'; src: url('fonts/woff2/IRANSansX-DemiBold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-Bold'; src: url('fonts/woff2/IRANSansX-Bold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-ExtraBold'; src: url('fonts/woff2/IRANSansX-ExtraBold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-Black'; src: url('fonts/woff2/IRANSansX-Black.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-ExtraBlack'; src: url('fonts/woff2/IRANSansX-ExtraBlack.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansX-Heavy'; src: url('fonts/woff2/IRANSansX-Heavy.woff2'); }
body {
font-family: "WOFF IRANSansX-thin";
font-feature-settings: "kern" on, "liga" on, "calt" on;
-moz-font-feature-settings: "kern" on, "liga" on, "calt" on;
-webkit-font-feature-settings: "kern" on, "liga" on, "calt" on;
-ms-font-feature-settings: "kern" on, "liga" on, "calt" on;
-o-font-feature-settings: "kern" on, "liga" on, "calt" on;
}
p { padding: 5px; margin: 10px; }
.features {
font-size:x-small;
font:sans-serif;
}
.label{
font-family: sans-serif;
font-size: x-small;
color: grey;
}
span#p08 { font-size: 10pt; }
span#p09 { font-size: 11pt; }
span#p10 { font-size: 12pt; }
span#p11 { font-size: 13pt; }
span#p12 { font-size: 14pt; }
span#p13 { font-size: 15pt; }
span#p14 { font-size: 16pt; }
span#p15 { font-size: 17pt; }
span#p16 { font-size: 18pt; }
span#largeParagraph { font-size: 36pt; }
span#veryLargeParagraph { font-size: 72pt; }
</style>
<script type="text/javascript">
function updateParagraph() {
// update paragraph text based on user input:
var txt = document.getElementById('textInput');
var paragraphs = ['p08','p09','p10','p11','p12','p13','p14','p15','p16','largeParagraph','veryLargeParagraph'];
for (i = 0; i < paragraphs.length; i++) {
paragraphID = paragraphs[i];
var paragraph = document.getElementById(paragraphID);
paragraph.textContent = txt.value;
}
}
function updateFeatures() {
// update features based on user input:
// first, get feature on/off line:
var cssCode = "";
var codeLine = "";
var checkboxes = document.getElementsByClassName("otFeature")
for (i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
codeLine += '"'+checkbox.name+'" ';
codeLine += checkbox.checked ? 'on, ' : 'off, ';
if (checkbox.name=="kern") {
cssCode += "font-kerning: "
cssCode += checkbox.checked ? 'normal; ' : 'none; ';
} else if (checkbox.name=="liga") {
codeLine += '"clig" '
codeLine += checkbox.checked ? 'on, ' : 'off, ';
cssCode += "font-variant-ligatures: "
cssCode += checkbox.checked ? 'common-ligatures contextual; ' : 'no-common-ligatures no-contextual; ';
} else if (checkbox.name=="dlig") {
cssCode += "font-variant-ligatures: "
cssCode += checkbox.checked ? 'discretionary-ligatures; ' : 'no-discretionary-ligatures; ';
} else if (checkbox.name=="hlig") {
cssCode += "font-variant-ligatures: "
cssCode += checkbox.checked ? 'historical-ligatures; ' : 'no-historical-ligatures; ';
}
}
codeLine = codeLine.slice(0, -2)
// then, apply line for every browser:
var prefixes = ["","-moz-","-webkit-","-ms-","-o-",];
var suffix = "font-feature-settings: "
for (i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
cssCode += prefix
cssCode += suffix
cssCode += codeLine
cssCode += "; "
}
document.getElementById('fontTestBody').style.cssText = cssCode;
document.getElementById('featureLine').innerHTML = cssCode.replace(/;/g,";<br/>");
changeFont();
}
function changeFont() {
var selector = document.getElementById('fontFamilySelector');
var selected_index = selector.selectedIndex;
var selected_option_text = selector.options[selected_index].text;
document.getElementById('fontTestBody').style.fontFamily = selected_option_text;
}
function setDefaultText(defaultText) {
document.getElementById('textInput').value = decodeEntities(defaultText);
updateParagraph();
}
function setLat1() {
var lat1 = "abcdefghijklm nopqrstuvwxyz ABCDEFGHIJKLM NOPQRSTUVWXYZ &Agrave;&Aacute;&Acirc;&Atilde;&Auml;&Aring;&AElig;&Ccedil;&Egrave;&Eacute;&Ecirc;&Euml;&Igrave;&Iacute;&Icirc;&Iuml;&ETH;&Ntilde;&Ograve;&Oacute;&Ocirc;&Otilde;&Ouml;&Oslash;&OElig;&THORN;&Ugrave;&Uacute;&Ucirc;&Uuml;&Yacute;&Yuml; &agrave;&aacute;&acirc;&atilde;&auml;&aring;&aelig;&ccedil;&egrave;&eacute;&ecirc;&euml;&igrave;&iacute;&icirc;&iuml;&eth;&ntilde;&ograve;&oacute;&ocirc;&otilde;&ouml;&oslash;&oelig;&thorn;&szlig;&ugrave;&uacute;&ucirc;&uuml;&yacute;&yuml; .,:;&middot;&hellip;&iquest;?&iexcl;!&laquo;&raquo;&lsaquo;&rsaquo; /|&brvbar;\()[]{}_-&ndash;&mdash;&sbquo;&bdquo;&lsquo;&rsquo;&ldquo;&rdquo;&quot;&#x27; #&amp;&sect;@&bull;&shy;*&dagger;&Dagger;&para; +&times;&divide;&plusmn;=&lt;&gt;&not;&mu; ^~&acute;`&circ;&macr;&tilde;&uml;&cedil; &yen;&euro;&pound;$&cent;&curren;&fnof; &trade;&reg;&copy; 1234567890 &ordf;&ordm;&deg;%&permil; &sup1;&sup2;&sup3;&frac14;&frac12;&frac34;";
return setDefaultText(lat1);
}
function setCharset() {
var completeCharSet = "&#x0041; &#x0042; &#x0043; &#x0044; &#x0045; &#x0046; &#x0047; &#x0048; &#x0049; &#x004A; &#x004B; &#x004C; &#x004D; &#x004E; &#x004F; &#x0050; &#x0051; &#x0052; &#x0053; &#x0054; &#x0055; &#x0056; &#x0057; &#x0058; &#x0059; &#x005A; &#x0061; &#x0062; &#x0063; &#x0064; &#x0065; &#x0066; &#x0067; &#x0068; &#x0069; &#x006A; &#x006B; &#x006C; &#x006D; &#x006E; &#x006F; &#x0070; &#x0071; &#x0072; &#x0073; &#x0074; &#x0075; &#x0076; &#x0077; &#x0078; &#x0079; &#x007A; &#x0621; &#x0627; &#xFE8E; &#x0623; &#xFE84; &#x0625; &#xFE88; &#x0622; &#xFE82; &#x0671; &#xFB51; &#x066E; &#x0628; &#xFE90; &#xFE92; &#xFE91; &#x067E; &#xFB57; &#xFB59; &#xFB58; &#x062A; &#xFE96; &#xFE98; &#xFE97; &#x062B; &#xFE9A; &#xFE9C; &#xFE9B; &#x062C; &#xFE9E; &#xFEA0; &#xFE9F; &#x0686; &#xFB7B; &#xFB7D; &#xFB7C; &#x062D; &#xFEA2; &#xFEA4; &#xFEA3; &#x062E; &#xFEA6; &#xFEA8; &#xFEA7; &#x062F; &#xFEAA; &#x0630; &#xFEAC; &#x0631; &#xFEAE; &#x0632; &#xFEB0; &#x0698; &#xFB8B; &#x0633; &#xFEB2; &#xFEB4; &#xFEB3; &#x0634; &#xFEB6; &#xFEB8; &#xFEB7; &#x0635; &#xFEBA; &#xFEBC; &#xFEBB; &#x0636; &#xFEBE; &#xFEC0; &#xFEBF; &#x0637; &#xFEC2; &#xFEC4; &#xFEC3; &#x0638; &#xFEC6; &#xFEC8; &#xFEC7; &#x0639; &#xFECA; &#xFECC; &#xFECB; &#x063A; &#xFECE; &#xFED0; &#xFECF; &#x0641; &#xFED2; &#xFED4; &#xFED3; &#x06A4; &#xFB6B; &#xFB6D; &#xFB6C; &#x06A1; &#x066F; &#x0642; &#xFED6; &#xFED8; &#xFED7; &#x0643; &#xFEDA; &#xFEDC; &#xFEDB; &#x06A9; &#xFB8F; &#xFB91; &#xFB90; &#x06AF; &#xFB93; &#xFB95; &#xFB94; &#x0644; &#xFEDE; &#xFEE0; &#xFEDF; &#x0645; &#xFEE2; &#xFEE4; &#xFEE3; &#x0646; &#xFEE6; &#xFEE8; &#xFEE7; &#x06BA; &#xFB9F; &#x0647; &#xFEEA; &#xFEEC; &#xFEEB; &#x06C0; &#xFBA4; &#xFBA5; &#x0629; &#xFE94; &#x0648; &#xFEEE; &#x0624; &#xFE86; &#x0649; &#xFEF0; &#x064A; &#xFEF2; &#xFEF4; &#xFEF3; &#x0626; &#xFE8A; &#xFE8C; &#xFE8B; &#x06CC; &#xFBFD; &#xFBFF; &#xFBFE; &#x0640; &#xFEFB; &#xFEFC; &#xFEF7; &#xFEF8; &#xFEF9; &#xFEFA; &#xFEF5; &#xFEF6; &#xFDF2; &#x0030; &#x0031; &#x0032; &#x0033; &#x0034; &#x0035; &#x0036; &#x0037; &#x0038; &#x0039; &#x066B; &#x066C; &#x0660; &#x0661; &#x0662; &#x0663; &#x0664; &#x0665; &#x0666; &#x0667; &#x0668; &#x0669; &#x06F0; &#x06F1; &#x06F2; &#x06F3; &#x06F4; &#x06F5; &#x06F6; &#x06F7; &#x06F8; &#x06F9; &#x002E; &#x002C; &#x003A; &#x003B; &#x0021; &#x003F; &#x002A; &#x0023; &#x002F; &#x005C; &#x0028; &#x0029; &#x007B; &#x007D; &#x005B; &#x005D; &#x002D; &#x005F; &#x201E; &#x201C; &#x201D; &#x2018; &#x2019; &#x00AB; &#x00BB; &#x2039; &#x203A; &#x0022; &#x0027; &#x060C; &#x061B; &#x061F; &#x066D; &#xFD3E; &#xFD3F; &#x200A; &#x0020; &#x00A0; &#x2009; &#x200B; &#x200D; &#x200C; &#x000D; &#xFEFF; &#xFDFC; &#x0024; &#x002B; &#x2212; &#x00D7; &#x00F7; &#x003D; &#x2260; &#x0025; &#x0040; &#x0026; &#x066A; &#xFBB2; &#xFBB3; &#xFBB4; &#xFBB5; &#xFBB9; &#xFBB6; &#x0670; &#x0656; &#x0654; &#x0655; &#x064B; &#x064C; &#x064D; &#x064E; &#x064F; &#x0650; &#x0651; &#x0652; &#x0653;";
setDefaultText(completeCharSet);
}
function decodeEntities(string){
var elem = document.createElement('div');
elem.innerHTML = string;
return elem.textContent;
}
</script>
</head>
<body id="fontTestBody">
<select size="1" id="fontFamilySelector" name="fontFamilySelector" onchange="changeFont()">
<option value="IRANSansX-thin.woff">WOFF IRANSansX-thin</option>
<option value="IRANSansX-UltraLight.woff">WOFF IRANSansX-UltraLight</option>
<option value="IRANSansX-light.woff">WOFF IRANSansX-light</option>
<option value="IRANSansX-regular.woff">WOFF IRANSansX-regular</option>
<option value="IRANSansX-medium.woff">WOFF IRANSansX-medium</option>
<option value="IRANSansX-demibold.woff">WOFF IRANSansX-demibold</option>
<option value="IRANSansX-bold.woff">WOFF IRANSansX-bold</option>
<option value="IRANSansX-extrabold.woff">WOFF IRANSansX-extrabold</option>
<option value="IRANSansX-black.woff">WOFF IRANSansX-black</option>
<option value="IRANSansX-extrablack.woff">WOFF IRANSansX-extrablack</option>
<option value="IRANSansX-heavy.woff">WOFF IRANSansX-heavy</option>
<option value="IRANSansX-thin.woff2">WOFF2 IRANSansX-thin</option>
<option value="IRANSansX-UltraLight.woff2">WOFF2 IRANSansX-UltraLight</option>
<option value="IRANSansX-light.woff2">WOFF2 IRANSansX-light</option>
<option value="IRANSansX-regular.woff2">WOFF2 IRANSansX-regular</option>
<option value="IRANSansX-medium.woff2">WOFF2 IRANSansX-medium</option>
<option value="IRANSansX-demibold.woff2">WOFF2 IRANSansX-demibold</option>
<option value="IRANSansX-bold.woff2">WOFF2 IRANSansX-bold</option>
<option value="IRANSansX-extrabold.woff2">WOFF2 IRANSansX-extrabold</option>
<option value="IRANSansX-black.woff2">WOFF2 IRANSansX-black</option>
<option value="IRANSansX-extrablack.woff2">WOFF2 IRANSansX-extrablack</option>
<option value="IRANSansX-heavy.woff2">WOFF2 IRANSansX-heavy</option>
</select>
<input type="text" value="Type Text Here." id="textInput" onclick="this.select();" onkeyup="updateParagraph()" size="80" />
<p class="features">
<a href="javascript:setCharset();">Charset</a>
&emsp;
</p>
<p class="features" id="featureLine" style="display:none;">font-feature-settings: "kern" on, "liga" on, "calt" on;</p>
<p><span class="label">10</span> <span id="p08">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">11</span> <span id="p09">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">12</span> <span id="p10">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">13</span> <span id="p11">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">14</span> <span id="p12">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">15</span> <span id="p13">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">16</span> <span id="p14">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">17</span> <span id="p15">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span class="label">18</span> <span id="p16">
چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span id="largeParagraph">چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
<p><span id="veryLargeParagraph">چو ایران نَباشَد تَنِ مَن مَباد
بِدين بوم و بَر زنده يِک تَن مَباد
</span></p>
</body>

@ -6,8 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type="module" src="/tailwind.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body class="body">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>

@ -1,5 +1,6 @@
{
"compilerOptions": {
"jsx": "react",
"baseUrl": "./",
"paths": {
"~/*": ["src/*"],

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 974 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 695 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 545 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

File diff suppressed because it is too large Load Diff

@ -0,0 +1,14 @@
import React from "react";
const StatisticsCard = () => {
return (
<div>
<div className="bg-[white] w-40 h-36 m-auto mt-2 rounded-2xl text-center">
<img src="public/images/alarm-clock.png" loading="lazy" className="m-auto"></img>
<p className="pt-5">زمان تقریبی</p>
<p>20 دقیقه</p>
</div>
</div>
);
};
export default StatisticsCard;

@ -0,0 +1,12 @@
import React from "react";
const Boy = ()=>{
return(
<div className="bg-[white] w-32 h-36 m-auto rounded-lg text-center">
<img src="public/images/boy.jpg" loading="lazy" className="m-auto rounded-full"></img>
<p className="pt-2 text-xs">صدرا ساداتی</p>
<p className="text-xs pt-2 text-yellow-400">ENTJ</p>
<button className="bg-[green] h-6 w-20 rounded-md"><p className="text-green-500"></p></button>
</div>
)
};
export default Boy;

@ -0,0 +1,18 @@
import React from "react";
const BOY = ()=>{
return(
<div className="bg-[white] w-52 h-40 rounded-xl m-auto">
<img src="public/images/boy2.jpg" loading="lazy" className="float-right rounded-full pt-4 pr-4"></img>
<p className="text-xs text-center pt-6 pl-28">رضا فکور</p>
<p className="text-xs text-black pt-4 max-w-30 pl-24 pr-5">خیلی عالی بود</p>
<div className="pl-4">
<img src="public/images/goldStar.png" loading="lazy" className="pt-8 float-left"></img>
<img src="public/images/goldStar.png" loading="lazy" className="pt-8 float-left"></img>
<img src="public/images/goldStar.png" loading="lazy" className="pt-8 float-left"></img>
<img src="public/images/goldStar.png" loading="lazy" className="pt-8 float-left"></img>
<img src="public/images/goldStar.png" loading="lazy" className="pt-8 float-left"></img>
</div>
</div>
)
}
export default BOY

@ -0,0 +1,10 @@
import React from "react";
const Calender = ()=>{
return(
<div className="bg-[white] w-48 h-9 m-auto rounded-lg">
<img src="public/images/calender.png" loading="lazy" className="float-right pt-1 pr-5"></img>
<p className="float-left pt-1 pl-5">1403/5/2</p>
</div>
)
}
export default Calender

@ -0,0 +1,12 @@
import React from "react";
const Chat = () => {
return (
<div>
<div className="mt-2 bg-[white] rounded-xl w-32 m-auto">
<img src="public/images/chat.png" loading="lazy" className="m-auto"></img>
</div>
</div>
);
}
export default Chat;

@ -0,0 +1,14 @@
import React from "react";
const Coin = () => {
return (
<div>
<div className="mt-2 text-center bg-[white] h-32 w-28 m-auto rounded-2xl">
<img src="public/images/coin.png" loading="lazy" className="m-auto"></img>
<p className="pt-5">امتیاز</p>
<p className="pt5">409.5</p>
</div>
</div>
);
}
export default Coin;

@ -0,0 +1,11 @@
import React from "react";
const Endexam = ()=>{
return(
<div className="text-center">
<div style={{backgroundImage:'url(public/images/endExam.jpg)',backgroundRepeat:'no-repeat'}} className="w-96 h-20px m-auto rounded-2xl">
<button className="mt-60 bg-[blue] text-[white] rounded-md">بریم مرحله بعد</button>
</div>
</div>
)
}
export default Endexam;

@ -0,0 +1,13 @@
import React from "react";
const Entezar = ()=>{
return(
<div className="bg-[white] w-32 h-40 rounded-lg m-auto text-center">
<img src="public/images/entezar.jpg" loading="lazy" className="rounded-full m-auto"></img>
<p className="m-auto pt-1">کتاب انتظار</p>
<img src="public/images/smallcoin.png" loading="lazy" className="pr-7 float-right pt-3"></img>
<p className="flout-left text-yellow-400 text-xs pl-5 pt-3">522 امتیاز</p>
<button className="bg-[green] max-h-8 mt-2 rounded-md"><span className="text-sm text-[white]">دریافت</span></button>
</div>
)
}
export default Entezar

@ -0,0 +1,13 @@
import React from "react";
const Game = () => {
return (
<div className="rounded-2xl w-[300px] overflow-hidden">
<div className="bg-[url('public/images/game.png')] bg-cover bg-center bg-no-repeat">
<p className="pt-96 text-[white] text-xs pb-3 mr-32">یه بازی معمایی پر چالشه دوست داری</p>
<p className="text-[white] text-xs pb-3 mr-32">دوست داری ذهنت به چالش بکشی</p>
</div>
</div>
);
}
export default Game;

@ -0,0 +1,17 @@
const Neo = () => {
return (
<div className="text-center bg-[white] rounded-xl">
<div>
<img src="public/images/neo.png" alt="آزمون نئو" loading="lazy" className="m-auto"/>
</div>
<p>سامانه جامع آزمون نئو</p>
<div className="font-xl mt-2">
<p>میتوانید اطلاعات(NEO)در سامانه جامع آزمون نئو</p>
<p>کاملی در مورد ویژگی های شخصیت 5 گانه یعنی</p>
<button className="mt-4">مشاهده مطلب</button>
</div>
</div>
);
}
export default Neo;

@ -0,0 +1,12 @@
import React from "react";
const Person = ()=>{
return(
<div>
<div className="bg-[white] w-64 h-9 m-auto rounded-lg">
<img src="public/images/personTest.png" loading="lazy" className="float-right pt-1 pr-5"></img>
<p className="float-left pt-1 pl-5">تست های شخصیت شناسی</p>
</div>
</div>
);
}
export default Person;

@ -0,0 +1,13 @@
import React from "react";
const Resaneh = ()=>{
return(
<div className="bg-[white] w-80 h-16 m-auto rounded-xl">
<img src="public/images/Resaneh.jpg" loading="lazy" className="float-right rounded-full pt-1"></img>
<p className="float-left text-base pl-32 pt-1">گروه رسانه ای نوبین</p>
<p className="text-xs float-end pt-2 text-slate-400 pr-5">انواع المان های بصری چیه؟</p>
<p className="float-left pl-3 pt-1" style={{marginTop:'-30px'}}>6:03</p>
<p className="bg-[blue] float-left rounded-full ml-4 pl-2 pr-2 text-white mt-1">4</p>
</div>
)
}
export default Resaneh

@ -0,0 +1,12 @@
import React from "react";
const Sword = () => {
return (
<div className="bg-blue-400 w-36 h-60 m-auto rounded-3xl bg-[blue] text-center">
<p className="text-white pt-4">بازی قلمرو ها</p>
<img src="public/images/sword.png" loading="lazy" className="m-auto mt-6 rounded-full p-3 border-8 border-[orange] " ></img>
<p className="text-white pt-4">4 ساعت</p>
</div>
);
}
export default Sword;

@ -0,0 +1,19 @@
import React from "react";
const TestCard = () => {
return (
<div className="bg-[white] rounded-2xl mb-5 text-center">
<div className="ml-200">
<img src="public/images/okaner.png" alt="اوکانر تست" loading="lazy" className="m-auto"></img>
</div>
<p className="mt-5">تست استعداد یابی اوکانر</p>
<div className="mr-5 ml-5 mt-2">
<p>در زمینه استعداد یابی افرادی همچون جانسون اوکانر , جان هالند و هوارد</p>
<p>گاردنر بسیار تاثیر گذار بودند. تفکر و استراژی جانسون اوکانر به این</p>
<p>این صورت بود که علاوه بر شناخت استعداد و توانایی ها مورد بررسی</p>
<p>قرار می داد</p>
<button className="mt-4">نمایش همه</button>
</div>
</div>
);
};
export default TestCard;

@ -7,7 +7,6 @@
font-weight: 400;
background-image: linear-gradient(to right, var(--tw-gradient-stops)); color:white
}
/* a {
font-weight: 500;
color: #646cff;

@ -1,21 +1,54 @@
import Button from "~/components/Button"
function Landing() {
import Boy from "~/components/boy";
import BOY from "~/components/boy2";
import Calender from "~/components/calender";
import Chat from "~/components/chat";
import Coin from "~/components/coin";
import Endexam from "~/components/endExam";
import Entezar from "~/components/entezar";
import Game from "~/components/game";
import Neo from "~/components/neo";
import Person from "~/components/person";
import Resaneh from "~/components/resaneh";
import StatisticsCard from "~/components/StatisticsCard";
import Sword from "~/components/sword";
import TestCard from "~/components/test";
function App() {
return (
<div className='flex flex-col items-center w-full '>
<div className="flex items-center justify-center mb-6">
<img src="/images/logo.png" alt="flower" className="w-[250px] "/>
</div>
<div className="flex items-center justify-center">
<p className="font-4 rtl w-[500px] h-[150px] text-md text-gray-400">سلام و عرض ارادت !
<>
<div className="flex flex-col gap-2 items-center">
<TestCard></TestCard>
<Neo></Neo>
این پرسشنامه شامل فرم مشخصات عمومی و ارزشیابی شخصی شما از مهارت ها و شامل 32 سوال فنی است و حدود 45 دقیقه ممکن است نیاز به زمان داشته باشد<br/>.
پیشاپیش از وقتی که میگذارید صمیمانه سپاسگزاریم و آرزوی بهترین ها را برای شما داریم .<br/>
بنا بر این اگر آماده یک چالش کوچک هستید </p>
<StatisticsCard></StatisticsCard>
<Coin></Coin>
<Chat></Chat>
<Game></Game>
<Sword></Sword>
<Person></Person>
<Endexam></Endexam>
<Calender></Calender>
<Entezar></Entezar>
<Boy></Boy>
<BOY></BOY>
<Resaneh></Resaneh>
</div>
<Button text="بیا شروع کنیم" className="px-4" primary/>
</div>
)
</>
);
}
export default Landing
export default App;

@ -0,0 +1,7 @@
@font-face {
font-family:IRANSansX ;
src: url(Webfonts/fonts/woff/IRANSansX-Light.woff);
}
.body{
font-family: IRANSansX ;
}
Loading…
Cancel
Save