-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
242 lines (215 loc) · 11.9 KB
/
index.html
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tailwind Page Builder</title>
<meta name="description"
content="Create fasty Landing pages with TailwindCSS. Dark Mode and customizer Config included." />
<link rel="icon" href="./img/favicon.ico" />
<script src="./js/lib/tailwind.js"></script>
<script src="./js/lib/lucide.min.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style type="text/tailwindcss">
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 142.1 76.2% 36.3%;
--primary-foreground: 355.7 100% 97.3%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border:240 5.9% 90%;
--input:240 5.9% 90%;
--ring:142.1 76.2% 36.3%;
--radius: 0.75rem;
}
.dark {
--background:20 14.3% 4.1%;
--foreground:0 0% 95%;
--card:24 9.8% 10%;
--card-foreground:0 0% 95%;
--popover:0 0% 9%;
--popover-foreground:0 0% 95%;
--primary:142.1 70.6% 45.3%;
--primary-foreground:144.9 80.4% 10%;
--secondary:240 3.7% 15.9%;
--secondary-foreground:0 0% 98%;
--muted:0 0% 15%;
--muted-foreground:240 5% 64.9%;
--accent:12 6.5% 15.1%;
--accent-foreground:0 0% 98%;
--destructive:0 62.8% 30.6%;
--destructive-foreground:0 85.7% 97.3%;
--border:240 3.7% 15.9%;
--input:240 3.7% 15.9%;
--ring:142.4 71.8% 29.2%;
}
}
</style>
</head>
<body class="font-sans bg-slate-50 text-slate-900 dark:bg-slate-900 dark:text-slate-100 transition-colors duration-200">
<nav
class="sticky top-0 w-full bg-neutral-50 dark:bg-slate-900 shadow-md z-20 border-b border-slate-300 dark:border-slate-700">
<div class="px-4">
<div class="flex items-center justify-between h-14">
<div class="flex items-center">
<img src="./img/tbuildy.svg" class="w-5 h-5 mr-1" />
<span class="font-semibold font-sans text-[#0ea5e8] leading-[1.25rem]">
Tailwind <span class="text-slate-800 dark:text-white">Build</span>Y
</span>
<div class="flex relative lg:absolute items-center lg:ml-[16rem] space-x-4">
<a href="/flow.html"
target="_blank"
rel="noopener noreferrer"
class="lg:inline-flex justify-center gap-x-1.5 rounded-[8px] bg-white dark:bg-slate-900 py-2 px-4 text-[.75em] text-slate-900 dark:text-white shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 hover:transform hover:scale-105 hover:shadow-md dark:hover:bg-slate-700 cursor-pointer transition-all duration-200 ml-4 md:ml-0"
title="Start Building Your Project">
Let's Go!
<i data-lucide="rocket" class="w-4 h-4 inline animate-pulse"></i>
</a>
<button id="createBlockBtn" class="hidden lg:inline-flex justify-center gap-x-1.5 rounded-[8px] bg-white dark:bg-slate-900 py-2 px-4 text-[.75em] text-slate-900 dark:text-white shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer" title="Create New Block">
New Block
<i data-lucide="plus" class="w-4 h-4 inline"></i></button>
<button id="fullscreenEditor" class="hidden gap-x-1.5 rounded-[8px] px-1 lg:px-4 py-2 text-[.75em] text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-700" title="Edit text content">Editor <i data-lucide="pencil" class="w-3 h-3 ms-1 inline"></i></button>
</div>
</div>
<div class="flex items-center space-x-4">
<button id="fullscreenButton"
class="hidden lg:block text-slate-600 hover:text-slate-800 dark:text-slate-300 dark:hover:text-white" title="Full Screen">
<i data-lucide="maximize" class="w-5 h-5"></i>
</button>
<button id="exportHtmlBtnMobile"
class="block lg:hidden text-slate-600 hover:text-slate-800 dark:text-slate-300 dark:hover:text-white"
title="Export to HTML">
<i data-lucide="file-down" class="w-4 h-4 mb-1 inline"></i>
</button>
<button id="mode-toggle" class="text-slate-600 hover:text-slate-800 dark:text-slate-300 dark:hover:text-white"
title="Dark Mode">
<i data-lucide="sun" class="w-5 h-5"></i>
</button>
<div class="relative hidden lg:inline-block text-left">
<div>
<button id="tools-menu-button" type="button"
class="inline-flex w-full justify-center gap-x-1.5 rounded-[8px] bg-white dark:bg-slate-900 py-2 px-4 text-[.75em] font-bold text-slate-900 dark:text-white shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50"
title="Tools">
Tools
<i data-lucide="chevron-down" class="inline h-4 w-4 pt-1"></i>
</button>
<div id="tools-menu"
class="origin-top-right absolute right-0 mt-2 w-48 text-[.75em] rounded-md shadow-lg py-1 bg-white dark:bg-slate-800 ring-1 ring-black ring-opacity-5 hidden">
<button id="openSceletonButton"
class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
title="Reset to Default Configuration">
<i data-lucide="pencil-ruler" class="w-4 h-4 inline"></i>
Layout Settings
</button>
<button id="config-btn"
class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 border-b border-slate-200 dark:border-slate-700"
title="Theme Pattern">
<i data-lucide="cog" class="w-4 h-4 mb-1 inline"></i>
Configuration
</button>
<label for="import-project"
class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer"
title="Import Blocks">
<i data-lucide="upload" class="w-4 h-4 mb-1 inline"></i>
Import Json
</label>
<input type="file" id="import-project" accept=".json" class="hidden" />
<button id="export-project-btn"
class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
title="Export to JSON">
<i data-lucide="download" class="w-4 h-4 mb-1 inline"></i>
Export to Json
</button>
<button id="export-html-btn"
class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 border-b border-slate-200 dark:border-slate-700"
title="Export to HTML">
<i data-lucide="file-down" class="w-4 h-4 mb-1 inline"></i>
Export to HTML
</button>
<button id="clearCurrentStateButton"
class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
title="Reset to Default Configuration">
<i data-lucide="list-x" class="w-4 h-4 inline"></i>
Reset Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="builder" class="flex h-[calc(100vh-64px)] overflow-hidden">
<div id="sidebar" class="relative flex-shrink-0 transition-all duration-300 ease-in-out">
<div id="blocks"
class="w-64 h-full overflow-y-auto p-4 bg-slate-100 dark:bg-slate-700 border-r border-slate-200 dark:border-slate-600">
</div>
<button id="toggleSidebar"
class="absolute top-1/2 -right-3 transform -translate-y-1/2 bg-slate-200 dark:bg-slate-900 text-slate-600 dark:text-slate-200 rounded-[8px] p-[5px] focus:outline-none z-10">
<i data-lucide="chevrons-left" class="relative left-2 sm:left-0 w-6 h-6 sm:w-4 sm:h-4"></i>
</button>
<div class="sticky -bottom-1 w-full z-20">
<div class="flex items-center justify-center bg-slate-100 dark:bg-slate-900 border-t border-slate-300 dark:border-slate-700 text-[.7em]">
<div class="py-2 text-center"><a type="button" class="text-slate-700 dark:text-slate-300" href="https://hinddy.com/" aria-label="Brand" draggable="false"><i data-lucide="heart-handshake" class="w-3 h-3 mb-1 mr-1 inline"></i>HinddY</a></div>
</div>
</div>
</div>
<div id="preview" class="flex-grow overflow-y-auto p-4 bg-white dark:bg-slate-900"></div>
</div>
<div id="sceletonModal" class="modal fixed inset-0 right-0 bg-black bg-opacity-75 flex-shrink-0 transition-all duration-300 ease-in-out hidden z-50"></div>
<div id="config-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-20">
<div class="bg-white dark:bg-slate-900 p-6 rounded-lg w-full max-w-lg">
<h2 class="text-2xl font-bold mb-4 text-slate-800 dark:text-white">
Tailwind Configuration
</h2>
<textarea id="config-textarea" rows="10"
class="w-full p-2 mb-4 rounded-[8px] text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-300 dark:border-slate-500"
placeholder="Enter your Tailwind configuration here..."></textarea>
<div class="flex justify-end">
<button id="save-config" class="px-3 py-1 bg-sky-500 text-white text-[.85em] rounded-md">
Save Configuration
</button>
</div>
</div>
</div>
<div id="fullscreenEditorModal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-75">
<div class="relative bg-white dark:bg-slate-900 w-full h-full overflow-y-auto">
<button id="closeFullscreenEditorButton" class="fixed top-0 left-0 p-1 bg-slate-900 text-slate-100 z-50"
title="Close Fullscreen">
<i data-lucide="minimize-2" class="w-4 h-4"></i>
</button>
<iframe id="editorIframe" class="w-full h-full border-0"></iframe>
</div>
</div>
<div id="fullscreenModal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-75">
<div class="relative bg-white dark:bg-slate-900 w-full h-full overflow-y-auto">
<button id="closeFullscreenButton" class="fixed top-0 left-0 p-1 bg-slate-900 text-slate-100 z-50"
title="Close Fullscreen">
<i data-lucide="minimize-2" class="w-4 h-4"></i>
</button>
<div id="fullscreenPreview" class="z-40"></div>
</div>
</div>
<script defer src="./js/lib/sortable.js"></script>
<script defer src="./js/lib/standalone.js"></script>
<script defer src="./js/lib/parser-html.js"></script>
<script defer src="./js/default.js"></script>
<script defer src="./js/classes.js"></script>
<script defer src="./js/script.js"></script>
<script>
lucide.createIcons();
</script>
</body>
</html>