-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
407 lines (400 loc) · 21.4 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
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CreativeIT Dashboard</title>
<link rel="icon" type="image/png" href="images/favicon.png" sizes="16x16">
<link rel="icon" type="image/png" href="images/favicon.png" sizes="32x32">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-indigo.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header class="mdl-layout__header mdl-layout__header--transparent">
<nav class="mdl-layout__header-row">
<span class="mdl-layout__title"></span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="write-us"> <b class="write-us-bold"></b></a>
<a href="docs.html" class="mdl-navigation__link mdl-js-ripple-effect">Docs</a>
</nav>
</nav>
</header>
<main class="mdl-layout__content">
<div class="jumbotron">
<div class="jumbotron-image">
<iframe class="youtube-video" src="https://www.youtube.com/embed/mpx-V0vfn74?autoplay=1"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="jumbotron-caption">
<h1>Completely open source <span class="accent">admin dashboard</span></h1>
<div class="demo">
<span>Have more fun with Live Demo</span>
<a href="http://material-angular-dashboard.creativeit.io/">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect filled-accent">Go!</button>
</a>
</div>
</div>
</div>
<section id="concept" class="container">
<div data-aos="fade-up" class="parallax">
<img src="images/dashboard_page_empty.png" alt="" class="parallax-hidden">
<div class="parallax-overlay">
<img src="images/cards.png" alt="" class="parallax-layer">
</div>
</div>
<section id="tech">
<div class="container">
<div>
<div>
<div data-aos="fade-up" class="angular"></div>
<div data-aos="fade-up" data-aos-delay="100" class="docker"></div>
<div data-aos="fade-up" data-aos-delay="200" class="aws"></div>
<div data-aos="fade-up" data-aos-delay="300" class="node"></div>
<div data-aos="fade-up" data-aos-delay="300" class="aggrid"></div>
<div data-aos="fade-up" data-aos-delay="300" class="html"></div>
<div data-aos="fade-up" data-aos-delay="300" class="sass"></div>
<div data-aos="fade-up" data-aos-delay="500" class="d-3"></div>
</div>
</div>
</div>
</section>
<h2 data-aos="fade-up">What is this?</h2>
<p data-aos="fade-up">
Material admin dashboard cuts 500 development hours for your next data driven web app. Choose tech stack for front and back-ends you like and go. We decided to focus on useful technical aspects which can give you perceptible push for accelerated development. So get all advantages of full dashboard potential.
</p>
<a href="https://www.creativeit.io/blog/how-dashboards-can-save-thousands-of-dollars" class="accent" data-aos="fade-up"> Read the article “How dashboards can save thousands of dollars”.</a>
<section id="grid">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="100">
<div class="cell-header">
<h2><span class="material-icons-outlined">view_agenda</span>HTML AND ANGULAR VERSIONS</h2>
</div>
<div class="cell-content">
<p>Fully responsive Angular 10 and HTML5 versions of Material Dashboard, so you can choose what fits for your goal.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="100">
<div class="cell-header">
<h2><span class="material-icons-outlined">palette</span>DARK MATERIAL DESIGN</h2>
</div>
<div class="cell-content">
<p>Based on Google Material Design guidelines responsive design with various configurations for components.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="100">
<div class="cell-header">
<h2><span class="material-icons-outlined">computer</span>50+ COMPONENTS</h2>
</div>
<div class="cell-content">
<p>Lots of UI components such as maps, charts, buttons, tables, pages and we are still working on adding new ones.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="200">
<div class="cell-header">
<h2><span class="material-icons-outlined">person</span>AUTH</h2>
</div>
<div class="cell-content">
<p>Besides the custom solution we suggest auth using Facebook, Google and LinkedIn accounts.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="200">
<div class="cell-header">
<h2><span class="material-icons-outlined">view_list</span>AG-GRID</h2>
</div>
<div class="cell-content">
<p>Integrated with the best data grid in the world. There you can find some free features with dark material design.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="200">
<div class="cell-header">
<h2><span class="material-icons-outlined">slideshow</span>VIDEO DOCUMENTATION</h2>
</div>
<div class="cell-content">
<p>Advanced way to show full process of dashboard installation and deployment.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="300">
<div class="cell-header">
<h2><span class="material-icons-outlined">cloud</span>AWS BACKEND</h2>
</div>
<div class="cell-content">
<p>Serverless deployment tool due to aws lambda lets run the code without any managing server.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="300">
<div class="cell-header">
<h2><span class="material-icons-outlined">settings</span>NODE.JS BACKEND</h2>
</div>
<div class="cell-content">
<p>You can use integrated node.js backend as a development basement for your project.</p>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="300">
<div class="cell-header">
<h2><span class="material-icons-outlined">insert_drive_file</span>MIT LICENSE</h2>
</div>
<div class="cell-content">
<p>Free of charge, to any personal or commercial usage. </p>
</div>
</div>
</div>
</section>
</section>
<section id="review">
<div class="container">
<h2 data-aos="fade-up">Review</h2>
<blockquote data-aos="fade-up" cite="https://github.com/google/material-design-lite/issues/4195#issuecomment-195460233">
<p>
Playing around with your customisations this looks quite well done. I haven't seen enough folks playing around with darker Material Design variants with MDL so this is awesome to see.
</p>
<footer class="author">
<span class="name">- Addy Osmani</span>
<span class="position">Engineering Manager at Google working on Chrome & Web Platform creator of MDL library</span>
</footer>
</blockquote>
</div>
</section>
<section id="bundles">
<div class="container">
<h2 data-aos="fade-up">Bundles</h2>
<p id="bundles-desc" data-aos="fade-up">These bundles will help you to speed up your development. They even include the dashboards with already integrated AWS or Node.js backend!</p>
<div class="mdl-grid" id="bundles-grid">
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="100">
<div class="cell-header">
<h2><span class="angular"></span>ANGULAR 10</h2>
</div>
<div class="cell-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col bundle-description">
<p>
Based on Google Material Design guidelines and made with Angular this template allows to create big data apps with stable fast reply for users. It suits perfectly for data visualization and data management web applications.
</p>
<p>
This template contains 2 layouts, more than 10 pages and 40+ components, tailored to business needs it contains smart maps, tables, filters, pagination and auth.
</p>
<div class="actions">
<h2>FREE</h2>
<a href="https://github.com/CreativeIT/material-angular-dashboard/tree/starter-kit">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect filled-accent"><img src="images/github.png" alt="github icon">GITHUB</button>
</a>
</div>
</div>
<span class="vertical-line"></span>
<div class="mdl-cell mdl-cell--1-col bundle-features">
<p>INCLUDED FEATURES</p>
<h3>Starter Kit</h3>
<h3>TypeScript</h3>
<h3>40+ components</h3>
<h3>Dark material design</h3>
<h3>Sass</h3>
<h3>D3 and NVD3</h3>
<h3>Material angular select</h3>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="100">
<div class="cell-header">
<h2><span class="aws"></span>EXTENDED ANGULAR 10 + SERVERLESS AWS</h2>
</div>
<div class="cell-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col bundle-description">
<p>
Serverless framework bundle created for serverless deployment on AWS Lambda. Thanks to easy deployment you can start your project without thinking about servers.
</p>
<p>
AWS Lambda lets you run code without provisioning or managing servers. You pay only for the compute time you consume - there is no charge when your code is not running.
</p>
<div class="actions">
<h2>$150</h2>
<a href="https://github.com/CreativeIT/material-angular-dashboard/tree/starter-kit">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect filled-accent"><span class="material-icons-outlined">shopping_cart</span>BUY NOW</button>
</a>
</div>
</div>
<span class="vertical-line"></span>
<div class="mdl-cell mdl-cell--1-col bundle-features">
<p>INCLUDED FEATURES</p>
<h3>All free features</h3>
<h3>Integrated Ag-grid tables</h3>
<h3>Google maps with marker clustering and info.Window</h3>
<h3>Serverless deployment from serverless.com</h3>
<h3>Video installation instruction</h3>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="100">
<div class="cell-header">
<h2><span class="node"></span>EXTENDED ANGULAR 10 + NODE.JS</h2>
</div>
<div class="cell-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col bundle-description">
<p>
Starter Backend Bundle is the vital minimal of material-angular-dashboard integrated with Node.js Backend. It contains JWT Authentication for both UI and Backend and Basic REST API with pagination.
</p>
<p>
Dashboard is based on Angular, Express.js, Passport.js, REST API, and has customizable styles through sass.
</p>
<div class="actions">
<h2> $90</h2>
<a href="https://github.com/CreativeIT/material-angular-dashboard/tree/starter-kit">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect filled-accent"><span class="material-icons-outlined">shopping_cart</span>BUY NOW</button>
</a>
</div>
</div>
<span class="vertical-line"></span>
<div class="mdl-cell mdl-cell--1-col bundle-features">
<p>INCLUDED FEATURES</p>
<h3>All free features</h3>
<h3>Integrated Ag-grid</h3>
<h3>Rest API demo</h3>
<h3>Rest API pagination (serverside grid pagination)</h3>
<h3>Google maps with marker clustering and info.Window</h3>
<h3>Video installation instruction</h3>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col" data-aos="fade-up" data-aos-delay="100">
<div class="cell-header">
<h2><span class="html"></span>HTML 5</h2>
</div>
<div class="cell-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col bundle-description">
<p>
Material design template that doesn’t rely on any JavaScript frameworks, jQuery free and aims to be responsive and optimized for cross-device usage.
</p>
<p>
All components are created with CSS (scss), JavaScript (es6), and HTML5.
</p>
<div class="actions">
<h2>FREE</h2>
<a href="https://github.com/CreativeIT/material-dashboard-lite">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect filled-accent"><img src="images/github.png" alt="github icon">GITHUB</button>
</a>
</div>
</div>
<span class="vertical-line"></span>
<div class="mdl-cell mdl-cell--1-col bundle-features">
<p>INCLUDED FEATURES</p>
<h3>Material Design via Material Design Lite</h3>
<h3>ECMAScript 6 (with babel)</h3>
<h3>Sass</h3>
<h3>Gulp build</h3>
<h3>D3 and NVD3</h3>
<h3>MIT License</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="community-badges">
<div class="container">
<h2 id="header" data-aos="fade-up">PROVED BY THE COMMUNITY</h2>
<div class="badges">
<a href="https://www.uplabs.com/posts/material-dashboard-lite" class="uplabs" data-aos="fade-up" data-aos-delay="100">
</a>
<a href="https://www.producthunt.com/posts/darkboard?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-darkboard" target="_blank" class="product-hunter" data-aos="fade-up" data-aos-delay="200">
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=143007&theme=light" alt="Darkboard - Completely open source admin dashboard | Product Hunt Embed" style="width: 402px; height: 87px;" />
</a>
<script type="text/javascript" src="https://widget.clutch.co/static/js/widget.js"></script>
<div data-aos="fade-up" data-aos-delay="300" class="clutch-widget" data-url="https://widget.clutch.co" data-widget-type="1" data-height="50" data-darkbg="1" data-clutchcompany-id="786002"></div>
</div>
</div>
</section>
<section id="design" class="mdl-color-text--white">
<div class="container">
<h2 data-aos="fade-up">Design features</h2>
<p data-aos="fade-up">
Material Dashboard is the first admin theme with the dark material design concept. It was a challenging project for us to design dashboard in dark material style, make data readable and usable. So here it is and we are proud to present you this powerful tool. This pack contains a nice portion of:
</p>
<div class="mdl-grid">
<figure data-aos="fade-up" class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--8-col-phone">
<img src="images/responsive_icon.gif" alt=""/>
<figcaption>Fully responsive</figcaption>
</figure>
<figure data-aos="fade-up" data-aos-delay="200" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--8-col-phone">
<img src="images/UX_icon.gif" alt=""/>
<figcaption>User experience focused</figcaption>
</figure>
<figure data-aos="fade-up" data-aos-delay="400" class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--8-col-phone">
<img src="images/Dark_icon.gif" alt=""/>
<figcaption>Dark material design</figcaption>
</figure>
</div>
</div>
</section>
<section id="support" class="mdl-color-text--white">
<div class="container container-wide">
<h2>You can give us a star on <a href="https://github.com/CreativeIT/material-dashboard-lite">Github</a> to support our work.</h2>
<div>
<img src="images/GitHub-Mark-Light-120px-plus.png" alt="">
<a class="github-button" href="https://github.com/CreativeIT/material-dashboard-lite" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star CreativeIT/material-dashboard-lite on GitHub">Star</a>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h2 data-aos="fade-up">Contact with us</h2>
<p data-aos="fade-up">We are open for collaboration. Feel free to write us on <a href="mailto:Hello@creativeit.io">Hello@creativeit.io</a> or you can ask whatever you want in following form.</p>
<form action="">
<div data-aos="fade-up">
<div class="mdl-textfield mdl-js-textfield">
<input type="text" class="mdl-textfield__input" id="contact-name" name="contact-name">
<label for="contact-name" class="mdl-textfield__label">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input type="email" class="mdl-textfield__input" id="contact-email" name="contact-email">
<label for="contact-name" class="mdl-textfield__label">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<textarea name="contact-message" id="contact-message" rows="5" class="mdl-textfield__input" type="text"></textarea>
<label for="contact-message" class="mdl-textfield__label">Message</label>
</div>
<button class="mdl-button mdl-js-button filled-accent">
Send message
</button>
</div>
</form>
</div>
</section>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<span class="mdl-logo">©2020. Developed and designed by <a href="http://creativeit.io/">CreativeIT</a> team.</span>
</div>
</footer>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
<script defer src="https://buttons.github.io/buttons.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
AOS.init({
duration: 600,
});
{
// const
const parallax = document.querySelector('#concept .parallax');
const parallaxLayer = document.querySelector('#concept .parallax-layer');
let viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.addEventListener('resize', () => viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
document.addEventListener('scroll', () => {
const { height, y } = parallax.getBoundingClientRect();
if (viewportHeight / 3 < y + height / 2 && y + height / 2 < 2 * viewportHeight / 3) {
parallaxLayer.style.transform = `translateY(-${15 - (y + height / 2 - viewportHeight / 3) / (viewportHeight / 3) * 15}%)`;
}
});
}
});
</script>
</body>
</html>