Authkit
វិហារកញ្ចក់សាយសត្វនៅពាក់កណ្តាលអធ្រាត្រ
AuthKit បង្កើតសោភ័ណភាពនៃការបង្ហាញផលិតផលនៅពេលយប់៖ ផ្ទាំងក្រណាត់ស្ទើរតែខ្មៅជាមួយនឹងផ្ទៃកញ្ចក់សាយសត្វ ក្រឡាចត្រង្គនៃបន្ទាត់ដែលមើលមិនឃើញ និងអក្សរភ្លឺដែលលេចឡើងបំភ្លឺដោយស្រទាប់កញ្ចក់។ ពុម្ពអក្សរស្ទើរតែទាំងស្រុងមានពណ៌សទល់នឹងផ្ទៃខាងក្រោយងងឹត ជាមួយនឹងការសង្កត់សំឡេងពណ៌ស្វាយភ្លឺតែមួយជាធាតុមុខងារតែមួយគត់ - ផ្ទៃអន្តរកម្មនីមួយៗមានបន្ទាត់ទន់ស្តើងនៃពណ៌ខៀវ-សត្រជាក់ជាជាងស៊ុមរឹង។ សមាសធាតុត្រូវបានរៀបចំនៅលើស្រទាប់ថ្លា ស្រទាប់លើពន្លឺព័ទ្ធជុំវិញ ហើយកាតលេចឡើងជាបន្ទះកញ្ចក់បំភ្លឺពីខាងក្រោម ជាជាងបន្ទះក្រដាស។ ចន្លោះមានទំហំធំ និងចង្វាក់។ ធាតុសំខាន់គឺជាឡូហ្គោបំភ្លឺតែមួយដែលលាតសន្ធឹងទទឹងទាំងមូលនៃទំព័រ ហ៊ុំព័ទ្ធដោយកាតកញ្ចក់អណ្តែត ជាជាងប្លង់អេក្រង់បំបែកបែបប្រពៃណី។
ផ្ទាំងក្រណាត់ពណ៌ខ្មៅទទឹងពេញ ដែលមានធុងមាតិកានៅចំកណ្តាល ទទឹងអតិបរមា 1200px។ ធាតុសំខាន់គឺជាឡូហ្គោតែមួយ នៅចំកណ្តាល និងមានពន្លឺ ("AuthKit" ជាពុម្ពអក្សរជម្រាល) នៅខាងក្រោមអត្ថបទរាងចិញ្ចើមតូចមួយ ដែលនៅពីក្រោយ/ខាងក្រោមមានកាតកញ្ចក់អណ្តែតទឹកចំនួនបី ដែលមានទម្រង់បែបបទចូល (កាតខាងឆ្វេងផ្អៀងទៅឆ្វេង កាតកណ្តាលពង្រីកអតិបរមា កាតខាងស្តាំផ្អៀងទៅស្តាំ)។ ប៊ូតុងបិទបើកស្បែកភ្លឺ/ងងឹតស្ថិតនៅចំកណ្តាលនៅក្រោមធាតុសំខាន់។ ជួរលក្ខណៈពិសេសគឺជាបន្ទាត់ពេលវេលាផ្ដេកនៃរូបតំណាងចំនួន 6 ដែលមានបន្ទាត់តភ្ជាប់ស្តើងរវាងរូបតំណាងរាងជារង្វង់។ ចង្វាក់នៃផ្នែក៖ ផ្នែកនីមួយៗចាប់ផ្តើមដោយអត្ថបទរាងចិញ្ចើមនៅចំកណ្តាល ដែលហ៊ុំព័ទ្ធដោយបន្ទាត់ផ្ដេករសាត់ បន្ទាប់មកដោយចំណងជើងធំនៅចំកណ្តាល (44-48px) បន្ទាប់មកដោយបន្ទាត់តែមួយនៃច្បាប់ចម្លងតួដែលបានបិទសំឡេង (16-18px) ទទឹងអតិបរមា ~640px។ ផ្នែកប្ដូរតាមបំណងបង្ហាញគំរូនៃបង្អួចកម្មវិធីរុករកដែលមានកាតចូលនៅចំកណ្តាល ហ៊ុំព័ទ្ធដោយបន្ទះត្រួតពិនិត្យ UI អណ្តែត (ក្ដារលាយពណ៌ គ្រាប់រំកិលកាំ ឧបករណ៍ជ្រើសរើសរូបតំណាងឡូហ្គោ វាលអត្ថបទប៊ូតុង វាលផ្ទៃខាងក្រោយទំព័រ) ដែលមានទីតាំងនៅជ្រុងនៃផ្ទាំងក្រណាត់ ដូចជាកន្លែងធ្វើការឧបករណ៍រចនា។
ការរចនាដែលមើលឃើញត្រូវបានគ្របដណ្ដប់ដោយគំរូទម្រង់ចូល ដែលបង្កើតឡើងក្នុងរចនាប័ទ្ម "រូបរាងកញ្ចក់" (វាលបញ្ចូលអ៊ីមែល/ពាក្យសម្ងាត់ ប៊ូតុងចូលប្រព័ន្ធផ្សព្វផ្សាយសង្គម ការបញ្ចូលលេខកូដដោយមិនចាំបាច់ប្រើពាក្យសម្ងាត់) ដែលបង្ហាញជាកាតអណ្តែត និងថ្លា ទល់នឹងផ្ទាំងក្រណាត់ពាក់កណ្តាលអធ្រាត្រ។ រូបតំណាងលក្ខណៈពិសេសគឺជាអក្សរលីនេអ៊ែរពណ៌តែមួយក្នុង #d1e4fa នៅក្នុងក្រឡាក្បឿងមូល និងម៉ាត់។ ក្រឡាចត្រង្គដ៏ស្រទន់ (បន្ទាត់ 1px ក្នុង rgba(186,215,247,0.06)) គ្របដណ្តប់ទំព័រទាំងមូល បង្កើតបរិយាកាស ខណៈពេលដែលពន្លឺពណ៌រាងកោណភ្លឺចែងចាំងនៅផ្នែកខាងលើនៃធាតុសំខាន់។ គ្មានរូបថត គ្មានរូបភាពរបៀបរស់នៅ គ្មានរូបថតអេក្រង់ផលិតផលទេ—ផលិតផលខ្លួនឯងគឺជាធាតុដែលមើលឃើញ៖ វាលចូលដែលរៀបចំដូចជាគំរូកញ្ចក់នៅក្នុងស្ទូឌីយោងងឹត។
ក្ដារលាយពណ៌
ម៉ាក
- Void Violet
#663af3— ពណ៌ចម្បងសម្រាប់ប៊ូតុងអំពាវនាវឱ្យធ្វើសកម្មភាព (CTA) គឺជាពណ៌សង្កត់សំឡេងតែមួយគត់ដែលប្រើសម្រាប់ប៊ូតុង "បន្ត/ដាក់ស្នើ" នៅក្នុងទម្រង់បែបបទចូល។ ពណ៌ស្វាយរស់រវើកប្រឆាំងនឹងផ្ទៃខាងក្រោយស្ទើរតែខ្មៅបង្កើតអារម្មណ៍បន្ទាន់ដោយមិនរំខានដល់គ្រោងការណ៍ពណ៌តែមួយ។
អព្យាក្រឹត
- Midnight Canvas
#05060f— ផ្ទៃខាងក្រោយទំព័រ ផ្ទៃជ្រៅបំផុតនៃកាត ការបំពេញផ្លាកសញ្ញា — មូលដ្ឋានស្ទើរតែខ្មៅ ដែលអ្វីៗផ្សេងទៀតអណ្តែតលើ។ - Steel Plate
#2f343e— ផ្ទៃខាងលើ ប៊ូតុងសកម្មភាព phantom/secondary ផ្ទៃខាងក្រោយបន្ទះសម្ងាត់។ - Fog Veil
#9da7ba— អត្ថបទសំខាន់ គឺអត្ថបទនៅលើកាត អាចអានបាន ប៉ុន្តែត្រូវបានបន្សល់ទុកនៅផ្ទៃខាងក្រោយបើប្រៀបធៀបទៅនឹងចំណងជើង។ - Moon Mist
#c7d3ea— អត្ថបទសំខាន់ ស្លាកបន្ថែម អត្ថបទជំនួយដែលបានបិទសំឡេង - Frost Glow
#d1e4fa— ពណ៌បំពេញចម្បងសម្រាប់អត្ថបទតួ និងតំណភ្ជាប់ អត្ថបទរូបតំណាង និងការបំពេញរូបតំណាង គឺជាផ្ទៃខាងមុខភ្លឺលំនាំដើម។ - Ice Highlight
#d8ecf8— អក្សរស្រាលៗលើផ្ទៃងងឹត ស្លាកដាក់បញ្ច្រាស និងចំណងជើងដែលមានកម្រិតពណ៌ខ្ពស់។ កុំប្រើវាជាពណ៌ចម្បងសម្រាប់ការអំពាវនាវឱ្យធ្វើសកម្មភាព; ជម្រាលចំណងជើង - ការផ្លាស់ប្តូររលូនពីពណ៌ខៀវខ្ចីទៅពណ៌ខៀវទន់ពីលើចុះក្រោម - ត្រូវបានប្រើនៅក្នុងឡូហ្គោ AuthKit និងចំណងជើងសំខាន់ៗ។
អក្សរសាស្ត្រ
ពី 12 ដល់ 48px · 8 ជំហាន
- Untitled Sans — ការជំនួស៖ Inter · គ្រោង 400, 500, 600, 700 · អត្ថបទសំខាន់ ចំណុចប្រទាក់អ្នកប្រើប្រាស់ ប៊ូតុង វាលបញ្ចូល រូបតំណាង ចំណងជើងតូចៗ - ពុម្ពអក្សរជាសកលសម្រាប់អ្វីៗគ្រប់យ៉ាងដែលមានមុខងារ។
- aeonikPro — ការជំនួស៖ Space Grotesk · គ្រោង 400, 500 · ការបង្ហាញតែចំណងជើង - ម៉ាកយីហោ AuthKit ចំណងជើងផ្នែក និងអត្ថបទ - ទម្ងន់ពុម្ពអក្សរ 500 ចំណុចនៅ 44-48px ផ្តល់ឱ្យម៉ាកយីហោនូវរូបរាងធំទូលាយ និងមិនសូវច្បាស់លាស់ ជាជាងការសង្កត់សំឡេងឆើតឆាយ។
- dotDigital — ការជំនួស៖ JetBrains Mono · គ្រោង 400 · អត្ថបទដែលមានអក្សរធំទាំងអស់ ("Introducing," "Expandable Design," "Shine Bright") - អត្ថបទដែលមានអក្សរធំទាំងអស់ដែលមានចន្លោះតែមួយដែលមានចន្លោះ 0.10em បម្រើជាសញ្ញាបំបែកដ៏ស្រទន់រវាងអត្ថបទដើម និងចំណងជើង។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | ទូលាយ |
| ជំហានមូលដ្ឋាន | 16px |
| កាំប៊ូតុង | 999px |
| កាំកាត | 16px |
| ស្រមោល | គ្មានព្រំដែនជំនួសឱ្យស្រមោល |
| រវាងផ្នែកនានា | 120px |
| ទទឹងទំព័រ | 1200px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Authkit ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- Resend — ក្រណាត់កាមេលខ្មៅជាមួយពណ៌ស្វាយណេអុង
- Gsap — ក្ដារខៀនពណ៌សដែលមានចលនានៅក្នុងស្ទូឌីយោរចនា។ ជញ្ជាំងស្ទើរតែខ្មៅ ដីសក្រែមក្តៅឧណ្ហៗ និងប៊ិចពណ៌ប្រាំ — មួយសម្រាប់មុខវិជ្ជាចលនានីមួយៗ។
- Slash — តុដេកពាក់កណ្តាលអធ្រាត្រជាមួយនឹងសៀវភៅកត់ត្រាមាស
- Raycast — មជ្ឈមណ្ឌលបញ្ជាការពាក់កណ្តាលអធ្រាត្រ កូរ៉ាល់ នីអន
- Dimension — ស្ថានីយការងារដែលមានពន្លឺថ្ងៃលិច ជាមួយនឹងបន្ទះកញ្ចក់សាយសត្វ
- Modal — ស្ថានីយបញ្ចេញពន្លឺហ្វ្លុយអូរ៉េសង់ក្នុងបន្ទប់ម៉ាស៊ីនបម្រើដែលងងឹត - ប្រភពពន្លឺតែមួយគត់គឺពណ៌បៃតងភ្លឺ
- Reflect Notes — លំហពណ៌ស្វាយពោរពេញដោយផ្កាយ គឺជាកន្លែងសង្កេតមើលផ្កាយដ៏ងងឹតមួយ ជាកន្លែងដែលកំណត់ចំណាំអណ្តែតដូចក្រុមតារា ទល់នឹងផ្ទៃខាងក្រោយនៃភាពទទេរពណ៌ខៀវខ្ចីស្ទើរតែខ្មៅ។
- LaunchDarkly — បន្ទប់ត្រួតពិនិត្យពន្លឺណេអុងគឺជាកាប៊ីនយន្តហោះងងឹតមួយ ដែលសញ្ញាពណ៌ស្វាយលោតឆ្លងកាត់បន្ទះពណ៌ខ្មៅរលោង។
- Ameba — បន្ទប់ត្រួតពិនិត្យនៅពាក់កណ្តាលអធ្រាត្រ - ជីពចរពណ៌ខៀវអគ្គិសនីនៅខាងក្នុងបន្ទះកញ្ចក់សាយសត្វ
- AgentQL — ពន្លឺភាគខាងជើងពីលើស្ថានីយនៅពេលយប់
- Neon — បន្ទប់ម៉ាស៊ីនបម្រើមួយបន្ទាប់ពីងងឹត។ ភាពងងឹតសុទ្ធសាធ ជាកន្លែងដែលពន្លឺតែមួយគត់មកពីទិន្នន័យ និងអន្តរកម្មរបស់អ្នកប្រើប្រាស់។
- N8n — ម៉ាស៊ីនលំហូរការងារនៅពាក់កណ្តាលអធ្រាត្រ - អារម្មណ៍នៃផ្ទាំងក្រណាត់ស្វ័យប្រវត្តិកម្មពេលវេលាជាក់ស្តែងនៅក្នុងបន្ទប់ម៉ាស៊ីនមេងងឹត បំភ្លឺដោយសូចនាករស្ថានភាព និងស្ទ្រីមទិន្នន័យ