more responsive

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+.gif filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

static/css/color.css

@@ -1,14 +1,3 @@
-/* Namari Landing Page Dynamic Style Index
-
-1. Website Default Styling
-2. Navigation
-3. Primary and Secondary Colors
-4. Banner
-5. Typography
-6. Buttons
-7. Footer
-
-
 /*------------------------------------------------------------------------------------------*/
 
 
@@ -167,34 +156,13 @@ body {
     color: #111;
 }
 
-
-/* Logo, if you are using Fonts as Logo and not image
-
-#logo h1 {
-    font-family:;
-    font-size:; 
-    font-weight:;
-    color:;
-}
-
-#logo h2 {
-    font-family:;
-    font-size:; 
-    font-weight:;
-    color:;
-}
-
-*/
-
-
-/* Banner Typography */
-
 #banner h1 {
     font-family: 'Poppins', sans-serif, Arial, Helvetica;
     font-size: 60px;
     line-height: 60px;
     font-weight: 700;
     color: #111;
+    margin-top: .3em;
 }
 
 #banner h2 {
@@ -205,37 +173,6 @@ body {
 }
 
 
-/* Section Title and Subtitle */
-
-.section-title {
-    font-family: 'Poppins', sans-serif, Arial, Helvetica;
-    font-size: 34px;
-    font-weight: 700;
-    color: #111;
-}
-
-.section-subtitle {
-    font-family: 'Poppins', sans-serif, Arial, Helvetica;
-    font-size: 16px;
-    font-weight: 300;
-    color: #9c9c9c;
-}
-
-
-/* Testimonial */
-
-.testimonial q {
-    font-family: 'Poppins', sans-serif, Arial, Helvetica;
-    font-size: 17px;
-    font-weight: 300;
-}
-
-.testimonial.classic q,
-.testimonial.classic footer {
-    color: #111;
-}
-
-
 /* Standard Headings h1-h6 */
 
 h1 {
@@ -347,27 +284,51 @@ input[type="submit"]:hover {
     border-color: #FF8B4A;
 }
 
-
-/*------------------------------------------------------------------------------------------*/
-
-
-/* 7. Footer */
-
-
-/*------------------------------------------------------------------------------------------*/
-
-#landing-footer,
-#landing-footer p,
-#landing-footer a {
-    font-family: 'Poppins', sans-serif, Arial, Helvetica;
-    font-size: 12px;
-    font-weight: normal;
-    color: #999;
-}
-
-
-/* Footer Icon Color */
-
-#landing-footer i {
-    color: #999;
+@media (max-width: 1024px) {
+    #banner h1 {
+        font-size: 3em;
+        line-height: 1em;
+        padding-left: .5em;
+    }
+    #banner h2 {
+        font-size: 1.2em;
+        padding-left: 1.5em;
+    }
+}
+
+@media (max-width: 768px) {
+    #banner h1 {
+        margin-top: .4em;
+        font-size: 3em;
+        line-height: 1em;
+        padding: 1.5% 2% 2% 2%;
+        text-align: center;
+    }
+    #banner h2 {
+        font-size: 1.2em;
+        padding-left: 1em;
+        text-align: center;
+    }
+}
+
+@media (max-width: 576px) {
+    .drag-area {
+        padding: 0px 20px;
+        /* Adjust padding for smaller screens */
+    }
+    .image-grid img {
+        width: 100%;
+        /* Adjust image width for smaller screens */
+        /* Adjust font sizes for smaller screens */
+    }
+    #banner h1 {
+        margin-top: .3em;
+        padding: 2% 1.5% 1% 1.5%;
+        font-size: 2.5em;
+        line-height: 1em;
+    }
+    #banner h2 {
+        font-size: 1.1em;
+        text-align: center;
+    }
 }

static/css/style.css

@@ -1,31 +1,3 @@
-/* Namari Landing Page v.1.1.0 Style Index - a free landing page by shapingrain.com
-
-1. Default and Reset styles
-- 1.1 Input Elements
-2. Global elements
-- 2.1 Header
-- 2.2 Logo
-- 2.3 Buttons
-- 2.4 Navigation
-- 2.5 Social Elements
-- 2.6 Images
-3. Fonts and Headings
-4. Banner
-- 4.1 SignUp Form
-5. Content Elements
-- 5.1 Icons
-- 5.2 Parallax Elements
-- 5.3 Divider
-6. Landing Page Sections
-- 6.1 Features
-- 6.2 Testimonials
-- 6.3 Gallery
-- 6.4 Video
-- 6.5 Clients
-- 6.6 Pricing Table
-7. Footer
-
-
 /*------------------------------------------------------------------------------------------*/
 
 
@@ -347,7 +319,6 @@ section {
 
 .col-lg-3 {
     width: 50%;
-    padding-top: 4.5%;
 }
 
 
@@ -370,7 +341,7 @@ section {
 }
 
 #header ul {
-    text-align: center;
+    text-align: right;
 }
 
 #header li {
@@ -448,90 +419,6 @@ section {
 }
 
 
-/* Play Button */
-
-#video-section {
-    position: relative;
-}
-
-.play-video {
-    height: 110px;
-    position: absolute;
-    top: 50%;
-    margin-top: -110px;
-    width: 100%;
-}
-
-.play-icon {
-    display: inline-block;
-    font-size: 0px;
-    cursor: pointer;
-    margin: 45px auto;
-    width: 110px;
-    height: 110px;
-    border-radius: 50%;
-    text-align: center;
-    position: relative;
-    z-index: 1;
-}
-
-.play-icon:after {
-    pointer-events: none;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    content: '';
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-}
-
-.play-icon:before {
-    font-family: 'fontawesome';
-    content: '\f144';
-    speak: none;
-    font-size: 74px;
-    line-height: 110px;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    display: block;
-    -webkit-font-smoothing: antialiased;
-    color: #fff;
-}
-
-.play-video .play-icon {
-    background: rgba(255, 255, 255, 0.5);
-    -webkit-transition: -webkit-transform ease-out 0.3s, background 0.4s;
-    -moz-transition: -moz-transform ease-out 0.3s, background 0.4s;
-    transition: transform ease-out 0.3s, background 0.4s;
-}
-
-.play-video .play-icon:after {
-    top: 0;
-    left: 0;
-    padding: 0;
-    z-index: -1;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-    opacity: 0;
-    -webkit-transform: scale(0.9);
-    -moz-transform: scale(0.9);
-    -ms-transform: scale(0.9);
-    transform: scale(0.9);
-}
-
-.play-video .play-icon:hover {
-    background: rgba(255, 255, 255, 0.05);
-    -webkit-transform: scale(0.93);
-    -moz-transform: scale(0.93);
-    -ms-transform: scale(0.93);
-    transform: scale(0.93);
-    color: #fff;
-}
-
-
 /* --------- 2.4 Navigation ---------- */
 
 #header {
@@ -632,13 +519,15 @@ section {
     height: 71px;
     line-height: 75px;
     text-align: center;
-    content: "\f0c9";
+    content: '\2630';
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
+    transition: all .4s ease-in-out;
 }
 
 #nav-trigger span.open:after {
-    content: "\f00d";
+    content: '\269E';
+    transition: all .4s ease-in-out;
 }
 
 #nav-trigger span:hover,
@@ -705,6 +594,7 @@ nav#nav-mobile a {
     display: block;
     padding: 12px 0;
     color: #333;
+    text-align: center;
     width: 100%;
     height: auto;
     line-height: normal;
@@ -988,144 +878,6 @@ h6 {
     color: #e1e1e1;
 }
 
-
-/*------------------------------------------------------------------------------------------*/
-
-
-/* 6. Landing Page Sections */
-
-
-/*------------------------------------------------------------------------------------------*/
-
-
-/* --------- 6.1 Introduction ---------- */
-
-.introduction img.featured {
-    padding: 55px 0 0 0;
-}
-
-
-/* --------- 6.2 Features ---------- */
-
-.features.row {
-    padding-left: 5%;
-    padding-right: 5%;
-}
-
-.features div:nth-child(4) {
-    clear: both;
-}
-
-
-/* --------- 6.3 Testimonials ---------- */
-
-.testimonial {
-    padding: 15px;
-}
-
-blockquote {
-    position: relative;
-}
-
-.testimonial img {
-    max-height: 120px;
-    border-radius: 250em;
-}
-
-.testimonial footer {
-    padding-top: 12px;
-}
-
-
-/* Style Classic - Avatar above Testimonial */
-
-.testimonial.classic img {
-    display: inline-block;
-    margin-bottom: 25px;
-}
-
-.testimonial.classic q {
-    display: block;
-}
-
-.testimonial.classic footer:before {
-    display: block;
-    content: "";
-    width: 30px;
-    height: 4px;
-    margin: 10px auto 15px auto;
-}
-
-
-/* Style Big */
-
-.testimonial.bigtest {
-    padding-top: 0;
-}
-
-.testimonial.bigtest q {
-    font-size: 22px;
-}
-
-
-/* --------- 6.4 Gallery ---------- */
-
-#gallery img {
-    max-height: 300px;
-}
-
-#gallery [class*='col-'] {
-    padding: 0;
-}
-
-#gallery a {
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-}
-
-#gallery a:hover img {
-    opacity: 0.15;
-    -moz-backface-visibility: hidden;
-}
-
-#gallery a:before {
-    font-size: 2.2em;
-    font-style: normal;
-    font-weight: normal;
-    text-align: center;
-    content: "+";
-    width: 70px;
-    height: 70px;
-    border-radius: 100em;
-    display: block;
-    position: absolute;
-    top: 55%;
-    left: 50%;
-    line-height: 72px;
-    margin: -35px 0 0 -35px;
-    opacity: 0;
-    -webkit-transition: all .2s linear;
-    -moz-transition: all .2s linear;
-    transition: all .2s linear;
-    vertical-align: middle;
-}
-
-#gallery a:hover:before {
-    opacity: 1;
-    top: 50%;
-    left: 50%;
-}
-
-
-/**
- * Featherlight – ultra slim jQuery lightbox
- * Version 1.3.3 - http://noelboss.github.io/featherlight/
- *
- * Copyright 2015, Noël Raoul Bossart (http://www.noelboss.com)
- * MIT Licensed.
-**/
-
 @media all {
     .featherlight {
         display: none;
@@ -1346,304 +1098,6 @@ blockquote {
     }
 }
 
-
-/* --------- 6.5 Video ---------- */
-
-#video-box {
-    color: #fff;
-    position: relative;
-    overflow: hidden;
-    text-align: center;
-}
-
-.video_container,
-.easyContainer {
-    position: relative;
-    padding-bottom: 56.25%;
-    /* 16/9 ratio */
-    margin: 0;
-    padding-top: 0;
-    /* IE6 workaround*/
-    height: 0;
-    overflow: hidden;
-}
-
-.video_container iframe,
-.video_container object,
-.video_container embed {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: 100% !important;
-}
-
-.slvj-lightbox iframe,
-.slvj-lightbox object,
-.slvj-lightbox embed {
-    width: 100% !important;
-    height: 529px !important;
-}
-
-.videojs-background-wrap {
-    overflow: hidden;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: -998;
-}
-
-#slvj-window {
-    width: 100%;
-    min-height: 100%;
-    z-index: 9999999999;
-    background: rgba(0, 0, 0, 0.8);
-    position: fixed;
-    top: 0;
-    left: 0;
-}
-
-#slvj-window,
-#slvj-window * {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-#slvj-background-close {
-    width: 100%;
-    min-height: 100%;
-    z-index: 31;
-    position: fixed;
-    top: 0;
-    left: 0;
-}
-
-#slvj-back-lightbox {
-    max-width: 940px;
-    max-height: 529px;
-    z-index: 32;
-    text-align: center;
-    margin: 0 auto;
-}
-
-.slvj-lightbox {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    z-index: 53;
-}
-
-#slvj-close-icon:before {
-    font-family: "fontawesome";
-    color: #fff;
-    content: '\f00d';
-    font-size: 22px;
-    opacity: 0.5;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
-    z-index: 99999;
-    height: 22px;
-    width: 22px;
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    cursor: pointer;
-}
-
-#slvj-close-icon:before:hover {
-    opacity: 1;
-    cursor: pointer;
-}
-
-
-/* --------- 6.6 Clients ---------- */
-
-#clients a {
-    display: block;
-    text-align: center;
-    position: relative;
-    text-transform: uppercase;
-    font-weight: bold;
-    color: #fff;
-}
-
-#clients img {
-    display: inline-block;
-    padding: 15px 25px;
-}
-
-.client-overlay {
-    background: rgba(0, 0, 0, 0.8);
-    position: absolute;
-    top;
-    0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
-}
-
-#clients a:hover .client-overlay {
-    opacity: 1;
-}
-
-.client-overlay span {
-    position: absolute;
-    top: 48%;
-    left: 0;
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-}
-
-
-/* --------- 6.7 Pricing Table ---------- */
-
-.pricing-block-content {
-    background: #fff;
-    padding: 25px 0 25px 0;
-    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
-    transition: all 0.2s ease-in-out 0s;
-    position: relative;
-    border: 10px solid #fff;
-}
-
-.pricing-block ul {
-    list-style: none;
-    margin: 25px 0 25px 0;
-}
-
-.pricing-block li {
-    padding: 14px 0;
-    border-bottom: 1px dotted #e1e1e1;
-}
-
-.pricing-block li:last-of-type {
-    border: none;
-}
-
-.pricing-block h3 {
-    font-size: 17px;
-    text-transform: uppercase;
-    padding-bottom: 0;
-}
-
-.pricing-sub {
-    font-style: italic;
-    color: #ccc;
-    margin: 0 0 25px 0;
-}
-
-
-/*Price*/
-
-.pricing {
-    background: #f5f5f5;
-    padding: 25px;
-    position: relative;
-}
-
-.price {
-    display: inline-block;
-    font-size: 62px;
-    font-weight: 700;
-    position: relative;
-}
-
-.price span {
-    position: absolute;
-    top: 0;
-    left: -20px;
-    font-size: 22px;
-}
-
-.pricing p {
-    font-style: italic;
-    color: #b4b4b4;
-    line-height: auto;
-    margin: 0;
-}
-
-
-/*------------------------------------------------------------------------------------------*/
-
-
-/* 7. Footer */
-
-
-/*------------------------------------------------------------------------------------------*/
-
-#landing-footer {
-    clear: both;
-}
-
-#landing-footer .row {
-    padding: 0;
-}
-
-#landing-footer p {
-    margin: 0;
-}
-
-#landing-footer ul {
-    list-style: none;
-    text-align: right;
-}
-
-#landing-footer li {
-    display: inline-block;
-}
-
-
-/* Scroll Up */
-
-#scrollUp {
-    bottom: 15px;
-    right: 30px;
-    width: 70px;
-    height: 80px;
-    margin-bottom: -10px;
-    padding: 0 5px 20px 5px;
-    text-align: center;
-    text-decoration: none;
-    color: #fff;
-    -webkit-transition: margin-bottom 150ms linear;
-    -moz-transition: margin-bottom 150ms linear;
-    -o-transition: margin-bottom 150ms linear;
-    transition: margin-bottom 150ms linear;
-}
-
-#scrollUp:hover {
-    margin-bottom: 0;
-}
-
-#scrollUp:before {
-    background: #ccc;
-    font-family: "fontawesome";
-    font-size: 2.4em;
-    font-style: normal;
-    font-weight: normal;
-    text-align: center;
-    color: #fff;
-    width: 45px;
-    height: 45px;
-    display: inline-block;
-    line-height: 45px;
-    content: "\f106";
-    opacity: 1;
-}
-
 .loader {
     z-index: 999999;
     width: 94px;
@@ -2867,9 +2321,6 @@ h3 {
     color: transparent;
 }
 
-
-/* Add this CSS for the grid container */
-
 .grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -2906,7 +2357,7 @@ h3 {
     font-family: poppins;
     font-weight: 400;
     position: relative;
-    padding: 12px 35px;
+    padding: 12px 28px;
     background: linear-gradient(45deg, #FFA07A, #fa7962);
     font-size: 17px;
     font-weight: 500;
@@ -3059,4 +2510,104 @@ h3 {
 
 input #file-input {
     height: 100%;
+}
+
+
+/* Responsive layout for smaller screens */
+
+@media (max-width: 1024px) {
+    .col-lg-6 {
+        width: 55%;
+    }
+    .col-lg-3 {
+        width: 45%;
+        padding-top: .5em;
+    }
+    #logo img {
+        max-height: 30px;
+        vertical-align: middle;
+        margin-left: 1.5em;
+    }
+    .container {
+        max-width: 90%;
+    }
+    p,
+    input {
+        text-align: center;
+        margin: auto;
+        line-height: normal;
+    }
+    input,
+    textarea {
+        width: 100%;
+        box-sizing: border-box;
+        margin: 0px 0 10px 0;
+    }
+}
+
+@media (max-width: 768px) {
+    .col-lg-6,
+    .col-lg-3 {
+        width: 100%;
+        float: none;
+        /* Remove float for full-width layout */
+    }
+    .container {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 576px) {
+    .drag-area {
+        padding: 0px 20px;
+    }
+    .image-grid img {
+        width: 100%;
+    }
+    .container {
+        width: 90%;
+        max-width: 100%;
+        padding: 1em;
+        margin: 0 auto;
+    }
+    .drag-area {
+        padding: 0px 20px;
+        /* Adjust padding for smaller screens */
+    }
+    .image-grid img {
+        width: 100%;
+        /* Adjust image width for smaller screens */
+    }
+    p,
+    input {
+        text-align: center;
+        margin: auto;
+        line-height: normal;
+    }
+    input,
+    textarea {
+        width: 100%;
+        box-sizing: border-box;
+        margin: 0px 0 10px 0;
+        display: block;
+    }
+    .drag-area img {
+        width: 90%;
+        height: 90%;
+        object-fit: contain;
+        z-index: -1;
+        padding-top: 8px;
+    }
+    .wall {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        background-color: #fff;
+    }
+}
+
+#error-message {
+    color: #ff0000;
+    font-size: 14px;
+    margin-top: 8px;
 }

static/js/site.js

@@ -62,25 +62,43 @@ $(window).load(function() { // makes sure the whole site is loaded
     }
 
 });
-
 document.addEventListener('DOMContentLoaded', function() {
-    var canvas = new fabric.Canvas('c3', { width: 700, height: 700 });
+    var canvasContainer = document.getElementById('canvas-container');
+    var canvas = new fabric.Canvas('c3', { width: canvasContainer.offsetWidth, height: canvasContainer.offsetHeight });
 
     var image = document.getElementById('my-image');
     var originalScale;
 
+    function resizeCanvas() {
+        canvas.setWidth(canvasContainer.offsetWidth);
+        canvas.setHeight(canvasContainer.offsetHeight);
+
+        if (canvas.item(0)) {
+            var fabricImg = canvas.item(0);
+            var scaleX = canvas.width / fabricImg.width;
+            var scaleY = canvas.height / fabricImg.height;
+            var minScale = Math.min(scaleX, scaleY);
+
+            originalScale = minScale;
+
+            fabricImg.set({
+                left: canvas.width / 2 - (fabricImg.width * minScale) / 2,
+                top: canvas.height / 2 - (fabricImg.height * minScale) / 2,
+                scaleX: minScale,
+                scaleY: minScale
+            });
+
+            canvas.renderAll();
+        }
+    }
+
     fabric.Image.fromURL(image.src, function(fabricImg) {
-        // Calculate scaling factors to fit the image within the canvas
         var scaleX = canvas.width / fabricImg.width;
         var scaleY = canvas.height / fabricImg.height;
-
-        // Use the minimum scaling factor to fit within the canvas
         var minScale = Math.min(scaleX, scaleY);
 
-        // Save the original scale for later use
         originalScale = minScale;
 
-        // Set the position and scaling
         fabricImg.set({
             left: canvas.width / 2 - (fabricImg.width * minScale) / 2,
             top: canvas.height / 2 - (fabricImg.height * minScale) / 2,
@@ -91,6 +109,10 @@ document.addEventListener('DOMContentLoaded', function() {
         canvas.add(fabricImg);
     });
 
+    window.addEventListener('resize', function() {
+        resizeCanvas();
+    });
+
     canvas.on('mouse:down', function(options) {
         if (options.target) {
             options.target.set({
@@ -115,9 +137,8 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Reset button click event
     document.getElementById('reset-button').addEventListener('click', function() {
-        if (canvas.item(0)) { // Assuming the image is the first object in the canvas
+        if (canvas.item(0)) {
             canvas.item(0).set({
                 scaleX: originalScale,
                 scaleY: originalScale
@@ -133,4 +154,7 @@ document.addEventListener('DOMContentLoaded', function() {
     canvas.on('object:scaling', function(options) {
         // Handle object scaling
     });
+
+    // Initial canvas resize
+    resizeCanvas();
 });