Modal
မှောင်မိုက်နေသော ဆာဗာအခန်းရှိ ဖော့စဖောရက်စ် တာမီနယ်တစ်ခု - တစ်ခုတည်းသော အလင်းရောင်ရင်းမြစ်မှာ တောက်ပသော အစိမ်းရောင်ဖြစ်သည်
မှောင်မိုက်နေသော server အခန်းတွင် ဖော့စဖရပ်စ် terminal ကဲ့သို့ လုပ်ဆောင်ချက်များရှိသည်- အနက်ရောင်နီးပါးရှိသော ပတ္တူ၊ ဖျော့ဖျော့အစိမ်းရောင်အမျိုးအစားနှင့် LED အခြေအနေညွှန်ပြချက်အဖြစ် လုပ်ဆောင်သော တောက်ပသော ထုံးစိမ်းရောင်တစ်ခုတည်း။ ဒီဇိုင်းဘာသာစကားသည် developer-focused ဖြစ်သည်- ယာဉ်ကြောမီးပွိုင့်အစက်များပါသည့် monospaced code windows၊ signature green ဖြင့် isometric 3D icon များနှင့် အဖြူရောင်နေရာများစွာရှိသောကြောင့် အပိုင်းတစ်ခုစီတွင် element တစ်ခုကို လင်းစေသည်။ Typography ကို heading အတွက် custom font (Goga) နှင့် UI element အားလုံးအတွက် variable font (Inter) ဟူ၍ ပိုင်းခြားထားပြီး နှစ်ခုစလုံးသည် ကျဉ်းမြောင်းသော negative tracking ဖြင့် သတ်မှတ်ထားသည်။ အရောင်များကို ညီညာစွာ ဖြန့်ဝေထားသည်- မျက်နှာပြင်အများစုသည် achromatic ဖြစ်ပြီး တောက်ပသော ထုံးစိမ်းရောင်သည် key action များ၊ logo၊ 3D illustration များနှင့် အလေးပေးဖော်ပြသည့် အခိုက်အတန့်များတွင်သာ ပေါ်လာသည်။ components များသည် ပြားချပ်ချပ်နှင့် frameless ဖြစ်ပြီး အရိပ်များအစား သိမ်မွေ့သော အစိမ်းရောင်ဘောင်များနှင့် နောက်ခံ blur မှတစ်ဆင့် အနက်ကို ဖန်တီးထားသည်။
modal သည် အကြောင်းအရာနှင့် လိုက်လျောညီထွေဖြစ်စေရန် အများဆုံး 1280px အကျယ်ရှိသော full-width dark layout ကို အသုံးပြုသည်။ hero window ကို အလယ်ဗဟိုတွင် ထားရှိသည်- ခေါင်းစဉ် (lime green ဖြင့် ပထမဆုံးစာကြောင်း)၊ subheading တစ်ခု၊ call to action နှစ်ခုနှင့် single 3D object တစ်ခုကို sidebar မှ layout ကို မခွဲဘဲ visual anchor အဖြစ် ထားရှိသည်။ အကြောင်းအရာကဏ္ဍများသည် စည်းချက်ညီညီဖြင့် လိုက်နာသည်- eyebrow tag (စာလုံးကြီးများ၊ Moss 70) → Goga title → muted body text၊ ထို့နောက် feature description (text + code/visual card) ပါသော column နှစ်ခုပါ layout သို့မဟုတ် column သုံးခုပါ ကတ် grid။ ကဏ္ဍများကြားရှိ gutters များသည် ကျယ်ဝန်းသည်—80px။ စာမျက်နှာသည် နက်ရှိုင်းသော ဗလာ (#000000) နှင့် အနည်းငယ်ပေါ့ပါးသော background (#181818) stripes များကြားတွင် အလှည့်ကျပြောင်းလဲနေပြီး၊ စာမျက်နှာ၏အလယ်တွင် ပေါ့ပါးသော section တစ်ခု (#def0dd) ပေါ်လာပြီး visual breakout အဖြစ် ပေါ်လာသည်။ navigation တွင် နောက်ခံမှုန်ဝါးနေသော fixed top bar တစ်ခုပါဝင်ပြီး sidebar သို့မဟုတ် mega-menu မရှိပါ။ footer သည် ကျစ်လစ်ပြီး မှောင်မိုက်ပြီး muted green link columns များပါရှိသည်။ စာသားသိပ်သည်းဆက အဆင်ပြေပါတယ်- အပိုင်းတစ်ခုစီကို လုံလောက်တဲ့နေရာပေးထားပြီး၊ ကတ်ဇယားကွက်တွေက ကော်လံသုံးခုထက် ပိုမသုံးပါဘူး။
Modal ရဲ့ visual language ကို mode နှစ်ခုခွဲထားပါတယ်- 3D glowing product render တွေနဲ့ dark code window mockup တွေပါ။ အဓိကအချက်ကတော့ marketing gradient (lime green ကနေ emerald အထိ) ကို အသုံးပြုပြီး render လုပ်ထားတဲ့ single 3D cube တစ်ခုဖြစ်ပြီး brand ရဲ့ signature visual style ဖြစ်တဲ့ အစိမ်းရောင်အလင်းနဲ့ ဖုံးအုပ်ထားတဲ့ radial gradient halo အတွင်းမှာ တည်ရှိပါတယ်။ Workload card တွေမှာ isometric 3D icon တွေ (wireframe cube၊ solid staircase၊ layer တွေ) ကို မှောင်မိုက်တဲ့နောက်ခံမှာ lime green နဲ့ render လုပ်ထားပါတယ်။ Code နဲ့ benchmark ရလဒ်တွေကို traffic light dots တွေ၊ phosphorescent palette မှာ monospaced syntax highlighting နဲ့ muted green border တွေပါတဲ့ terminal window card တွေအဖြစ် တင်ပြထားပါတယ်- သူတို့က command-line interface ရဲ့ screenshot တွေနဲ့ ဆင်တူပါတယ်။ Client logo တွေကို desaturated green-grey label တွေအနေနဲ့ single, low-contrast row တစ်ခုမှာ ပြသထားပြီး visual competition မရှိဘဲ ယုံကြည်မှုကို ပြသပေးပါတယ်။ overall density ကတော့ နည်းပါတယ်- page အများစုမှာ text တွေ အဓိကပါဝင်ပြီး image တွေကို ဓာတ်ပုံ grid တွေအစား individual focal point တွေအဖြစ် တင်ပြထားပါတယ်။ ဓာတ်ပုံတွေ မရှိပါဘူး။ visual system တစ်ခုလုံးကို render လုပ်ထားပြီး geometric နဲ့ radiant ဖြစ်ပါတယ်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Lime Pulse
#7fee64— ကော်ပိုရိတ်အမှတ်အသား၏ အဓိကအစိတ်အပိုင်းများမှာ လိုဂို၊ အဓိကလုပ်ဆောင်ချက်တောင်းဆိုမှု (CTA)၊ tag ဖြည့်ခြင်း၊ တက်ကြွသောအခြေအနေများနှင့် ပုံဥပမာ၏ အခြေခံအရောင်တို့ဖြစ်သည်။
ကြားနေ
- Phosphor White
#ddffdc— အဓိကစာသား၊ ခေါင်းစဉ်အရောင်၊ အိုင်ကွန်အပြင်အဆင်နှင့် ဖြည့်ထားသော ခလုတ်စာသားတို့သည် ဖတ်နိုင်သော အဓိကမျက်နှာပြင်ဖြစ်သည်။ - Void Black
#000000— စာမျက်နှာကင်းဗတ်စ်၊ အနက်ရှိုင်းဆုံးနောက်ခံအလွှာ - Ground Iron
#181818— အဓိကခလုတ်ဖြည့်ခြင်း၊ မှောင်နေသောနေရာများရှိ ကတ်မျက်နှာပြင်များ၊ အသုံးပြုသူမျက်နှာပြင်၏ အခြေခံမျက်နှာပြင်။ - Carbon Veil
#212525— မြင့်မားသော မျက်နှာပြင်များ၊ လမ်းကြောင်းပြ နောက်ခံ၊ မြေပြင်ထက် အနည်းငယ် ပေါ့ပါးသည်။ - Circuit Border
#485346— အပြန်အလှန် တုံ့ပြန်နိုင်သော အဓိက ပါးလွှာသော မျဉ်းဖြစ်သည့် outline/ghost action frame သည် အစိမ်းရောင်ဖျော့ဖျော့ အရောင်ဖျော့ဖြစ်သည်။ - Phosphor Blue-Black
#1f2a33— မျဉ်းကြောင်းများကို မှောင်သောအစင်းများကြားတွင် ပိုင်းခြားထားသော ဒုတိယပါးလွှာသော အမှတ်အသားမျဉ်းများ။
စာလုံးပုံစံ
၁၂ မှ ၆၄ ပစ်ဇယ်အထိ · အဆင့် ၈ ဆင့်
- Goga — အစားထိုးခြင်း: Inter Tight or Space Grotesk · မျဉ်းကြောင်းများ 400, 500 · ခေါင်းစဉ်နှင့် ခေါင်းစဉ်ခွဲဖောင့် – H1–H4 ခေါင်းစဉ်များနှင့် ကတ်အားလုံးအတွက် အသုံးပြုသည်။ Goga သည် ကျဉ်းမြောင်းသော အပေါက်များနှင့် အနည်းငယ်လေးထောင့်ကျသော terminal များပါရှိသော custom geometric sans-serif ဖောင့်တစ်ခုဖြစ်သည်။ အလတ်စားအလေးချိန် (500) ကို ကတ်အဆင့်ခေါင်းစဉ်များကို မီးမောင်းထိုးပြရန်အတွက် သီးသန့်ထားရှိပြီး ပုံမှန်အလေးချိန် (400) ကို hero နှင့် section ခေါင်းစဉ်များအတွက် အသုံးပြုသည်။ Modal ၏ identity ကို သတ်မှတ်ပေးသော အခြား glyph ပုံသဏ္ဍာန်များကို ဝင်ရောက်ကြည့်ရှုရန်အတွက် ၎င်း၏ 'ss01' stylelic set ကို enable လုပ်ရမည်။ negative letter spacing သည် 48px တွင် -0.007em မှ 21px တွင် -0.017em အထိ တဖြည်းဖြည်း လျော့ကျသွားသည်။
- Inter Variable — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500 · အသုံးပြုသူမျက်နှာပြင်နှင့် ကိုယ်ထည်မိတ္တူ – လမ်းညွှန်၊ ခလုတ်များ၊ ကိုယ်ထည်မိတ္တူ၊ အညွှန်းများ၊ အောက်ခြေ။ အပြန်အလှန်တုံ့ပြန်နိုင်သော အစိတ်အပိုင်းများနှင့် လမ်းညွှန်မှုအတွက် အလတ်စားအလေးချိန် (၅၀၀) ကို မူရင်းအားဖြင့် အသုံးပြုသည်။ ပုံမှန် (၄၀၀) ကို စာပိုဒ်များအတွက် အသုံးပြုသည်။ စာလုံးအကွာအဝေးကို အရွယ်အစားသေးငယ်သော်လည်း (၁၄px တွင် -၀.၀၂၆em၊ ၁၆px တွင် -၀.၀၂၂em) စာလုံးအကွာအဝေးကို သိသိသာသာလျှော့ချထားပြီး အင်တာဖေ့စ်ကို အကျဉ်းချုပ်ထားသော၊ terminal သိပ်သည်းဆပေးသည်။ အခြားပုဒ်ဖြတ်ပုဒ်ရပ်များအတွက် 'cv11' စာလုံးမျိုးကွဲကို ထည့်သွင်းသင့်သည်။ 12px ရှိ all-caps အညွှန်းများသည် ကိုယ်ထည်မိတ္တူသိပ်သည်းဆကို ချိန်ညှိရန် +၀.၀၅em စာလုံးအကွာအဝေးကို အသုံးပြုသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 20px |
| ခလုတ်အချင်းဝက် | 12px |
| ကတ်အချင်းဝက် | 8px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80px |
| စာမျက်နှာအကျယ် | 1280px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Modal ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Slash — ရွှေချထားသော စာရင်းဇယားများပါသည့် သန်းခေါင်ယံ သေတ္တာ
- AgentQL — ညအချိန်တွင် ဆိပ်ကမ်းပေါ်ရှိ မြောက်ပိုင်းအလင်းရောင်များ
- GitHub — ဇီဝအလင်းပြန်နိုင်သော ထိန်းချုပ်မှတ်များပါရှိသော အာကာသ အမိန့်ပေးခုံတစ်ခု—အစိမ်းရောင်အလင်းတစ်ခုတည်းက ရှေ့သို့လမ်းညွှန်ပြသည့် မှောင်မိုက်ပြီး လေထုဆန်သော အလုပ်ခွင်တစ်ခု။
- Doppler — သန်းခေါင်ယံအချိန်တွင် ಲೇಪನ್ಯಾನို၏ ခရမ်းရောင်မီးရောင်။ အနက်ရောင်နီးပါးရှိသော ပတ္တူသည် ခရမ်းရောင်အချက်ပြမှုတစ်ခုနှင့် အစိမ်းရောင်အတည်ပြုမီးရောင်ဖြင့် တောက်ပနေပြီး မျက်နှာပြင်တိုင်းသည် ဆုပ်ကိုင်နိုင်လောက်အောင် ကွေးညွှတ်နေသည်။
- Basedash — မှိန်ဖောင့်ပါသော သန်းခေါင်ယံဒေတာဂိတ်။ မက်ထရစ်များသည် ခရမ်းရောင်နှင့် အစိမ်းရောင်တောက်ပနေပြီး၊ serif ခေါင်းစဉ်များသည် ဆူညံသံများအထက်တွင် ပေါ်လွင်နေပြီး၊ နူးညံ့သောအနက်ရောင်မျက်နှာပြင်များရှိသော အခန်းထဲတွင် အဖြူရောင်ဆေးပြားပုံသဏ္ဍာန်ခလုတ်များသည်သာ တောက်ပသောအရာဝတ္ထုများဖြစ်သည့် မှောင်မိုက်သောနက္ခတ်တာရာကြည့်မျှော်စင်တစ်ခု။
- Superwhisper — မြောက်ပိုင်းအလင်းတန်းများသည် သန်းခေါင်ယံဖန်ခွက်ပေါ်တွင် ပျောက်ကွယ်သွားသည်
- Better Stack — သန်းခေါင်ယံ SRE ကွန်ဆိုးလ်
- Langbase — သန်းခေါင်ယံ မြောက်ပိုင်းအလင်းရောင် ကွန်ဆိုးလ်
- Astro — နက်ဗျူလာတစ်ခုမှ ခရမ်းရောင်တစ်ခုတည်းသော အလင်းရောင်ဖြင့် Deep Space Mission Control
- Wayfinder — တိုက်ရိုက်ရုပ်ပုံတစ်ခုပေါ်တွင် မကြားရသောခေါင်းစဉ်တစ်ခု ဝဲနေသည့် အနက်ရောင်ရုပ်ရှင်မျက်နှာပြင်။ အင်တာဖေ့စ်သည် ထိန်းချုပ်ခုံတစ်ခုမဟုတ်ဘဲ တောက်ပမှု ဆလိုက်ဒါတစ်ခုဖြစ်သည်။
- HashiCorp — ခရမ်းရောင်နီယွန်မီးများထွန်းထားသော သန်းခေါင်ယံအချိန် ထိန်းချုပ်ခန်းသည် မှောင်မိုက်သော နည်းပညာဆိုင်ရာ မျက်နှာပြင်တစ်ခုဖြစ်ပြီး တောက်ပနေသော ဆဋ္ဌဂံပုံ ကုဗတုံးသည် တစ်ခုတည်းသော အရောင်ရည်ညွှန်းချက်အဖြစ် ဆောင်ရွက်သည်။
- Umbrel — ညဘက်ဆာဗာအခန်းထဲက သက်တောင့်သက်သာရှိတဲ့ မီးလှောင်ကျင်းတစ်ခု—တကယ်အရေးကြီးတဲ့အရာကို မီးမောင်းထိုးပြနေတဲ့ မှောင်နေတဲ့အခန်း—မက်မွန်သီးရောင်အလင်းတန်းလေးတစ်ခု။