From 7ac7495f72097fd38fe437a4daf0c1e0be56f4ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=92=E9=85=92=E7=9A=84=E6=9D=8E=E7=99=BD?= <670939375@qq.com> Date: Wed, 3 Jul 2024 00:36:22 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90UI=E7=BB=84=E4=BB=B6=E3=80=91=E9=83=A8?= =?UTF-8?q?=E5=88=86UI=E7=BB=84=E4=BB=B6=E6=A8=A1=E6=9D=BF=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Datum_UImodel/UI模板介绍.md | 5 +- Datum_UImodel/auth-confirm-mail.html | 87 - Datum_UImodel/auth-lock-screen.html | 93 - Datum_UImodel/auth-login.html | 121 - Datum_UImodel/auth-recover-pwd.html | 86 - Datum_UImodel/auth-recoverpw.html | 87 - Datum_UImodel/auth-sign-in.html | 104 - Datum_UImodel/auth-sign-up.html | 126 - Datum_UImodel/calendar.html | 1152 -------- Datum_UImodel/chart-apex.html | 1165 -------- Datum_UImodel/chat.html | 3490 ---------------------- Datum_UImodel/customer-add.html | 1194 -------- Datum_UImodel/customer-view.html | 1440 --------- Datum_UImodel/customer.html | 1617 ---------- Datum_UImodel/form-chechbox.html | 1390 --------- Datum_UImodel/form-datepicker.html | 1178 -------- Datum_UImodel/form-file-uploader.html | 1156 -------- Datum_UImodel/form-input-group.html | 2107 ------------- Datum_UImodel/form-layout.html | 1739 ----------- Datum_UImodel/form-quill.html | 1128 ------- Datum_UImodel/form-radio.html | 1293 -------- Datum_UImodel/form-select.html | 1413 --------- Datum_UImodel/form-switch.html | 1431 --------- Datum_UImodel/form-textarea.html | 1161 -------- Datum_UImodel/form-validation.html | 1528 ---------- Datum_UImodel/icon-heroicon.html | 1355 --------- Datum_UImodel/index.html | 1522 ---------- Datum_UImodel/invoice-view.html | 1187 -------- Datum_UImodel/invoice.html | 1640 ----------- Datum_UImodel/order-details.html | 1275 -------- Datum_UImodel/order-new.html | 1224 -------- Datum_UImodel/order.html | 1520 ---------- Datum_UImodel/pages-blank-page.html | 1038 ------- Datum_UImodel/pages-comingsoon.html | 116 - Datum_UImodel/pages-error-500.html | 72 - Datum_UImodel/pages-error.html | 71 - Datum_UImodel/pages-faq.html | 1205 -------- Datum_UImodel/pages-maintenance.html | 72 - Datum_UImodel/pricing.html | 1205 -------- Datum_UImodel/privacy-policy.html | 1181 -------- Datum_UImodel/product-add.html | 1146 ------- Datum_UImodel/product.html | 1562 ---------- Datum_UImodel/table-data.html | 2126 ------------- Datum_UImodel/table-editable.html | 1232 -------- Datum_UImodel/tables-basic.html | 2259 -------------- Datum_UImodel/terms-of-service.html | 1154 -------- Datum_UImodel/timeline.html | 1111 ------- Datum_UImodel/todo.html | 3603 ----------------------- Datum_UImodel/ui-alerts.html | 1601 ---------- Datum_UImodel/ui-avatars.html | 1360 --------- Datum_UImodel/ui-badges.html | 1269 -------- Datum_UImodel/ui-boxshadow.html | 1142 ------- Datum_UImodel/ui-breadcrumb.html | 1414 --------- Datum_UImodel/ui-buttons-group.html | 1434 --------- Datum_UImodel/ui-buttons.html | 1667 ----------- Datum_UImodel/ui-cards.html | 1502 ---------- Datum_UImodel/ui-carousel.html | 1400 --------- Datum_UImodel/ui-colors.html | 1196 -------- Datum_UImodel/ui-embed-video.html | 1150 -------- Datum_UImodel/ui-grid.html | 1444 --------- Datum_UImodel/ui-images.html | 1379 --------- Datum_UImodel/ui-list-group.html | 1506 ---------- Datum_UImodel/ui-media-object.html | 1299 -------- Datum_UImodel/ui-modal.html | 1648 ----------- Datum_UImodel/ui-notifications.html | 1470 --------- Datum_UImodel/ui-pagination.html | 1406 --------- Datum_UImodel/ui-popovers.html | 1252 -------- Datum_UImodel/ui-progressbars.html | 1346 --------- Datum_UImodel/ui-tabs.html | 1564 ---------- Datum_UImodel/ui-tooltips.html | 1219 -------- Datum_UImodel/ui-typography.html | 1351 --------- Datum_UImodel/user-account-setting.html | 1128 ------- Datum_UImodel/user-privacy-setting.html | 1146 ------- Datum_UImodel/user-profile-edit.html | 1299 -------- Datum_UImodel/user-profile.html | 1325 --------- Datum_UImodel/说明.htm | 62 - 76 files changed, 2 insertions(+), 92144 deletions(-) delete mode 100644 Datum_UImodel/auth-confirm-mail.html delete mode 100644 Datum_UImodel/auth-lock-screen.html delete mode 100644 Datum_UImodel/auth-login.html delete mode 100644 Datum_UImodel/auth-recover-pwd.html delete mode 100644 Datum_UImodel/auth-recoverpw.html delete mode 100644 Datum_UImodel/auth-sign-in.html delete mode 100644 Datum_UImodel/auth-sign-up.html delete mode 100644 Datum_UImodel/calendar.html delete mode 100644 Datum_UImodel/chart-apex.html delete mode 100644 Datum_UImodel/chat.html delete mode 100644 Datum_UImodel/customer-add.html delete mode 100644 Datum_UImodel/customer-view.html delete mode 100644 Datum_UImodel/customer.html delete mode 100644 Datum_UImodel/form-chechbox.html delete mode 100644 Datum_UImodel/form-datepicker.html delete mode 100644 Datum_UImodel/form-file-uploader.html delete mode 100644 Datum_UImodel/form-input-group.html delete mode 100644 Datum_UImodel/form-layout.html delete mode 100644 Datum_UImodel/form-quill.html delete mode 100644 Datum_UImodel/form-radio.html delete mode 100644 Datum_UImodel/form-select.html delete mode 100644 Datum_UImodel/form-switch.html delete mode 100644 Datum_UImodel/form-textarea.html delete mode 100644 Datum_UImodel/form-validation.html delete mode 100644 Datum_UImodel/icon-heroicon.html delete mode 100644 Datum_UImodel/index.html delete mode 100644 Datum_UImodel/invoice-view.html delete mode 100644 Datum_UImodel/invoice.html delete mode 100644 Datum_UImodel/order-details.html delete mode 100644 Datum_UImodel/order-new.html delete mode 100644 Datum_UImodel/order.html delete mode 100644 Datum_UImodel/pages-blank-page.html delete mode 100644 Datum_UImodel/pages-comingsoon.html delete mode 100644 Datum_UImodel/pages-error-500.html delete mode 100644 Datum_UImodel/pages-error.html delete mode 100644 Datum_UImodel/pages-faq.html delete mode 100644 Datum_UImodel/pages-maintenance.html delete mode 100644 Datum_UImodel/pricing.html delete mode 100644 Datum_UImodel/privacy-policy.html delete mode 100644 Datum_UImodel/product-add.html delete mode 100644 Datum_UImodel/product.html delete mode 100644 Datum_UImodel/table-data.html delete mode 100644 Datum_UImodel/table-editable.html delete mode 100644 Datum_UImodel/tables-basic.html delete mode 100644 Datum_UImodel/terms-of-service.html delete mode 100644 Datum_UImodel/timeline.html delete mode 100644 Datum_UImodel/todo.html delete mode 100644 Datum_UImodel/ui-alerts.html delete mode 100644 Datum_UImodel/ui-avatars.html delete mode 100644 Datum_UImodel/ui-badges.html delete mode 100644 Datum_UImodel/ui-boxshadow.html delete mode 100644 Datum_UImodel/ui-breadcrumb.html delete mode 100644 Datum_UImodel/ui-buttons-group.html delete mode 100644 Datum_UImodel/ui-buttons.html delete mode 100644 Datum_UImodel/ui-cards.html delete mode 100644 Datum_UImodel/ui-carousel.html delete mode 100644 Datum_UImodel/ui-colors.html delete mode 100644 Datum_UImodel/ui-embed-video.html delete mode 100644 Datum_UImodel/ui-grid.html delete mode 100644 Datum_UImodel/ui-images.html delete mode 100644 Datum_UImodel/ui-list-group.html delete mode 100644 Datum_UImodel/ui-media-object.html delete mode 100644 Datum_UImodel/ui-modal.html delete mode 100644 Datum_UImodel/ui-notifications.html delete mode 100644 Datum_UImodel/ui-pagination.html delete mode 100644 Datum_UImodel/ui-popovers.html delete mode 100644 Datum_UImodel/ui-progressbars.html delete mode 100644 Datum_UImodel/ui-tabs.html delete mode 100644 Datum_UImodel/ui-tooltips.html delete mode 100644 Datum_UImodel/ui-typography.html delete mode 100644 Datum_UImodel/user-account-setting.html delete mode 100644 Datum_UImodel/user-privacy-setting.html delete mode 100644 Datum_UImodel/user-profile-edit.html delete mode 100644 Datum_UImodel/user-profile.html delete mode 100644 Datum_UImodel/说明.htm diff --git a/Datum_UImodel/UI模板介绍.md b/Datum_UImodel/UI模板介绍.md index 16aad90..ce9e168 100644 --- a/Datum_UImodel/UI模板介绍.md +++ b/Datum_UImodel/UI模板介绍.md @@ -1,4 +1,3 @@ -https://iqonic.design/product/admin-templates/datum-crm-admin-deshboard-template/ +### 项目中的大部分UI元素使用该模板搭建 - -项目中的大部分UI元素使用该模板搭建 \ No newline at end of file +模板链接：https://iqonic.design/product/admin-templates/datum-crm-admin-deshboard-template/ \ No newline at end of file diff --git a/Datum_UImodel/auth-confirm-mail.html b/Datum_UImodel/auth-confirm-mail.html deleted file mode 100644 index 4d7e71e..0000000 --- a/Datum_UImodel/auth-confirm-mail.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
-
-
-
- - -

Success !

-

A email has been send to [email protected] Please check for an - email from company and click - on the included link to reset your password.

-
- - - - - Back to Home - -
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/auth-lock-screen.html b/Datum_UImodel/auth-lock-screen.html deleted file mode 100644 index 47974fb..0000000 --- a/Datum_UImodel/auth-lock-screen.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
-
-
-
- -
-

Hi ! Barry Tech

-

Enter your password to access the admin.

-
-
-
-
-
- - -
-
-
- -
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/auth-login.html b/Datum_UImodel/auth-login.html deleted file mode 100644 index 35f2c2b..0000000 --- a/Datum_UImodel/auth-login.html +++ /dev/null @@ -1,121 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
-
- -

Sign In

-

Log in to your account to continue

- -
-

or login with email

-
-
-
-
-
- - -
-
-
-
-
- - -
- -
-
-
- -
-

Don't have an account? Sign Up

-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/auth-recover-pwd.html b/Datum_UImodel/auth-recover-pwd.html deleted file mode 100644 index cb77871..0000000 --- a/Datum_UImodel/auth-recover-pwd.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
-
- -

Reset Password

-

You can reset your password here

-
-
-
-
- - -
-
-
- -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/auth-recoverpw.html b/Datum_UImodel/auth-recoverpw.html deleted file mode 100644 index df935be..0000000 --- a/Datum_UImodel/auth-recoverpw.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
-
- -

Reset Password

-

Enter your email address and we'll send you an email with instructions to reset your password.

-
-
-
-
- - -
-
-
- -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/auth-sign-in.html b/Datum_UImodel/auth-sign-in.html deleted file mode 100644 index 266b5ff..0000000 --- a/Datum_UImodel/auth-sign-in.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
-
- -

Sign In

-

To Keep connected with us please login with your personal info.

-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
- Forgot Password? -
-
-
- Create an Account Sign Up - -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/auth-sign-up.html b/Datum_UImodel/auth-sign-up.html deleted file mode 100644 index f924684..0000000 --- a/Datum_UImodel/auth-sign-up.html +++ /dev/null @@ -1,126 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
-
- -

Getting Started

-

Choose your social media to create account

- -
-

or register with email

-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
-
- - -
-
-
-
- -
-

Do you have an account? Sign In

-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/calendar.html b/Datum_UImodel/calendar.html deleted file mode 100644 index 1aeac0b..0000000 --- a/Datum_UImodel/calendar.html +++ /dev/null @@ -1,1152 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-

Set Your weekly hours

-
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/chart-apex.html b/Datum_UImodel/chart-apex.html deleted file mode 100644 index e96c03b..0000000 --- a/Datum_UImodel/chart-apex.html +++ /dev/null @@ -1,1165 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Line Chart

-
-
-
-
-
-
-
-
-
-

Column Chart

-
-
-
-
-
-
-
-
-
-

Mixes Chart

-
-
-
-
-
-
-
-
-
-

Bubble Charts

-
-
-
-
-
-
-
-
-
-

Pie Charts

-
-
-
-
-
-
-
-
-
-
-
-

Line Area Chart

-
-
-
-
-
-
-
-
-
-

Bar Chart

-
-
-
-
-
-
-
-
-
-

Candlestick Charts

-
-
-
-
-
-
-
-
-
-

Scatter Charts

-
-
-
-
-
-
-
-
-
-

Radial Bar Charts

-
-
-
-
-
-
-
-
-
-
-
-
-

Advanced Charts

-
-
-
-
-
-
-
-
-
-
-
-

Radar Multiple Charts

-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/chat.html b/Datum_UImodel/chat.html deleted file mode 100644 index e06063b..0000000 --- a/Datum_UImodel/chat.html +++ /dev/null @@ -1,3490 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-

Messages

- -
-
-
-
- - - - - -
- -
- - - -
-
-
-
- -
- -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Joan Duo

-
Developer
-
-
-
-
Nick Name:
-
Joan
-
-
-
-
Tel:
-
0123456789
-
-
-
-
Date Of Birth:
-
1 June 1997
-
-
-
-
Gender:
-
Male
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Joan Duo
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Jenifer Markus

-
Designer
-
-
-
-
Nick Name:
-
Jenifer
-
-
-
-
Tel:
-
0678912345
-
-
-
-
Date Of Birth:
-
8 July 1997
-
-
-
-
Gender:
-
Female
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Jenifer Markus
- Offline -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Maria Daf

-
Planner
-
-
-
-
Nick Name:
-
Maria
-
-
-
-
Tel:
-
0345671289
-
-
-
-
Date Of Birth:
-
16 August 1997
-
-
-
-
Gender:
-
Female
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Maria Daf
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Joasaf Zurk

-
Content Writer
-
-
-
-
Nick Name:
-
Joasaf
-
-
-
-
Tel:
-
0678945123
-
-
-
-
Date Of Birth:
-
22 December 1997
-
-
-
-
Gender:
-
Male
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Joasaf Zurk
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Rock Musta

-
Developer
-
-
-
-
Nick Name:
-
Rock
-
-
-
-
Tel:
-
0893456712
-
-
-
-
Date Of Birth:
-
26 June 1997
-
-
-
-
Gender:
-
Male
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Rock Musta
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Joan Duo

-
Developer
-
-
-
-
Nick Name:
-
Joan
-
-
-
-
Tel:
-
0123456789
-
-
-
-
Date Of Birth:
-
1 June 1997
-
-
-
-
Gender:
-
Male
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Joan Duo
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Jenifer Markus

-
Designer
-
-
-
-
Nick Name:
-
Jenifer
-
-
-
-
Tel:
-
0678912345
-
-
-
-
Date Of Birth:
-
8 July 1997
-
-
-
-
Gender:
-
Female
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Jenifer Markus
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Maria Daf

-
Planner
-
-
-
-
Nick Name:
-
Maria
-
-
-
-
Tel:
-
0345671289
-
-
-
-
Date Of Birth:
-
16 August 1997
-
-
-
-
Gender:
-
Female
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Maria Daf
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Joasaf Zurk

-
Content Writer
-
-
-
-
Nick Name:
-
Joasaf
-
-
-
-
Tel:
-
0678945123
-
-
-
-
Date Of Birth:
-
22 December 1997
-
-
-
-
Gender:
-
Male
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Joasaf Zurk
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
- -
-
-
- users -
-

Rock Musta

-
Developer
-
-
-
-
Nick Name:
-
Rock
-
-
-
-
Tel:
-
0893456712
-
-
-
-
Date Of Birth:
-
26 June 1997
-
-
-
-
Gender:
-
Male
-
-
-
-
Language:
-
English
-
-
-
-
-
- -
- users -
-
-
Rock Musta
- Online -
-
-
- -
-
-
-
-
-
-
-
-
- Nos vemos mañana sollicitudin molestie malesuada. Proin eget tortor. -
-
- 04:15 -
-
-
-
-
-
-
-
- Gracias De nada No hay de qué Disculpe Lo siento Me encanta café. ¿Quieres ir a tomar una taza? . -
-
- 04:15 -
-
-
-
-
-
-
-
- Alemania ha registrado este jueves 22.657 cifra de enero, según el Instituto Robert Koch. -
-
- 04:15 -
-
-
-
-
-
-
-
- La canciller Angela y ha pedido que la Unión Europea aumente la capacidad de producción de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- Este miércoles y el jueves, los materia de vacunación. -
-
- 04:15 -
-
-
-
-
-
-
-
- En el Reino Unido, el primer no haya “un bloqueo” en la exportación de vacunas. -
-
- 04:15 -
-
-
-
-
-
-
-
- La farmacéutica AstraZeneca ha actualizado los datos de eficacia de su Reino Unido. -
-
- 04:15 -
-
-
-
-
-
-
-
- -
- -
- -
-
-
- - - - - -
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/customer-add.html b/Datum_UImodel/customer-add.html deleted file mode 100644 index feae7fe..0000000 --- a/Datum_UImodel/customer-add.html +++ /dev/null @@ -1,1194 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
-
-
-
- -
- - - - - Back - -
-
-
-

Add New Customer

-
-
-
-
-
-
-
-
- - - - - - - - - - - -
-
-

Upload Image

-
-
-
-
-
-
- - -
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - - - - - - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/customer-view.html b/Datum_UImodel/customer-view.html deleted file mode 100644 index 482493f..0000000 --- a/Datum_UImodel/customer-view.html +++ /dev/null @@ -1,1440 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
-
-
-
- -
- - - - - Back - -
-
-
-

Customer View

-
-
- -
-
-
-
    -
  • -
    -
      -
    • -
      - 01.jpg -
      -
      -
      Kate Smith
      -

      Botsford and Sons

      -
      -
      • -
    -
    -
    -
    - -
    -
    - -
    -
    -
    • -
  • - - - - - - - - - - - - - - - - - - - - - - - - - -
    -

    Email ID

    -     		-

    [email protected]

    -
    -

    Birthday

    -     		-

    01 Feb 1990

    -
    -

    Phone

    -     		-

    +99 8756214524

    -
    -

    Country

    -     		-

    USA

    -
    -

    State/Region

    -     		-

    West Virginia

    -
    -

    Address

    -     		-

    Baker Street, no. 7

    -
    -
    • -
  • -
    Total Spending
    -
    -
    • -
-
-
-
-
-
- - -
-
-
-
Invoice List
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IDDate DescriptionStatusTotal
IN-90255912 Jan 2020 - Order OR-561488 - -

- - - Paid -

- 		$104.98
IN-55214915 Jan 2020 - Order OR-568842 - -

- - - Pending -

- 		$99.98
IN-94152912 Jan 2020 - Order OR-598550 - -

- - - Paid -

- 		$966.12
IN-12562316 Jan 2020 - Order OR-325548 - -

- - - Completed -

- 		$65.00
IN-91121118 Jan 2020 - Order OR-125475 - -

- - Cancelled -

- 		$108.99
IN-90221019 Jan 2020 - Order OR-595508 - -

- - - Paid -

- 		$199.99
IN-90244520 Jan 2020 - Order OR-884155 - -

- - - Pending -

- 		$99.99
IN-90102022 Jan 2020 - Order OR-500008 - -

- - - Paid -

- 		$449.00
IN-903651022 Jan 2020 - Order OR-489523 - -

- - Cancelled -

- 		$1,299.05
IN-12001023 Jan 2020 - Order OR-965508 - -

- - - Paid -

- 		$6,325.99
IN-30224015 Jan 2020 - Order OR-654412 - -

- - - Paid -

- 		$699.00
IN-66221026 Jan 2020 - Order OR-965508 - -

- - Cancelled -

- 		$150.03
-
-
-
-

Activity

-
-
    -
  • -
    -

    13, September 2020

    -
    -
    • -
  • -
    -
    Signed Out
    -
    -

    Santander crea una sociedad para gestionar las sucursales que cierra

    -
    -

    Probablemente, la bodega más sostenible de españa

    -
    -
    -
    • -
  • -
    -
    Create Invoice IN-302240
    -
    -

    Repsol sopesa elegir primero un socio para su área de renovables y después sacarla a Bolsa

    -
    -
    • -
  • -
    -
    Signed In
    -
    -

    El Ibex busca nuevos máximos en la última jornada de abril

    -
    -
    -

    14, September 2020

    -
    -
    • -
  • -
    -
    Signed Out
    -
    -

    Ecoener se atreve con la Bolsa y se estrenará con una valoración de 336 millones

    -
    -
    • -
  • -
    -
    Create Invoice IN-662210
    -
    -

    BBVA supera la crisis del Covid y gana 1.210 millones en el primer trimestre

    -
    -
    -

    Probablemente, la bodega más sostenible de españa

    -
    -
    • -
  • -
    -
    Signed In
    -
    -

    El mercado se prepara para una corrección en mayo tras el rally bursátil

    -
    -
    -

    Repsol sopesa elegir primero un socio para su área de renovables y después sacarla a Bolsa

    -
    -
    • -
-
-
-
-
-
-
-
-
- - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/customer.html b/Datum_UImodel/customer.html deleted file mode 100644 index f967686..0000000 --- a/Datum_UImodel/customer.html +++ /dev/null @@ -1,1617 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
- -
-
-
-

Customer

-
-
-
-
-
-
- - - - - - -
-
- - - - - Add Customer - -
-
-
-
-
-
-
-
-
-
Customer List
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - -
-
- 		- Name - - Email - - Location - - Phone - - Action -
-
- - -
- 		-
-
- user-icon -
-
-
- Christian Bale -
-

- Vari tech -

-
-
- 		[email protected] - Ohio, USA - - +1 (021) 145-2256 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Matt Damon -
-

- Galaxy Man -

-
-
- 		[email protected] - Briston - - +25 (100) 1254-662 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Caitriona Balfe -
-

- Manager -

-
-
- 		[email protected] - Nevada, USA - - +251 966 522 456 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Josh Lucas -
-

- Father and Son -

-
-
- 		[email protected] - Georgia - - +5 20154-65755 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Jon Bernthal -
-

- Morris Cafe -

-
-
- 		[email protected] - West Virginia, USA - - +200 51145 65523 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Noah Jupe -
-

- Grossman's -

-
-
- 		[email protected] - Ohio, USA - - +251 5225-98554 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Tracy Letts -
-

- Jeans Unlimited -

-
-
- 		[email protected] - Texas, USA - - +22 562 4587 55 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Ray McKinnon -
-

- Gene Man -

-
-
- 		[email protected] - Nevada, USA - - +66 4515585632 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Remo Girone -
-

- Apple Walter -

-
-
- 		[email protected] - Bristow - - +6 14552-15771 - -
- - - - - - - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Jack McMullen -
-

- Noor Cafeteria -

-
-
- 		[email protected] - California, USA - - +25 4415-21445 - -
- - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-chechbox.html b/Datum_UImodel/form-chechbox.html deleted file mode 100644 index 378c07f..0000000 --- a/Datum_UImodel/form-chechbox.html +++ /dev/null @@ -1,1390 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Basic Checkbox

-
-
- -
-
-
-
- 

-<div class="checkbox d-inline-block mr-3">
-   <input type="checkbox" class="checkbox-input" id="checkbox1">
-   <label for="checkbox1">Primary-Inactive</label>
-</div>
-<div class="checkbox d-inline-block mr-3">
-   <input type="checkbox" class="checkbox-input" id="checkbox2" checked="">
-   <label for="checkbox2">Primary / Active</label>
-</div>
-<div class="checkbox d-inline-block mr-3">
-   <input type="checkbox" class="checkbox-input" id="checkbox3" disabled="">
-   <label for="checkbox3">Disable / Inactive</label>
-</div>
-<div class="checkbox d-inline-block mr-3">
-   <input type="checkbox" class="checkbox-input" id="checkbox4" checked="" disabled="">
-   <label for="checkbox4">Active / Disable</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
-
-
-

Custom Checkbox

-
-
- -
-
-
-
- 

-<div class="custom-control custom-checkbox custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck5">
-   <label class="custom-control-label" for="customCheck5">Primary / Inactive</label>
-</div>
-<div class="custom-control custom-checkbox custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck6" Checked="">
-   <label class="custom-control-label" for="customCheck6">Primary - active</label>
-</div>
-<div class="custom-control custom-checkbox custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck7"  disabled="">
-   <label class="custom-control-label" for="customCheck7">Primary - inactive - disabled</label>
-</div>
-<div class="custom-control custom-checkbox custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck8"  checked="" disabled="">
-   <label class="custom-control-label" for="customCheck8">Primary - active - disabled</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Color

-
-
- -
-
-
-
- 

-<div class="custom-control custom-checkbox custom-checkbox-color-check custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-primary" id="customCheck-1" checked="">
-   <label class="custom-control-label" for="customCheck-1"> Primary</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color-check custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-success" id="customCheck-2" checked="">
-   <label class="custom-control-label" for="customCheck-2">Success</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color-check custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-danger" id="customCheck-3" checked="">
-   <label class="custom-control-label" for="customCheck-3">Danger</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color-check custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-warning" id="customCheck-4" checked="">
-   <label class="custom-control-label" for="customCheck-4">Warning</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color-check custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-dark" id="customCheck-5" checked="">
-   <label class="custom-control-label" for="customCheck-5">Dark</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color-check custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-info" id="customCheck-6" checked="">
-   <label class="custom-control-label" for="customCheck-6">Info</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Custom Color

-
-
- -
-
-
-
- 

-<div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-primary" id="customCheck-11">
-   <label class="custom-control-label" for="customCheck-11">Primary </label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-success" id="customCheck-22">
-   <label class="custom-control-label" for="customCheck-22">Success</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-danger" id="customCheck-33">
-   <label class="custom-control-label" for="customCheck-33">Danger</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-warning" id="customCheck-44">
-   <label class="custom-control-label" for="customCheck-44">Warning</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-dark" id="customCheck-55">
-   <label class="custom-control-label" for="customCheck-55">Dark</label>
-</div>
-<div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-info" id="customCheck-66">
-   <label class="custom-control-label" for="customCheck-66"> Info</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Change Icon

-
-
- -
-
-
-
- 

-<div class="custom-control custom-checkbox checkbox-icon custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-10" checked="">
-   <label class="custom-control-label" for="customCheck-10"><i class="fa fa-music"></i>Music</label>
-</div>
-<div class="custom-control custom-checkbox checkbox-icon custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-20" checked="">
-   <label class="custom-control-label" for="customCheck-20"><i class="fa fa-commenting-o"></i>SMS</label>
-</div>
-<div class="custom-control custom-checkbox checkbox-icon custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-30" checked="">
-   <label class="custom-control-label" for="customCheck-30"><i class="fa fa-times"></i>Cancel</label>
-</div>
-<div class="custom-control custom-checkbox checkbox-icon custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-40" checked="">
-   <label class="custom-control-label" for="customCheck-40"><i class="fa fa-file"></i>File</label>
-</div>
-<div class="custom-control custom-checkbox checkbox-icon custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-50" checked="">
-   <label class="custom-control-label" for="customCheck-50"><i class="fa fa-bold"></i>Bold</label>
-</div>
-<div class="custom-control custom-checkbox checkbox-icon custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-60" checked="">
-   <label class="custom-control-label" for="customCheck-60"><i class="fa fa-map-marker"></i>Location</label>
-</div>
-<div class="custom-control custom-checkbox checkbox-icon custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-70" checked="">
-   <label class="custom-control-label" for="customCheck-70"><i class="fa fa-camera"></i>Camera</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Boolean Checkbox

-
-
- -
-
-
-
- 

-<div class="custom-control custom-checkbox custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-t" checked="">
-   <label class="custom-control-label" for="customCheck-t">True</label>
-</div>
-<div class="custom-control custom-checkbox custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customCheck-f">
-   <label class="custom-control-label" for="customCheck-f">False</label>
-</div>
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-datepicker.html b/Datum_UImodel/form-datepicker.html deleted file mode 100644 index 97c5c68..0000000 --- a/Datum_UImodel/form-datepicker.html +++ /dev/null @@ -1,1178 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Basic

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <label for="exampleInputdate">Date Input</label>
-   <input type="date" class="form-control" id="exampleInputdate" value="2019-12-18">
-</div>
-
-
-
- - -
-
-
-
-
-
-

Month Date

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <label for="exampleInputmonth">Month Input</label>
-   <input type="month" class="form-control" id="exampleInputmonth" value="2019-12">
-</div>
-
-
-
- - -
-
-
-
-
-
-

Time

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <label for="exampleInputtime">Time Input</label>
-   <input type="time" class="form-control" id="exampleInputtime" value="13:45">
-</div>
-
-
-
- - -
-
-
- -
-
-
-

Week

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <label for="exampleInputweek">Week Input</label>
-   <input type="week" class="form-control" id="exampleInputweek" value="2019-W46">
-</div> 
-
-
-
- - -
-
-
-
-
-
-

Date and Time

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <label for="exampleInputdatetime">Date and Time Input</label>
-   <input type="datetime-local" class="form-control" id="exampleInputdatetime" value="2019-12-19T13:45:00">
-</div>
-
-
-
- - -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-file-uploader.html b/Datum_UImodel/form-file-uploader.html deleted file mode 100644 index f09eec4..0000000 --- a/Datum_UImodel/form-file-uploader.html +++ /dev/null @@ -1,1156 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Default

-
-
- -
-
-
-
- 

-<form action="/action_page.php">
-   <p>Custom file:</p>
-   <div class="custom-file mb-3">
-      <input type="file" class="custom-file-input" id="customFile" name="filename">
-      <label class="custom-file-label" for="customFile">Choose file</label>
-   </div>
-   <p>Default file:</p>
-   <input type="file" id="myFile" name="filename2">
-   <div class="mt-3">
-      <button type="submit" class="btn btn-primary">Submit</button>
-   </div>
-</form>
-
-
-
-

Custom file:

-
- - -
-

Default file:

- -
- -
-
-
-
- -
-
-
-

file input

-
-
- -
-
-
-
- 

-<form id="file-upload-form" class="uploader-file">
-   <input id="file-upload" type="file" name="fileUpload" accept="image/*" />
-   <label id="file-drag">
-      <img id="file-image" src="#" alt="Preview" class="hidden">
-      <span id="start-one">
-         <i class="fa fa-download" aria-hidden="true"></i>
-         <span class="d-block">Select a file or drag here</span>
-         <span id="notimage" class="hidden d-block">Please select image</span>
-         <span id="file-upload-btn" class="btn btn-primary">Select a file</span>
-      </span>
-      <span id="response" class="hidden">
-      <span id="messages"></span>
-      <progress class="progress" id="file-progress" value="0">
-         <span>0</span>%
-      </progress>
-      </span>
-   </label>
-</form>
-
-
-
- - -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-input-group.html b/Datum_UImodel/form-input-group.html deleted file mode 100644 index 12c42c4..0000000 --- a/Datum_UImodel/form-input-group.html +++ /dev/null @@ -1,2107 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Default

-
-
- -
-
-
-
- 

-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="basic-addon1">@</span>
-   </div>
-   <input type="text" class="form-control" placeholder="Username" aria-label="Username"
-      aria-describedby="basic-addon1">
-</div>
-<div class="input-group mb-4">
-   <input type="text" class="form-control" placeholder="Recipient's username"
-      aria-label="Recipient's username" aria-describedby="basic-addon2">
-   <div class="input-group-append">
-      <span class="input-group-text" id="basic-addon2">@example.com</span>
-   </div>
-</div>
-<label for="basic-url">Your URL</label>
-<div class="input-group mb-3">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-   </div>
-   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
-</div>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text">$</span>
-   </div>
-   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-   <div class="input-group-append">
-      <span class="input-group-text">.00</span>
-   </div>
-</div>
-<div class="input-group">
-   <div class="input-group-prepend">
-      <span class="input-group-text text-area">With textarea</span>
-   </div>
-   <textarea class="form-control" aria-label="With textarea"></textarea>
-</div>
-
-
-
-
- @ -
- -
-
- -
- @example.com -
-
- -
-
- https://example.com/users/ -
- -
-
-
- $ -
- -
- .00 -
-
-
-
- With textarea -
- -
-
-
-
-
-
-

Simple Icon

-
-
- -
-
-
-
- 

-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="basic-addon4"><i class="las la-bell font-size-20"></i></span>
-   </div>
-   <input type="text" class="form-control" placeholder="Notification" aria-label="notification"
-      aria-describedby="basic-addon4">
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group">
-   <input type="text" class="form-control" placeholder="Notification" aria-label="notification"
-      aria-describedby="basic-addon5">
-   <div class="input-group-append">
-      <span class="input-group-text" id="basic-addon5"><i class="las la-bell font-size-20"></i></span>
-   </div>
-</div>
-
-
-

- - Left

-
-
- - - - - -
- -
-

- - - Right

-
- -
- - - -
-
-
-
-
-
-
-

Spinning Icon

-
-
- -
-
-
-
- 

-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="basic-addon6"><i class="fa fa-spinner fa-spin"></i></span>
-   </div>
-   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
-      aria-describedby="basic-addon6">
-</div>
-<div class="input-group">
-   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
-      aria-describedby="basic-addon7">
-   <div class="input-group-append">
-      <span class="input-group-text" id="basic-addon7"><i class="fa fa-spinner fa-spin"></i></span>
-   </div>
-</div>
-
-
-

- - Left

-
-
- - - - - - - - - - - - - - -
- -
-

- - Right

-
- -
- - - - - - - - - - - - - - -
-
-
-
-
-
-
-

Switch

-
-
- -
-
-
-
- 

-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="basic-addon6"><i class="fa fa-spinner fa-spin"></i></span>
-   </div>
-   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
-      aria-describedby="basic-addon6">
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group">
-   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
-      aria-describedby="basic-addon7">
-   <div class="input-group-append">
-      <span class="input-group-text" id="basic-addon7"><i class="fa fa-spinner fa-spin"></i></span>
-   </div>
-</div>
-
-
-

- - Left

-
-
-
-
- - -
-
-
- -
-

- - Right

-
- -
-
-
- - -
-
-
-
-
-
-
-
-
-

Buttons with dropdowns

-
-
- -
-
-
-
- 

-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
-         aria-haspopup="true" aria-expanded="false">Dropdown </button>
-      <div class="dropdown-menu">
-         <a class="dropdown-item" href="javascript:void(0);">Action</a>
-         <a class="dropdown-item" href="javascript:void(0);">Another action</a>
-         <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
-         <div role="separator" class="dropdown-divider"></div>
-         <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
-      </div>
-   </div>
-   <input type="text" class="form-control" aria-label="Text input with dropdown button">
-</div>
-
-
-

- - Left

-
-
- -
- Action - Another action - Something else here - - Separated link -
-
- -
-

- - Right

-
- -
- -
- Action - Another action - Something else here - - Separated link -
-
-
-
-
-
-
-
-

Segmented buttons

-
-
- -
-
-
-
- 

-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <button type="button" class="btn btn-primary">Action</button>
-      <button type="button" class="btn btn-outline-primary dropone dropdown-toggle dropdown-toggle-split"
-         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-         <i class="las la-angle-down"></i>
-      </button>
-      <div class="dropdown-menu">
-         <a class="dropdown-item" href="javascript:void(0);">Action</a>
-         <a class="dropdown-item" href="javascript:void(0);">Another action</a>
-         <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
-         <div role="separator" class="dropdown-divider"></div>
-         <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
-      </div>
-   </div>
-   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
-</div>
-
-
-

- - Left

-
-
- - -
- Action - Another action - Something else here - - Separated link -
-
- -
-

- - Right

-
- -
- - -
- Action - Another action - Something else here - - Separated link -
-
-
-
-
-
-
-
-

Custom select

-
-
- -
-
-
-
- 

-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <label class="input-group-text" for="inputGroupSelect01">Options</label>
-   </div>
-   <select class="custom-select" id="inputGroupSelect01">
-      <option selected>Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-   </select>
-</div>
-
-
-

- - Left

-
-
- -
- -
-

- - Right

-
- -
- -
-
-

- - Left

-
-
- -
- -
-

- - Right

-
- -
- -
-
-
-
- -
-
-
-

Sizing

-
-
- -
-
-
-
- 

-<div class="input-group input-group-sm mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
-   </div>
-   <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
-</div>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
-   </div>
-   <input type="text" class="form-control" aria-label="Default"
-      aria-describedby="inputGroup-sizing-default">
-</div>
-<div class="input-group input-group-lg">
-   <div class="input-group-prepend">
-      <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
-   </div>
-   <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
-</div>
-
-
-
-
- Small -
- -
-
-
- Default -
- -
-
-
- Large -
- -
-
-
-
-
-
-

Dropdown Icon

-
-
- -
-
-
-
- 

-<div class="input-group mb-4">
-      
-   <div class="input-group-prepend">
-      <button class="btn btn-primary  dropone dropdown-toggle" type="button" data-toggle="dropdown"
-         aria-haspopup="true" aria-expanded="false"><i class="las la-cog font-size-20"></i></button>
-      <div class="dropdown-menu">
-         <a class="dropdown-item" href="javascript:void(0);">Action</a>
-         <a class="dropdown-item" href="javascript:void(0);">Another action</a>
-         <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
-         <div role="separator" class="dropdown-divider"></div>
-         <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
-      </div>
-   </div>
-   <input type="text" class="form-control" placeholder="Dropdown" aria-label="dropdown">
-</div>
-
-
-

- - Left

-
- -
- -
- Action - Another action - Something else here - - Separated link -
-
- -
-

- - Right

-
- -
- -
- Action - Another action - Something else here - - Separated link -
-
-
-
-
-
-
-
-

Checkboxes

-
-
- -
-
-
-
- 

-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <div class="input-group-text">
-         <input type="checkbox" aria-label="Text input with checkbox">
-      </div>
-   </div>
-   <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox"
-      aria-describedby="basic-addon1">
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group">
-   <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox"
-      aria-describedby="basic-addon5">
-   <div class="input-group-append">
-      <div class="input-group-text">
-         <input type="checkbox" aria-label="Text input with checkbox" checked>
-      </div>
-   </div>
-</div>
-
-
-

- - Left

-
-
-
- -
-
- -
-

- - Right

-
- -
-
- -
-
-
-
-
-
-
-
-

Radios

-
-
- -
-
-
-
- 

-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <div class="input-group-text">
-         <input type="radio" name="custom-radio-1" checked>
-      </div>
-   </div>
-   <input type="text" class="form-control" placeholder="Checkbox">
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group">
-   <input type="text" class="form-control" placeholder="Checkbox">
-   <div class="input-group-append">
-      <div class="input-group-text">
-         <input type="radio" name="custom-radio-1" checked>
-      </div>
-   </div>
-</div>
-
-
-

- - Left

-
-
-
- -
-
- -
-

- - Right

-
- -
-
- -
-
-
-
-
-
-
-
-

Multiple inputs

-
-
- -
-
-
-
- 

-<div class="input-group">
-   <div class="input-group">
-      <div class="input-group-prepend">
-         <span class="input-group-text" id="first">First and last name</span>
-      </div>
-      <input type="text" class="form-control">
-      <input type="text" class="form-control">
-   </div>
-</div>
-
-
-
-
-
- First and last name -
- - -
-
-
-
-
-
-
-

Multiple addons

-
-
- -
-
-
-
- 

-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text">$</span>
-      <span class="input-group-text">0.00</span>
-   </div>
-   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group">
-   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-   <div class="input-group-append">
-      <span class="input-group-text">$</span>
-      <span class="input-group-text">0.00</span>
-   </div>
-</div>
-
-
-

- - Left

-
-
- $ - 0.00 -
- -
-

- - Right

-
- -
- $ - 0.00 -
-
-
-
-
-
-
-

Custom select

-
-
- -
-
-
-
- 

-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <button class="btn btn-primary" type="button">Button</button>
-   </div>
-   <input type="text" class="form-control" placeholder="" aria-label="">
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group mb-4">
-   <input type="text" class="form-control" placeholder="Recipient's username"
-      aria-label="Recipient's username">
-   <div class="input-group-append">
-      <button class="btn btn-primary" type="button">Button</button>
-   </div>
-</div>
-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <button class="btn btn-outline-primary" type="button">Button</button>
-      <button class="btn btn-outline-primary" type="button">Button</button>
-   </div>
-   <input type="text" class="form-control" placeholder="" aria-label="">
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group">
-   <input type="text" class="form-control" placeholder="Recipient's username"
-      aria-label="Recipient's username">
-   <div class="input-group-append">
-      <button class="btn btn-outline-primary" type="button">Button</button>
-      <button class="btn btn-outline-primary" type="button">Button</button>
-   </div>
-</div>
-
-
-

- - Left

-
-
- -
- -
-

- - Right

-
- -
- -
-
-

- - Left

-
-
- - -
- -
-

- - Right

-
- -
- - -
-
-
-
-
-
-
-

Custom file input

-
-
- -
-
-
-
- 

-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <span class="input-group-text">Upload</span>
-   </div>
-   <div class="custom-file">
-      <input type="file" class="custom-file-input" id="inputGroupFile01">
-      <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
-   </div>
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group mb-4">
-   <div class="custom-file">
-      <input type="file" class="custom-file-input" id="inputGroupFile02">
-      <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
-   </div>
-   <div class="input-group-append">
-      <span class="input-group-text" id="upload">Upload</span>
-   </div>
-</div>
-<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
-<div class="input-group mb-4">
-   <div class="input-group-prepend">
-      <button class="btn btn-outline-secondary" type="button">Button</button>
-   </div>
-   <div class="custom-file">
-      <input type="file" class="custom-file-input" id="inputGroupFile03">
-      <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
-   </div>
-</div>
-<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
-<div class="input-group">
-   <div class="custom-file">
-      <input type="file" class="custom-file-input" id="inputGroupFile04">
-      <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
-   </div>
-   <div class="input-group-append">
-      <button class="btn btn-outline-secondary" type="button">Button</button>
-   </div>
-</div>
-
-
-

- - Left

-
-
- Upload -
-
- - -
-
-

- - Right

-
-
- - -
-
- Upload -
-
-

- - Left

-
-
- -
-
- - -
-
-

- - Right

-
-
- - -
-
- -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-layout.html b/Datum_UImodel/form-layout.html deleted file mode 100644 index b9a2bf8..0000000 --- a/Datum_UImodel/form-layout.html +++ /dev/null @@ -1,1739 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Basic Form

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="email">Email address:</label>
-      <input type="email" class="form-control" id="email1">
-   </div>
-   <div class="form-group">
-      <label for="pwd">Password:</label>
-      <input type="password" class="form-control" id="pwd">
-   </div>
-   <div class="checkbox mb-3">
-      <label><input type="checkbox"> Remember me</label>
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
-
- - -
-
- -
- - -
-
-
-
-
-
-

Form Grid

-
-
- -
-
-
-
- 

-<form>
-   <div class="row">
-      <div class="col">
-         <input type="text" class="form-control" placeholder="First name">
-      </div>
-      <div class="col">
-         <input type="text" class="form-control" placeholder="Last name">
-      </div>
-   </div>
-</form>
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
-

Textarea

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="exampleFormControlTextarea1"> textarea</label>
-      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
- - -
-
-
-
-
-
-

Input Telephone

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="exampleInputphone">Teliphone Input</label>
-      <input type="tel" class="form-control" id="exampleInputphone" value="1-(555)-555-5555">
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
- - -
-
-
-
-
-
-

Input Search

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="search-text">Search</label>
-      <input id="search-text" type="search" class="form-control" required="">
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
- - -
-
-
-
-
-
-

Input

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="exampleInputText1">Input Text </label>
-      <input type="text" class="form-control" id="exampleInputText1" value="Mark Tech"
-         placeholder="Enter Name">
-   </div>
-   <div class="form-group">
-      <label for="exampleInputEmail2">Email Input</label>
-      <input type="email" class="form-control" id="exampleInputEmail2" value="[email protected]"
-         placeholder="Enter Email">
-   </div>
-   <div class="form-group">
-      <label for="exampleInputNumber3">Number Input</label>
-      <input type="number" class="form-control" id="exampleInputNumber3" value="123456">
-   </div>
-   <div class="form-group">
-      <label for="exampleInputPassword4">Password Input</label>
-      <input type="password" class="form-control" id="exampleInputPassword4" value="example123"
-         placeholder="Enter Password">
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
- - -
-
-
-
-
-
-

Input Size

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="colFormLabelSm">Small</label>
-      <input type="email" class="form-control form-control-sm" id="colFormLabelSm"
-         placeholder="form-control-sm">
-   </div>
-   <div class="form-group">
-      <label for="colFormLabel">Default</label>
-      <input type="email" class="form-control" id="colFormLabel" placeholder="form-control">
-   </div>
-   <div class="form-group mb-0">
-      <label for="colFormLabelLg" class="pb-0">Large</label>
-      <input type="email" class="form-control form-control-lg" id="colFormLabelLg"
-         placeholder="form-control-lg">
-   </div>
-</form>
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
- -
-
-
-

Horizontal Form

-
-
- -
-
-
-
- 

-<form class="form-horizontal" action="/action_page.php">
-   <div class="form-group row">
-      <label class="control-label col-sm-3 align-self-center" for="email">Email:</label>
-      <div class="col-sm-9">
-         <input type="email" class="form-control" id="email" placeholder="Enter Your  email">
-      </div>
-   </div>
-   <div class="form-group row">
-      <label class="control-label col-sm-3 align-self-center" for="pwd1">Password:</label>
-      <div class="col-sm-9">
-         <input type="password" class="form-control" id="pwd1" placeholder="Enter Your password">
-      </div>
-   </div>
-   <div class="form-group">
-      <div class="checkbox">
-         <label><input type="checkbox"> Remember me</label>
-      </div>
-   </div>
-   <div class="form-group">
-      <button type="submit" class="btn btn-primary">Submit</button>
-      <button type="submit" class="btn bg-danger">Cancel</button>
-   </div>
-</form>
-
-
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
-
-
- - -
-
-
-
-
-
-
-

Form row

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-row">
-      <div class="col">
-         <input type="text" class="form-control" placeholder="First name">
-      </div>
-      <div class="col">
-         <input type="text" class="form-control" placeholder="Last name">
-      </div>
-   </div>
-</form>
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
-

Input Url

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="exampleInputurl">Url Input</label>
-      <input type="url" class="form-control" id="exampleInputurl" value="https://getbootstrap.com"
-         placeholder="Enter Url">
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
- - -
-
-
-
-
-
-

Input Range

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="formControlRange">Range input</label>
-      <input type="range" class="form-control-range" id="formControlRange">
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
- - -
-
-
-
-
-
-

Input Custom Range

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="customRange1">Range Input</label>
-      <input type="range" class="custom-range" id="customRange1">
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
- - -
-
-
-
-
-
-

Input Choose file

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <div class="custom-file">
-         <input type="file" class="custom-file-input" id="customFile">
-         <label class="custom-file-label" for="customFile">Choose file</label>
-      </div>
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-

Input

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-group">
-      <label for="exampleInputDisabled5">Disabled Input</label>
-      <input type="text" class="form-control" id="exampleInputDisabled5" disabled="" value="Mark Tech">
-   </div>
-   <div class="form-group">
-      <label for="exampleInputPlaceholder">Placeholder</label>
-      <input type="text" class="form-control" id="exampleInputPlaceholder"
-         placeholder="This is Placeholder">
-   </div>
-   <div class="form-group">
-      <label for="exampleInputReadonly">Readonly</label>
-      <input type="text" class="form-control" id="exampleInputReadonly" readonly="" value="Mark Tech">
-   </div>
-   <div class="form-group">
-      <label for="exampleInputcolor">Input Color </label>
-      <input type="color" class="form-control" id="exampleInputcolor" value="#4788ff">
-   </div>
-   <button type="submit" class="btn btn-primary">Submit</button>
-   <button type="submit" class="btn bg-danger">Cancel</button>
-</form>
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
- - -
-
-
-
-
-
-

Select Size

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <label>Small</label>
-   <select class="form-control form-control-sm mb-3">
-      <option selected="">Open this select menu</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-   </select>
-</div>
-<div class="form-group">
-   <label>Default</label>
-   <select class="form-control mb-3">
-      <option selected="">Open this select menu</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-   </select>
-</div>
-<div class="form-group">
-   <label>Large</label>
-   <select class="form-control form-control-lg">
-      <option selected="">Open this select menu</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-   </select>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-quill.html b/Datum_UImodel/form-quill.html deleted file mode 100644 index 8df0cd9..0000000 --- a/Datum_UImodel/form-quill.html +++ /dev/null @@ -1,1128 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Basic Quill Editor

-
-
- -
-
-
-
- 

-<div id="editor"></div> 
-
-//Script
-
-if (jQuery("#editor").length) {
-  var quill = new Quill('#editor', {
-  theme: 'snow'
-  });
-}
-
-
-
-
-
-
-
-
-
-
-

Custom Select

-
-
- -
-
-
-
- 

-<div id="content-container">
-      <div id="quill-tool">
-         <button class="ql-bold" data-toggle="tooltip" data-placement="bottom" title="Bold"></button>
-         <button class="ql-underline" data-toggle="tooltip" data-placement="bottom" title="Underline"></button>
-         <button class="ql-italic" data-toggle="tooltip" data-placement="bottom" title="Add italic text <cmd+i>"></button>
-         <button class="ql-image" data-toggle="tooltip" data-placement="bottom" title="Upload image"></button>
-         <button class="ql-code-block" data-toggle="tooltip" data-placement="bottom" title="Show code"></button>
-      </div>
-      <div id="quill-toolbar">
-         <h1>This is a heading text...</h1>
-         <br/>
-         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui arcu, pellentesque id mattis sed, mattis semper erat. Etiam commodo arcu a mollis consequat. Curabitur pretium auctor tortor, bibendum placerat elit feugiat et. Ut ac turpis nec dui ullamcorper ornare. Vestibulum finibus quis magna at accumsan. Praesent a purus vitae tortor fringilla tempus vel non purus. Suspendisse eleifend nibh porta dolor ullamcorper laoreet. Ut sit amet ipsum vitae lectus pharetra tincidunt. In ipsum quam, iaculis at erat ut, fermentum efficitur ipsum. Nunc odio diam, fringilla in auctor et, scelerisque at lorem. Sed convallis tempor dolor eu dictum. Cras ornare ornare imperdiet. Pellentesque sagittis lacus non libero fringilla faucibus. Aenean ullamcorper enim et metus vestibulum, eu aliquam nunc placerat. Praesent fringilla dolor sit amet leo pulvinar semper. </p>
-      </div>
-</div>
-
-//Script
-
-if (jQuery("#quill-toolbar").length) {
-  var quill = new Quill('#quill-toolbar', {
-      modules: {
-        toolbar: '#quill-tool'
-      },
-      placeholder: 'Compose an epic...',
-      theme: 'snow'
-  });
-
-
-
-
- - - - - -
-
-

This is a heading text...

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui arcu, pellentesque id mattis sed, mattis semper erat. Etiam commodo arcu a mollis consequat. Curabitur pretium auctor tortor, bibendum placerat elit feugiat et. Ut ac turpis nec dui ullamcorper ornare. Vestibulum finibus quis magna at accumsan. Praesent a purus vitae tortor fringilla tempus vel non purus. Suspendisse eleifend nibh porta dolor ullamcorper laoreet. Ut sit amet ipsum vitae lectus pharetra tincidunt. In ipsum quam, iaculis at erat ut, fermentum efficitur ipsum. Nunc odio diam, fringilla in auctor et, scelerisque at lorem. Sed convallis tempor dolor eu dictum. Cras ornare ornare imperdiet. Pellentesque sagittis lacus non libero fringilla faucibus. Aenean ullamcorper enim et metus vestibulum, eu aliquam nunc placerat. Praesent fringilla dolor sit amet leo pulvinar semper.

-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-radio.html b/Datum_UImodel/form-radio.html deleted file mode 100644 index 44c68c8..0000000 --- a/Datum_UImodel/form-radio.html +++ /dev/null @@ -1,1293 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Default Radio Buttons

-
-
- -
-
-
-
- 

-<div class="radio d-inline-block mr-2">
-   <input type="radio" name="bsradio" id="radio1" checked="">
-   <label for="radio1">Active</label>
-</div>
-<div class="radio d-inline-block mr-2">
-   <input type="radio" name="bsradio" id="radio2">
-   <label for="radio2">Inactive</label>
-</div>
-<div class="radio d-inline-block mr-2">
-   <input type="radio" name="bsradio1" id="radio3" disabled="" checked="">
-   <label for="radio3">Active - Disabled</label>
-</div>
-<div class="radio d-inline-block mr-2">
-   <input type="radio" name="bsradio1" id="radio4" disabled="">
-   <label for="radio3">Inactive - Disabled</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Custom Colored Radio Buttons

-
-
- -
-
-
-
- 

-<div class="custom-control custom-radio custom-radio-color custom-control-inline">
-   <input type="radio" id="customRadio01" name="customRadio-11" class="custom-control-input bg-primary">
-   <label class="custom-control-label" for="customRadio01"> Primary </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color custom-control-inline">
-   <input type="radio" id="customRadio02" name="customRadio-11" class="custom-control-input bg-success">
-   <label class="custom-control-label" for="customRadio02"> Success </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color custom-control-inline">
-   <input type="radio" id="customRadio03" name="customRadio-11" class="custom-control-input bg-danger">
-   <label class="custom-control-label" for="customRadio03"> Danger </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color custom-control-inline">
-   <input type="radio" id="customRadio04" name="customRadio-11" class="custom-control-input bg-warning">
-   <label class="custom-control-label" for="customRadio04"> Warning </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color custom-control-inline">
-   <input type="radio" id="customRadio05" name="customRadio-11" class="custom-control-input bg-dark">
-   <label class="custom-control-label" for="customRadio05"> Dark </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color custom-control-inline">
-   <input type="radio" id="customRadio06" name="customRadio-11" class="custom-control-input bg-info">
-   <label class="custom-control-label" for="customRadio06"> Info </label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Custom Radio Buttons

-
-
- -
-
-
-
- 

-<div class="custom-control custom-radio custom-control-inline">
-   <input type="radio" id="customRadio6" name="customRadio-1" class="custom-control-input">
-   <label class="custom-control-label" for="customRadio6"> One </label>
-</div>
-<div class="custom-control custom-radio custom-control-inline">
-   <input type="radio" id="customRadio7" name="customRadio-1" class="custom-control-input">
-   <label class="custom-control-label" for="customRadio7"> Two </label>
-</div>
-<div class="custom-control custom-radio custom-control-inline">
-   <input type="radio" id="customRadio8" name="customRadio-1" class="custom-control-input" checked="">
-   <label class="custom-control-label" for="customRadio8"> Three </label>
-</div>
-<div class="custom-control custom-radio custom-control-inline">
-   <input type="radio" id="customRadio-8" name="customRadio-2" class="custom-control-input" checked="">
-   <label class="custom-control-label" for="customRadio-8"> Four Checked </label>
-</div>
-<div class="custom-control custom-radio custom-control-inline">
-   <input type="radio" id="customRadio9" name="customRadio-3" class="custom-control-input" disabled="">
-   <label class="custom-control-label" for="customRadio9"> Five disabled</label>
-</div>
-<div class="custom-control custom-radio custom-control-inline">
-   <input type="radio" id="customRadio10" name="customRadio-4" class="custom-control-input" disabled="" checked="">
-   <label class="custom-control-label" for="customRadio10"> Six Selected and  disabled</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Colored Radio Buttons

-
-
- -
-
-
-
- 

-<div class="custom-control custom-radio custom-radio-color-checked custom-control-inline">
-   <input type="radio" id="customRadio-1" name="customRadio-10" class="custom-control-input bg-primary">
-   <label class="custom-control-label" for="customRadio-1"> Primary </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color-checked custom-control-inline">
-   <input type="radio" id="customRadio-2" name="customRadio-10" class="custom-control-input bg-success">
-   <label class="custom-control-label" for="customRadio-2"> Success </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color-checked custom-control-inline">
-   <input type="radio" id="customRadio-3" name="customRadio-10" class="custom-control-input bg-danger">
-   <label class="custom-control-label" for="customRadio-3"> Danger </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color-checked custom-control-inline">
-   <input type="radio" id="customRadio-4" name="customRadio-10" class="custom-control-input bg-warning">
-   <label class="custom-control-label" for="customRadio-4"> Warning </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color-checked custom-control-inline">
-   <input type="radio" id="customRadio-5" name="customRadio-10" class="custom-control-input bg-dark">
-   <label class="custom-control-label" for="customRadio-5"> Dark </label>
-</div>
-<div class="custom-control custom-radio custom-radio-color-checked custom-control-inline">
-   <input type="radio" id="customRadio-6" name="customRadio-10" class="custom-control-input bg-info">
-   <label class="custom-control-label" for="customRadio-6"> Info </label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-select.html b/Datum_UImodel/form-select.html deleted file mode 100644 index 9bbc502..0000000 --- a/Datum_UImodel/form-select.html +++ /dev/null @@ -1,1413 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Basic select boxes

-
-
- -
-
-
-
- 

-<select class="form-control" id="sel1" name="sellist1">
-   <option>1</option>
-   <option>2</option>
-   <option>3</option>
-   <option>4</option>
-</select>
-
-
- -
-
-
-
-
-

Mutiple select

-
-
- -
-
-
-
- 

-<select multiple class="form-control" id="sel2" name="sellist2">
-   <option>1</option>
-   <option>2</option>
-   <option>3</option>
-   <option>4</option>
-   <option>5</option>
-</select>
-
-
- -
-
-
-
-
-

Basic Select with Input Group

-
-
- -
-
-
-
- 

-<div class="input-group mb-3">
-   <div class="input-group-prepend">
-      <label class="input-group-text" for="inputGroupSelect01">Options</label>
-   </div>
-   <select class="form-control" id="inputGroupSelect01">
-      <option selected="">Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-   </select>
-   </div>
-   <div class="input-group">
-   <select class="form-control" id="inputGroupSelect02">
-      <option selected="">Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-   </select>
-   <div class="input-group-append">
-      <label class="input-group-text" for="inputGroupSelect02">Options</label>
-   </div>
-</div>
-
-
-
-
- -
- -
-
- -
- -
-
-
-
-
-
-
-

Single Select2

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <select class="form-control ">
-      <option>Java</option>
-      <option>Javascript</option>
-      <option>PHP</option>
-      <option>Visual Basic</option>
-   </select>
-</div>
-
-
-
- -
-
-
-
-
-
-

Multiple Select2

-
-
- -
-
-
-
- 

-<select id="multiple" class="js-states form-control" multiple>
-   <option>Red</option>
-   <option>Green</option>
-   <option>Blue</option>
-   <option>Yellow</option>
-</select>
-
-
- -
-
- -
-
-
-

Custom Select

-
-
- -
-
-
-
- 

-<select class="custom-select form-control">
-   <option selected="">Open this menu</option>
-   <option value="IT">IT</option>
-   <option value="Blade Runner">Blade Runner</option>
-   <option value="Thor Ragnarok">Thor Ragnarok</option>
-</select>
-
-
- -
-
-
-
-
-

Disabled Select

-
-
- -
-
-
-
- 

-<select disabled="disabled" id="disabledSelect" class="form-control">
-   <option>Disabled select</option>
-   <option>1</option>
-   <option>2</option>
-   <option>3</option>
-</select>
-
-
- -
-
-
-
-
-

Custome Select with Input Group

-
-
- -
-
-
-
- 

-<div class="input-group mb-3">
-   <div class="input-group-prepend">
-      <label class="input-group-text" for="inputGroupSelect03">Options</label>
-   </div>
-   <select class="custom-select" id="inputGroupSelect03">
-      <option selected>Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-   </select>
-</div>
-
-
-
-
- -
- -
-
- -
- -
-
-
-
-
-
-
-

Custom Select Menu Sizing

-
-
- -
-
-
-
- 

-<form>
-   <select class="custom-select custom-select-sm mb-3">
-      <option selected>Small Custom Select Menu</option>
-      <option value="volvo">Volvo</option>
-      <option value="fiat">Fiat</option>
-      <option value="audi">Audi</option>
-   </select>
-   <select name="cars" class="custom-select mb-3">
-      <option selected>Default Custom Select Menu</option>
-      <option value="volvo">Volvo</option>
-      <option value="fiat">Fiat</option>
-      <option value="audi">Audi</option>
-   </select>
-   <select name="cars" class="custom-select custom-select-lg mb-3">
-      <option selected>Large Custom Select Menu</option>
-      <option value="volvo">Volvo</option>
-      <option value="fiat">Fiat</option>
-      <option value="audi">Audi</option>
-   </select>
-</form>
-
-
-
- - - -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-switch.html b/Datum_UImodel/form-switch.html deleted file mode 100644 index edb074a..0000000 --- a/Datum_UImodel/form-switch.html +++ /dev/null @@ -1,1431 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Basic Switch

-
-
- -
-
-
-
- 

-<div class="custom-control custom-switch custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customSwitch2" checked="">
-   <label class="custom-control-label" for="customSwitch2">Active Switch</label>
-</div>
-<div class="custom-control custom-switch custom-control-inline">
-   <input type="checkbox" class="custom-control-input" id="customSwitch1">
-   <label class="custom-control-label" for="customSwitch1">Inactive Switch </label>
-</div>
-<div class="custom-control custom-switch custom-control-inline">
-   <input type="checkbox" class="custom-control-input" disabled checked="" id="customSwitch3">
-   <label class="custom-control-label" for="customSwitch3">Disabled Active Switch</label>
-</div>
-<div class="custom-control custom-switch custom-control-inline">
-   <input type="checkbox" class="custom-control-input" disabled id="customSwitch4">
-   <label class="custom-control-label" for="customSwitch4">Disabled Inactive Switch</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Text

-
-
- -
-
-
-
- 

-<div class="custom-control custom-switch custom-switch-text custom-control-inline">
-   <div class="custom-switch-inner">
-      <p class="mb-0"> Primary </p>
-      <input type="checkbox" class="custom-control-input" id="customSwitch-11" checked="">
-      <label class="custom-control-label" for="customSwitch-11" data-on-label="On" data-off-label="Off">
-      </label>
-   </div>
-</div>
-<div class="custom-control custom-switch custom-switch-text custom-switch-color custom-control-inline">
-   <div class="custom-switch-inner">
-      <p class="mb-0"> Success </p>
-      <input type="checkbox" class="custom-control-input bg-success" id="customSwitch-22" checked="">
-      <label class="custom-control-label" for="customSwitch-22" data-on-label="Tr" data-off-label="Fal">
-      </label>
-   </div>
-</div>
-<div class="custom-control custom-switch custom-switch-text custom-switch-color custom-control-inline">
-   <div class="custom-switch-inner">
-      <p class="mb-0"> Danger </p>
-      <input type="checkbox" class="custom-control-input bg-danger" id="customSwitch-33" checked="">
-      <label class="custom-control-label" for="customSwitch-33" data-on-label="Yes" data-off-label="No">
-      </label>
-   </div>
-</div>
-
-
-
-
-

Primary

- - -
-
-
-
-

Success

- - -
-
-
-
-

Danger

- - -
-
-
-
- -
-
-
-

Color

-
-
- -
-
-
-
- 

-<div class="custom-control custom-switch custom-switch-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-primary" id="customSwitch01" checked="">
-   <label class="custom-control-label" for="customSwitch01">Primary</label>
-</div>
-<div class="custom-control custom-switch custom-switch-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-success" id="customSwitch02" checked="">
-   <label class="custom-control-label" for="customSwitch02">Success</label>
-</div>
-<div class="custom-control custom-switch custom-switch-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-danger" id="customSwitch03" checked="">
-   <label class="custom-control-label" for="customSwitch03">Danger</label>
-</div>
-<div class="custom-control custom-switch custom-switch-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-waring" id="customSwitch04" checked="">
-   <label class="custom-control-label" for="customSwitch04">Waring</label>
-</div>
-<div class="custom-control custom-switch custom-switch-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-dark" id="customSwitch05" checked="">
-   <label class="custom-control-label" for="customSwitch05">Dark</label>
-</div>
-<div class="custom-control custom-switch custom-switch-color custom-control-inline">
-   <input type="checkbox" class="custom-control-input bg-info" id="customSwitch06" checked="">
-   <label class="custom-control-label" for="customSwitch06">Info</label>
-</div>
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-

Icon

-
-
- -
-
-
-
- 

-<div class="custom-control custom-switch custom-switch-icon custom-control-inline">
-<div class="custom-switch-inner">
-   <p class="mb-0"> Primary </p>
-   <input type="checkbox" class="custom-control-input" id="customSwitch-1" checked="">
-   <label class="custom-control-label" for="customSwitch-1">
-      <span class="switch-icon-left"><i class="fa fa-check"></i></span>
-      <span class="switch-icon-right"><i class="fa fa-check"></i></span>
-   </label>
-</div>
-</div>
-<div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
-<div class="custom-switch-inner">
-   <p class="mb-0"> Success </p>
-   <input type="checkbox" class="custom-control-input bg-success" id="customSwitch-2" checked="">
-   <label class="custom-control-label" for="customSwitch-2">
-      <span class="switch-icon-left"><i class="fa fa-check"></i></span>
-      <span class="switch-icon-right"><i class="fa fa-check"></i></span>
-   </label>
-</div>
-</div>
-<div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
-<div class="custom-switch-inner">
-   <p class="mb-0"> Danger </p>
-   <input type="checkbox" class="custom-control-input bg-danger" id="customSwitch-3" checked="">
-   <label class="custom-control-label" for="customSwitch-3">
-      <span class="switch-icon-left"><i class="fa fa-times"></i></span>
-      <span class="switch-icon-right"><i class="fa fa-times"></i></span>
-   </label>
-</div>
-</div>
-<div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
-<div class="custom-switch-inner">
-   <p class="mb-0"> Warning </p>
-   <input type="checkbox" class="custom-control-input bg-warning" id="customSwitch-4" checked="">
-   <label class="custom-control-label" for="customSwitch-4">
-      <span class="switch-icon-left"><i class="fa fa-exclamation-triangle"></i></span>
-      <span class="switch-icon-right"><i class="fa fa-exclamation-triangle"></i></span>
-   </label>
-</div>
-</div>
-<div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
-<div class="custom-switch-inner">
-   <p class="mb-0"> Dark </p>
-   <input type="checkbox" class="custom-control-input bg-dark" id="customSwitch-5" checked="">
-   <label class="custom-control-label" for="customSwitch-5">
-      <span class="switch-icon-left"><i class="fa fa-thumb-tack"></i></span>
-      <span class="switch-icon-right"><i class="fa fa-thumb-tack"></i></span>
-   </label>
-</div>
-</div>
-<div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
-<div class="custom-switch-inner">
-   <p class="mb-0"> Info </p>
-   <input type="checkbox" class="custom-control-input bg-info" id="customSwitch-6" checked="">
-   <label class="custom-control-label" for="customSwitch-6">
-      <span class="switch-icon-left"><i class="fa fa-info"></i></span>
-      <span class="switch-icon-right"><i class="fa fa-info"></i></span>
-   </label>
-</div>
-</div>
-
-
-
-
-

Primary

- - -
-
-
-
-

Success

- - -
-
-
-
-

Danger

- - -
-
-
-
-

Warning

- - -
-
-
-
-

Dark

- - -
-
-
-
-

Info

- - -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-textarea.html b/Datum_UImodel/form-textarea.html deleted file mode 100644 index a70105e..0000000 --- a/Datum_UImodel/form-textarea.html +++ /dev/null @@ -1,1161 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Default

-
-
- -
-
-
-
- 

-<div class="form-group">
-   <label for="exampleFormControlTextarea1">textarea</label>
-   <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
-</div>
-
-
-
- - -
-
-
-
-
-
-

Horizontal Input

-
-
- -
-
-
-
- 

-<div class="form-group row align-items-center">
-   <div class="col-sm-3 col-4">
-      <label class="col-form-label">Description</label>
-   </div>
-   <div class="col-sm-9 col-8">
-      <textarea class="form-control" id="horizontalTextarea" rows="3" placeholder="Textarea"></textarea>
-   </div>
-</div>
-
-
-
-
- -
-
- -
-
-
-
- -
-
-
-

Floating Label

-
-
- -
-
-
-
- 

-<div class="form-label-group">
-   <textarea class="form-control" id="exampleFormControlTextarea2" rows="4"
-      placeholder="Label in Textarea"></textarea>
-   <label>Textarea</label>
-</div>
-
-
-
- - -
-
-
-
-
-
-

Counter

-
-
- -
-
-
-
- 

-<div class="form-label-group mb-0">
-   <textarea data-length="20" class="form-control" id="exampleFormControlTextarea3" rows="3"
-      placeholder="Counter"></textarea>
-   <label>Counter</label>
-</div>
-
-
-
- - -
- 0 / 20 -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/form-validation.html b/Datum_UImodel/form-validation.html deleted file mode 100644 index e9a036b..0000000 --- a/Datum_UImodel/form-validation.html +++ /dev/null @@ -1,1528 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Default Validation

-
-
- -
-
-
-
- 

-<form>
-   <div class="form-row">
-      <div class="col-md-6 mb-3">
-         <label for="validationDefault01">First name</label>
-         <input type="text" class="form-control" id="validationDefault01" required>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationDefault02">Last name</label>
-         <input type="text" class="form-control" id="validationDefault02" required>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationDefaultUsername">Username</label>
-         <div class="input-group">
-            <div class="input-group-prepend">
-               <span class="input-group-text" id="inputGroupPrepend2">@</span>
-            </div>
-            <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationDefault03">City</label>
-         <input type="text" class="form-control" id="validationDefault03" required>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationDefault04">State</label>
-         <select class="form-control" id="validationDefault04" required>
-            <option selected disabled value="">Choose...</option>
-            <option>...</option>
-         </select>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationDefault05">Zip</label>
-         <input type="text" class="form-control" id="validationDefault05" required>
-      </div>
-   </div>
-   <div class="form-group">
-      <div class="form-check">
-         <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
-         <label class="form-check-label" for="invalidCheck2">
-         Agree to terms and conditions
-         </label>
-      </div>
-   </div>
-   <div class="form-group">
-      <button class="btn btn-primary" type="submit">Submit form</button>
-   </div>
-</form>
-
-
-
-
-
- - -
-
- - -
-
- -
-
- @ -
- -
-
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
-
- -
-
-
-
-
-
-
-

Supported elements

-
-
- -
-
-
-
- 

-<form class="was-validated">
-   <div class="mb-3">
-      <label for="validationTextarea">Textarea</label>
-      <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
-      <div class="invalid-feedback">
-         Please enter a message in the textarea.
-      </div>
-   </div>
-   <div class="custom-control custom-checkbox mb-3">
-      <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
-      <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
-      <div class="invalid-feedback">Example invalid feedback text</div>
-   </div>
-   <div class="custom-control custom-radio">
-      <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
-      <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
-   </div>
-   <div class="custom-control custom-radio mb-3">
-      <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
-      <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
-      <div class="invalid-feedback">More example invalid feedback text</div>
-   </div>
-   <div class="form-group">
-      <select class="custom-select" required>
-         <option value="">Open this select menu</option>
-         <option value="1">One</option>
-         <option value="2">Two</option>
-         <option value="3">Three</option>
-      </select>
-      <div class="invalid-feedback">Example invalid custom select feedback</div>
-   </div>
-   <div class="custom-file">
-      <input type="file" class="custom-file-input" id="validatedCustomFile" required>
-      <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
-      <div class="invalid-feedback">Example invalid custom file feedback</div>
-   </div>
-</form>
-
-
-
-
- - -
- Please enter a message in the textarea. -
-
-
- - -
Example invalid feedback text
-
-
- - -
-
- - -
More example invalid feedback text
-
-
- -
Example invalid custom select feedback
-
-
- - -
Example invalid custom file feedback
-
-
-
-
- -
-
-
-

Custom Validation

-
-
- -
-
-
-
- 

-<form class="needs-validation" novalidate>
-   <div class="form-row">
-      <div class="col-md-6 mb-3">
-         <label for="validationCustom01">First name</label>
-         <input type="text" class="form-control" id="validationCustom01"  required>
-         <div class="valid-feedback">
-            Looks good!
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationCustom02">Last name</label>
-         <input type="text" class="form-control" id="validationCustom02"  required>
-         <div class="valid-feedback">
-            Looks good!
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationCustomUsername">Username</label>
-         <div class="input-group">
-            <div class="input-group-prepend">
-               <span class="input-group-text" id="inputGroupPrepend">@</span>
-            </div>
-            <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
-            <div class="invalid-feedback">
-               Please choose a username.
-            </div>
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationCustom03">City</label>
-         <input type="text" class="form-control" id="validationCustom03" required>
-         <div class="invalid-feedback">
-            Please provide a valid city.
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationCustom04">State</label>
-         <select class="form-control" id="validationCustom04" required>
-            <option selected disabled value="">Choose...</option>
-            <option>...</option>
-         </select>
-         <div class="invalid-feedback">
-            Please select a valid state.
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationCustom05">Zip</label>
-         <input type="text" class="form-control" id="validationCustom05" required>
-         <div class="invalid-feedback">
-            Please provide a valid zip.
-         </div>
-      </div>
-   </div>
-   <div class="form-group">
-      <div class="form-check">
-         <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
-         <label class="form-check-label" for="invalidCheck">
-         Agree to terms and conditions
-         </label>
-         <div class="invalid-feedback">
-            You must agree before submitting.
-         </div>
-      </div>
-   </div>
-   <button class="btn btn-primary" type="submit">Submit form</button>
-</form>
-
-
-
-
-
- - -
- Looks good! -
-
-
- - -
- Looks good! -
-
-
- -
-
- @ -
- -
- Please choose a username. -
-
-
-
- - -
- Please provide a valid city. -
-
-
- - -
- Please select a valid state. -
-
-
- - -
- Please provide a valid zip. -
-
-
-
-
- - -
- You must agree before submitting. -
-
-
- -
-
-
-
-
-
-

Tooltips

-
-
- -
-
-
-
- 

-<form class="needs-validation" novalidate>
-   <div class="form-row">
-      <div class="col-md-6 mb-3">
-         <label for="validationTooltip01">First name</label>
-         <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
-         <div class="valid-tooltip">
-            Looks good!
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationTooltip02">Last name</label>
-         <input type="text" class="form-control" id="validationTooltip02" value="Tech" required>
-         <div class="valid-tooltip">
-            Looks good!
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationTooltipUsername">Username</label>
-         <div class="input-group">
-            <div class="input-group-prepend">
-               <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
-            </div>
-            <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
-            <div class="invalid-tooltip">
-               Please choose a unique and valid username.
-            </div>
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationTooltip03">City</label>
-         <input type="text" class="form-control" id="validationTooltip03" required>
-         <div class="invalid-tooltip">
-            Please provide a valid city.
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationTooltip04">State</label>
-         <select class="form-control" id="validationTooltip04" required>
-            <option selected disabled value="">Choose...</option>
-            <option>...</option>
-         </select>
-         <div class="invalid-tooltip">
-            Please select a valid state.
-         </div>
-      </div>
-      <div class="col-md-6 mb-3">
-         <label for="validationTooltip05">Zip</label>
-         <input type="text" class="form-control" id="validationTooltip05" required>
-         <div class="invalid-tooltip">
-            Please provide a valid zip.
-         </div>
-      </div>
-   </div>
-   <button class="btn btn-primary" type="submit">Submit form</button>
-</form>
-
-
-
-
-
- - -
- Looks good! -
-
-
- - -
- Looks good! -
-
-
- -
-
- @ -
- -
- Please choose a unique and valid username. -
-
-
-
- - -
- Please provide a valid city. -
-
-
- - -
- Please select a valid state. -
-
-
- - -
- Please provide a valid zip. -
-
-
- -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/icon-heroicon.html b/Datum_UImodel/icon-heroicon.html deleted file mode 100644 index e8dd570..0000000 --- a/Datum_UImodel/icon-heroicon.html +++ /dev/null @@ -1,1355 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Heroicons Icon

-
-
-
-

Use As <svg xmlns="http://www.w3.org/2000/svg">....</svg>

-
-
- - - - - - - Academic Cap - -
-
- - - - - Annotation - -
-
- - - - - Beaker - -
-
- - - - - Bookmark - -
-
- - - - - Camera - -
-
- - - - Cash - -
-
- - - - Chat-Alt-2 - -
-
- - - - Check-Circle - -
-
- - - - Double-Left - -
-
- - - - - Calculator-Fill -
-
- - - - - Calendar-Line - -
-
- - - - Scale - -
-
- - - - Reply-Line - -
-
- - - - Chip - -
-
- - - - Clipboard-Check - -
-
- - - - Cloud-Download - -
-
- - - - Code - -
-
- - - - Cloud - -
-
- - - - Credit Card - -
-
- - - - Color-Swatch - -
-
- - - - Cube-Transparent - -
-
- - - - Currency-Dollar - -
-
- - - - Database - -
-
- - - - Desktop - -
-
- - - - Document - -
-
- - - - Download - -
-
- - - - Exclamation-Circle - -
-
- - - - - Eye - -
-
- - - - Fingerprint - -
-
- - - - Filter - -
-
- - - - Flag - -
-
- - - - - Fire - -
-
- - - - Gift - -
-
- - - - Globe - -
-
- - - - Hashtag - -
-
- - - - Heart - -
-
- - - - Home - -
-
- - - - Inbox - -
-
- - - - Lock-Closed - -
-
- - - Login - -
-
- - - - Menu - -
-
- - - - Chart-Bar - -
-
- View All Icon -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/index.html b/Datum_UImodel/index.html deleted file mode 100644 index 74f9f44..0000000 --- a/Datum_UImodel/index.html +++ /dev/null @@ -1,1522 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-

Overview

-
-
- - - - - - -
- - To - -
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-

Total Profit

-
-
$95,595
-

+3.55%

-
-
-
-
-
-
-
-
-
-
-
-

Total Expenses

-
-
$12,789
-

+2.67%

-
-
-
-
-
-
-
-
-
-
-
-

New Users

-
-
13,984
-

-9.98%

-
-
-
-
-
-
-
-
-
-
-

Sales Report

-
-
- - - Incomes -
-
- - - Expenses -
-
-
-
-
-
-
-
-
-
-
-
-
-

Top Selling Product

-
-
-
-
    -
  • -
    - 1.jpg -
    -
    -

    Rockerz Bluetooth Headset

    -
    -
    -
    $1,056
    -
    -
    • -
  • -
    - 2.jpg -
    -
    -

    Wifi Security Camera

    -
    -
    -
    $1,799
    -
    -
    • -
  • -
    - 3.jpg -
    -
    -

    Stone Bluetooth Speaker

    -
    -
    -
    $1,099
    -
    -
    • -
  • -
    - 4.jpg -
    -
    -

    Ryzen 5 Hexa Core 5600H

    -
    -
    -
    $9,999
    -
    -
    • -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
1,860 /3k Target
- Order In Period -
-
-
-
-
-
-
-
-
-
Active Users
-
- - - - 200 -
-
-

Pages views per day

-
-
-

25 June

-

26 June

-

27 June

-
-
-
-
-
-
-
-
-
-
-

Upcoming Events

-
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - 30 Jun, Tue
- 		- Big Billion Day Sale -
-
- - - - 09 July, Mon
- 		- 5% Off on Mobile -
-
- - - - 15 Aug, Sun
- 		- Electronics Sale -
-
- - - - 26 Oct, Thu
- 		- Fashionable Sale -
-
- - - - 25 Dec, Fri
- 		- 5% Off on Cloths -
- -
-
- -
-
-
-
-
-
-
-

Popular Categories

-
-
-
- - - - Mobile -
-
- - - - - Laptop -
-
-
-
- - - - - Electronics -
-
- - - - - Others -
-
-
-
-
-
-
-
-
-

New Customer

-
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DateCustomerStatusTotal
01 Jun 2020 -
-
- image -
-
Maggie Potts
-
- 		-

- - - Completed -

- 		$104.98
02 Jun 2020 -
-
- image -
-
Kevin Adkins
-
- 		-

- - - Completed -

- 		$233.00
05 Jun 2020 -
-
- image -
-
Max Lynn
-
- 		-

- - - Pending -

- 		$150.01
06 Jun 2020 -
-
- image -
-
Danniw Yatt
-
- 		-

- - - Cancelled -

- 		$199.99
-
- -
-
-
-
-
- -
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/invoice-view.html b/Datum_UImodel/invoice-view.html deleted file mode 100644 index 30cb9ee..0000000 --- a/Datum_UImodel/invoice-view.html +++ /dev/null @@ -1,1187 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
-
-
-

Invoice View

- - - - - Back - -
-
-
-
-
-
-
- user-icon -
-
-
-
Invoice number
-

IN-05866

-
-
-
-
-
Invoice Date
-

2nd Oct 2019 03:16 PM

-
-
-
-
-
-
-
Invoice From
-

Chris Wood

-

4183 Forest Avenue

-

New York

-

10011

-

USA

-

[email protected]

-
-
-
-
-
Invoice To
-

Blueberry LLC

-

354 Roy Allen

-

Denver

-

80202

-

USA

-

[email protected]

-
-
-
-
-
-
    -
  • -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NoDescriptionQuantityPrice
    - 1 - - OR-325548 - - 6 - - $800 -
    - 2 - - OR-500008 - - 3 - - $500 -
    - 3 - - OR-654412 - - 5 - - $600 -
    -
    -
    • -
  • -
    - Subtotal:

    $1,600

    -
    -
    - Taxes:

    $300

    -
    -
    - Total:

    $1,900

    -
    - -
    • -
-
-
-
-
-
Notes
-

Please send all items at the same time to the shipping address. Thanksin advance.

-
-
- - -
-
-
-
-
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/invoice.html b/Datum_UImodel/invoice.html deleted file mode 100644 index 21abc5c..0000000 --- a/Datum_UImodel/invoice.html +++ /dev/null @@ -1,1640 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
- -
-
-
-

All Invoice

-
-
-
-
-
-
- - - - - - -
-
- - - - - Add Invoice - -
-
-
-
- -
-
-
-
-
-
Invoices List
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - -
-
- 		- - - - - - - - - - - Action -
-
- - -
- 		-
-
- user-icon -
-
-
- Christian Bale -
-

- [email protected] -

-
-
- 		01 Jan 2021 - IN-325560 - - $104.98 - -

- - - Paid -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Matt Damon -
-

- [email protected] -

-
-
- 		02 Jan 2021 - IN-120010 - - $99.00 - -

- - - Paid -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Caitriona Balfe -
-

- [email protected] -

-
-
- 		02 Jan 2021 - IN-125623 - - $249.49 - -

- - - Pending -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Josh Lucas -
-

- [email protected] -

-
-
- 		02 Jan 2021 - IN-662210 - - $9.99 - -

- - - Paid -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Jon Bernthal -
-

- [email protected] -

-
-
- 		03 Jan 2021 - IN-901020 - - $90.49 - -

- - - Cancelled -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- -
-
-
- Noah Jupe -
-

- [email protected] -

-
-
- 		05 Jan 2021 - IN-902210 - - $39.99 - -

- - - Paid -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Tracy Letts -
-

- [email protected] -

-
-
- 		06 Jan 2021 - IN-902559 - - $19.22 - -

- - - Pending -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Ray McKinnon -
-

- [email protected] -

-
-
- 		09 Jan 2021 - IN-911211 - - $102.9 - -

- - - Cancelled -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Remo Girone -
-

- [email protected] -

-
-
- 		10 Jan 2021 - IN-902559 - - $13.99 - -

- - - Paid -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		-
-
- user-icon -
-
-
- Jack McMullen -
-

- [email protected] -

-
-
- 		12 Jan 2021 - IN-302240 - - $25.99 - -

- - - Paid -

- 		-
- - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/order-details.html b/Datum_UImodel/order-details.html deleted file mode 100644 index 0e4ce8b..0000000 --- a/Datum_UImodel/order-details.html +++ /dev/null @@ -1,1275 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
-
-
-
- -
-
-
-
-
-

Order Details

- - - - - Generate Invoice - -
-
-
-
-
-
-
    -
  • -
    Order Info
    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    - ID - - OR-325548 -
    - Date & Time - - 01 Jan 2021 06:32 -
    - Payment Method - - Credit Card -
    - Invoice - - IN-302240 -
    - Status - -

    - - - Completed -

    -
    -
    -
    • -
  • -
    Customer Details
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Name - - John Lynn -
    - Email - - [email protected] -
    - Phone - - +21 11445-2213 -
    - Country - - USA -
    - State/Region - - Ohio -
    - Address - - 201, Baker Street -
    -
    -
    • -
-
-
-
-
-
    -
  • -
    Order Items
    -
    • -
  • -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    ProductQuantityPrice
    -
    -
    - user-icon -
    -
    -
    - Bassheads 220 Wired Headset -
    -

    - Molten Orange, In the Ear -

    -
    -
    -     		- 1 - - $74.98 -
    -
    -
    - user-icon -
    -
    -
    - HP v150W PENDRIVE -
    -

    - 64 GB (Blue, Black) -

    -
    -
    -     		- 3 - - $199.97 -
    -
    -
    - user-icon -
    -
    -
    - M10 FHD Plus with Active Pen Tablet -
    -

    - (2nd Gen) 10.3 inches -

    -
    -
    -     		- 1 - - $962.49 -
    -
    -
    • -
  • -
    - Total:

    $1,237.44

    -
    -
    • -
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/order-new.html b/Datum_UImodel/order-new.html deleted file mode 100644 index b9a2d07..0000000 --- a/Datum_UImodel/order-new.html +++ /dev/null @@ -1,1224 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
-
-
-
- -
- - - - - Back - -
-
-
-

New Order

-
-
-
-
-
-
-
Customer Details
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
Order Details
-
-
- - -
-
- - -
-
-
-
- - - -
-
-
- - -
-
-
-
-
-
-
-
-
    -
  • -
    Order Items
    -
    -
    -
    - - - - - - -
    -
    -
    -
    • -
  • -
    - - - - - - - - - - - - - - - - - - - - - - - -
    ProductQuantityPrice
    -
    -
    - user-icon -
    -
    -
    - FivePlus Nord 5G -
    -

    - (12GB RAM, 256GB Storage) -

    -
    -
    -     		-
    - - - - 1 - - - -
    -     		- $2,399.99 - - - - -
    -
    -
    - user-icon -
    -
    -
    - Bassheads 220 Wired Headset -
    -

    - Molten Orange, In the Ear -

    -
    -
    -     		-
    - - - - 1 - - - -
    -     		- $74.98 - - - - -
    -
    -
    • -
  • -
    - Total:

    $2,474.97

    - -
    -
    • -
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/order.html b/Datum_UImodel/order.html deleted file mode 100644 index 20818eb..0000000 --- a/Datum_UImodel/order.html +++ /dev/null @@ -1,1520 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
- -
-
-
-

All Orders

-
-
-
-
-
-
- - - - - - -
-
- - - - - Add Order - -
-
-
-
- -
-
-
-
-
-
Orders List
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - -
-
- 		- - - - - - - - - - - Action -
-
- - -
- 		- OR-325548 - 01 Jan 2021 - Jack Ryan - - $104.98 - -

- - - Completed -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-223544 - 02 Jan 2021 - Matt Damon - - $99.00 - -

- - - Completed -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-125623 - 02 Jan 2021 - Caitriona Balfe - - $249.49 - -

- - - Pending -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-662210 - 02 Jan 2021 - Josh Lucas - - $9.99 - -

- - - Completed -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-901020 - 03 Jan 2021 - Jon Bernthal - - $90.49 - -

- - - Cancelled -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-902210 - 05 Jan 2021 - Noah Jupe - - $39.99 - -

- - - Completed -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-902559 - 06 Jan 2021 - Tracy Letts - - $19.22 - -

- - - Pending -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-253524 - 09 Jan 2021 - Ray McKinnon - - $102.9 - -

- - - Cancelled -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-902559 - 10 Jan 2021 - Remo Girone - - $13.99 - -

- - - Completed -

- 		-
- - - - - - - - - - - -
-
-
- - -
- 		- OR-302240 - 12 Jan 2021 - Jack McMullen - - $25.99 - -

- - - Completed -

- 		-
- - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/pages-blank-page.html b/Datum_UImodel/pages-blank-page.html deleted file mode 100644 index 6bcc0b7..0000000 --- a/Datum_UImodel/pages-blank-page.html +++ /dev/null @@ -1,1038 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
- Here Add Your HTML Content..... -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/pages-comingsoon.html b/Datum_UImodel/pages-comingsoon.html deleted file mode 100644 index c43954b..0000000 --- a/Datum_UImodel/pages-comingsoon.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
- - - - -

Stay tunned, we're launching very soon

-

We are working very hard to give you the best experience possible!

-
    -
  • -
    -
    - 0Days -
    -
    -
    • -
  • -
    -
    - 0Hours -
    -
    -
    • -
  • -
    -
    - 0Minutes -
    -
    -
    • -
  • -
    -
    - 0Seconds -
    -
    -
    • -
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/pages-error-500.html b/Datum_UImodel/pages-error-500.html deleted file mode 100644 index e24bb3b..0000000 --- a/Datum_UImodel/pages-error-500.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
- - -

Oops! This Page is Not Working.

-

The requested is Internal Server Error.

- Back to Home - -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/pages-error.html b/Datum_UImodel/pages-error.html deleted file mode 100644 index b5299de..0000000 --- a/Datum_UImodel/pages-error.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
- - -

Oops! This Page is Not Found.

-

The requested page dose not exist.

- Back to Home -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/pages-faq.html b/Datum_UImodel/pages-faq.html deleted file mode 100644 index 25894a6..0000000 --- a/Datum_UImodel/pages-faq.html +++ /dev/null @@ -1,1205 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
-
-
- -
-

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque - porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. -

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
- -
-

It has survived not only five centuries, but also the leap into electronic typesetting. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/pages-maintenance.html b/Datum_UImodel/pages-maintenance.html deleted file mode 100644 index d68db80..0000000 --- a/Datum_UImodel/pages-maintenance.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
-
-
-
-
- -

Site Currently Under Maintenance

-

Please check back in sometime.

-

Contact with [email protected]

-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/pricing.html b/Datum_UImodel/pricing.html deleted file mode 100644 index 098c129..0000000 --- a/Datum_UImodel/pricing.html +++ /dev/null @@ -1,1205 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
$19 / Per month -
Basic -
- 		-
-
$39 / Per month -
Standard -
- 		-
-
$119 / Per month -
Platinum -
- 		-
-
$219 / Per month -
Premium -
-
Feature 1 - - - - - - - - - - - - - - - -
Feature 2 - - - - - - - - - - - - - - - -
Feature 3 - - - - - - - - - - - - - - - -
Feature 4 - - - - - - - - - - - - - - - -
Feature 5 - - - - - - - - - - - - - - - -
- - - - Purchase - Purchase - Purchase - Purchase -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/privacy-policy.html b/Datum_UImodel/privacy-policy.html deleted file mode 100644 index 2fc2e10..0000000 --- a/Datum_UImodel/privacy-policy.html +++ /dev/null @@ -1,1181 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

What is Lorem Ipsum?

-
-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been - the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley - of type and scrambled it to make a type specimen book. It has survived not only five centuries, - but also the leap into electronic typesetting, remaining essentially unchanged. It was - popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, - and more recently with desktop publishing software like Aldus PageMaker including versions of - Lorem Ipsum.

-
-
-
-
-
-

Why do we use it?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-

Where does it come from?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-

Where can I get some?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-

Why do we use it?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-

Why do we use it?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-

Why do we use it?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-

Why do we use it?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-

Why do we use it?

-
-
-
-

It is a long established fact that a reader will be distracted by the readable content of a page - when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal - distribution of letters, as opposed to using 'Content here, content here', making it look like - readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as - their default model text, and a search for 'lorem ipsum' will uncover many web sites still in - their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on - purpose (injected humour and the like).

-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/product-add.html b/Datum_UImodel/product-add.html deleted file mode 100644 index 3d22b84..0000000 --- a/Datum_UImodel/product-add.html +++ /dev/null @@ -1,1146 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
-
-
-
- -
- - - - - Back - -
-
-
-

New Product

-
-
-
-
-
Basic Information
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-
Product Image
-
-
- - - - - - - - - - - -
-
-

Drop files here or click to upload

-
-
-
- -
-
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/product.html b/Datum_UImodel/product.html deleted file mode 100644 index 4316f53..0000000 --- a/Datum_UImodel/product.html +++ /dev/null @@ -1,1562 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
- -
-
- -
-
-
-

Product

-
-
-
-
-
-
- - - - - - -
-
- - - - - Add Product - -
-
-
-
- -
-
-
-
-
-
Products List
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - Action -
-
-
- user-icon -
-
-
- Bassheads 220 Wired Headset -
-

- Molten Orange, In the Ear -

-
-
- 		Headset - $74.98 - - 45 - -

- - - In Stock -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- SDDDC2-256G-I35 256 GB OTG -
-

- Black, Type A to Type C -

-
-
- 		OTG Pendrive - $109.00 - - 25 - -

- - - In Stock -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- 360 Deg 1080p Security Camera -
-

- Wifi Smart -

-
-
- 		Camera - $749.49 - - 02 - -

- - - Limited -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- Ryzen 5 Quad Core 3500U Thin Laptop -
-

- 8 GB/512 GB SSD/Windows 10 Home -

-
-
- 		Laptop - $2,499.99 - - 10 - -

- - - In Stock -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- M10 FHD Plus with Active Pen Tablet -
-

- (2nd Gen) 10.3 inches -

-
-
- 		Tablet - $962.49 - - 00 - -

- - - Out Of Stock -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- Stone Portable Bluetooth Speaker -
-

- Black, Stereo Channel -

-
-
- 		Speaker - $599.99 - - 80 - -

- - - In Stock -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- EO Wooden Card Pen Drive -
-

- 16 GB, White -

-
-
- 		Pendrive - $89.22 - - 05 - -

- - - Limited -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- Airpods With Wireless Charging Case -
-

- Noise Cancellation, True Wireless -

-
-
- 		Headset - $229.9 - - 00 - -

- - - Out Of Stock -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- HP v150W PENDRIVE -
-

- 64 GB (Blue, Black) -

-
-
- 		Pendrive - $39.99 - - 30 - -

- - - In Stock -

- 		-
- - - - - - - - - - -
-
-
-
- user-icon -
-
-
- FivePlus Nord 5G -
-

- (12GB RAM, 256GB Storage) -

-
-
- 		Mobile - $2,399.99 - - 80 - -

- - - In Stock -

- 		-
- - - - - - - - - - -
-
-
-
-
-
-
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/table-data.html b/Datum_UImodel/table-data.html deleted file mode 100644 index 19f3612..0000000 --- a/Datum_UImodel/table-data.html +++ /dev/null @@ -1,2126 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Bootstrap Datatables

-
-
- -
-
-
-
- 

-<table id="datatable" class="table data-table table-striped table-bordered" >
-   <thead>
-      <tr>
-         <th>Name</th>
-         <th>Position</th>
-         <th>Office</th>
-         <th>Age</th>
-         <th>Start date</th>
-         <th>Salary</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <td>Tiger Nixon</td>
-         <td>System Architect</td>
-         <td>Edinburgh</td>
-         <td>61</td>
-         <td>2011/04/25</td>
-         <td>$320,800</td>
-      </tr>
-      <tr>
-         <td>Garrett Winters</td>
-         <td>Accountant</td>
-         <td>Tokyo</td>
-         <td>63</td>
-         <td>2011/07/25</td>
-         <td>$170,750</td>
-      </tr>
-      <tr>
-         <td>Ashton Cox</td>
-         <td>Junior Technical Author</td>
-         <td>San Francisco</td>
-         <td>66</td>
-         <td>2009/01/12</td>
-         <td>$86,000</td>
-      </tr>
-      <tr>
-         <td>Cedric Kelly</td>
-         <td>Senior Javascript Developer</td>
-         <td>Edinburgh</td>
-         <td>22</td>
-         <td>2012/03/29</td>
-         <td>$433,060</td>
-      </tr>
-      <tr>
-         <td>Airi Satou</td>
-         <td>Accountant</td>
-         <td>Tokyo</td>
-         <td>33</td>
-         <td>2008/11/28</td>
-         <td>$162,700</td>
-      </tr>
-      <tr>
-         <td>Brielle Williamson</td>
-         <td>Integration Specialist</td>
-         <td>New York</td>
-         <td>61</td>
-         <td>2012/12/02</td>
-         <td>$372,000</td>
-      </tr>
-      <tr>
-         <td>Herrod Chandler</td>
-         <td>Sales Assistant</td>
-         <td>San Francisco</td>
-         <td>59</td>
-         <td>2012/08/06</td>
-         <td>$137,500</td>
-      </tr>
-      <tr>
-         <td>Rhona Davidson</td>
-         <td>Integration Specialist</td>
-         <td>Tokyo</td>
-         <td>55</td>
-         <td>2010/10/14</td>
-         <td>$327,900</td>
-      </tr>
-      <tr>
-         <td>Colleen Hurst</td>
-         <td>Javascript Developer</td>
-         <td>San Francisco</td>
-         <td>39</td>
-         <td>2009/09/15</td>
-         <td>$205,500</td>
-      </tr>
-      <tr>
-         <td>Sonya Frost</td>
-         <td>Software Engineer</td>
-         <td>Edinburgh</td>
-         <td>23</td>
-         <td>2008/12/13</td>
-         <td>$103,600</td>
-      </tr>
-      <tr>
-         <td>Jena Gaines</td>
-         <td>Office Manager</td>
-         <td>London</td>
-         <td>30</td>
-         <td>2008/12/19</td>
-         <td>$90,560</td>
-      </tr>
-      <tr>
-         <td>Quinn Flynn</td>
-         <td>Support Lead</td>
-         <td>Edinburgh</td>
-         <td>22</td>
-         <td>2013/03/03</td>
-         <td>$342,000</td>
-      </tr>
-      <tr>
-         <td>Charde Marshall</td>
-         <td>Regional Director</td>
-         <td>San Francisco</td>
-         <td>36</td>
-         <td>2008/10/16</td>
-         <td>$470,600</td>
-      </tr>
-      <tr>
-         <td>Haley Kennedy</td>
-         <td>Senior Marketing Designer</td>
-         <td>London</td>
-         <td>43</td>
-         <td>2012/12/18</td>
-         <td>$313,500</td>
-      </tr>
-      <tr>
-         <td>Tatyana Fitzpatrick</td>
-         <td>Regional Director</td>
-         <td>London</td>
-         <td>19</td>
-         <td>2010/03/17</td>
-         <td>$385,750</td>
-      </tr>
-      <tr>
-         <td>Michael Silva</td>
-         <td>Marketing Designer</td>
-         <td>London</td>
-         <td>66</td>
-         <td>2012/11/27</td>
-         <td>$198,500</td>
-      </tr>
-      <tr>
-         <td>Paul Byrd</td>
-         <td>Chief Financial Officer (CFO)</td>
-         <td>New York</td>
-         <td>64</td>
-         <td>2010/06/09</td>
-         <td>$725,000</td>
-      </tr>
-      <tr>
-         <td>Gloria Little</td>
-         <td>Systems Administrator</td>
-         <td>New York</td>
-         <td>59</td>
-         <td>2009/04/10</td>
-         <td>$237,500</td>
-      </tr>
-      <tr>
-         <td>Bradley Greer</td>
-         <td>Software Engineer</td>
-         <td>London</td>
-         <td>41</td>
-         <td>2012/10/13</td>
-         <td>$132,000</td>
-      </tr>
-      <tr>
-         <td>Dai Rios</td>
-         <td>Personnel Lead</td>
-         <td>Edinburgh</td>
-         <td>35</td>
-         <td>2012/09/26</td>
-         <td>$217,500</td>
-      </tr>
-</table>
-
-
-

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary
-
-
-
-
-
-
-

Bootstrap Datatables With Checkbox

-
-
- -
-
-
-
- 

-<table id="datatable" class="table data-table table-striped table-bordered" >
-<thead>
-   <tr>
-      <th>Name</th>
-      <th>Position</th>
-      <th>Office</th>
-      <th>Age</th>
-      <th>Start date</th>
-      <th>Salary</th>
-   </tr>
-</thead>
-<tbody>
-   <tr>
-      <td>Tiger Nixon</td>
-      <td>System Architect</td>
-      <td>Edinburgh</td>
-      <td>61</td>
-      <td>2011/04/25</td>
-      <td>$320,800</td>
-   </tr>
-   <tr>
-      <td>Garrett Winters</td>
-      <td>Accountant</td>
-      <td>Tokyo</td>
-      <td>63</td>
-      <td>2011/07/25</td>
-      <td>$170,750</td>
-   </tr>
-   <tr>
-      <td>Ashton Cox</td>
-      <td>Junior Technical Author</td>
-      <td>San Francisco</td>
-      <td>66</td>
-      <td>2009/01/12</td>
-      <td>$86,000</td>
-   </tr>
-   <tr>
-      <td>Cedric Kelly</td>
-      <td>Senior Javascript Developer</td>
-      <td>Edinburgh</td>
-      <td>22</td>
-      <td>2012/03/29</td>
-      <td>$433,060</td>
-   </tr>
-   <tr>
-      <td>Airi Satou</td>
-      <td>Accountant</td>
-      <td>Tokyo</td>
-      <td>33</td>
-      <td>2008/11/28</td>
-      <td>$162,700</td>
-   </tr>
-   <tr>
-      <td>Brielle Williamson</td>
-      <td>Integration Specialist</td>
-      <td>New York</td>
-      <td>61</td>
-      <td>2012/12/02</td>
-      <td>$372,000</td>
-   </tr>
-   <tr>
-      <td>Herrod Chandler</td>
-      <td>Sales Assistant</td>
-      <td>San Francisco</td>
-      <td>59</td>
-      <td>2012/08/06</td>
-      <td>$137,500</td>
-   </tr>
-   <tr>
-      <td>Rhona Davidson</td>
-      <td>Integration Specialist</td>
-      <td>Tokyo</td>
-      <td>55</td>
-      <td>2010/10/14</td>
-      <td>$327,900</td>
-   </tr>
-   <tr>
-      <td>Colleen Hurst</td>
-      <td>Javascript Developer</td>
-      <td>San Francisco</td>
-      <td>39</td>
-      <td>2009/09/15</td>
-      <td>$205,500</td>
-   </tr>
-   <tr>
-      <td>Sonya Frost</td>
-      <td>Software Engineer</td>
-      <td>Edinburgh</td>
-      <td>23</td>
-      <td>2008/12/13</td>
-      <td>$103,600</td>
-   </tr>
-   <tr>
-      <td>Jena Gaines</td>
-      <td>Office Manager</td>
-      <td>London</td>
-      <td>30</td>
-      <td>2008/12/19</td>
-      <td>$90,560</td>
-   </tr>
-   <tr>
-      <td>Quinn Flynn</td>
-      <td>Support Lead</td>
-      <td>Edinburgh</td>
-      <td>22</td>
-      <td>2013/03/03</td>
-      <td>$342,000</td>
-   </tr>
-   <tr>
-      <td>Charde Marshall</td>
-      <td>Regional Director</td>
-      <td>San Francisco</td>
-      <td>36</td>
-      <td>2008/10/16</td>
-      <td>$470,600</td>
-   </tr>
-   <tr>
-      <td>Haley Kennedy</td>
-      <td>Senior Marketing Designer</td>
-      <td>London</td>
-      <td>43</td>
-      <td>2012/12/18</td>
-      <td>$313,500</td>
-   </tr>
-   <tr>
-      <td>Tatyana Fitzpatrick</td>
-      <td>Regional Director</td>
-      <td>London</td>
-      <td>19</td>
-      <td>2010/03/17</td>
-      <td>$385,750</td>
-   </tr>
-   <tr>
-      <td>Michael Silva</td>
-      <td>Marketing Designer</td>
-      <td>London</td>
-      <td>66</td>
-      <td>2012/11/27</td>
-      <td>$198,500</td>
-   </tr>
-   <tr>
-      <td>Paul Byrd</td>
-      <td>Chief Financial Officer (CFO)</td>
-      <td>New York</td>
-      <td>64</td>
-      <td>2010/06/09</td>
-      <td>$725,000</td>
-   </tr>
-   <tr>
-      <td>Gloria Little</td>
-      <td>Systems Administrator</td>
-      <td>New York</td>
-      <td>59</td>
-      <td>2009/04/10</td>
-      <td>$237,500</td>
-   </tr>
-   <tr>
-      <td>Bradley Greer</td>
-      <td>Software Engineer</td>
-      <td>London</td>
-      <td>41</td>
-      <td>2012/10/13</td>
-      <td>$132,000</td>
-   </tr>
-   <tr>
-      <td>Dai Rios</td>
-      <td>Personnel Lead</td>
-      <td>Edinburgh</td>
-      <td>35</td>
-      <td>2012/09/26</td>
-      <td>$217,500</td>
-   </tr>
-</table>
-
-
-
-

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - -
-
- 		NamePositionOfficeAgeStart dateSalary
-
-
- - -
-
- 		Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
-
-
- - -
-
- 		Garrett WintersAccountantTokyo632011/07/25$170,750
-
-
- - -
-
- 		Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
-
-
- - -
-
- 		Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
-
-
- - -
-
- 		Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
-
-
- - -
-
- 		Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
-
-
- - -
-
- 		Jena GainesOffice ManagerLondon302008/12/19$90,560
-
-
- - -
-
- 		Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
-
-
- - -
-
- 		Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
-
-
- - -
-
- 		Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
-
-
- - -
-
- 		Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
-
-
- - -
-
- 		NamePositionOfficeAgeStart dateSalary
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/table-editable.html b/Datum_UImodel/table-editable.html deleted file mode 100644 index 18f3594..0000000 --- a/Datum_UImodel/table-editable.html +++ /dev/null @@ -1,1232 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Editable Table

-
-
- -
-
-
-
- 

-<div id="table" class="table-editable">
-   <span class="table-add float-right mb-3 mr-2">
-   <button class="btn btn-sm bg-primary"><i
-      class="ri-add-fill"><span class="pl-1">Add New</span></i>
-   </button>
-   </span>
-   <table class="table table-bordered table-responsive-md table-striped text-center">
-      <thead>
-         <tr>
-            <th>Name</th>
-            <th>Age</th>
-            <th>Company Name</th>
-            <th>Country</th>
-            <th>City</th>
-            <th>Sort</th>
-            <th>Remove</th>
-         </tr>
-      </thead>
-      <tbody>
-         <tr>
-            <td contenteditable="true">Gio Metric</td>
-            <td contenteditable="true">25</td>
-            <td contenteditable="true">Deepends</td>
-            <td contenteditable="true">Spain</td>
-            <td contenteditable="true">Madrid</td>
-            <td>
-               <span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a></span>
-               <span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a></span>
-            </td>
-            <td>
-               <span class="table-remove"><button type="button"
-                  class="btn bg-danger-light btn-rounded btn-sm my-0">Remove</button></span>
-            </td>
-         </tr>
-         <tr>
-            <td contenteditable="true">Manny Petty</td>
-            <td contenteditable="true">45</td>
-            <td contenteditable="true">Insectus</td>
-            <td contenteditable="true">France</td>
-            <td contenteditable="true">San Francisco</td>
-            <td>
-               <span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a></span>
-               <span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a></span>
-            </td>
-            <td>
-               <span class="table-remove"><button type="button"
-                  class="btn bg-danger-light btn-rounded btn-sm my-0">Remove</button></span>
-            </td>
-         </tr>
-         <tr>
-            <td contenteditable="true">Lucy Tania</td>
-            <td contenteditable="true">26</td>
-            <td contenteditable="true">Isotronic</td>
-            <td contenteditable="true">Germany</td>
-            <td contenteditable="true">Frankfurt am Main</td>
-            <td>
-               <span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a></span>
-               <span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a></span>
-            </td>
-            <td>
-               <span class="table-remove"><button type="button"
-                  class="btn bg-danger-light btn-rounded btn-sm my-0">Remove</button></span>
-            </td>
-         </tr>
-         <tr class="hide">
-            <td contenteditable="true">Anna Mull</td>
-            <td contenteditable="true">35</td>
-            <td contenteditable="true">Portica</td>
-            <td contenteditable="true">USA</td>
-            <td contenteditable="true">Oregon</td>
-            <td>
-               <span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a></span>
-               <span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a></span>
-            </td>
-            <td>
-               <span class="table-remove"><button type="button"
-                  class="btn bg-danger-light btn-rounded btn-sm my-0">Remove</button></span>
-            </td>
-         </tr>
-      </tbody>
-   </table>
-</div>
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCompany NameCountryCitySortRemove
Gio Metric25DeependsSpainMadrid - - - - - - - - -
Manny Petty45InsectusFranceSan Francisco - - - - - - - - -
Lucy Tania26IsotronicGermanyFrankfurt am Main - - - - - - - - -
Anna Mull35PorticaUSAOregon - - - - - - - - -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/tables-basic.html b/Datum_UImodel/tables-basic.html deleted file mode 100644 index 69ed375..0000000 --- a/Datum_UImodel/tables-basic.html +++ /dev/null @@ -1,2259 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Tables

-
-
- -
-
-
-
- 

-<table class="table">
-<thead>
-   <tr>
-      <th scope="col">#</th>
-      <th scope="col">First</th>
-      <th scope="col">Last</th>
-      <th scope="col">Handle</th>
-   </tr>
-</thead>
-<tbody>
-   <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-   </tr>
-   <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-   </tr>
-   <tr>
-      <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
-   </tr>
-</tbody>
-</table>
-
-
-

The .table class adds basic styling to a table.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-
-
-
-

Table Head Options

-
-
- -
-
-
-
- 

-<table class="table">
-   <thead class="thead-dark">
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td>Larry</td>
-         <td>the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-<table class="table">
-   <thead class="thead-light">
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td>Larry</td>
-         <td>the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-
-
-
-

Borderless table

-
-
- -
-
-
-
- 

-<table class="table table-borderless">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td colspan="2">Larry the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

Add .table-borderless for a table without borders.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-

.table-borderless can also be used on dark tables.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-
-
-
-

Small table

-
-
- -
-
-
-
- 

-<table class="table table-sm">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td colspan="2">Larry the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-<table class="table table-sm table-dark">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td colspan="2">Larry the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

Add .table-sm to make tables more compact by cutting cell padding in half.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-
-
-
-

Captions

-
-
- -
-
-
-
- 

-<table class="table">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td>Larry</td>
-         <td>the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
- -
-
-
-

Table Dark

-
-
- -
-
-
-
- 

-<table class="table table-dark">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td>Larry</td>
-         <td>the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-
-
-
-

Striped Rows

-
-
- -
-
-
-
- 

-<table class="table table-striped">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td>Larry</td>
-         <td>the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-<table class="table table-striped table-dark">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td>Larry</td>
-         <td>the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

Use .table-striped to add zebra-striping to any table row within the <tbody>.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-
-
-
-

Hoverable rows

-
-
- -
-
-
-
- 

-<table class="table table-hover">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td colspan="2">Larry the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-<table class="table table-hover table-dark">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">First</th>
-         <th scope="col">Last</th>
-         <th scope="col">Handle</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Mark</td>
-         <td>Otto</td>
-         <td>@mdo</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Jacob</td>
-         <td>Thornton</td>
-         <td>@fat</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td colspan="2">Larry the Bird</td>
-         <td>@twitter</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

Add .table-hover to enable a hover state on table rows within a <tbody>.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-
-
-
-

Contextual classes

-
-
- -
-
-
-
- 

-<table class="table">
-   <thead>
-      <tr>
-         <th scope="col">Class</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr class="table-active">
-         <th scope="row">Active</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr>
-         <th scope="row">Default</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr class="table-primary">
-         <th scope="row">Primary</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr class="table-secondary">
-         <th scope="row">Secondary</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr class="table-success">
-         <th scope="row">Success</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr class="table-danger">
-         <th scope="row">Danger</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr class="table-warning">
-         <th scope="row">Warning</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr class="table-info">
-         <th scope="row">Info</th>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

Use contextual classes to color table rows or individual cells.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassHeadingHeading
ActiveCellCell
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
-

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeadingHeading
1CellCell
2CellCell
3CellCell
4CellCell
5CellCell
6CellCell
7CellCell
8CellCell
9CellCell
-
-
- -
-
-
-

Responsive tables

-
-
- -
-
-
-
- 

-<table class="table">
-   <thead>
-      <tr>
-         <th scope="col">#</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-         <th scope="col">Heading</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <th scope="row">1</th>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr>
-         <th scope="row">2</th>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-      <tr>
-         <th scope="row">3</th>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-         <td>Cell</td>
-      </tr>
-   </tbody>
-</table>
-
-
-

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/terms-of-service.html b/Datum_UImodel/terms-of-service.html deleted file mode 100644 index 9712c64..0000000 --- a/Datum_UImodel/terms-of-service.html +++ /dev/null @@ -1,1154 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia - aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt - aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft - beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat - craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore - sustainable VHS.

-
-
-
- -
-

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia - aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt - aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft - beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat - craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore - sustainable VHS. -

-
-
-
- -
-

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia - aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt - aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft - beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat - craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore - sustainable VHS. -

-
-
-
- -
-

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia - aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt - aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft - beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat - craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore - sustainable VHS. -

-
-
-
- -
-

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia - aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt - aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft - beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat - craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore - sustainable VHS. -

-
-
-
- -
-

>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia - aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt - aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft - beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat - craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore - sustainable VHS. -

-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/timeline.html b/Datum_UImodel/timeline.html deleted file mode 100644 index d1169b4..0000000 --- a/Datum_UImodel/timeline.html +++ /dev/null @@ -1,1111 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
    -
  • -
    Jan 2020 -
    -
    -
    -
    Client Login
    -
    -

    Bonbon macaroon jelly beans gummi bears jelly lollipop apple There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

    -
    -
    -
    • -
  • -
    Feb 2020 -
    -
    -
    -
    Scheduled Maintenance
    -
    -

    Bonbon macaroon jelly beans gummi bears jelly lollipop apple There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

    -
    -
    -
    • -
  • -
    March 2020 -
    -
    -
    -
    Client Call
    -
    -

    Bonbon macaroon jelly beans gummi bears jelly lollipop apple There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

    -
    -
    -
    • -
  • -
    April 2020 -
    -
    -
    -
    Mega event
    -
    -

    Bonbon macaroon jelly beans gummi bears jelly lollipop apple There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

    -
    -
    -
    • -
  • -
    March 2020 -
    -
    -
    -
    Client Call
    -
    -

    Bonbon macaroon jelly beans gummi bears jelly lollipop apple There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

    -
    -
    -
    • -
  • -
    April 2020 -
    -
    -
    -
    Mega event
    -
    -

    Bonbon macaroon jelly beans gummi bears jelly lollipop apple There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

    -
    -
    -
    • -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/todo.html b/Datum_UImodel/todo.html deleted file mode 100644 index 8fe0186..0000000 --- a/Datum_UImodel/todo.html +++ /dev/null @@ -1,3603 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Todo

-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
Todo
-
-
-
-
-
-
-
- Project > List -
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
-
-
In Progress
-
-
-
-
-
-
-
- Project > List -
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
-
-
Complete
-
-
-
-
-
-
-
- Project > List -
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
-
-
Review
-
-
-
-
-
-
-
- Project > List -
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
- Project > List -
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Todo
-
-
-
-
-
-
-
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
In Progress
-
-
-
-
-
-
-
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Review
-
-
-
-
-
-
-
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Complete
-
-
-
-
-
-
-
Launch SpaceX
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
New Updates
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Night mode
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
Use-cases
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - - - - -
-
- - - - - -
-
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -
- - - - - Edit - - - - - - - View - - - - - - Delete - -
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- \ No newline at end of file diff --git a/Datum_UImodel/ui-alerts.html b/Datum_UImodel/ui-alerts.html deleted file mode 100644 index c4a962c..0000000 --- a/Datum_UImodel/ui-alerts.html +++ /dev/null @@ -1,1601 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-

Datum has extrend bootstrap alert component Documentation

-
-
-
-
-
-
-
-

Basic Alerts

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-

Basic Alerts With Icons

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-
-
-

Basic Line Alerts

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-

Basic Line Alerts With Icons

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-
-
-

Alerts With Background

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-

Background Alerts With Icons

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-
-
-

Alerts Dismissing

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-

Alerts Dismissing With Icons

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
- - - - - - - -
-
-
-
-
-
-
-
-
-

Additional content

-
-
- - - - - -
-
-
-
- 

-<div class="alert alert-primary" role="alert">
-   <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
-</div>
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-avatars.html b/Datum_UImodel/ui-avatars.html deleted file mode 100644 index 94576f6..0000000 --- a/Datum_UImodel/ui-avatars.html +++ /dev/null @@ -1,1360 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Avatar Sizing

-
-
- - - - - -
-
-
-
- 

-<div class="iq-avatars d-flex flex-wrap align-items-center">   
-   <div class="iq-avatar">
-      <img class="avatar-100 rounded" src="../assets/images/user/1.jpg" alt="#" data-original-title="" title="">
-   </div>
-</div>
-
-
-
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
-
-
-
-
-
-
-
-

Shape Rounded

-
-
- -
-
-
-
- 

-<div class="iq-avatars d-flex flex-wrap align-items-center">
-   <div class="iq-avatar">
-      <img class="avatar-80 rounded" src="../assets/images/user/1.jpg" alt="#" data-original-title="" title="">
-   </div>
-</div>
-
-
-
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
-
-
-
-
-
-
-
-

Shape Rounded Circle

-
-
- - - - - -
-
-
-
- 

-<div class="iq-avatars d-flex flex-wrap align-items-center">
-   <div class="iq-avatar">
-      <img class="avatar-80 rounded-small" src="../assets/images/user/1.jpg" alt="#" data-original-title="" title="">
-   </div>
-</div>
-
-
-
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
-
-
-
-
-
-
-
-

Image Initials

-
-
- - - - - -
-
-
-
- 

-<div class="iq-avatars d-flex flex-wrap align-items-center">
-   <div class="iq-avatar">
-      <img class="avatar-100 rounded" src="../assets/images/user/1.jpg" alt="#" data-original-title="" title="">
-   </div>
-</div>
-
-
-
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
-
-
-
-
-
-
-
-

Status Indicator

-
-
- -
-
-
-
- 

-<div class="iq-avatars d-flex flex-wrap align-items-center">
-   <div class="iq-avatar">
-      <img class="avatar-80 rounded" src="../assets/images/user/1.jpg" alt="#" data-original-title="" title=""> <span class="bg-success iq-dots dots-100"></span>
-   </div>
-</div>
-
-
-
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
- # -
-
-
-
-
-
-
-
-
-

Image Groups

-
-
- - - - - -
-
-
-
- 

-<div class="iq-avatars d-flex flex-wrap align-items-center">
-   <div class="iq-avatar">
-      <div class="iq-media-group">
-         <a href="#" class="iq-media">
-            <img class="img-fluid avatar-60 rounded" src="../assets/images/user/05.jpg" alt="">
-         </a>
-         <a href="#" class="iq-media">
-            <img class="img-fluid avatar-60 rounded" src="../assets/images/user/06.jpg" alt="">
-         </a>
-         <a href="#" class="iq-media">
-            <img class="img-fluid avatar-60 rounded" src="../assets/images/user/01.jpg" alt="">
-         </a>
-      </div>
-   </div>
-</div>
-
-
-
-
-
- - - - - - - - - -
-
-
-
- - - - - - - - - -
-
-
-
- - - - - - - - - -
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-badges.html b/Datum_UImodel/ui-badges.html deleted file mode 100644 index e0fe48d..0000000 --- a/Datum_UImodel/ui-badges.html +++ /dev/null @@ -1,1269 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

Badge

-
-
- - - - - -
-
-
-
- 

-<h1 class="mt-2">Example heading <span class="badge  badge-primary">New</span></h1>
-
-
-

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

-

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-
-
-
-
-
-

Button Badges

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn mb-1 btn-primary">
-  Notifications <span class="badge badge-light ml-2">4</span>
-</button>
-
-

Badges can be used as part of buttons to provide a counter.

- - - -
-
-
-
-
-

Button Light background Badges

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn mb-1 btn-outline-primary">
-  Notifications <span class="badge badge-primary ml-2">4</span>
-</button>
-
-

Badges can be used as part of buttons to provide a counter.

- - - -
-
-
-
-
-

Button Border Badges

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn mb-1 bg-primary-light">
-  Notifications <span class="badge badge-primary ml-2">4</span>
-</button>
-
-

Badges can be used as part of buttons to provide a counter.

- - - -
-
-
-
-
-
-
-

Contextual variations

-
-
- - - - - -
-
-
-
- 

-<span class="mt-2 badge badge-primary">Primary</span>
-<span class="mt-2 badge badge-pill badge-primary">Primary</span>
-<a href="#" class="mt-2 badge badge-primary">Primary</a>
-
-

Add any of the below mentioned modifier classes to change the appearance of a badge.

- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
Pill badges
-

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
Links
-

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
-
-
-
-
-

Contextual variations Border

-
-
- - - - - -
-
-
-
- 

-<span class="mt-2 badge border border-primary text-primary mt-2">Primary</span>
-<span class="mt-2 badge badge-pill border border-primary text-primary">Primary</span>
-<a href="#" class="mt-2 badge border border-primary text-primary">Primary</a>
-
-

Add any of the below mentioned modifier classes to change the appearance of a badge.

- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
Pill badges
-

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
Links
-

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-boxshadow.html b/Datum_UImodel/ui-boxshadow.html deleted file mode 100644 index b1a0c0b..0000000 --- a/Datum_UImodel/ui-boxshadow.html +++ /dev/null @@ -1,1142 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-

Box Shadow

-

A box shadow is an enclosed glass-front display case containing an object or objects presented in a thematic grouping with artistic or personal significance. The grouping of the objects and the depth effect created by their relative heights from the backing creates a dramatic visual result.

-
-
-
-
-
-
-
-

Shadows

-
-
-
-
-
-
-
Larger shadow
-
-
-
-
-
Regular shadow
-
-
-
-
-
Small shadow
-
-
-
-
-
No shadow
-
-
-
-
-
-
-
-
-
-
-

Basic Shadow

-
-
-
-
-
-
-
Bottom left
-
-
-
-
-
Top Left
-
-
-
-
-
Bottom right
-
-
-
-
-
Top right
-
-
-
-
-
-
-
-
-
-
-

Drop Shadow

-
-
-
-
-
-
-
Bottom shadow
-
-
-
-
-
Basic Shadow
-
-
-
-
-
inner Shadow
-
-
-
-
-
Blur Shadow
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-breadcrumb.html b/Datum_UImodel/ui-breadcrumb.html deleted file mode 100644 index 7c9a4ec..0000000 --- a/Datum_UImodel/ui-breadcrumb.html +++ /dev/null @@ -1,1414 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Breadcrumb

-
-
- - - - - -
-
-
- -

Use the items in order to programatically generate the breadcrumb links.use class .breadcrumb to ol

- - - -
-
-
-
-
-
-
-

Breadcrumb With Icon

-
-
- - - - - -
-
-
- -

Use the items in order to programatically generate the breadcrumb links.use class .breadcrumb to ol with Icon

- - - -
-
-
-
-
-
-
-
-
-

Breadcrumb

-
-
- - - - - -
-
-
- -

use class .breadcrumb .bg-primary

- - - -
-
-
-
-
-
-
-

Breadcrumb With Icon

-
-
- - - - - -
-
-
- -

use class .breadcrumb .bg-primary With Icon.

- - - -
-
-
-
-
-
-
-

Breadcrumb With Icon

-
-
- - - - - -
-
-
- -

use class .breadcrumb .iq-bg-primary

- - - -
-
-
-
-
-
-
-

Breadcrumb With Icon

-
-
- - - - - -
-
-
- -

use class .breadcrumb .iq-bg-danger

- - - -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-buttons-group.html b/Datum_UImodel/ui-buttons-group.html deleted file mode 100644 index 6560bdf..0000000 --- a/Datum_UImodel/ui-buttons-group.html +++ /dev/null @@ -1,1434 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Flat Button

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group btn-group-toggle btn-group-flat"> 
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
-</div>
-
-
- -
-
-
-
-
-
-
-

Edges Button

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group btn-group-toggle btn-group-edges"> 
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
-</div>
-
-
- -
-
-
-
-
-
-
-

Basic Buttons

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group btn-group-toggle"> 
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
-</div>
-
-
- -
-
-
-
-
-
-
-

Outline Middle Buttons

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group btn-group-toggle"> 
-   <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Left</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
-   <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Right</a>
-</div>
-
-
- -
-
-
-
-
-
-
-

Outline Side Buttons

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group btn-group-toggle"> 
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
-   <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Middle</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
-</div>
-
-
- -
-
-
-
-
-
-
-

Outline Buttons

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group btn-group-toggle"> 
-   <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Left</a>
-   <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Middle</a>
-   <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Right</a>
-</div>
-
-
- -
-
-
-
-
-
-
-

Toolbar Buttons

-
-
- - - - - -
-
-
-
- 

-<li class="d-flex align-items-center justify-content-center mb-2">
-   <div class="btn-group btn-group-toggle btn-group-edges mr-2 btn-group1"> 
-      <a class="button btn button-icon bg-primary" target="_blank" href="#">1</a>
-      <a class="button btn button-icon bg-primary" target="_blank" href="#">2</a>
-      <a class="button btn button-icon bg-primary" target="_blank" href="#">3</a>
-   </div>
-   <div class="btn-group btn-group-toggle btn-group-edges mr-2 btn-group2"> <a class="button btn button-icon bg-primary" target="_blank" href="#">4</a>
-      <a class="button btn button-icon bg-primary" target="_blank" href="#">5</a>
-   </div>
-   <div class="btn-group btn-group-toggle btn-group3"> 
-      <a class="button btn button-icon bg-primary rounded" target="_blank" href="#">6</a>
-   </div>
-</li>
-
-
-
    -
  • -
    1 - 2 - 3 -
    -
    4 - 5 -
    -
    6 -
    -
    • -
  • -
    1 - 2 - 3 -
    -
    4 - 5 -
    -
    6 -
    -
    • -
  • -
    1 - 2 - 3 -
    -
    4 - 5 -
    -
    6 -
    -
    • -
-
-
-
-
-
-
-
-

Basic Buttons

-
-
- -
-
-
-
- 

-<div class="btn-group btn-group-toggle btn-group-sm  btn-group-edges"> 
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
-   <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
-</div>
-
-
- -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-buttons.html b/Datum_UImodel/ui-buttons.html deleted file mode 100644 index 770b6bd..0000000 --- a/Datum_UImodel/ui-buttons.html +++ /dev/null @@ -1,1667 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Default Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary mt-2">Primary</button>
-
-
- - - - - - - - - -
-
-
-
-
-
-
-

Default Buttons Rounded Shape

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary rounded-pill mt-2">Primary</button>
-
-
- - - - - - - - - -
-
-
-
-
-
-
-
-
-

Outline Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-outline-primary mt-2">Primary</button>
-
-
- - - - - - - - -
-
-
-
-
-
-
-

Rounded Outline Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-outline-primary rounded-pill mt-2">Primary</button>
-
-
- - - - - - - - -
-
-
-
-
-
-
-
-
-

Default Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="mt-2 btn btn-primary btn-with-icon"><i class="ri-bill-fill"></i>Primary</button>
-
-
- - - - - - - - - -
-
-
-
-
-
-
-

Default Buttons Rounded Shape

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="mt-2 btn btn-primary rounded-pill btn-with-icon"><i class="ri-bill-fill"></i>Primary</button>
-
-
- - - - - - - - - -
-
-
-
-
-
-
-
-
-

Outline Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-outline-primary mt-2 btn-with-icon"><i class="ri-heart-line"></i>Primary</button>
-
-
- - - - - - - - -
-
-
-
-
-
-
-

Rounded Outline Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-outline-primary rounded-pill mt-2 btn-with-icon"><i class="ri-heart-line"></i>Primary</button>
-
-
- - - - - - - - -
-
-
-
-
-
-
-
-
-

Button Tags

-
-
- - - - - -
-
-
-
- 

-<a class="mt-2 btn btn-primary" href="#" role="button">Link</a>
-<button class="mt-2 btn btn-success" type="submit">Button</button>
-<input class="mt-2 btn btn-danger" type="button" value="Input">
-<input class="mt-2 btn btn-warning" type="submit" value="Submit">
-<input class="mt-2 btn btn-info" type="reset" value="Reset">
-
-
- Link - - - - -
-
-
-
-
-
-
-

Buttons Sizes

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary btn-sm mr-2">Small Button</button>
-<button type="button" class="btn btn-success mr-2">Button</button>
-<button type="button" class="btn btn-info btn-lg">Large Button</button>
-
-
- - - -
-
-
-
-
-
-
-
-
-

Block Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary btn-block">Block level button</button>
-
-
- - -
-
-
-
-
-
-
-

Icons Buttons

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary mt-2"><i class="ri-heart-fill pr-0"></i></button>
-<button type="button" class="btn btn-primary mt-2 btn-with-icon"><i class="ri-heart-fill"></i>Buttons</button>
-
-
- - - - - - - - - -
- - - - - -
-
-
-
-
-
-
-
-
-
-

Social Disabled State

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="mt-2 btn btn-primary" disabled>Primary button</button>
-
-
- - - -
-
-
-
-
-
-
-

Buttons Toggle States

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" >
-Single toggle
-</button>
-
-
- -
-
-
-
-
-
-
-
-
-

Default Buttons Active

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary active mt-2">Active</button>
-<button type="button" class="btn btn-secondary active mt-2">Active</button>
-<button type="button" class="btn btn-warning active mt-2">Active</button>
-<button type="button" class="btn btn-accent disabled mt-2" disabled="">Disabled</button>
-<button type="button" class="btn btn-primary disabled mt-2" disabled="">Disabled</button>
-<button type="button" class="btn btn-outline-primary disabled mt-2" disabled="">Disabled</button>
-
-
- - - - - - -
-
-
-
-
-

Button Group Sizing

-
-
- - - - - -
-
-
-
- 

-<button type="button" class="btn btn-primary mt-2">Left</button>
-
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
-
-
-
-
-
-

Button Group

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group" role="group" aria-label="Basic example">
-   <button type="button" class="btn btn-primary">Left</button>
-   <button type="button" class="btn btn-primary">Middle</button>
-   <button type="button" class="btn btn-primary">Right</button>
-</div>
-
-
-
- - - -
- -
- -
-
-
-
-

Button Dropdown

-
-
- - - - - -
-
-
-
- 

-<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-   <button type="button" class="btn btn-primary">1</button>
-   <button type="button" class="btn btn-primary">2</button>
-   <div class="btn-group" role="group">
-      <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
-         aria-haspopup="true" aria-expanded="false">
-         Dropdown
-      </button>
-      <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-         <a class="dropdown-item" href="#">Dropdown link</a>
-         <a class="dropdown-item" href="#">Dropdown link</a>
-      </div>
-   </div>
-</div>
-
-
-
- - -
- -
- Dropdown link - Dropdown link -
-
-
-
-
- - -
- -
- Dropdown link - Dropdown link -
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-cards.html b/Datum_UImodel/ui-cards.html deleted file mode 100644 index 524886f..0000000 --- a/Datum_UImodel/ui-cards.html +++ /dev/null @@ -1,1502 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
- # -
-

Card title

-

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

- Button -
-
-
-
-
- # -
-

Card title

-

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-

It is a long established fact that a the readable content of a page when looking at its layout.

- Card link - Another link -
-
-
-
-
- # -
-

Card title

-

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-
    -
  • Cras justo odio
    • -
  • Vestibulum at eros
    • -
-
-
-
-
-
- # -
-

Card title

-

Some quick example text to build on the card title and make up the bulk of the card's content.

-
-
    -
  • Cras justo odio
    • -
-
- Card link - Another link -
-
-
-
-
-
-
-
-

Special title treatment

-

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

- Go somewhere -
-
-
-
-
-
-

Special title treatment

-

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

- Go somewhere -
-
-
-
-
-
-
-
- Featured -
-
-

Special title treatment

-

With supporting text below as a natural lead-in to additional content.

- Go somewhere -
-
-
-
-
-
- Quote -
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
Someone famous in Source Title
-
-
-
-
-
-
-
- Featured -
-
- Go somewhere -
-
- 2 days ago -
-
-
-
-
-
-
-
-

Special title treatment

-

With supporting text below as a natural lead-in to additional content.

- Go somewhere -
-
-
-
-
-
-

Special title treatment

-

With supporting text below as a natural lead-in to additional content.

- Go somewhere -
-
-
-
-
-
-

Special title treatment

-

With supporting text below as a natural lead-in to additional content.

- Go somewhere -
-
-
-
-
-
-
- # -
-

Card title

-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

-
-
-
-
-
-
-

Card title

-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

-
- # -
-
-
-
- # -
-

Card title

-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

-
-
-
-
-
-
-

Horizontal Card

-
-
-
-
-
- # -
-
-
-

Card title

-

This is a wider card with supporting text below as a natural lead-in. a little bit longer.

-

Last updated 3 mins ago

-
-
-
-
-
-
-
-
-
- # -
-
-
-

Card title

-

This is a wider card with supporting text below as a natural lead-in. a little bit longer.

-

Last updated 3 mins ago

-
-
-
-
-
-
-
-
-

Card Colored Styles

-
-
-
-
-

Primary card title

-
-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content..

-
Someone famous in Source Title
-
-
-
-
-
-
-
-

Secondary card title

-
-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
Someone famous in Source Title
-
-
-
-
-
-
-
-

Success card title

-
-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
Someone famous in Source Title
-
-
-
-
-
-
-
-

Danger card title

-
-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content..

-
Someone famous in Source Title
-
-
-
-
-
-
-
-

Warning card title

-
-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
Someone famous in Source Title
-
-
-
-
-
-
-
-

Info card title

-
-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
Someone famous in Source Title
-
-
-
-
-
-
-
-

Border Card

-
-
-
-
-

Primary card title

-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
-
-

Primary card title

-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
-
-

Primary card title

-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
-
-

Primary card title

-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
-
-

Primary card title

-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
-
-

Primary card title

-

Some quick example text to build on the card title text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
-
-

Card groups

-
-
-
-
- # -
-

Card title

-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

-
-
-
- # -
-

Card title

-

This card has supporting text below as a natural lead-in to additional content.

-

Last updated 3 mins ago

-
-
-
- # -
-

Card title

-

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

-

Last updated 3 mins ago

-
-
-
-
-
-
-
- # -
-

Card title

-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- Last updated 3 mins ago -
-
-
- # -
-

Card title

-

This card has supporting text below as a natural lead-in to additional content.

-
-
- Last updated 3 mins ago -
-
-
- # -
-

Card title

-

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

-
-
- Last updated 3 mins ago -
-
-
-
-
-

Card Masonry Columns

-
-
- # -
-

Card title that wraps to a new line

-

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in Source Title - -
-
-
-
- # -
-

Card title

-

This card has supporting text below as a natural lead-in to additional content.

-

Last updated 3 mins ago

-
-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in Source Title - -
-
-
-
-
-

Card title

-

This card has a regular title and short paragraphy of text below it.

-

Last updated 3 mins ago

-
-
-
- # -
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in Source Title - -
-
-
-
-
-

Card title

-

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

-

Last updated 3 mins ago

-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-carousel.html b/Datum_UImodel/ui-carousel.html deleted file mode 100644 index 6679aa9..0000000 --- a/Datum_UImodel/ui-carousel.html +++ /dev/null @@ -1,1400 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Slides only

-
-
- - - - - -
-
-
- -

Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.

- -
-
-
-
-
-
-
-

Slides With Controls

-
-
- - - - - -
-
-
- -

Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.

- -
-
-
-
-
-
-
-

Slides With Indicators

-
-
- - - - - -
-
-
- -

Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.

- -
-
-
-
-
-
-
-

Slides With Captions

-
-
- - - - - -
-
-
- -

Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.

-
- -
-
-
-
-
-
-
-
-

Slides With Crossfade

-
-
- - - - - -
-
-
- -

Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.

- -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-colors.html b/Datum_UImodel/ui-colors.html deleted file mode 100644 index 1db57e6..0000000 --- a/Datum_UImodel/ui-colors.html +++ /dev/null @@ -1,1196 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Datum Color

-
-
-
-

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

-
-
-

-
Primary
-
-
-

-
Secondary
-
-
-

-
Success
-
-
-

-
Danger
-
-
-

-
Warning
-
-
-

-
Info
-
-
-

-
Light
-
-
-

-
Dark
-
-
-
-
-
-
-
-

Datum Color

-
-
-
-

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

-
-
-

Primary

-
-
-

Secondary

-
-
-

Success

-
-
-

Danger

-
-
-

Warning

-
-
-

Info

-
-
-

Dark

-
-
-
-
-
-
-
-
-
-

Datum Text Color

-
-
-
-

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

-

.text-primary

-

.text-secondary

-

.text-success

-

.text-danger

-

.text-warning

-

.text-bg-info

-

.text-light

-

.text-dark

-

.text-muted

-

.text-white

-
-
-
-
-
-
-
-

Datum Text Color

-
-
-
-

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

-

Primary link

-

Secondary link

-

Success link

-

Danger link

-

Warning link

-

bg-Info link

-

Light link

-

Dark link

-

Muted link

-

White link

-
-
-
-
-
-
-
-

Datum Text Color

-
-
-
-

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

-

Primary link

-

Secondary link

-

Success link

-

Danger link

-

Warning link

-

bg-Info link

-

Dark link

-
-
-
-
-
-
-
-

Datum Text Color

-
-
-
-

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

-

Primary link

-

Secondary link

-

Success link

-

Danger link

-

Warning link

-

bg-Info link

-

Dark link

-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-embed-video.html b/Datum_UImodel/ui-embed-video.html deleted file mode 100644 index 6627ed7..0000000 --- a/Datum_UImodel/ui-embed-video.html +++ /dev/null @@ -1,1150 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Embeds Video

-
-
- -
-
-
-
- 

-<div class="embed-responsive embed-responsive-16by9">
-   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
-</div>
-
-
-

Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.

-
- -
-
-
-
-
-
-

Responsive Aspect ratios 4:3

-
-
- -
-
-
-
- 

-<div class="embed-responsive embed-responsive-4by3">
-   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
-</div>
-
-
-

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

- -
- -
-
-
-
-
-
-
-
-

Responsive Aspect ratios 21:9

-
-
- -
-
-
-
- 

-<div class="embed-responsive embed-responsive-21by9">
-   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
-</div>
-
-
-

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

- -
- -
-
-
-
-
-
-

Responsive Aspect ratios 1:1

-
-
- -
-
-
-
- 

-<div class="embed-responsive embed-responsive-1by1">
-   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
-</div>
-
-
-

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

- -
- -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-grid.html b/Datum_UImodel/ui-grid.html deleted file mode 100644 index e1b95cd..0000000 --- a/Datum_UImodel/ui-grid.html +++ /dev/null @@ -1,1444 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Grid options

-
-
-
-

See how aspects of the Bootstrap grid system work across multiple devices with a handy table..

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Extra small
- <576px - 		- Small
- ≥576px - 		- Medium
- ≥768px - 		- Large
- ≥992px - 		- Extra large
- ≥1200px -
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15px on each side of a column)
NestableYes
Column orderingYes
-
-
-
-
-
-

Equal-width

-
-
-
-

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

-
-
- -
-
.col-12 .col-md-8
-
.col-6 .col-md-4
-
- -
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
- -
-
.col-6
-
.col-6
-
-
-
-
-
-
-
-
-

Setting one column width

-
-
-
-

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

-
-
-
-
- 1 of 3 -
-
- 2 of 3 (wider) -
-
- 3 of 3 -
-
-
-
- 1 of 3 -
-
- 2 of 3 (wider) -
-
- 3 of 3 -
-
-
-
-
-
-
-
-
-

Variable width content

-
-
-
-

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

-
-
-
-
- 1 of 3 -
-
- Variable width content -
-
- 3 of 3 -
-
-
-
- 1 of 3 -
-
- Variable width content -
-
- 3 of 3 -
-
-
-
-
-
-
-
-
-

Equal-width multi-row

-
-
-
-

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

-
-
-
-
col
-
col
-
-
col
-
col
-
-
-
-
-
-
-
-
-

Responsive classes

-
-
-
-

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

-

All breakpoints

-

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

-
-
-
-
col
-
col
-
col
-
col
-
-
-
col-8
-
col-4
-
-
-
-
-
-
-
-
-

Stacked to horizontal

-
-
-
-

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).

-
-
-
-
col-sm-8
-
col-sm-4
-
-
-
col-sm
-
col-sm
-
col-sm
-
-
-
-
-
-
-
-
-

Mix and match

-
-
-
-

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

-
-
- -
-
.col-12 .col-md-8
-
.col-6 .col-md-4
-
- -
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
- -
-
.col-6
-
.col-6
-
-
-
-
-
-
-
-
-

Gutters

-
-
-
-

Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the .row and matching padding utilities on the .cols. The .container or .container-fluid parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.

-

Here’s an example of customizing the Bootstrap grid at the large (lg) breakpoint and above. We’ve increased the .col padding with .px-lg-5, counteracted that with .mx-lg-n5 on the parent .row and then adjusted the .container wrapper with .px-lg-5.

-
-
-
-
Custom column padding
-
Custom column padding
-
-
-
-
-
-
-
-
-

Alignment

-
-
-
-

Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below. See Flexbugs #3 for more details.

-

Vertical alignment

-
-
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-
-
-
-
-
-
-

Horizontal alignment

-
-
-
-

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

-
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-images.html b/Datum_UImodel/ui-images.html deleted file mode 100644 index cb119e9..0000000 --- a/Datum_UImodel/ui-images.html +++ /dev/null @@ -1,1379 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Responsive images

-
-
- - - - - -
-
-
-
- 

-<img src="../assets/images/small/img-1.jpg" class="img-fluid rounded" alt="Responsive image">
-
-
-

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

- Responsive image -
-
-
-
-
-

Equal-width multi-row

-
-
- - - - - -
-
-
-
- 

-<div class="media">
-   <img src="../assets/images/user/1.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mt-0">Media heading</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-<div class="media">
-   <img src="../assets/images/user/2.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mt-0">Media heading</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-      <div class="media mt-3">
-         <a class="mr-3" href="#">
-         <img src="../assets/images/user/3.jpg" alt="#" class="avatar-70 img-fluid rounded">
-         </a>
-         <div class="media-body">
-            <h5 class="mt-0">Media heading</h5>
-            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-         </div>
-      </div>
-   </div>
-</div>
-
-
-

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

-
- # -
-
Media heading
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
- # -
-
Media heading
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
- - # - -
-
Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
-
-
-
-
-
-
-
-
-

Order

-
-
- - - - - -
-
-
-
- 

-<div class="media mb-5">
-   <div class="media-body">
-      <h5 class="mt-0 mb-1">Media object</h5>
-      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-   </div>
-   <img src="../assets/images/page-img/09.jpg" class="ml-3 avatar-70 img-fluid rounded" alt="#">
-</div>
-<div class="media mb-5">
-   <div class="media-body">
-      <h5 class="mt-0 mb-1">Center-aligned media</h5>
-      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-   </div>
-   <img src="../assets/images/page-img/10.jpg" class="align-self-center mr-3 avatar-70 img-fluid rounded" alt="#">
-</div>
-<div class="media">
-   <div class="media-body">
-      <h5 class="mt-0 mb-1">Bottom-aligned media</h5>
-      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-   </div>
-   <img src="../assets/images/page-img/11.jpg" class="align-self-end mr-3 avatar-70 img-fluid rounded" alt="#">
-</div>
-</div>
-
-
-

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the order property (to an integer of your choosing).

-
-
-
Media object
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
- # -
-
-
-
Center-aligned media
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
- # -
-
-
-
Bottom-aligned media
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
- # -
-
-
-
-
-
-
-
-

Image thumbnails

-
-
- - - - - -
-
-
-
- 

-<ul class="list-unstyled p-0 m-0 row">
-   <li class="col-lg-4 col-md-6 col-sm-6 mt-2"><img src="../assets/images/page-img/10.jpg" class="img-thumbnail w-100 img-fluid rounded" alt="Responsive image"></li>
-   <li class="col-lg-4 col-md-6 col-sm-6 mt-2"><img src="../assets/images/page-img/11.jpg" class="rounded w-100 img-fluid rounded" alt="Responsive image"></li>
-   <li class="col-lg-4 col-md-6 col-sm-6 mt-2"><img src="../assets/images/page-img/12.jpg" class="rounded w-100 img-fluid rounded" alt="Responsive image"></li>
-</ul>
-
-
-

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

-
    -
  • Responsive image
    • -
  • Responsive image
    • -
  • Responsive image
    • -
-
-
-
-
-
-

Image thumbnails

-
-
- - - - - -
-
-
-
- 

-<img src="../assets/images/page-img/13.jpg" class=" mt-2 img-fluid rounded" alt="Responsive image">
-<img src="../assets/images/page-img/14.jpg" class=" mt-2 img-fluid rounded float-right" alt="Responsive image">
-
-
-

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

- Responsive image - Responsive image -
-
-
-
-
-

Media object

-
-
- - - - - -
-
-
-
- 

-<div class="media mb-4">
-   <img src="../assets/images/page-img/09.jpg" class="align-self-start mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mt-0">Top-aligned media</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-<div class="media mb-4">
-   <img src="../assets/images/page-img/10.jpg" class="align-self-center mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mt-0">Center-aligned media</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-<div class="media">
-   <img src="../assets/images/page-img/11.jpg" class="align-self-end mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mt-0">Bottom-aligned media</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-
-
-

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

-
- # -
-
Top-aligned media
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
- # -
-
Center-aligned media
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
- # -
-
Bottom-aligned media
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
-
-
-
-
-

Media list

-
-
- - - - - -
-
-
-
- 

-<ul class="list-unstyled">
-   <li class="media">
-      <img src="../assets/images/page-img/12.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-      <div class="media-body">
-         <h5 class="mt-0 mb-1">List-based media object</h5>
-         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-      </div>
-   </li>
-   <li class="media my-4">
-      <img src="../assets/images/page-img/13.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-      <div class="media-body">
-         <h5 class="mt-0 mb-1">List-based media object</h5>
-         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-      </div>
-   </li>
-   <li class="media">
-      <img src="../assets/images/page-img/14.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-      <div class="media-body">
-         <h5 class="mt-0 mb-1">List-based media object</h5>
-         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-      </div>
-   </li>
-</ul>
-
-
-

Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <ul> or <ol>, add the .list-unstyled to remove any browser default list styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine tune.

-
    -
  • - # -
    -
    List-based media object
    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    -
    • -
  • - # -
    -
    List-based media object
    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    -
    • -
  • - # -
    -
    List-based media object
    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    -
    • -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-list-group.html b/Datum_UImodel/ui-list-group.html deleted file mode 100644 index 5a73541..0000000 --- a/Datum_UImodel/ui-list-group.html +++ /dev/null @@ -1,1506 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

List group

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group">
-   <li class="list-group-item">Cras justo odio</li>
-   <li class="list-group-item">Dapibus ac facilisis in</li>
-   <li class="list-group-item">Morbi leo risus</li>
-   <li class="list-group-item">Porta ac consectetur ac</li>
-   <li class="list-group-item">Vestibulum at eros</li>
-</ul>
-
-
-

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

-
    -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
-
-
-
-
-
-

Disabled items

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group">
-   <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
-   <li class="list-group-item">Dapibus ac facilisis in</li>
-   <li class="list-group-item">Morbi leo risus</li>
-   <li class="list-group-item">Porta ac consectetur ac</li>
-   <li class="list-group-item">Vestibulum at eros</li>
-</ul>
-
-
-

Add .disabled to a .list-group-item to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

-
    -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
-
-
-
-
-
-

Flush

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group list-group-flush">
-   <li class="list-group-item">Cras justo odio</li>
-   <li class="list-group-item">Dapibus ac facilisis in</li>
-   <li class="list-group-item">Morbi leo risus</li>
-   <li class="list-group-item">Porta ac consectetur ac</li>
-   <li class="list-group-item">Vestibulum at eros</li>
-</ul>
-
-
-

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

-
    -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
-
-
-
-
-
-

Contextual classes

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group">
-   <li class="list-group-item">Dapibus ac facilisis in</li>
-   <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
-   <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
-   <li class="list-group-item list-group-item-success">A simple success list group item</li>
-   <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
-   <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
-   <li class="list-group-item list-group-item-info">A simple info list group item</li>
-   <li class="list-group-item list-group-item-light">A simple light list group item</li>
-   <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
-</ul>
-
-
-

Use contextual classes to style list items with a stateful background and color.

-
    -
  • Dapibus ac facilisis in
    • -
  • A simple primary list group item
    • -
  • A simple secondary list group item
    • -
  • A simple success list group item
    • -
  • A simple danger list group item
    • -
  • A simple warning list group item
    • -
  • A simple info list group item
    • -
  • A simple light list group item
    • -
  • A simple dark list group item
    • -
-
-
-
-
-
-

With badges

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group">
-   <li class="list-group-item d-flex justify-content-between align-items-center">
-      Cras justo odio
-      <span class="badge badge-primary badge-pill">14</span>
-   </li>
-   <li class="list-group-item d-flex justify-content-between align-items-center">
-      Dapibus ac facilisis in
-      <span class="badge badge-success badge-pill">2</span>
-   </li>
-   <li class="list-group-item d-flex justify-content-between align-items-center">
-      Morbi leo risus
-      <span class="badge badge-danger badge-pill">1</span>
-   </li>
-</ul>
-
-
-

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

-
    -
  • - Cras justo odio - 14 -
    • -
  • - Dapibus ac facilisis in - 2 -
    • -
  • - Morbi leo risus - 1 -
    • -
-
-
-
-
-
-

With badges

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group">
-   <li class="list-group-item d-flex justify-content-between align-items-center iq-bg-primary">
-      Cras justo odio
-      <span class="badge badge-primary badge-pill">14</span>
-   </li>
-   <li class="list-group-item d-flex justify-content-between align-items-center iq-bg-success" >
-      Dapibus ac facilisis in
-      <span class="badge badge-success badge-pill">2</span>
-   </li>
-   <li class="list-group-item d-flex justify-content-between align-items-center iq-bg-danger">
-      Morbi leo risus
-      <span class="badge badge-danger badge-pill">1</span>
-   </li>
-</ul>
-
-
-

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

-
    -
  • - Cras justo odio - 14 -
    • -
  • - Dapibus ac facilisis in - 2 -
    • -
  • - Morbi leo risus - 1 -
    • -
-
-
-
-
-
-

List Active

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group">
-   <li class="list-group-item active">Cras justo odio</li>
-   <li class="list-group-item">Dapibus ac facilisis in</li>
-   <li class="list-group-item">Morbi leo risus</li>
-   <li class="list-group-item">Porta ac consectetur ac</li>
-   <li class="list-group-item">Vestibulum at eros</li>
-</ul>
-
-
-

Add .active to a .list-group-item to indicate the current active selection.

-
    -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
-
-
-
-
-
-

Links and buttons

-
-
- - - - - -
-
-
-
- 

-<div class="list-group">
-   <a href="#" class="list-group-item list-group-item-action active">
-   Cras justo odio
-   </a>
-   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-   <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
-   <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
-   <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
-</div>
-
-
-

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.

-

Be sure to not use the standard .btn classes here.

-
- - Cras justo odio - - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros -
-
-
-
-
-
-

Horizontal

-
-
- - - - - -
-
-
-
- 

-<ul class="list-group list-group-horizontal">
-   <li class="list-group-item">Cras justo odio</li>
-   <li class="list-group-item">Dapibus ac facilisis in</li>
-   <li class="list-group-item">Morbi leo risus</li>
-</ul>
-
-
-

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.

-

ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

-
    -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
-
-
-
-
-
-

Contextual classes Action

-
-
- - - - - -
-
-
-
- 

-<div class="list-group">
-   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
-   <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
-</div>
-
-
-

Use contextual classes to style list items with a stateful background and color.

-
- Dapibus ac facilisis in - A simple primary list group item - A simple secondary list group item - A simple success list group item - A simple danger list group item - A simple warning list group item - A simple info list group item - A simple light list group item - A simple dark list group item -
-
-
-
-
-
-

Custom content

-
-
- - - - - -
-
-
-
- 

-<div class="list-group">
-   <a href="#" class="list-group-item list-group-item-action active">
-      <div class="d-flex w-100 justify-content-between">
-         <h5 class="mb-1 text-white">List group item heading</h5>
-         <small>3 days ago</small>
-      </div>
-      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-      <small>Donec id elit non mi porta.</small>
-   </a>
-   <a href="#" class="list-group-item list-group-item-action">
-      <div class="d-flex w-100 justify-content-between">
-         <h5 class="mb-1">List group item heading</h5>
-         <small class="text-muted">3 days ago</small>
-      </div>
-      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-      <small class="text-muted">Donec id elit non mi porta.</small>
-   </a>
-   <a href="#" class="list-group-item list-group-item-action">
-      <div class="d-flex w-100 justify-content-between">
-         <h5 class="mb-1">List group item heading</h5>
-         <small class="text-muted">3 days ago</small>
-      </div>
-      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-      <small class="text-muted">Donec id elit non mi porta.</small>
-   </a>
-</div>
-
-
-

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

-
- -
-
List group item heading
- 3 days ago -
-

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

- Donec id elit non mi porta. - - -
-
List group item heading
- 3 days ago -
-

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

- Donec id elit non mi porta. - - -
-
List group item heading
- 3 days ago -
-

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

- Donec id elit non mi porta. - -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-media-object.html b/Datum_UImodel/ui-media-object.html deleted file mode 100644 index 4337469..0000000 --- a/Datum_UImodel/ui-media-object.html +++ /dev/null @@ -1,1299 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Equal-width multi-row

-
-
- - - - - -
-
-
-
- 

-<div class="media">
-   <img src="../assets/images/page-img/14.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mb-1">Media heading</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-<div class="media">
-   <img src="../assets/images/page-img/13.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mb-1">Media heading</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-      <div class="media mt-3">
-         <a class="mr-3" href="#">
-         <img src="../assets/images/page-img/12.jpg" alt="#" class="avatar-70 img-fluid rounded">
-         </a>
-         <div class="media-body">
-            <h5 class="mb-1">Media heading</h5>
-            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-         </div>
-      </div>
-   </div>
-</div>
-
-
-

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

-
- # -
-
Media heading
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
- # -
-
Media heading
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
- - # - -
-
Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
-
-
-
-
-
-
-
-
-

Order

-
-
- - - - - -
-
-
-
- 

-<div class="media mb-5">
-   <div class="media-body">
-      <h5 class="mt-0 mb-1">Media object</h5>
-      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-   </div>
-   <img src="../assets/images/page-img/14.jpg" class="ml-3 avatar-70 img-fluid rounded" alt="#">
-</div>
-<div class="media mb-5">
-   <div class="media-body">
-      <h5 class="mt-0 mb-1">Center-aligned media</h5>
-      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-   </div>
-   <img src="../assets/images/page-img/12.jpg" class="align-self-center mr-3 avatar-70 img-fluid rounded" alt="#">
-</div>
-<div class="media">
-   <div class="media-body">
-      <h5 class="mt-0 mb-1">Bottom-aligned media</h5>
-      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-   </div>
-   <img src="../assets/images/page-img/11.jpg" class="align-self-end mr-3 avatar-70 img-fluid rounded" alt="#">
-</div>
-
-
-

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the order property (to an integer of your choosing).

-
-
-
Media object
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
- # -
-
-
-
Center-aligned media
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
- # -
-
-
-
Bottom-aligned media
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
- # -
-
-
-
-
-
-
-
-

Media object

-
-
- - - - - -
-
-
-
- 

-<div class="media mb-4">
-   <img src="../assets/images/page-img/09.jpg" class="align-self-start mr-3 avatar-70 img-fluid rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mb-1">Top-aligned media</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-<div class="media mb-4">
-   <img src="../assets/images/page-img/10.jpg" class="align-self-center rounded mr-3 avatar-70 rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mb-1">Center-aligned media</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-<div class="media">
-   <img src="../assets/images/page-img/11.jpg" class="align-self-end rounded mr-3 avatar-70 rounded" alt="#">
-   <div class="media-body">
-      <h5 class="mb-1">Bottom-aligned media</h5>
-      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
-   </div>
-</div>
-
-
-

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

-
- # -
-
Top-aligned media
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
- # -
-
Center-aligned media
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
- # -
-
Bottom-aligned media
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-
-
-
-
-
-
-
-

Media list

-
-
- - - - - -
-
-
-
- 

-<ul class="list-unstyled">
-   <li class="media">
-      <img src="../assets/images/page-img/12.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-      <div class="media-body">
-         <h5 class="mt-0 mb-1">List-based media object</h5>
-         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-      </div>
-   </li>
-   <li class="media my-4">
-      <img src="../assets/images/page-img/14.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-      <div class="media-body">
-         <h5 class="mt-0 mb-1">List-based media object</h5>
-         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-      </div>
-   </li>
-   <li class="media">
-      <img src="../assets/images/page-img/13.jpg" class="mr-3 avatar-70 img-fluid rounded" alt="#">
-      <div class="media-body">
-         <h5 class="mt-0 mb-1">List-based media object</h5>
-         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-      </div>
-   </li>
-</ul>
-
-
-

Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <ul> or <ol>, add the .list-unstyled to remove any browser default list styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine tune.

-
    -
  • - # -
    -
    List-based media object
    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    -
    • -
  • - # -
    -
    List-based media object
    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    -
    • -
  • - # -
    -
    List-based media object
    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    -
    • -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-modal.html b/Datum_UImodel/ui-modal.html deleted file mode 100644 index fab460a..0000000 --- a/Datum_UImodel/ui-modal.html +++ /dev/null @@ -1,1648 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Modal components

-
-
- -
-
-
- -

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

- - - - -
-
-
-
-
-

Modal Scrolling

-
-
- -
-
-
- -

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

- - - - -
-
-
-
-
-

Optional sizes

-
-
- -
-
-
- -

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

- - - - - - - - - -
-
-
-
-
-

Scrolling long content

-
-
- -
-
-
- -

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

- - - - -
-
-
-
-
-

Vertically centered

-
-
- -
-
-
- -

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

- - - - - - -
-
-
-
-
-

Using the grid

-
-
- -
-
-
- -

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.

- - -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-notifications.html b/Datum_UImodel/ui-notifications.html deleted file mode 100644 index d486288..0000000 --- a/Datum_UImodel/ui-notifications.html +++ /dev/null @@ -1,1470 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Notifications

-
-
- -
-
-
-
- 

-<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
-   <div class="toast-header">
-      <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-         <rect width="100%" height="100%" fill="#007aff"></rect>
-      </svg>
-      <strong class="mr-auto">Bootstrap</strong>
-      <small>11 mins ago</small>
-      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-      <span aria-hidden="true">×</span>
-      </button>
-   </div>
-   <div class="toast-body">
-      Hello, world! This is a toast message.
-   </div>
-</div>
-
-
-

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

- -
-
-
-
-
-

Stacking

-
-
- -
-
-
-
- 

-<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
-   <div class="toast-header">
-      <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-         <rect width="100%" height="100%" fill="#007aff"></rect>
-      </svg>
-      <strong class="mr-auto">Bootstrap</strong>
-      <small class="text-muted">just now</small>
-      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-      </button>
-   </div>
-   <div class="toast-body">
-      See? Just like this.
-   </div>
-</div>
-<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
-   <div class="toast-header">
-      <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-         <rect width="100%" height="100%" fill="#007aff"></rect>
-      </svg>
-      <strong class="mr-auto">Bootstrap</strong>
-      <small class="text-muted">2 seconds ago</small>
-      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-      </button>
-   </div>
-   <div class="toast-body">
-      Heads up, toasts will stack automatically
-   </div>
-</div>
-
-
-

When you have multiple toasts, we default to vertically stacking them in a readable manner.

- - -
-
-
-
-
-

Notifications horizontally and/or vertically

-
-
- -
-
-
-
- 

-<div class="p-3 bg-dark">
-   <!-- Flexbox container for aligning the toasts -->
-   <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
-      <!-- Then put toasts within -->
-      <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
-         <div class="toast-header">
-            <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-               <rect width="100%" height="100%" fill="#007aff"></rect>
-            </svg>
-            <strong class="mr-auto">Bootstrap</strong>
-            <small>11 mins ago</small>
-            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-            </button>
-         </div>
-         <div class="toast-body">
-            Hello, world! This is a toast message.
-         </div>
-      </div>
-   </div>
-</div>
-
-
-

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

-
- -
- - -
-
-
-
-
-
-
-
-
-

Notifications

-
-
- -
-
-
-
- 

-<div class="p-3 bg-dark">
-   <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
-      <div class="toast-header">
-         <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-            <rect width="100%" height="100%" fill="#007aff"></rect>
-         </svg>
-         <strong class="mr-auto">Bootstrap</strong>
-         <small>11 mins ago</small>
-         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-         <span aria-hidden="true">×</span>
-         </button>
-      </div>
-      <div class="toast-body">
-         Hello, world! This is a toast message.
-      </div>
-   </div>
-</div>
-
-
-

Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements under a toast.

-
- -
-
-
-
-
-
-

Stacking Placement

-
-
- -
-
-
-
- 

-<div class="bg-dark p-3">
-   <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
-      <div class="toast fade show" style="position: absolute; top: 0; right: 0;">
-         <div class="toast-header">
-            <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-               <rect width="100%" height="100%" fill="#007aff"></rect>
-            </svg>
-            <strong class="mr-auto">Bootstrap</strong>
-            <small>11 mins ago</small>
-            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-            </button>
-         </div>
-         <div class="toast-body">
-            Hello, world! This is a toast message.
-         </div>
-      </div>
-   </div>
-</div>
-
-
-

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.

-
-
-
-
- - - - Bootstrap - 11 mins ago - -
-
- Hello, world! This is a toast message. -
-
-
-
-

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

-
-
- -
- - - -
-
-
-
-
-
-
-
-
-
-

Notifications

-
-
- -
-
-
-
- 

-<div class="toast fade show bg-primary text-white border-0 rounded p-2" role="alert" aria-live="assertive" aria-atomic="true">
-   <div class="toast-header bg-primary text-white">
-      <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-         <rect width="100%" height="100%" fill="#fff"></rect>
-      </svg>
-      <strong class="mr-auto text-white">Bootstrap</strong>
-      <small>11 mins ago</small>
-      <button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="Close">
-      <span aria-hidden="true">×</span>
-      </button>
-   </div>
-   <div class="toast-body">
-      Hello, world! This is a toast message.
-   </div>
-</div>
-<div class="toast fade show bg-success text-white border-0 rounded p-2 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
-   <div class="toast-header bg-success text-white">
-      <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
-         <rect width="100%" height="100%" fill="#fff"></rect>
-      </svg>
-      <strong class="mr-auto text-white">Bootstrap</strong>
-      <small>11 mins ago</small>
-      <button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="Close">
-      <span aria-hidden="true">×</span>
-      </button>
-   </div>
-   <div class="toast-body">
-      Hello, world! This is a toast message.
-   </div>
-</div>
-
-
-

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

- - -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-pagination.html b/Datum_UImodel/ui-pagination.html deleted file mode 100644 index 857d2ee..0000000 --- a/Datum_UImodel/ui-pagination.html +++ /dev/null @@ -1,1406 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Pagination Examples

-
-
- -
-
-
-
- 

-<nav aria-label="Page navigation example">
-   <ul class="pagination mb-0">
-      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item"><a class="page-link" href="#">Next</a></li>
-   </ul>
-</nav>
-
-
-

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

- -
-
-
-
-
-

Disabled and active states

-
-
- -
-
-
-
- 

-<nav aria-label="...">
-   <ul class="pagination">
-      <li class="page-item disabled">
-         <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item active" aria-current="page">
-         <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item">
-         <a class="page-link" href="#">Next</a>
-      </li>
-   </ul>
-</nav>
-
-
-

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

-

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.

- -

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.

- -
-
-
-
-
-

Pagination With Color

-
-
- -
-
-
-
- 

-<nav aria-label="Page navigation example">
-   <ul class="pagination">
-      <li class="page-item"><a class="page-link border-primary bg-primary text-white" href="#">Previous</a></li>
-      <li class="page-item"><a class="page-link border-primary bg-primary text-white" href="#">1</a></li>
-      <li class="page-item"><a class="page-link border-primary bg-primary text-white" href="#">2</a></li>
-      <li class="page-item"><a class="page-link border-primary bg-primary text-white" href="#">3</a></li>
-      <li class="page-item"><a class="page-link border-primary bg-primary text-white" href="#">Next</a></li>
-   </ul>
-</nav>
-
-
-

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

- - - -
-
- -
-
-
-

Working with icons

-
-
- -
-
-
-
- 

-<nav aria-label="Page navigation example">
-   <ul class="pagination mb-0">
-      <li class="page-item">
-         <a class="page-link" href="#" aria-label="Previous">
-         <span aria-hidden="true">&laquo;</span>
-         </a>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item">
-         <a class="page-link" href="#" aria-label="Next">
-         <span aria-hidden="true">&raquo;</span>
-         </a>
-      </li>
-   </ul>
-</nav>
-
-
-

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

- -
-
-
-
-
-

Pagination Sizing

-
-
- -
-
-
-
- 

-<nav aria-label="...">
-   <ul class="pagination pagination-lg">
-      <li class="page-item active" aria-current="page">
-         <span class="page-link">
-         1
-         <span class="sr-only">(current)</span>
-         </span>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-   </ul>
-</nav>
-
-
-

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

- - - -
-
-
-
-
-

Alignment

-
-
- -
-
-
-
- 

-<h6>left</h6>
-<nav aria-label="Page navigation example">
-   <ul class="pagination">
-      <li class="page-item disabled">
-         <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item">
-         <a class="page-link" href="#">Next</a>
-      </li>
-   </ul>
-</nav>
-
-
-

Change the alignment of pagination components with flexbox utilities.

-
left
- -
Center
- -
Right
- -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-popovers.html b/Datum_UImodel/ui-popovers.html deleted file mode 100644 index 95ae08e..0000000 --- a/Datum_UImodel/ui-popovers.html +++ /dev/null @@ -1,1252 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Popovers

-
-
- -
-
-
-
- 

-<button type="button" class="btn btn-lg btn-danger mt-2" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

- -
-
-
-
-
-

Dismiss on next click

-
-
- -
-
-
-
- 

-<a tabindex="0" class="btn btn-danger mt-2" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
-
-
-

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

- Dismissible popover -
-
-
-
-
-

Disabled elements

-
-
- -
-
-
-
- 

-<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
-   <button class="btn btn-primary mt-2" style="pointer-events: none;" type="button" disabled>Disabled button</button>
-</span>
-
-
-

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span> and override the pointer-events on the disabled element.

- - - -
-
-
-
-
-

Hover elements

-
-
- -
-
-
-
- 

-<span class="d-inline-block" data-trigger="hover" data-toggle="popover" data-content="Disabled popover">
-   <button class="btn btn-primary mt-2" style="pointer-events: none;" type="button" disabled>Disabled button</button>
-</span>
-
-
-

For disabled popover triggers, you may also prefer data-trigger="hover" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

- - - -
-
- -
-
-
-

Four directions

-
-
- -
-
-
-
- 

-<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
-<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
-<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
-<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
-
-
-

Four options are available: top, right, bottom, and left aligned.

- - - - -
-
-
-
-
-

Popovers With Color

-
-
- -
-
-
-
- 

-<button type="button" class="btn btn-primary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
-<button type="button" class="btn btn-success mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
-<button type="button" class="btn btn-danger mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
-<button type="button" class="btn btn-info mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
-
-
-

Four options are available: top, right, bottom, and left aligned.

- - - - -
-
-
-
-
-

Popovers With Color

-
-
- -
-
-
-
- 

-<button type="button" class="btn iq-bg-primary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
-<button type="button" class="btn iq-bg-success mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
-<button type="button" class="btn iq-bg-danger mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
-<button type="button" class="btn iq-bg-info mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
-
-
-

Four options are available: top, right, bottom, and left aligned.

- - - - -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-progressbars.html b/Datum_UImodel/ui-progressbars.html deleted file mode 100644 index 3b2491a..0000000 --- a/Datum_UImodel/ui-progressbars.html +++ /dev/null @@ -1,1346 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Examples

-
-
- -
-
-
-
- 

-<div class="progress mb-3">
-   <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-   <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-
-

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

-
    -
  • We use the .progress as a wrapper to indicate the max value of the progress bar.
    • -
  • We use the inner .progress-bar to indicate the progress so far.
    • -
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
    • -
  • The .progress-bar also requires some role and aria attributes to make it accessible.
    • -
-

Put that all together, and you have the following examples.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Height

-
-
- -
-
-
-
- 

-<div class="progress mb-3" style="height: 3px;">
-   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
-</div>
-<div class="progress mb-3" style="height: 10px;">
-   <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
-</div>
-<div class="progress mb-3" style="height: 15px;">
-   <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
-</div>
-<div class="progress" style="height: 20px;">
-   <div class="progress-bar" role="progressbar" style="width: 99%;" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100">99%</div>
-</div>
-
-
-

We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.

-
-
25%
-
-
-
50%
-
-
-
75%
-
-
-
99%
-
-
-
-
-
-
-

Animated stripes

-
-
- -
-
-
-
- 

-<div class="progress mb-3">
-   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
-</div>
-<div class="progress">
-   <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
-</div>
-
-
-

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

-
-
-
-
-
-
-
-
- -
-
-
-

Labels

-
-
- -
-
-
-
- 

-<div class="progress mb-3">
-   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
-</div>
-<div class="progress">
-   <div class="progress-bar" role="progressbar" style="width: 99%;" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100">99%</div>
-</div>
-
-
-

Add labels to your progress bars by placing text within the .progress-bar.

-
-
25%
-
-
-
50%
-
-
-
75%
-
-
-
99%
-
-
-
-
-
-
-

Backgrounds

-
-
- -
-
-
-
- 

-<div class="progress mb-3">
-   <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-   <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-
-

Use background utility classes to change the appearance of individual progress bars.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Multiple bars

-
-
- -
-
-
-
- 

- <div class="progress">
-   <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-   <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-   <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-
-

Include multiple progress bars in a progress component if you need.

-
-
-
-
-
-
-
-
-
-
-

Striped

-
-
- -
-
-
-
- 

-<div class="progress mb-3">
-   <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress mb-3">
-   <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-   <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-
-

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-tabs.html b/Datum_UImodel/ui-tabs.html deleted file mode 100644 index 4c766b3..0000000 --- a/Datum_UImodel/ui-tabs.html +++ /dev/null @@ -1,1564 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Basic Tabs

-
-
- -
-
-
-
- 

-<ul class="nav nav-tabs" id="myTab-1" role="tablist">
-   <li class="nav-item">
-      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
-   </li>
-</ul>
-<div class="tab-content" id="myTabContent-2">
-   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-</div>
-
-
-

The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.

- -
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-
-
-
-
-
-

Basic Tabs Style 3

-
-
- -
-
-
-
- 

-<ul class="nav nav-tabs" id="myTab-two" role="tablist">
-   <li class="nav-item">
-      <a class="nav-link active" id="home-tab-two" data-toggle="tab" href="#home-two" role="tab" aria-controls="home" aria-selected="true">Home</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="profile-tab-two" data-toggle="tab" href="#profile-two" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="contact-tab-two" data-toggle="tab" href="#contact-two" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
-   </li>
-</ul>
-<div class="tab-content" id="myTabContent-1">
-   <div class="tab-pane fade show active" id="home-two" role="tabpanel" aria-labelledby="home-tab-two">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="profile-two" role="tabpanel" aria-labelledby="profile-tab-two">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="contact-two" role="tabpanel" aria-labelledby="contact-tab-two">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-</div>
-
-
-

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

- -
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-
-
-
-
-
-

Tabs Vertical Pills

-
-
- -
-
-
-
- 

-<div class="col-sm-3">
-   <div class="nav flex-column nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
-   </div>
-</div>
-<div class="col-sm-9">
-   <div class="tab-content mt-0" id="v-pills-tabContent">
-      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
-         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
-      </div>
-      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
-         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
-      </div>
-      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
-         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
-      </div>
-      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
-         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
-      </div>
-   </div>
-</div>
-
-
-

Stack your navigation by changing the flex item direction with the .flex-column utility.

-
-
-
- Home - Profile - Messages - Settings -
-
-
-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

-
-
-
-
-
-
-
-
-
-

Tabs Justify Center

-
-
- -
-
-
-
- 

-<ul class="nav nav-tabs justify-content-center" id="myTab-2" role="tablist">
-   <li class="nav-item">
-      <a class="nav-link active" id="home-tab-justify" data-toggle="tab" href="#home-justify" role="tab" aria-controls="home" aria-selected="true">Home</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="profile-tab-justify" data-toggle="tab" href="#profile-justify" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="contact-tab-justify" data-toggle="tab" href="#contact-justify" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
-   </li>
-</ul>
-<div class="tab-content" id="myTabContent-3">
-   <div class="tab-pane fade show active" id="home-justify" role="tabpanel" aria-labelledby="home-tab-justify">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="profile-justify" role="tabpanel" aria-labelledby="profile-tab-justify">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="contact-justify" role="tabpanel" aria-labelledby="contact-tab-justify">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-</div>
-
-
-

Centered with .justify-content-center

- -
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-
-
- -
-
-
-

Basic Tabs Style 2

-
-
- -
-
-
-
- 

-<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
-   <li class="nav-item">
-      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
-   </li>
-</ul>
-<div class="tab-content" id="pills-tabContent-2">
-   <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-</div>
-
-
-

Take that same HTML, but use .nav-pills instead:

- -
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-
-
-
-
-
-

Basic Tabs Style 4

-
-
- -
-
-
-
- 

-<ul class="nav nav-tabs" id="myTab-three" role="tablist">
-   <li class="nav-item">
-      <a class="nav-link active" id="home-tab-three" data-toggle="tab" href="#home-three" role="tab" aria-controls="home" aria-selected="true">Home</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="profile-tab-three" data-toggle="tab" href="#profile-three" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="contact-tab-three" data-toggle="tab" href="#contact-three" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
-   </li>
-</ul>
-<div class="tab-content" id="myTabContent-4">
-   <div class="tab-pane fade show active" id="home-three" role="tabpanel" aria-labelledby="home-tab-three">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="profile-three" role="tabpanel" aria-labelledby="profile-tab-three">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="contact-three" role="tabpanel" aria-labelledby="contact-tab-three">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-</div>
-
-
-

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

- -
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-
-
-
-
-
-

Tabs Fill and justify

-
-
- -
-
-
-
- 

-<ul class="nav nav-pills mb-3 nav-fill" id="pills-tab-1" role="tablist">
-   <li class="nav-item">
-      <a class="nav-link active" id="pills-home-tab-fill" data-toggle="pill" href="#pills-home-fill" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="pills-profile-tab-fill" data-toggle="pill" href="#pills-profile-fill" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="pills-contact-tab-fill" data-toggle="pill" href="#pills-contact-fill" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
-   </li>
-</ul>
-<div class="tab-content" id="pills-tabContent-1">
-   <div class="tab-pane fade show active" id="pills-home-fill" role="tabpanel" aria-labelledby="pills-home-tab-fill">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="pills-profile-fill" role="tabpanel" aria-labelledby="pills-profile-tab-fill">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="pills-contact-fill" role="tabpanel" aria-labelledby="pills-contact-tab-fill">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-</div>
-
-
-

Force your .nav’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

- -
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-
-
-
-
-
-

Tabs Justify Right

-
-
- -
-
-
-
- 

-<ul class="nav nav-tabs justify-content-end" id="myTab-4" role="tablist">
-   <li class="nav-item">
-      <a class="nav-link active" id="home-tab-end" data-toggle="tab" href="#home-end" role="tab" aria-controls="home" aria-selected="true">Home</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="profile-tab-end" data-toggle="tab" href="#profile-end" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" id="contact-tab-end" data-toggle="tab" href="#contact-end" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
-   </li>
-</ul>
-<div class="tab-content" id="myTabContent-5">
-   <div class="tab-pane fade show active" id="home-end" role="tabpanel" aria-labelledby="home-tab-end">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="profile-end" role="tabpanel" aria-labelledby="profile-tab-end">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-   <div class="tab-pane fade" id="contact-end" role="tabpanel" aria-labelledby="contact-tab-end">
-      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-   </div>
-</div>
-
-
-

Right-aligned with .justify-content-end.

- -
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-tooltips.html b/Datum_UImodel/ui-tooltips.html deleted file mode 100644 index 5c6d6e1..0000000 --- a/Datum_UImodel/ui-tooltips.html +++ /dev/null @@ -1,1219 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Tooltips

-
-
- -
-
-
-
- 

-<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
-<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
-<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
-<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
-
-
-

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. The data-placement attribute specifies the tooltip position.

- - - - -
-
-
-
-
-
-
-

Disabled elements

-
-
- -
-
-
-
- 

-<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
-   <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
-</span>
-
-
-

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0", and override the pointer-events on the disabled element.

- - - -
-
-
-
-
-
-
-

Tooltips

-
-
- -
-
-
-
- 

-<button type="button" class="btn btn-primary mt-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
-<button type="button" class="btn btn-success mt-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
-<button type="button" class="btn btn-danger mt-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
-<button type="button" class="btn btn-info mt-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
-
-
-

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left Using background colors

- - - - -
-
-
-
-
-
-
-

Tooltips

-
-
- -
-
-
-
- 

-<button type="button" class="btn iq-bg-primary mt-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
-<button type="button" class="btn iq-bg-success mt-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
-<button type="button" class="btn iq-bg-danger mt-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
-<button type="button" class="btn iq-bg-info mt-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
-
-
-

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left Using Light background colors

- - - - -
-
-
-
-
-
-
-

Hover elements

-
-
- -
-
-
-
- 

-<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
-<!-- Generated markup by the plugin -->
-<div class="tooltip bs-tooltip-top" role="tooltip">
-   <div class="arrow"></div>
-   <div class="tooltip-inner">Some tooltip text!</div>
-</div>
-
-
-

Hover over the buttons below to see the tooltip.

- - Hover over me - - -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/ui-typography.html b/Datum_UImodel/ui-typography.html deleted file mode 100644 index ee29394..0000000 --- a/Datum_UImodel/ui-typography.html +++ /dev/null @@ -1,1351 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Display headings

-
-
- -
-
-
-
- 

-<h1 class="display-1">Display headings</h1>
-<h1 class="display-2">Display headings</h1>
-<h1 class="display-3">Display headings</h1>
-<h1 class="display-4">Display headings</h1>
-
-
-

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it’s possible to enable responsive font sizes.

-

Display headings

-

Display headings

-

Display headings

-

Display headings

-
-
- -
-
-
-

Typography

-
-
- -
-
-
-
- 

-<h1>h1. Bootstrap heading</h1>
-<h2>h2. Bootstrap heading</h2>
-<h3>h3. Bootstrap heading</h3>
-<h4>h4. Bootstrap heading</h4>
-<h5>h5. Bootstrap heading</h5>
-<h6 class="mb-0">h6. Bootstrap heading</h6>
-
-
-

All HTML headings, <h1> through <h6>, are available.

-

h1. Bootstrap heading

-

h2. Bootstrap heading

-

h3. Bootstrap heading

-

h4. Bootstrap heading

-
h5. Bootstrap heading
-
h6. Bootstrap heading
-
-
-
-
-
-

Inline text elements

-
-
- -
-
-
-
- 

-<p>Styling for common inline HTML5 elements.</p>
-<p>You can use the mark tag to <mark>highlight</mark> text.</p>
-<p><del>This line of text is meant to be treated as deleted text.</del></p>
-<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
-<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
-<p><u>This line of text will render as underlined</u></p>
-<p><small>This line of text is meant to be treated as fine print.</small></p>
-<p><strong>This line rendered as bold text.</strong></p>
-<p><em>This line rendered as italicized text.</em></p>
-
-
-

Styling for common inline HTML5 elements.

-

You can use the mark tag to highlight text.

-

This line of text is meant to be treated as deleted text.

-

This line of text is meant to be treated as no longer accurate.

-

This line of text is meant to be treated as an addition to the document.

-

This line of text will render as underlined

-

This line of text is meant to be treated as fine print.

-

This line rendered as bold text.

-

This line rendered as italicized text.

-
-
-
-
-
-

Lists Inline

-
-
- -
-
-
-
- 

-<ul class="list-inline">
-   <li class="list-inline-item">Lorem ipsum</li>
-   <li class="list-inline-item">Phasellus iaculis</li>
-   <li class="list-inline-item">Nulla volutpat</li>
-</ul>
-
-
-

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

-
    -
  • Lorem ipsum
    • -
  • Phasellus iaculis
    • -
  • Nulla volutpat
    • -
-
-
- -
-
-
-

Headings

-
-
- -
-
-
-
- 

-<p class="h1 mb-3">h1. Bootstrap heading</p>
-<p class="h2 mb-3">h2. Bootstrap heading</p>
-<p class="h3 mb-3">h3. Bootstrap heading</p>
-<p class="h4 mb-3">h4. Bootstrap heading</p>
-<p class="h5 mb-3">h5. Bootstrap heading</p>
-<p class="h6 mb-0">h6. Bootstrap heading</p>
-
-
-

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

-

h1. Bootstrap heading

-

h2. Bootstrap heading

-

h3. Bootstrap heading

-

h4. Bootstrap heading

-

h5. Bootstrap heading

-

h6. Bootstrap heading

-
-
-
-
-
-

Lists Unstyled

-
-
- -
-
-
-
- 

-<ul class="list-unstyled">
-   <li>Lorem ipsum dolor sit amet</li>
-   <li>Consectetur adipiscing elit</li>
-   <li>Integer molestie lorem at massa</li>
-   <li>Facilisis in pretium nisl aliquet</li>
-   <li>
-      Nulla volutpat aliquam velit
-      <ul>
-         <li>Phasellus iaculis neque</li>
-         <li>Purus sodales ultricies</li>
-         <li>Vestibulum laoreet porttitor sem</li>
-         <li>Ac tristique libero volutpat at</li>
-      </ul>
-   </li>
-   <li>Faucibus porta lacus fringilla vel</li>
-   <li>Aenean sit amet erat nunc</li>
-   <li>Eget porttitor lorem</li>
-</ul>
-
-
-

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

-
    -
  • Lorem ipsum dolor sit amet
    • -
  • Consectetur adipiscing elit
    • -
  • Integer molestie lorem at massa
    • -
  • Facilisis in pretium nisl aliquet
    • -
  • - Nulla volutpat aliquam velit -
      -
    • Phasellus iaculis neque
      • -
    • Purus sodales ultricies
      • -
    • Vestibulum laoreet porttitor sem
      • -
    • Ac tristique libero volutpat at
      • -
    -
    • -
  • Faucibus porta lacus fringilla vel
    • -
  • Aenean sit amet erat nunc
    • -
  • Eget porttitor lorem
    • -
-
-
-
-
-
-

Blockquotes

-
-
- -
-
-
-
- 

-<blockquote class="blockquote">
-   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-   <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-</blockquote>
-
-
-

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
Someone famous in Source Title
-
-
-
- -
-
-
-

Description list alignment

-
-
- -
-
-
-
- 

-<dl class="row">
-   <dt class="col-sm-3">Description lists</dt>
-   <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
-   <dt class="col-sm-3">Euismod</dt>
-   <dd class="col-sm-9">
-      <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
-      <p>Donec id elit non mi porta gravida at eget metus.</p>
-   </dd>
-   <dt class="col-sm-3">Malesuada porta</dt>
-   <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
-   <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
-   <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
-   <dt class="col-sm-3">Nesting</dt>
-   <dd class="col-sm-9">
-      <dl class="row">
-         <dt class="col-sm-4">Nested definition list</dt>
-         <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
-      </dl>
-   </dd>
-</dl>
-
-
-

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

-
-
Description lists
-
A description list is perfect for defining terms.
-
Euismod
-
-

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

-

Donec id elit non mi porta gravida at eget metus.

-
-
Malesuada porta
-
Etiam porta sem malesuada magna mollis euismod.
-
Truncated term is truncated
-
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-
Nesting
-
-
-
Nested definition list
-
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/user-account-setting.html b/Datum_UImodel/user-account-setting.html deleted file mode 100644 index 4f4aa9f..0000000 --- a/Datum_UImodel/user-account-setting.html +++ /dev/null @@ -1,1128 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Account Setting

-
-
-
-
-
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-

Social Media

-
-
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- - -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/user-privacy-setting.html b/Datum_UImodel/user-privacy-setting.html deleted file mode 100644 index b99a2e0..0000000 --- a/Datum_UImodel/user-privacy-setting.html +++ /dev/null @@ -1,1146 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Privacy Setting

-
-
-
-
-
-

Account Privacy

-
- - -
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum - has been the industry's standard dummy text ever since the 1500s, when an unknown - printer took a galley of type and scrambled it to make a type specimen book

-
-
-
-

Activity Status

-
- - -
-

It is a long established fact that a reader will be distracted by the readable content of - a page when looking at its layout. The point of using Lorem Ipsum is that it has a - more-or-less normal distribution of letters, as opposed to using 'Content here, content - here', making it look like readable English.

-
-
-
-

Story Sharing

-
- - -
-

It is a long established fact that a reader will be distracted by the readable content of - a page when looking at its layout. The point of using Lorem Ipsum is that it has a - more-or-less normal distribution of letters, as opposed to using 'Content here, content - here', making it look like readable English.

-
-
-
-

Photo Of You

-
- - -
-
- - -
-

It is a long established fact that a reader will be distracted by the readable content of - a page when looking at its layout. The point of using Lorem Ipsum is that it has a - more-or-less normal distribution of letters, as opposed to using 'Content here, content - here', making it look like readable English.

-
-
-
-

Your Profile

-
- - -
-
- - -
-
- - -
-
- - -
-

It is a long established fact that a reader will be distracted by the readable content of - a page when looking at its layout. The point of using Lorem Ipsum is that it has a - more-or-less normal distribution of letters, as opposed to using 'Content here, content - here', making it look like readable English.

-
-
-
-

Login Notification

-
- - -
-
- - -
-

It is a long established fact that a reader will be distracted by the readable content of - a page when looking at its layout. The point of using Lorem Ipsum is that it has a - more-or-less normal distribution of letters, as opposed to using 'Content here, content - here', making it look like readable English.

-
-
-
-

Privacy Help

- Support -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/user-profile-edit.html b/Datum_UImodel/user-profile-edit.html deleted file mode 100644 index 7dd6358..0000000 --- a/Datum_UImodel/user-profile-edit.html +++ /dev/null @@ -1,1299 +0,0 @@ - - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

Personal Information

-
-
-
-
-
-
-
-
- profile-pic -
- - - - -
-
-
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
- - -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-
-
-

Change Password

-
-
-
-
-
- - Forgot Password - -
-
- - -
-
- - -
- - -
-
-
-
-
-
-
-
-

Email and SMS

-
-
-
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
-
- - -
-
- - -
-
- - -
-
-
-
- -
-
- - -
-
- - -
-
- - -
-
-
- - -
-
-
-
-
-
-
-
-

Manage Contact

-
-
-
-
-
- - -
-
- - -
-
- - -
- - -
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/user-profile.html b/Datum_UImodel/user-profile.html deleted file mode 100644 index 4dc62b6..0000000 --- a/Datum_UImodel/user-profile.html +++ /dev/null @@ -1,1325 +0,0 @@ - - - - - - - Datum | CRM Admin Dashboard Template - - - - - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- profile-bg -

John Doe

-

Web Developer

-
-
-
-
- - - -
-

[email protected]

-
-
-
- - - -
-

(123) 123 1234

-
-
-
- - - - -
-

USA

-
-
- -
-
-
-
-
-
-
-
- - - -

42+

-

Awards

-
-
-
-
-
-
- - - -

3+ years

-

Experience

-
-
-
-
-
-
- - - -

424+

-

Participated

-
-
-
-
-
-
-
-
-
-

About Me

-
-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the - industry's standard - dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to - make a type specimen - book. It has survived not only five centuries, but also the leap into electronic typesetting, - remaining essentially - unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum - passages, and more - recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -

-
Personal Skills
-
    -
  • - - - - Lorem ipsum dolor sit amet, - consectetur adipiscing elit.
    • -
  • - - - - Aliquam ultrices tellus in - auctor blandit.
    • -
  • - - - - Etiam tincidunt erat non - ante sagittis bibendum.
    • -
  • - - - - Nunc malesuada massa ut - nisl sollicitudin semper.
    • -
  • - - - - Fusce et arcu in dui feugiat finibus. -
    • -
-
Professional Skills
-
- PHP - 90% -
- -
-
-
- MySQl - 85% -
- -
-
-
- React - 65% -
- -
-
-
- Node Js - 70% -
- -
-
-
- Angular Js - 55% -
- -
-
-
-
-
-
-
-

Education Traning

-
-
-
-
    -
  • -
    - - - - - - - - - - -
    -
    -
    South Kellergrove Junior
    -

    Junior High School | Class of 2008

    -
    -
    • -
  • -
    - - - -
    -
    -
    Milchuer College
    -

    Master of Science in Computer Science | 2015

    -
    -
    • -
  • -
    - - - -
    -
    -
    Beechtown University
    -

    Bachelor of Science in Computer Science | 2013

    -
    -
    • -
  • -
    - - - - - - - - - - -
    -
    -
    South Kellergrove High
    -

    Senior High School | 2010

    -
    -
    • -
  • -
    - - - - - - - - - - -
    -
    -
    South Kellergrove Junior
    -

    Junior High School | Class of 2008

    -
    -
    • -
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Datum_UImodel/说明.htm b/Datum_UImodel/说明.htm deleted file mode 100644 index 4162b7a..0000000 --- a/Datum_UImodel/说明.htm +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - -йվվļ˵ - - - - - -
-
-

-

- - - - - - - - - - -
 йվվļ˵

-   صĸļйվվ(www.chinaz.com) Ǵwww.chinaz.comصģϵǾٱվE-mail: sc@chinaz.com
-
-   ʹǰĶʹñվṩļ
-   1) վ֤ṩԺͰȫԡ
-   2) ʹǰ鶾 (ҲʹԴע)
-   3) ɱվṩijվغıվŲ
-   4) תرվṩԴɾ˵ļ
-   5) վṩijΪѼó漰ֺİȨд֪ͨǡE-mail: sc@chinaz.com - -

   κɵվ̳(chinaz.com)Եõļ֧֣

-

   ϵԱ: sc@chinaz.com
-   Ͷ: ads@chinaz.com   йվվΪйվṩ

-
-   - C H I N A Z . C O M                                            Powered by CHINAZ.STUDIO
-
-
-

- -

- - - - \ No newline at end of file