-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.html.heex
174 lines (169 loc) · 6.93 KB
/
page.html.heex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<.dm_page_header
class={[
"bg-gradient-to-br from-[#ff6f61] to-[#639]",
"aniamite-bg",
"text-slate-200 h-[680px] py-6"
]}
nav_class={["bg-gradient-to-br from-[#ff6f61] to-[#639] text-slate-200 shadow"]}
>
<:menu to={~p"/"} class="border-b-2 border-slate-50">Home</:menu>
<:menu to={~p"/hook"} class="opacity-60">Hook</:menu>
<:menu to={~p"/mdi"} class="opacity-60">MDI</:menu>
<:menu to={~p"/bsi"} class="opacity-60">BSI</:menu>
<:menu to={~p"/storybook"} class="opacity-60">Storybook</:menu>
<:user_profile>
<.link href={"https://github.com/gsmlg-dev/phoenix-duskmoon-ui"}>
<.dm_mdi name="github" class="w-12 h-12" />
</.link>
</:user_profile>
<h1 class={[
"text-center text-8xl font-bold text-slate-300 select-none",
"bg-clip-text bg-gradient-to-tl from-[#fac2b0] to-[#b4e3da]",
"darkmoon-hero-text"
]}>
Duskmoon UI
</h1>
<p class={[
"text-center text-4xl mx-auto my-8 select-none",
"darkmoon-hero-p-text"
]}>
Duskmoon UI for Phoenix Framework
</p>
<.link href="/#hook" class="my-4 px-6 py-2 text-2xl bg-rose-400 rounded-lg shadow-md hover:shadow-2xl">
Learn More
</.link>
</.dm_page_header>
<div class={[
"w-full py-32",
"flex flex-col",
"border-b-2 border-slate-300"
]}>
<a name="hook" />
<div class="container mx-auto flex flex-row justify-around">
<div class="flex flex-col justify-center">
<h3 class="font-bold text-4xl my-4">Component Mount Hook - <i class="text-rose-500">WebComponentHook</i></h3>
<p class="my-2 text-lg text-violet-500 ">
Binding custom element's custom events to phoenix live events.
</p>
<p class="my-2 text-lg text-violet-500 ">
Binding phoenix live events to custom element's custom action.
</p>
</div>
<div class="flex justify-center items-center">
<.dm_mdi name="webhook" class="w-72 h-72" />
</div>
</div>
</div>
<div class={[
"w-full",
"flex flex-col",
"border-b-2 border-slate-300"
]}>
<div class="container mx-auto flex flex-row justify-around">
<div class="w-full py-32 flex flex-col justify-center items-center border-r-2 border-slate-300 text-blue-500">
<h3 class="font-bold text-4xl my-4 flex flex-row gap-4 items-center">
<.dm_mdi name="material-design" class="w-12 h-12" />
Material Design Icons
</h3>
<p class="my-2 text-lg">
Includs 7000+ Material Design Commmunity Icons.
</p>
</div>
<div class="w-full py-32 flex flex-col justify-center items-center text-violet-900">
<h3 class="font-bold text-4xl my-4 flex flex-row gap-4 items-center">
<.dm_bsi name="bootstrap" class="w-12 h-12" />
Bootstrap Icons
</h3>
<p class="my-2 text-lg">
Includs 1900+ Bootstrap Icons.
</p>
</div>
</div>
</div>
<div class={[
"w-full py-32",
"flex flex-col"
]}>
<div class="container mx-auto flex flex-row justify-around">
<div class="w-full flex flex-col justify-center items-center">
<h3 class="font-bold text-6xl my-4 text-fuchsia-500">Components</h3>
<div class="my-4 flex flex-row gap-4 text-fuchsia-300">
<.link href="/storybook">Component Storybook</.link>
<div class="mx-12">|</div>
<.link href="https://hexdocs.pm/phoenix_duskmoon/">HEX Document</.link>
</div>
<div class="my-4 flex flex-col gap-8">
<.link class="flex flex-row items-center text-2xl text-blue-300 gap-4">
<.dm_mdi name={"page-layout-header"} class="w-4 h-4" />
PageHeader
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-300 gap-4">
<.dm_mdi name={"page-layout-footer"} class="w-4 h-4" />
PageFooter
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-300 gap-4">
<.dm_mdi name={"page-layout-header"} class="w-4 h-4" />
Appbar
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="actionbar" href="/storybook/components/actionbar">
<.dm_bsi name={"tools"} class="w-4 h-4" />
Actionbar
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="breadcrumb" href="/storybook/components/breadcrumb">
<.dm_bsi name={"segmented-nav"} class="w-4 h-4" />
Breadcrumb
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="card" href="/storybook/components/card">
<.dm_bsi name={"card-text"} class="w-4 h-4" />
Card
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="left_menu" href="/storybook/components/left_menu">
<.dm_bsi name={"layout-sidebar"} class="w-4 h-4" />
Left Menu
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="loading" href="/storybook/components/loading">
<.dm_mdi name={"loading"} class="w-4 h-4 animate-spin" />
Loading
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="markdown" href="/storybook/components/markdown">
<.dm_bsi name={"markdown"} class="w-4 h-4" />
Markdown
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="modal" href="/storybook/components/modal">
<.dm_bsi name={"chat-square"} class="w-4 h-4" />
Modal
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="pagination" href="/storybook/components/pagination">
<.dm_mdi name={"book-open-page-variant-outline"} class="w-4 h-4" />
Pagination
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="tab" href="/storybook/components/tab">
<.dm_mdi name={"tab"} class="w-4 h-4" />
Tab
</.link>
<.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="table" href="/storybook/components/table">
<.dm_mdi name={"table"} class="w-4 h-4" />
Table
</.link>
</div>
</div>
</div>
</div>
<.dm_page_footer
class={["bg-gradient-to-br from-cyan-500 to-blue-500 text-slate-100"]}
>
<:section title="Web Sites" body_class="text-slate-300">
<.link href="https://github.com/gsmlg-dev">Github Repos</.link>
<.link href="https://gsmlg.org/blogs">Blog</.link>
<.link href="https://gsmlg.org/tools">Tools</.link>
</:section>
<:section title="Other Libraries" body_class="text-slate-300">
<.link href="https://gsmlg-dev.github.io/yew-duskmoon-ui/">Yew Duskmoon UI</.link>
<.link href="https://gsmlg-dev.github.io/lit">Web Component</.link>
<.link href="https://gsmlg-dev.github.io/react">React Component</.link>
<.link href="https://gsmlg-dev.github.io/three-fiber">3D Component</.link>
</:section>
<:copyright title="Copyright - GSMLG.dev">
Made with ❤️ for building a better Web.
</:copyright>
</.dm_page_footer>