more responsive
Browse files- .gitattributes +2 -0
- static/css/color.css +48 -87
- static/css/style.css +107 -556
- static/images/arrow.gif +0 -0
- static/images/avatar.gif +3 -0
- static/images/avatar1.gif +3 -0
- static/images/uplogo.gif +0 -0
- static/images/uplogo1.gif +0 -0
- static/images/uplogo2.gif +0 -0
- static/js/site.js +33 -9
.gitattributes
CHANGED
@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
|
|
33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
|
|
|
|
|
33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
36 |
+
.gif filter=lfs diff=lfs merge=lfs -text
|
37 |
+
*.gif filter=lfs diff=lfs merge=lfs -text
|
static/css/color.css
CHANGED
@@ -1,14 +1,3 @@
|
|
1 |
-
/* Namari Landing Page Dynamic Style Index
|
2 |
-
|
3 |
-
1. Website Default Styling
|
4 |
-
2. Navigation
|
5 |
-
3. Primary and Secondary Colors
|
6 |
-
4. Banner
|
7 |
-
5. Typography
|
8 |
-
6. Buttons
|
9 |
-
7. Footer
|
10 |
-
|
11 |
-
|
12 |
/*------------------------------------------------------------------------------------------*/
|
13 |
|
14 |
|
@@ -167,34 +156,13 @@ body {
|
|
167 |
color: #111;
|
168 |
}
|
169 |
|
170 |
-
|
171 |
-
/* Logo, if you are using Fonts as Logo and not image
|
172 |
-
|
173 |
-
#logo h1 {
|
174 |
-
font-family:;
|
175 |
-
font-size:;
|
176 |
-
font-weight:;
|
177 |
-
color:;
|
178 |
-
}
|
179 |
-
|
180 |
-
#logo h2 {
|
181 |
-
font-family:;
|
182 |
-
font-size:;
|
183 |
-
font-weight:;
|
184 |
-
color:;
|
185 |
-
}
|
186 |
-
|
187 |
-
*/
|
188 |
-
|
189 |
-
|
190 |
-
/* Banner Typography */
|
191 |
-
|
192 |
#banner h1 {
|
193 |
font-family: 'Poppins', sans-serif, Arial, Helvetica;
|
194 |
font-size: 60px;
|
195 |
line-height: 60px;
|
196 |
font-weight: 700;
|
197 |
color: #111;
|
|
|
198 |
}
|
199 |
|
200 |
#banner h2 {
|
@@ -205,37 +173,6 @@ body {
|
|
205 |
}
|
206 |
|
207 |
|
208 |
-
/* Section Title and Subtitle */
|
209 |
-
|
210 |
-
.section-title {
|
211 |
-
font-family: 'Poppins', sans-serif, Arial, Helvetica;
|
212 |
-
font-size: 34px;
|
213 |
-
font-weight: 700;
|
214 |
-
color: #111;
|
215 |
-
}
|
216 |
-
|
217 |
-
.section-subtitle {
|
218 |
-
font-family: 'Poppins', sans-serif, Arial, Helvetica;
|
219 |
-
font-size: 16px;
|
220 |
-
font-weight: 300;
|
221 |
-
color: #9c9c9c;
|
222 |
-
}
|
223 |
-
|
224 |
-
|
225 |
-
/* Testimonial */
|
226 |
-
|
227 |
-
.testimonial q {
|
228 |
-
font-family: 'Poppins', sans-serif, Arial, Helvetica;
|
229 |
-
font-size: 17px;
|
230 |
-
font-weight: 300;
|
231 |
-
}
|
232 |
-
|
233 |
-
.testimonial.classic q,
|
234 |
-
.testimonial.classic footer {
|
235 |
-
color: #111;
|
236 |
-
}
|
237 |
-
|
238 |
-
|
239 |
/* Standard Headings h1-h6 */
|
240 |
|
241 |
h1 {
|
@@ -347,27 +284,51 @@ input[type="submit"]:hover {
|
|
347 |
border-color: #FF8B4A;
|
348 |
}
|
349 |
|
350 |
-
|
351 |
-
|
352 |
-
|
353 |
-
|
354 |
-
|
355 |
-
|
356 |
-
|
357 |
-
|
358 |
-
|
359 |
-
|
360 |
-
|
361 |
-
|
362 |
-
|
363 |
-
|
364 |
-
|
365 |
-
|
366 |
-
|
367 |
-
|
368 |
-
|
369 |
-
|
370 |
-
|
371 |
-
|
372 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
373 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
/*------------------------------------------------------------------------------------------*/
|
2 |
|
3 |
|
|
|
156 |
color: #111;
|
157 |
}
|
158 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
159 |
#banner h1 {
|
160 |
font-family: 'Poppins', sans-serif, Arial, Helvetica;
|
161 |
font-size: 60px;
|
162 |
line-height: 60px;
|
163 |
font-weight: 700;
|
164 |
color: #111;
|
165 |
+
margin-top: .3em;
|
166 |
}
|
167 |
|
168 |
#banner h2 {
|
|
|
173 |
}
|
174 |
|
175 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
176 |
/* Standard Headings h1-h6 */
|
177 |
|
178 |
h1 {
|
|
|
284 |
border-color: #FF8B4A;
|
285 |
}
|
286 |
|
287 |
+
@media (max-width: 1024px) {
|
288 |
+
#banner h1 {
|
289 |
+
font-size: 3em;
|
290 |
+
line-height: 1em;
|
291 |
+
padding-left: .5em;
|
292 |
+
}
|
293 |
+
#banner h2 {
|
294 |
+
font-size: 1.2em;
|
295 |
+
padding-left: 1.5em;
|
296 |
+
}
|
297 |
+
}
|
298 |
+
|
299 |
+
@media (max-width: 768px) {
|
300 |
+
#banner h1 {
|
301 |
+
margin-top: .4em;
|
302 |
+
font-size: 3em;
|
303 |
+
line-height: 1em;
|
304 |
+
padding: 1.5% 2% 2% 2%;
|
305 |
+
text-align: center;
|
306 |
+
}
|
307 |
+
#banner h2 {
|
308 |
+
font-size: 1.2em;
|
309 |
+
padding-left: 1em;
|
310 |
+
text-align: center;
|
311 |
+
}
|
312 |
+
}
|
313 |
+
|
314 |
+
@media (max-width: 576px) {
|
315 |
+
.drag-area {
|
316 |
+
padding: 0px 20px;
|
317 |
+
/* Adjust padding for smaller screens */
|
318 |
+
}
|
319 |
+
.image-grid img {
|
320 |
+
width: 100%;
|
321 |
+
/* Adjust image width for smaller screens */
|
322 |
+
/* Adjust font sizes for smaller screens */
|
323 |
+
}
|
324 |
+
#banner h1 {
|
325 |
+
margin-top: .3em;
|
326 |
+
padding: 2% 1.5% 1% 1.5%;
|
327 |
+
font-size: 2.5em;
|
328 |
+
line-height: 1em;
|
329 |
+
}
|
330 |
+
#banner h2 {
|
331 |
+
font-size: 1.1em;
|
332 |
+
text-align: center;
|
333 |
+
}
|
334 |
}
|
static/css/style.css
CHANGED
@@ -1,31 +1,3 @@
|
|
1 |
-
/* Namari Landing Page v.1.1.0 Style Index - a free landing page by shapingrain.com
|
2 |
-
|
3 |
-
1. Default and Reset styles
|
4 |
-
- 1.1 Input Elements
|
5 |
-
2. Global elements
|
6 |
-
- 2.1 Header
|
7 |
-
- 2.2 Logo
|
8 |
-
- 2.3 Buttons
|
9 |
-
- 2.4 Navigation
|
10 |
-
- 2.5 Social Elements
|
11 |
-
- 2.6 Images
|
12 |
-
3. Fonts and Headings
|
13 |
-
4. Banner
|
14 |
-
- 4.1 SignUp Form
|
15 |
-
5. Content Elements
|
16 |
-
- 5.1 Icons
|
17 |
-
- 5.2 Parallax Elements
|
18 |
-
- 5.3 Divider
|
19 |
-
6. Landing Page Sections
|
20 |
-
- 6.1 Features
|
21 |
-
- 6.2 Testimonials
|
22 |
-
- 6.3 Gallery
|
23 |
-
- 6.4 Video
|
24 |
-
- 6.5 Clients
|
25 |
-
- 6.6 Pricing Table
|
26 |
-
7. Footer
|
27 |
-
|
28 |
-
|
29 |
/*------------------------------------------------------------------------------------------*/
|
30 |
|
31 |
|
@@ -347,7 +319,6 @@ section {
|
|
347 |
|
348 |
.col-lg-3 {
|
349 |
width: 50%;
|
350 |
-
padding-top: 4.5%;
|
351 |
}
|
352 |
|
353 |
|
@@ -370,7 +341,7 @@ section {
|
|
370 |
}
|
371 |
|
372 |
#header ul {
|
373 |
-
text-align:
|
374 |
}
|
375 |
|
376 |
#header li {
|
@@ -448,90 +419,6 @@ section {
|
|
448 |
}
|
449 |
|
450 |
|
451 |
-
/* Play Button */
|
452 |
-
|
453 |
-
#video-section {
|
454 |
-
position: relative;
|
455 |
-
}
|
456 |
-
|
457 |
-
.play-video {
|
458 |
-
height: 110px;
|
459 |
-
position: absolute;
|
460 |
-
top: 50%;
|
461 |
-
margin-top: -110px;
|
462 |
-
width: 100%;
|
463 |
-
}
|
464 |
-
|
465 |
-
.play-icon {
|
466 |
-
display: inline-block;
|
467 |
-
font-size: 0px;
|
468 |
-
cursor: pointer;
|
469 |
-
margin: 45px auto;
|
470 |
-
width: 110px;
|
471 |
-
height: 110px;
|
472 |
-
border-radius: 50%;
|
473 |
-
text-align: center;
|
474 |
-
position: relative;
|
475 |
-
z-index: 1;
|
476 |
-
}
|
477 |
-
|
478 |
-
.play-icon:after {
|
479 |
-
pointer-events: none;
|
480 |
-
position: absolute;
|
481 |
-
width: 100%;
|
482 |
-
height: 100%;
|
483 |
-
border-radius: 50%;
|
484 |
-
content: '';
|
485 |
-
-webkit-box-sizing: content-box;
|
486 |
-
-moz-box-sizing: content-box;
|
487 |
-
box-sizing: content-box;
|
488 |
-
}
|
489 |
-
|
490 |
-
.play-icon:before {
|
491 |
-
font-family: 'fontawesome';
|
492 |
-
content: '\f144';
|
493 |
-
speak: none;
|
494 |
-
font-size: 74px;
|
495 |
-
line-height: 110px;
|
496 |
-
font-style: normal;
|
497 |
-
font-weight: normal;
|
498 |
-
font-variant: normal;
|
499 |
-
text-transform: none;
|
500 |
-
display: block;
|
501 |
-
-webkit-font-smoothing: antialiased;
|
502 |
-
color: #fff;
|
503 |
-
}
|
504 |
-
|
505 |
-
.play-video .play-icon {
|
506 |
-
background: rgba(255, 255, 255, 0.5);
|
507 |
-
-webkit-transition: -webkit-transform ease-out 0.3s, background 0.4s;
|
508 |
-
-moz-transition: -moz-transform ease-out 0.3s, background 0.4s;
|
509 |
-
transition: transform ease-out 0.3s, background 0.4s;
|
510 |
-
}
|
511 |
-
|
512 |
-
.play-video .play-icon:after {
|
513 |
-
top: 0;
|
514 |
-
left: 0;
|
515 |
-
padding: 0;
|
516 |
-
z-index: -1;
|
517 |
-
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
|
518 |
-
opacity: 0;
|
519 |
-
-webkit-transform: scale(0.9);
|
520 |
-
-moz-transform: scale(0.9);
|
521 |
-
-ms-transform: scale(0.9);
|
522 |
-
transform: scale(0.9);
|
523 |
-
}
|
524 |
-
|
525 |
-
.play-video .play-icon:hover {
|
526 |
-
background: rgba(255, 255, 255, 0.05);
|
527 |
-
-webkit-transform: scale(0.93);
|
528 |
-
-moz-transform: scale(0.93);
|
529 |
-
-ms-transform: scale(0.93);
|
530 |
-
transform: scale(0.93);
|
531 |
-
color: #fff;
|
532 |
-
}
|
533 |
-
|
534 |
-
|
535 |
/* --------- 2.4 Navigation ---------- */
|
536 |
|
537 |
#header {
|
@@ -632,13 +519,15 @@ section {
|
|
632 |
height: 71px;
|
633 |
line-height: 75px;
|
634 |
text-align: center;
|
635 |
-
content:
|
636 |
border-top-right-radius: 5px;
|
637 |
border-top-left-radius: 5px;
|
|
|
638 |
}
|
639 |
|
640 |
#nav-trigger span.open:after {
|
641 |
-
content:
|
|
|
642 |
}
|
643 |
|
644 |
#nav-trigger span:hover,
|
@@ -705,6 +594,7 @@ nav#nav-mobile a {
|
|
705 |
display: block;
|
706 |
padding: 12px 0;
|
707 |
color: #333;
|
|
|
708 |
width: 100%;
|
709 |
height: auto;
|
710 |
line-height: normal;
|
@@ -988,144 +878,6 @@ h6 {
|
|
988 |
color: #e1e1e1;
|
989 |
}
|
990 |
|
991 |
-
|
992 |
-
/*------------------------------------------------------------------------------------------*/
|
993 |
-
|
994 |
-
|
995 |
-
/* 6. Landing Page Sections */
|
996 |
-
|
997 |
-
|
998 |
-
/*------------------------------------------------------------------------------------------*/
|
999 |
-
|
1000 |
-
|
1001 |
-
/* --------- 6.1 Introduction ---------- */
|
1002 |
-
|
1003 |
-
.introduction img.featured {
|
1004 |
-
padding: 55px 0 0 0;
|
1005 |
-
}
|
1006 |
-
|
1007 |
-
|
1008 |
-
/* --------- 6.2 Features ---------- */
|
1009 |
-
|
1010 |
-
.features.row {
|
1011 |
-
padding-left: 5%;
|
1012 |
-
padding-right: 5%;
|
1013 |
-
}
|
1014 |
-
|
1015 |
-
.features div:nth-child(4) {
|
1016 |
-
clear: both;
|
1017 |
-
}
|
1018 |
-
|
1019 |
-
|
1020 |
-
/* --------- 6.3 Testimonials ---------- */
|
1021 |
-
|
1022 |
-
.testimonial {
|
1023 |
-
padding: 15px;
|
1024 |
-
}
|
1025 |
-
|
1026 |
-
blockquote {
|
1027 |
-
position: relative;
|
1028 |
-
}
|
1029 |
-
|
1030 |
-
.testimonial img {
|
1031 |
-
max-height: 120px;
|
1032 |
-
border-radius: 250em;
|
1033 |
-
}
|
1034 |
-
|
1035 |
-
.testimonial footer {
|
1036 |
-
padding-top: 12px;
|
1037 |
-
}
|
1038 |
-
|
1039 |
-
|
1040 |
-
/* Style Classic - Avatar above Testimonial */
|
1041 |
-
|
1042 |
-
.testimonial.classic img {
|
1043 |
-
display: inline-block;
|
1044 |
-
margin-bottom: 25px;
|
1045 |
-
}
|
1046 |
-
|
1047 |
-
.testimonial.classic q {
|
1048 |
-
display: block;
|
1049 |
-
}
|
1050 |
-
|
1051 |
-
.testimonial.classic footer:before {
|
1052 |
-
display: block;
|
1053 |
-
content: "";
|
1054 |
-
width: 30px;
|
1055 |
-
height: 4px;
|
1056 |
-
margin: 10px auto 15px auto;
|
1057 |
-
}
|
1058 |
-
|
1059 |
-
|
1060 |
-
/* Style Big */
|
1061 |
-
|
1062 |
-
.testimonial.bigtest {
|
1063 |
-
padding-top: 0;
|
1064 |
-
}
|
1065 |
-
|
1066 |
-
.testimonial.bigtest q {
|
1067 |
-
font-size: 22px;
|
1068 |
-
}
|
1069 |
-
|
1070 |
-
|
1071 |
-
/* --------- 6.4 Gallery ---------- */
|
1072 |
-
|
1073 |
-
#gallery img {
|
1074 |
-
max-height: 300px;
|
1075 |
-
}
|
1076 |
-
|
1077 |
-
#gallery [class*='col-'] {
|
1078 |
-
padding: 0;
|
1079 |
-
}
|
1080 |
-
|
1081 |
-
#gallery a {
|
1082 |
-
display: inline-block;
|
1083 |
-
position: relative;
|
1084 |
-
overflow: hidden;
|
1085 |
-
}
|
1086 |
-
|
1087 |
-
#gallery a:hover img {
|
1088 |
-
opacity: 0.15;
|
1089 |
-
-moz-backface-visibility: hidden;
|
1090 |
-
}
|
1091 |
-
|
1092 |
-
#gallery a:before {
|
1093 |
-
font-size: 2.2em;
|
1094 |
-
font-style: normal;
|
1095 |
-
font-weight: normal;
|
1096 |
-
text-align: center;
|
1097 |
-
content: "+";
|
1098 |
-
width: 70px;
|
1099 |
-
height: 70px;
|
1100 |
-
border-radius: 100em;
|
1101 |
-
display: block;
|
1102 |
-
position: absolute;
|
1103 |
-
top: 55%;
|
1104 |
-
left: 50%;
|
1105 |
-
line-height: 72px;
|
1106 |
-
margin: -35px 0 0 -35px;
|
1107 |
-
opacity: 0;
|
1108 |
-
-webkit-transition: all .2s linear;
|
1109 |
-
-moz-transition: all .2s linear;
|
1110 |
-
transition: all .2s linear;
|
1111 |
-
vertical-align: middle;
|
1112 |
-
}
|
1113 |
-
|
1114 |
-
#gallery a:hover:before {
|
1115 |
-
opacity: 1;
|
1116 |
-
top: 50%;
|
1117 |
-
left: 50%;
|
1118 |
-
}
|
1119 |
-
|
1120 |
-
|
1121 |
-
/**
|
1122 |
-
* Featherlight – ultra slim jQuery lightbox
|
1123 |
-
* Version 1.3.3 - http://noelboss.github.io/featherlight/
|
1124 |
-
*
|
1125 |
-
* Copyright 2015, Noël Raoul Bossart (http://www.noelboss.com)
|
1126 |
-
* MIT Licensed.
|
1127 |
-
**/
|
1128 |
-
|
1129 |
@media all {
|
1130 |
.featherlight {
|
1131 |
display: none;
|
@@ -1346,304 +1098,6 @@ blockquote {
|
|
1346 |
}
|
1347 |
}
|
1348 |
|
1349 |
-
|
1350 |
-
/* --------- 6.5 Video ---------- */
|
1351 |
-
|
1352 |
-
#video-box {
|
1353 |
-
color: #fff;
|
1354 |
-
position: relative;
|
1355 |
-
overflow: hidden;
|
1356 |
-
text-align: center;
|
1357 |
-
}
|
1358 |
-
|
1359 |
-
.video_container,
|
1360 |
-
.easyContainer {
|
1361 |
-
position: relative;
|
1362 |
-
padding-bottom: 56.25%;
|
1363 |
-
/* 16/9 ratio */
|
1364 |
-
margin: 0;
|
1365 |
-
padding-top: 0;
|
1366 |
-
/* IE6 workaround*/
|
1367 |
-
height: 0;
|
1368 |
-
overflow: hidden;
|
1369 |
-
}
|
1370 |
-
|
1371 |
-
.video_container iframe,
|
1372 |
-
.video_container object,
|
1373 |
-
.video_container embed {
|
1374 |
-
position: absolute;
|
1375 |
-
top: 0;
|
1376 |
-
left: 0;
|
1377 |
-
width: 100% !important;
|
1378 |
-
height: 100% !important;
|
1379 |
-
}
|
1380 |
-
|
1381 |
-
.slvj-lightbox iframe,
|
1382 |
-
.slvj-lightbox object,
|
1383 |
-
.slvj-lightbox embed {
|
1384 |
-
width: 100% !important;
|
1385 |
-
height: 529px !important;
|
1386 |
-
}
|
1387 |
-
|
1388 |
-
.videojs-background-wrap {
|
1389 |
-
overflow: hidden;
|
1390 |
-
position: absolute;
|
1391 |
-
height: 100%;
|
1392 |
-
width: 100%;
|
1393 |
-
top: 0;
|
1394 |
-
left: 0;
|
1395 |
-
z-index: -998;
|
1396 |
-
}
|
1397 |
-
|
1398 |
-
#slvj-window {
|
1399 |
-
width: 100%;
|
1400 |
-
min-height: 100%;
|
1401 |
-
z-index: 9999999999;
|
1402 |
-
background: rgba(0, 0, 0, 0.8);
|
1403 |
-
position: fixed;
|
1404 |
-
top: 0;
|
1405 |
-
left: 0;
|
1406 |
-
}
|
1407 |
-
|
1408 |
-
#slvj-window,
|
1409 |
-
#slvj-window * {
|
1410 |
-
-webkit-box-sizing: border-box;
|
1411 |
-
-moz-box-sizing: border-box;
|
1412 |
-
box-sizing: border-box;
|
1413 |
-
}
|
1414 |
-
|
1415 |
-
#slvj-background-close {
|
1416 |
-
width: 100%;
|
1417 |
-
min-height: 100%;
|
1418 |
-
z-index: 31;
|
1419 |
-
position: fixed;
|
1420 |
-
top: 0;
|
1421 |
-
left: 0;
|
1422 |
-
}
|
1423 |
-
|
1424 |
-
#slvj-back-lightbox {
|
1425 |
-
max-width: 940px;
|
1426 |
-
max-height: 529px;
|
1427 |
-
z-index: 32;
|
1428 |
-
text-align: center;
|
1429 |
-
margin: 0 auto;
|
1430 |
-
}
|
1431 |
-
|
1432 |
-
.slvj-lightbox {
|
1433 |
-
width: 100%;
|
1434 |
-
height: 100%;
|
1435 |
-
margin: 0;
|
1436 |
-
z-index: 53;
|
1437 |
-
}
|
1438 |
-
|
1439 |
-
#slvj-close-icon:before {
|
1440 |
-
font-family: "fontawesome";
|
1441 |
-
color: #fff;
|
1442 |
-
content: '\f00d';
|
1443 |
-
font-size: 22px;
|
1444 |
-
opacity: 0.5;
|
1445 |
-
-webkit-transition: all 0.3s ease-out;
|
1446 |
-
-moz-transition: all 0.3s ease-out;
|
1447 |
-
-o-transition: all 0.3s ease-out;
|
1448 |
-
transition: all 0.3s ease-out;
|
1449 |
-
z-index: 99999;
|
1450 |
-
height: 22px;
|
1451 |
-
width: 22px;
|
1452 |
-
position: absolute;
|
1453 |
-
top: 15px;
|
1454 |
-
right: 15px;
|
1455 |
-
cursor: pointer;
|
1456 |
-
}
|
1457 |
-
|
1458 |
-
#slvj-close-icon:before:hover {
|
1459 |
-
opacity: 1;
|
1460 |
-
cursor: pointer;
|
1461 |
-
}
|
1462 |
-
|
1463 |
-
|
1464 |
-
/* --------- 6.6 Clients ---------- */
|
1465 |
-
|
1466 |
-
#clients a {
|
1467 |
-
display: block;
|
1468 |
-
text-align: center;
|
1469 |
-
position: relative;
|
1470 |
-
text-transform: uppercase;
|
1471 |
-
font-weight: bold;
|
1472 |
-
color: #fff;
|
1473 |
-
}
|
1474 |
-
|
1475 |
-
#clients img {
|
1476 |
-
display: inline-block;
|
1477 |
-
padding: 15px 25px;
|
1478 |
-
}
|
1479 |
-
|
1480 |
-
.client-overlay {
|
1481 |
-
background: rgba(0, 0, 0, 0.8);
|
1482 |
-
position: absolute;
|
1483 |
-
top;
|
1484 |
-
0;
|
1485 |
-
right: 0;
|
1486 |
-
bottom: 0;
|
1487 |
-
left: 0;
|
1488 |
-
width: 100%;
|
1489 |
-
height: 100%;
|
1490 |
-
opacity: 0;
|
1491 |
-
-webkit-transition: all 0.3s ease-out;
|
1492 |
-
-moz-transition: all 0.3s ease-out;
|
1493 |
-
-o-transition: all 0.3s ease-out;
|
1494 |
-
transition: all 0.3s ease-out;
|
1495 |
-
}
|
1496 |
-
|
1497 |
-
#clients a:hover .client-overlay {
|
1498 |
-
opacity: 1;
|
1499 |
-
}
|
1500 |
-
|
1501 |
-
.client-overlay span {
|
1502 |
-
position: absolute;
|
1503 |
-
top: 48%;
|
1504 |
-
left: 0;
|
1505 |
-
width: 100%;
|
1506 |
-
text-align: center;
|
1507 |
-
display: inline-block;
|
1508 |
-
}
|
1509 |
-
|
1510 |
-
|
1511 |
-
/* --------- 6.7 Pricing Table ---------- */
|
1512 |
-
|
1513 |
-
.pricing-block-content {
|
1514 |
-
background: #fff;
|
1515 |
-
padding: 25px 0 25px 0;
|
1516 |
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
|
1517 |
-
transition: all 0.2s ease-in-out 0s;
|
1518 |
-
position: relative;
|
1519 |
-
border: 10px solid #fff;
|
1520 |
-
}
|
1521 |
-
|
1522 |
-
.pricing-block ul {
|
1523 |
-
list-style: none;
|
1524 |
-
margin: 25px 0 25px 0;
|
1525 |
-
}
|
1526 |
-
|
1527 |
-
.pricing-block li {
|
1528 |
-
padding: 14px 0;
|
1529 |
-
border-bottom: 1px dotted #e1e1e1;
|
1530 |
-
}
|
1531 |
-
|
1532 |
-
.pricing-block li:last-of-type {
|
1533 |
-
border: none;
|
1534 |
-
}
|
1535 |
-
|
1536 |
-
.pricing-block h3 {
|
1537 |
-
font-size: 17px;
|
1538 |
-
text-transform: uppercase;
|
1539 |
-
padding-bottom: 0;
|
1540 |
-
}
|
1541 |
-
|
1542 |
-
.pricing-sub {
|
1543 |
-
font-style: italic;
|
1544 |
-
color: #ccc;
|
1545 |
-
margin: 0 0 25px 0;
|
1546 |
-
}
|
1547 |
-
|
1548 |
-
|
1549 |
-
/*Price*/
|
1550 |
-
|
1551 |
-
.pricing {
|
1552 |
-
background: #f5f5f5;
|
1553 |
-
padding: 25px;
|
1554 |
-
position: relative;
|
1555 |
-
}
|
1556 |
-
|
1557 |
-
.price {
|
1558 |
-
display: inline-block;
|
1559 |
-
font-size: 62px;
|
1560 |
-
font-weight: 700;
|
1561 |
-
position: relative;
|
1562 |
-
}
|
1563 |
-
|
1564 |
-
.price span {
|
1565 |
-
position: absolute;
|
1566 |
-
top: 0;
|
1567 |
-
left: -20px;
|
1568 |
-
font-size: 22px;
|
1569 |
-
}
|
1570 |
-
|
1571 |
-
.pricing p {
|
1572 |
-
font-style: italic;
|
1573 |
-
color: #b4b4b4;
|
1574 |
-
line-height: auto;
|
1575 |
-
margin: 0;
|
1576 |
-
}
|
1577 |
-
|
1578 |
-
|
1579 |
-
/*------------------------------------------------------------------------------------------*/
|
1580 |
-
|
1581 |
-
|
1582 |
-
/* 7. Footer */
|
1583 |
-
|
1584 |
-
|
1585 |
-
/*------------------------------------------------------------------------------------------*/
|
1586 |
-
|
1587 |
-
#landing-footer {
|
1588 |
-
clear: both;
|
1589 |
-
}
|
1590 |
-
|
1591 |
-
#landing-footer .row {
|
1592 |
-
padding: 0;
|
1593 |
-
}
|
1594 |
-
|
1595 |
-
#landing-footer p {
|
1596 |
-
margin: 0;
|
1597 |
-
}
|
1598 |
-
|
1599 |
-
#landing-footer ul {
|
1600 |
-
list-style: none;
|
1601 |
-
text-align: right;
|
1602 |
-
}
|
1603 |
-
|
1604 |
-
#landing-footer li {
|
1605 |
-
display: inline-block;
|
1606 |
-
}
|
1607 |
-
|
1608 |
-
|
1609 |
-
/* Scroll Up */
|
1610 |
-
|
1611 |
-
#scrollUp {
|
1612 |
-
bottom: 15px;
|
1613 |
-
right: 30px;
|
1614 |
-
width: 70px;
|
1615 |
-
height: 80px;
|
1616 |
-
margin-bottom: -10px;
|
1617 |
-
padding: 0 5px 20px 5px;
|
1618 |
-
text-align: center;
|
1619 |
-
text-decoration: none;
|
1620 |
-
color: #fff;
|
1621 |
-
-webkit-transition: margin-bottom 150ms linear;
|
1622 |
-
-moz-transition: margin-bottom 150ms linear;
|
1623 |
-
-o-transition: margin-bottom 150ms linear;
|
1624 |
-
transition: margin-bottom 150ms linear;
|
1625 |
-
}
|
1626 |
-
|
1627 |
-
#scrollUp:hover {
|
1628 |
-
margin-bottom: 0;
|
1629 |
-
}
|
1630 |
-
|
1631 |
-
#scrollUp:before {
|
1632 |
-
background: #ccc;
|
1633 |
-
font-family: "fontawesome";
|
1634 |
-
font-size: 2.4em;
|
1635 |
-
font-style: normal;
|
1636 |
-
font-weight: normal;
|
1637 |
-
text-align: center;
|
1638 |
-
color: #fff;
|
1639 |
-
width: 45px;
|
1640 |
-
height: 45px;
|
1641 |
-
display: inline-block;
|
1642 |
-
line-height: 45px;
|
1643 |
-
content: "\f106";
|
1644 |
-
opacity: 1;
|
1645 |
-
}
|
1646 |
-
|
1647 |
.loader {
|
1648 |
z-index: 999999;
|
1649 |
width: 94px;
|
@@ -2867,9 +2321,6 @@ h3 {
|
|
2867 |
color: transparent;
|
2868 |
}
|
2869 |
|
2870 |
-
|
2871 |
-
/* Add this CSS for the grid container */
|
2872 |
-
|
2873 |
.grid-container {
|
2874 |
display: grid;
|
2875 |
grid-template-columns: repeat(3, 1fr);
|
@@ -2906,7 +2357,7 @@ h3 {
|
|
2906 |
font-family: poppins;
|
2907 |
font-weight: 400;
|
2908 |
position: relative;
|
2909 |
-
padding: 12px
|
2910 |
background: linear-gradient(45deg, #FFA07A, #fa7962);
|
2911 |
font-size: 17px;
|
2912 |
font-weight: 500;
|
@@ -3059,4 +2510,104 @@ h3 {
|
|
3059 |
|
3060 |
input #file-input {
|
3061 |
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3062 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
/*------------------------------------------------------------------------------------------*/
|
2 |
|
3 |
|
|
|
319 |
|
320 |
.col-lg-3 {
|
321 |
width: 50%;
|
|
|
322 |
}
|
323 |
|
324 |
|
|
|
341 |
}
|
342 |
|
343 |
#header ul {
|
344 |
+
text-align: right;
|
345 |
}
|
346 |
|
347 |
#header li {
|
|
|
419 |
}
|
420 |
|
421 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
422 |
/* --------- 2.4 Navigation ---------- */
|
423 |
|
424 |
#header {
|
|
|
519 |
height: 71px;
|
520 |
line-height: 75px;
|
521 |
text-align: center;
|
522 |
+
content: '\2630';
|
523 |
border-top-right-radius: 5px;
|
524 |
border-top-left-radius: 5px;
|
525 |
+
transition: all .4s ease-in-out;
|
526 |
}
|
527 |
|
528 |
#nav-trigger span.open:after {
|
529 |
+
content: '\269E';
|
530 |
+
transition: all .4s ease-in-out;
|
531 |
}
|
532 |
|
533 |
#nav-trigger span:hover,
|
|
|
594 |
display: block;
|
595 |
padding: 12px 0;
|
596 |
color: #333;
|
597 |
+
text-align: center;
|
598 |
width: 100%;
|
599 |
height: auto;
|
600 |
line-height: normal;
|
|
|
878 |
color: #e1e1e1;
|
879 |
}
|
880 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
881 |
@media all {
|
882 |
.featherlight {
|
883 |
display: none;
|
|
|
1098 |
}
|
1099 |
}
|
1100 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1101 |
.loader {
|
1102 |
z-index: 999999;
|
1103 |
width: 94px;
|
|
|
2321 |
color: transparent;
|
2322 |
}
|
2323 |
|
|
|
|
|
|
|
2324 |
.grid-container {
|
2325 |
display: grid;
|
2326 |
grid-template-columns: repeat(3, 1fr);
|
|
|
2357 |
font-family: poppins;
|
2358 |
font-weight: 400;
|
2359 |
position: relative;
|
2360 |
+
padding: 12px 28px;
|
2361 |
background: linear-gradient(45deg, #FFA07A, #fa7962);
|
2362 |
font-size: 17px;
|
2363 |
font-weight: 500;
|
|
|
2510 |
|
2511 |
input #file-input {
|
2512 |
height: 100%;
|
2513 |
+
}
|
2514 |
+
|
2515 |
+
|
2516 |
+
/* Responsive layout for smaller screens */
|
2517 |
+
|
2518 |
+
@media (max-width: 1024px) {
|
2519 |
+
.col-lg-6 {
|
2520 |
+
width: 55%;
|
2521 |
+
}
|
2522 |
+
.col-lg-3 {
|
2523 |
+
width: 45%;
|
2524 |
+
padding-top: .5em;
|
2525 |
+
}
|
2526 |
+
#logo img {
|
2527 |
+
max-height: 30px;
|
2528 |
+
vertical-align: middle;
|
2529 |
+
margin-left: 1.5em;
|
2530 |
+
}
|
2531 |
+
.container {
|
2532 |
+
max-width: 90%;
|
2533 |
+
}
|
2534 |
+
p,
|
2535 |
+
input {
|
2536 |
+
text-align: center;
|
2537 |
+
margin: auto;
|
2538 |
+
line-height: normal;
|
2539 |
+
}
|
2540 |
+
input,
|
2541 |
+
textarea {
|
2542 |
+
width: 100%;
|
2543 |
+
box-sizing: border-box;
|
2544 |
+
margin: 0px 0 10px 0;
|
2545 |
+
}
|
2546 |
+
}
|
2547 |
+
|
2548 |
+
@media (max-width: 768px) {
|
2549 |
+
.col-lg-6,
|
2550 |
+
.col-lg-3 {
|
2551 |
+
width: 100%;
|
2552 |
+
float: none;
|
2553 |
+
/* Remove float for full-width layout */
|
2554 |
+
}
|
2555 |
+
.container {
|
2556 |
+
max-width: 100%;
|
2557 |
+
}
|
2558 |
+
}
|
2559 |
+
|
2560 |
+
@media (max-width: 576px) {
|
2561 |
+
.drag-area {
|
2562 |
+
padding: 0px 20px;
|
2563 |
+
}
|
2564 |
+
.image-grid img {
|
2565 |
+
width: 100%;
|
2566 |
+
}
|
2567 |
+
.container {
|
2568 |
+
width: 90%;
|
2569 |
+
max-width: 100%;
|
2570 |
+
padding: 1em;
|
2571 |
+
margin: 0 auto;
|
2572 |
+
}
|
2573 |
+
.drag-area {
|
2574 |
+
padding: 0px 20px;
|
2575 |
+
/* Adjust padding for smaller screens */
|
2576 |
+
}
|
2577 |
+
.image-grid img {
|
2578 |
+
width: 100%;
|
2579 |
+
/* Adjust image width for smaller screens */
|
2580 |
+
}
|
2581 |
+
p,
|
2582 |
+
input {
|
2583 |
+
text-align: center;
|
2584 |
+
margin: auto;
|
2585 |
+
line-height: normal;
|
2586 |
+
}
|
2587 |
+
input,
|
2588 |
+
textarea {
|
2589 |
+
width: 100%;
|
2590 |
+
box-sizing: border-box;
|
2591 |
+
margin: 0px 0 10px 0;
|
2592 |
+
display: block;
|
2593 |
+
}
|
2594 |
+
.drag-area img {
|
2595 |
+
width: 90%;
|
2596 |
+
height: 90%;
|
2597 |
+
object-fit: contain;
|
2598 |
+
z-index: -1;
|
2599 |
+
padding-top: 8px;
|
2600 |
+
}
|
2601 |
+
.wall {
|
2602 |
+
position: absolute;
|
2603 |
+
width: 100vw;
|
2604 |
+
height: 100vh;
|
2605 |
+
background-color: #fff;
|
2606 |
+
}
|
2607 |
+
}
|
2608 |
+
|
2609 |
+
#error-message {
|
2610 |
+
color: #ff0000;
|
2611 |
+
font-size: 14px;
|
2612 |
+
margin-top: 8px;
|
2613 |
}
|
static/images/arrow.gif
CHANGED
![]() |
![]() |
Git LFS Details
|
static/images/avatar.gif
ADDED
![]() |
Git LFS Details
|
static/images/avatar1.gif
ADDED
![]() |
Git LFS Details
|
static/images/uplogo.gif
CHANGED
![]() |
![]() |
Git LFS Details
|
static/images/uplogo1.gif
CHANGED
![]() |
![]() |
Git LFS Details
|
static/images/uplogo2.gif
CHANGED
![]() |
![]() |
Git LFS Details
|
static/js/site.js
CHANGED
@@ -62,25 +62,43 @@ $(window).load(function() { // makes sure the whole site is loaded
|
|
62 |
}
|
63 |
|
64 |
});
|
65 |
-
|
66 |
document.addEventListener('DOMContentLoaded', function() {
|
67 |
-
var
|
|
|
68 |
|
69 |
var image = document.getElementById('my-image');
|
70 |
var originalScale;
|
71 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
72 |
fabric.Image.fromURL(image.src, function(fabricImg) {
|
73 |
-
// Calculate scaling factors to fit the image within the canvas
|
74 |
var scaleX = canvas.width / fabricImg.width;
|
75 |
var scaleY = canvas.height / fabricImg.height;
|
76 |
-
|
77 |
-
// Use the minimum scaling factor to fit within the canvas
|
78 |
var minScale = Math.min(scaleX, scaleY);
|
79 |
|
80 |
-
// Save the original scale for later use
|
81 |
originalScale = minScale;
|
82 |
|
83 |
-
// Set the position and scaling
|
84 |
fabricImg.set({
|
85 |
left: canvas.width / 2 - (fabricImg.width * minScale) / 2,
|
86 |
top: canvas.height / 2 - (fabricImg.height * minScale) / 2,
|
@@ -91,6 +109,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
|
91 |
canvas.add(fabricImg);
|
92 |
});
|
93 |
|
|
|
|
|
|
|
|
|
94 |
canvas.on('mouse:down', function(options) {
|
95 |
if (options.target) {
|
96 |
options.target.set({
|
@@ -115,9 +137,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|
115 |
}
|
116 |
});
|
117 |
|
118 |
-
// Reset button click event
|
119 |
document.getElementById('reset-button').addEventListener('click', function() {
|
120 |
-
if (canvas.item(0)) {
|
121 |
canvas.item(0).set({
|
122 |
scaleX: originalScale,
|
123 |
scaleY: originalScale
|
@@ -133,4 +154,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|
133 |
canvas.on('object:scaling', function(options) {
|
134 |
// Handle object scaling
|
135 |
});
|
|
|
|
|
|
|
136 |
});
|
|
|
62 |
}
|
63 |
|
64 |
});
|
|
|
65 |
document.addEventListener('DOMContentLoaded', function() {
|
66 |
+
var canvasContainer = document.getElementById('canvas-container');
|
67 |
+
var canvas = new fabric.Canvas('c3', { width: canvasContainer.offsetWidth, height: canvasContainer.offsetHeight });
|
68 |
|
69 |
var image = document.getElementById('my-image');
|
70 |
var originalScale;
|
71 |
|
72 |
+
function resizeCanvas() {
|
73 |
+
canvas.setWidth(canvasContainer.offsetWidth);
|
74 |
+
canvas.setHeight(canvasContainer.offsetHeight);
|
75 |
+
|
76 |
+
if (canvas.item(0)) {
|
77 |
+
var fabricImg = canvas.item(0);
|
78 |
+
var scaleX = canvas.width / fabricImg.width;
|
79 |
+
var scaleY = canvas.height / fabricImg.height;
|
80 |
+
var minScale = Math.min(scaleX, scaleY);
|
81 |
+
|
82 |
+
originalScale = minScale;
|
83 |
+
|
84 |
+
fabricImg.set({
|
85 |
+
left: canvas.width / 2 - (fabricImg.width * minScale) / 2,
|
86 |
+
top: canvas.height / 2 - (fabricImg.height * minScale) / 2,
|
87 |
+
scaleX: minScale,
|
88 |
+
scaleY: minScale
|
89 |
+
});
|
90 |
+
|
91 |
+
canvas.renderAll();
|
92 |
+
}
|
93 |
+
}
|
94 |
+
|
95 |
fabric.Image.fromURL(image.src, function(fabricImg) {
|
|
|
96 |
var scaleX = canvas.width / fabricImg.width;
|
97 |
var scaleY = canvas.height / fabricImg.height;
|
|
|
|
|
98 |
var minScale = Math.min(scaleX, scaleY);
|
99 |
|
|
|
100 |
originalScale = minScale;
|
101 |
|
|
|
102 |
fabricImg.set({
|
103 |
left: canvas.width / 2 - (fabricImg.width * minScale) / 2,
|
104 |
top: canvas.height / 2 - (fabricImg.height * minScale) / 2,
|
|
|
109 |
canvas.add(fabricImg);
|
110 |
});
|
111 |
|
112 |
+
window.addEventListener('resize', function() {
|
113 |
+
resizeCanvas();
|
114 |
+
});
|
115 |
+
|
116 |
canvas.on('mouse:down', function(options) {
|
117 |
if (options.target) {
|
118 |
options.target.set({
|
|
|
137 |
}
|
138 |
});
|
139 |
|
|
|
140 |
document.getElementById('reset-button').addEventListener('click', function() {
|
141 |
+
if (canvas.item(0)) {
|
142 |
canvas.item(0).set({
|
143 |
scaleX: originalScale,
|
144 |
scaleY: originalScale
|
|
|
154 |
canvas.on('object:scaling', function(options) {
|
155 |
// Handle object scaling
|
156 |
});
|
157 |
+
|
158 |
+
// Initial canvas resize
|
159 |
+
resizeCanvas();
|
160 |
});
|