diff --git a/landingpages/landingpage/css/index.css b/landingpages/landingpage/css/index.css index 4afd2c4..e1d4d95 100644 --- a/landingpages/landingpage/css/index.css +++ b/landingpages/landingpage/css/index.css @@ -3,8 +3,8 @@ --bg-color: #fff; - --btn-color: #0F1727;/* button color*/ - --btn-bg: #f1efef;/* button bg color*/ + --btn-color: #ffffff;/* button color*/ + --btn-bg: #0F1727;/* button bg color*/ --primary-text-color: #000; --header-link-hover: #000; diff --git a/landingpages/landingpage/index.html b/landingpages/landingpage/index.html index 0fa1626..5ae006b 100644 --- a/landingpages/landingpage/index.html +++ b/landingpages/landingpage/index.html @@ -15,7 +15,7 @@ - + @@ -72,7 +72,7 @@ class="tw-mx-4 tw-flex tw-place-items-center tw-gap-[20px] tw-text-base max-md:tw-w-full max-md:tw-flex-col max-md:tw-place-content-center" > - Tired of writing code to build you python GUIs, well now you can easily + The most awaited python tool is here. Now you can use Drag and drop to build Tkinter and customTk GUIs. Soon wil be made available for kivy and PySide
font tester gif + alt="Pyui gif" src="./assets/images/home/promo.gif" >
+
+ +

+ Everything you need
+ to perfect Python GUIs +

+
+ +
+ +
+
+
+ live preview + +
+

Drag and Drop editor

+

+ Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live. +

+ +
+
+
+
+
+ live preview + +
+

Support for multiple UI libraries

+

+ Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live. +

+ +
+
+
+
+
+ live preview + +
+

Supports many UI Widgets

+

+ Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live. +

+ +
+
+ +
+
+
+ live preview + +
+

Generate clean Python code

+

+ Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live. +

+ +
+
+
+
+
+ live preview + +
+

3rd Party Plugin support

+

+ Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live. +

+ +
+
+
+
+
+ live preview + +
+

Supports asset upload

+

+ Easily preview fonts on any webpage. If your design and final output look different, Font Tester ensures an accurate, real-time preview. Instantly apply fonts, tweak styles, and see the results live. +

+ +
+
+ +
+ + +
+ + + Make it yours + + +
+

Pre-order your License

+ +
+ Pre-orders for PyUiBuilder premium features are open. Premium features will start rolling out + from mid of April phase wise. This is your last chance to get it before price increase from mid of April. +
@@ -214,6 +348,10 @@ Downloadable UI builder exe for local development +
  • + + Premium widgets (eg: scroll widget, tab widget, Canvas etc) +
  • Support for PySlide/PyQt @@ -287,6 +425,10 @@ Downloadable UI builder exe for local development
    • +
  • + + Premium widgets (eg: scroll widget, tab widget, Canvas etc) +
  • Preview live @@ -365,6 +507,10 @@ Downloadable UI builder exe for local development
    • +
  • + + Premium widgets (eg: scroll widget, tab widget, Canvas etc) +
  • Preview live @@ -483,18 +629,11 @@
    - Where can I find the upcoming features? + When will premium features roll out
    - You can find the upcoming features on the - Roadmap + Premium features will start rolling out from mid of April in phase wise.
    • diff --git a/landingpages/tailwind/tailwind-runtime.css b/landingpages/tailwind/tailwind-runtime.css index 4561f11..e1e0e7c 100644 --- a/landingpages/tailwind/tailwind-runtime.css +++ b/landingpages/tailwind/tailwind-runtime.css @@ -107,7 +107,7 @@ } /* -! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ /* @@ -541,7 +541,7 @@ video { /* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden] { +[hidden]:where(:not([hidden="until-found"])) { display: none; } @@ -619,6 +619,20 @@ video { margin-right: 1rem; } +.tw-my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.tw-my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +.\!tw-mt-auto { + margin-top: auto !important; +} + .tw-ml-auto { margin-left: auto; } @@ -651,14 +665,22 @@ video { margin-top: auto; } -.\!tw-mt-auto { - margin-top: auto !important; +.tw-mt-6 { + margin-top: 1.5rem; +} + +.tw-mt-2 { + margin-top: 0.5rem; } .tw-flex { display: flex; } +.tw-grid { + display: grid; +} + .\!tw-hidden { display: none !important; } @@ -707,6 +729,14 @@ video { height: 100%; } +.tw-h-\[200px\] { + height: 200px; +} + +.tw-h-\[500px\] { + height: 500px; +} + .tw-max-h-\[120px\] { max-height: 120px; } @@ -739,20 +769,20 @@ video { min-height: 550px; } -.tw-min-h-\[60vh\] { - min-height: 60vh; -} - .tw-min-h-\[70vh\] { min-height: 70vh; } +.tw-min-h-\[80vh\] { + min-height: 80vh; +} + .tw-min-h-full { min-height: 100%; } -.tw-min-h-\[80vh\] { - min-height: 80vh; +.tw-min-h-\[200px\] { + min-height: 200px; } .tw-w-8 { @@ -787,6 +817,10 @@ video { width: max-content; } +.tw-w-\[350px\] { + width: 350px; +} + .tw-min-w-full { min-width: 100%; } @@ -811,6 +845,22 @@ video { max-width: 850px; } +.tw-max-w-\[650px\] { + max-width: 650px; +} + +.tw-max-w-\[750px\] { + max-width: 750px; +} + +.tw-max-w-\[1150px\] { + max-width: 1150px; +} + +.tw-max-w-\[400px\] { + max-width: 400px; +} + .tw--translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -856,6 +906,14 @@ video { user-select: none; } +.tw-auto-rows-auto { + grid-auto-rows: auto; +} + +.tw-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + .tw-flex-col { flex-direction: column; } @@ -956,6 +1014,10 @@ video { border-radius: 0.75rem; } +.tw-rounded-3xl { + border-radius: 1.5rem; +} + .\!tw-border-\[1px\] { border-width: 1px !important; } @@ -968,10 +1030,6 @@ video { border-width: 1px; } -.tw-border-4 { - border-width: 4px; -} - .tw-border-\[3px\] { border-width: 3px; } @@ -984,65 +1042,55 @@ video { border-style: solid; } -.\!tw-border-white { - --tw-border-opacity: 1 !important; - border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important; -} - -.tw-border-black { - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); -} - -.tw-border-blue-500 { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - -.tw-border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.tw-border-green-600 { - --tw-border-opacity: 1; - border-color: rgb(22 163 74 / var(--tw-border-opacity)); -} - -.tw-border-white { - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - .\!tw-border-\[\#0F1727\] { --tw-border-opacity: 1 !important; - border-color: rgb(15 23 39 / var(--tw-border-opacity)) !important; + border-color: rgb(15 23 39 / var(--tw-border-opacity, 1)) !important; } .\!tw-border-green-600 { --tw-border-opacity: 1 !important; - border-color: rgb(22 163 74 / var(--tw-border-opacity)) !important; + border-color: rgb(22 163 74 / var(--tw-border-opacity, 1)) !important; } -.\!tw-bg-\[\#7E22CE\] { +.tw-border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); +} + +.tw-border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); +} + +.tw-border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); +} + +.\!tw-bg-\[\#0F1727\] { --tw-bg-opacity: 1 !important; - background-color: rgb(126 34 206 / var(--tw-bg-opacity)) !important; + background-color: rgb(15 23 39 / var(--tw-bg-opacity, 1)) !important; } .\!tw-bg-gray-100 { --tw-bg-opacity: 1 !important; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important; } .\!tw-bg-purple-500 { --tw-bg-opacity: 1 !important; - background-color: rgb(168 85 247 / var(--tw-bg-opacity)) !important; + background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1)) !important; } .\!tw-bg-transparent { background-color: transparent !important; } +.tw-bg-\[\#0F1727\] { + --tw-bg-opacity: 1; + background-color: rgb(15 23 39 / var(--tw-bg-opacity, 1)); +} + .tw-bg-\[\#f0f0f0ef\] { background-color: #f0f0f0ef; } @@ -1053,49 +1101,37 @@ video { .tw-bg-black { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .tw-bg-blue-500 { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } .tw-bg-gray-100 { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .tw-bg-green-700 { --tw-bg-opacity: 1; - background-color: rgb(21 128 61 / var(--tw-bg-opacity)); -} - -.tw-bg-transparent { - background-color: transparent; + background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1)); } .tw-bg-white { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } -.\!tw-bg-\[\#0F1727\] { - --tw-bg-opacity: 1 !important; - background-color: rgb(15 23 39 / var(--tw-bg-opacity)) !important; -} - -.tw-bg-\[\#0F1727\] { +.tw-bg-\[\#171717\] { --tw-bg-opacity: 1; - background-color: rgb(15 23 39 / var(--tw-bg-opacity)); + background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)); } -.\!tw-bg-\[\#\#0F1727\] { - background-color: ##0F1727 !important; -} - -.tw-bg-\[\#\#0F1727\] { - background-color: ##0F1727; +.tw-bg-\[\#eeeeee\] { + --tw-bg-opacity: 1; + background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1)); } .tw-bg-opacity-0 { @@ -1138,6 +1174,14 @@ video { padding: 5%; } +.tw-p-10 { + padding: 2.5rem; +} + +.tw-p-4 { + padding: 1rem; +} + .tw-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1221,6 +1265,11 @@ video { line-height: 1.75rem; } +.tw-text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + .\!tw-font-semibold { font-weight: 600 !important; } @@ -1233,10 +1282,6 @@ video { font-weight: 600; } -.\!tw-font-medium { - font-weight: 500 !important; -} - .tw-uppercase { text-transform: uppercase; } @@ -1250,84 +1295,90 @@ video { line-height: 90px; } -.\!tw-text-black { - --tw-text-opacity: 1 !important; - color: rgb(0 0 0 / var(--tw-text-opacity)) !important; +.tw-leading-8 { + line-height: 2rem; } -.\!tw-text-blue-500 { - --tw-text-opacity: 1 !important; - color: rgb(59 130 246 / var(--tw-text-opacity)) !important; +.tw-leading-relaxed { + line-height: 1.625; } -.\!tw-text-white { - --tw-text-opacity: 1 !important; - color: rgb(255 255 255 / var(--tw-text-opacity)) !important; +.tw-leading-\[5px\] { + line-height: 5px; } -.tw-text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.tw-text-gray-200 { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.tw-text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.tw-text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.tw-text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.tw-text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.tw-text-green-600 { - --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); -} - -.tw-text-purple-500 { - --tw-text-opacity: 1; - color: rgb(168 85 247 / var(--tw-text-opacity)); -} - -.tw-text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} - -.tw-text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); +.tw-leading-normal { + line-height: 1.5; } .\!tw-text-\[\#0F1727\] { --tw-text-opacity: 1 !important; - color: rgb(15 23 39 / var(--tw-text-opacity)) !important; + color: rgb(15 23 39 / var(--tw-text-opacity, 1)) !important; +} + +.\!tw-text-black { + --tw-text-opacity: 1 !important; + color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important; +} + +.\!tw-text-blue-500 { + --tw-text-opacity: 1 !important; + color: rgb(59 130 246 / var(--tw-text-opacity, 1)) !important; +} + +.\!tw-text-white { + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important; } .tw-text-\[\#0F1727\] { --tw-text-opacity: 1; - color: rgb(15 23 39 / var(--tw-text-opacity)); + color: rgb(15 23 39 / var(--tw-text-opacity, 1)); +} + +.tw-text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); +} + +.tw-text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); +} + +.tw-text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .tw-text-gray-800 { --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); + color: rgb(31 41 55 / var(--tw-text-opacity, 1)); +} + +.tw-text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity, 1)); +} + +.tw-text-purple-500 { + --tw-text-opacity: 1; + color: rgb(168 85 247 / var(--tw-text-opacity, 1)); +} + +.tw-text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity, 1)); +} + +.tw-text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.tw-text-gray-200 { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity, 1)); } .tw-underline { @@ -1364,16 +1415,17 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.tw-shadow-\[\#7E22CE\] { - --tw-shadow-color: #7E22CE; - --tw-shadow: var(--tw-shadow-colored); -} - .tw-shadow-\[\#4d395e\] { --tw-shadow-color: #4d395e; --tw-shadow: var(--tw-shadow-colored); } +.tw-transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .tw-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -1392,12 +1444,6 @@ video { transition-duration: 150ms; } -.tw-transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .tw-duration-300 { transition-duration: 300ms; } @@ -1410,11 +1456,6 @@ video { transition-duration: 0.3s; } -.hover\:tw-translate-x-1:hover { - --tw-translate-x: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .hover\:tw-translate-x-2:hover { --tw-translate-x: 0.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1439,47 +1480,22 @@ video { .hover\:\!tw-bg-gray-100:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!tw-bg-gray-300:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!tw-bg-white:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; -} - -.hover\:tw-bg-white:hover { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.hover\:tw-bg-black:hover { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} - -.hover\:tw-bg-\[\#0F1727\]:hover { - --tw-bg-opacity: 1; - background-color: rgb(15 23 39 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!tw-text-black:hover { --tw-text-opacity: 1 !important; - color: rgb(0 0 0 / var(--tw-text-opacity)) !important; -} - -.hover\:tw-text-black:hover { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.hover\:tw-text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important; } .hover\:tw-transition-transform:hover { @@ -1488,9 +1504,14 @@ video { transition-duration: 150ms; } +.tw-group:hover .group-hover\:tw-translate-x-1 { + --tw-translate-x: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .dark\:tw-bg-\[\#16171A\]:is(.tw-dark *) { --tw-bg-opacity: 1; - background-color: rgb(22 23 26 / var(--tw-bg-opacity)); + background-color: rgb(22 23 26 / var(--tw-bg-opacity, 1)); } .dark\:tw-bg-\[\#80808085\]:is(.tw-dark *) { @@ -1498,6 +1519,14 @@ video { } @media not all and (min-width: 1280px) { + .max-xl\:tw-flex { + display: flex; + } + + .max-xl\:tw-flex-col { + flex-direction: column; + } + .max-xl\:tw-place-items-center { place-items: center; } @@ -1520,6 +1549,10 @@ video { height: auto; } + .max-lg\:tw-h-fit { + height: fit-content; + } + .max-lg\:tw-min-h-\[250px\] { min-height: 250px; } @@ -1528,10 +1561,6 @@ video { min-height: 400px; } - .max-lg\:tw-min-h-\[60vh\] { - min-height: 60vh; - } - .max-lg\:tw-min-h-\[80vh\] { min-height: 80vh; } @@ -1556,6 +1585,10 @@ video { flex-direction: column; } + .max-lg\:tw-place-content-center { + place-content: center; + } + .max-lg\:tw-place-items-end { place-items: end; } @@ -1594,6 +1627,14 @@ video { margin-top: 50px; } + .max-md\:tw-h-\[180px\] { + height: 180px; + } + + .max-md\:tw-min-h-\[350px\] { + min-height: 350px; + } + .max-md\:tw-w-full { width: 100%; } @@ -1640,6 +1681,12 @@ video { } } +@media (min-width: 768px) { + .md\:tw-h-\[350px\] { + height: 350px; + } +} + @media (min-width: 1024px) { .lg\:tw-mx-auto { margin-left: auto;