Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on landing page

Browse Source
This commit is contained in:
paul
2024-10-03 22:19:28 +05:30
parent 088ffd90a4
commit 4ffb7d84e5
5 changed files with 209 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
landingpages/buildinpublic/index.html
View File

@@ -225,7 +225,7 @@
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
</div>
<div class="content">
Yes, this is an open-source project, you can visit the
Yes, this is an source code is available project, you can visit the
source code on
<a target="_blank"
rel="noopener noreferrer"

74
landingpages/landingpage/css/index.css
View File

@@ -1,19 +1,10 @@
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fondamento&family=chivo&family=Bellota&family=Battambang&family=Archivo+Black&family=Didact+Gothic&family=Sedgwick+Ave&family=Rowdies');
/* @import url('https://fonts.googleapis.com/css2?family=Chivo');
@import url('https://fonts.googleapis.com/css2?family=Bellota');
@import url('https://fonts.googleapis.com/css2?family=Battambang');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic');
@import url('https://fonts.googleapis.com/css2?family=Rowdies'); */
:root{
--bg-color: #fff;
--btn-color: #fdfdfd;/* button color*/
--btn-bg: #000;/* button bg color*/
--btn-color: #141313;/* button color*/
--btn-bg: #f1efef;/* button bg color*/
--primary-text-color: #000;
--header-link-hover: #000;
@@ -27,54 +18,19 @@ html {
}
.fondamento-family{
font-family: "Fondamento", handwriting;
font-weight: 700;
.gradient-text{
background: rgb(215,215,215);
background: linear-gradient(90deg, rgba(215,215,215,1) 18%, rgba(136,136,136,1) 71%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.chivo-family{
font-family: "Chivo", sans-serif;
}
.bellota-family{
font-family: "Bellota", system-ui;
font-weight: 600;
}
.battambang-family{
font-family: "Battambang", system-ui;
font-weight: 500;
}
.archivo-black-family{
font-family: "Archivo Black", sans-serif;
font-weight: 400;
line-height: 1.3;
}
.didact-gothic-family{
font-family: "Didact Gothic", sans-serif;
text-decoration: underline;
font-style: italic;
}
.sedgwick-ave-family{
font-family: "Sedgwick Ave", handwriting;
font-weight: 500;
line-height: 1.5;
}
.rowdies-family{
font-family: "Rowdies", system-ui;
font-weight: 400;
}
header{
/* background-color: #fff;
color: #000; */
color: #4b4b4b;
color: #c0c0c0;
}
@@ -104,7 +60,7 @@ header > .collapsible-header{
.header-links:hover {
color: #000000;
color: #fff;
/* background-color: var(--header-link-hover); */
}
@@ -225,7 +181,7 @@ header > .collapsible-header{
}
.footer-link:hover{
color: #0b0b0b;
color: #fff;
}
/* Navigation dots styling */
@@ -284,14 +240,14 @@ header > .collapsible-header{
/* Style for the collapsible content such as faq commonly known as: accordion */
.faq{
background-color: #fff;
color: #000000;
border: 1px solid #000;
background-color: #000000;
color: #fff8f8;
border: 1px solid #f5f3f3;
}
.faq-accordion {
background-color: inherit;
color: #000000;
color: #eeeaea;
cursor: pointer;
padding: 15px 18px;
width: 100%;
@@ -303,7 +259,7 @@ header > .collapsible-header{
.faq .content {
padding: 0px 18px;
color: #232323;
color: #e6e5e5;
height: max-content;
overflow: hidden;
background-color: transparent;

365
landingpages/landingpage/index.html
View File

@@ -15,7 +15,7 @@
<meta property="og:title" content="PyUIBuilder - A Drag and Drop builder for python GUIs" />
<meta property="og:description" content="A Drag and Drop builder for Python GUIs, including Tkinter, Custom Tkinter and more" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/PaulleDemon/font-tester-chrome" />
<meta property="og:url" content="https://github.com/PaulleDemon/PyUIBuilder" />
<!--Replace with the current website url-->
<meta property="og:image" content="" />
@@ -42,7 +42,7 @@
</script>
</head>
<body
class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-white tw-text-black"
class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-black tw-text-white"
>
<header
class="tw-max-w-lg:tw-px-4 tw-max-w-lg:tw-mr-auto tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-bg-opacity-0 tw-px-[5%] lg:tw-justify-around"
@@ -64,7 +64,7 @@
<a class="header-links" href=""> About </a>
<a class="header-links" href="#pricing"> Pricing </a>
<a class="header-links" href="#features"> Features </a>
<a class="header-links" href="https://github.com/PaulleDemon/font-tester-chrome"> Github </a>
<a class="header-links" href="https://github.com/PaulleDemon/PyUIBuilder"> Github </a>
</div>
<div
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"
@@ -72,17 +72,17 @@
<a
target="_blank"
rel="noopener noreferrer"
href="https://chromewebstore.google.com/detail/font-tester/deachoodakeofjlfikfkohihnpcgiaim"
href="https://pyuibuilder.pages.dev"
aria-label="signup"
class="tw-rounded-md tw-border-[1px] tw-border-black tw-bg-transparent tw-px-3 tw-py-2 tw-text-black tw-transition-colors tw-duration-[0.3s] hover:tw-bg-black hover:tw-text-white"
class="tw-rounded-md tw-border-[1px] tw-border-white tw-bg-transparent tw-px-3 tw-py-2 tw-text-white tw-transition-colors tw-duration-[0.3s] hover:tw-bg-white hover:tw-text-black"
>
<span>Download</span>
<i class="bi bi-download"></i>
<span>Try free</span>
<i class="bi bi-arrow-up-right"></i>
</a>
</div>
</div>
<button
class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-3xl tw-text-black lg:tw-hidden"
class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-3xl tw-text-white lg:tw-hidden"
onclick="toggleHeader()"
aria-label="menu"
id="collapse-btn"
@@ -95,7 +95,7 @@
>
<!-- video container -->
<div class="tw-fixed tw-bg-[#000000af] dark:tw-bg-[#80808085] tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-z-20 tw-transition-opacity
<div class="tw-fixed tw-bg-[#fdfdfdaf] dark:tw-bg-[#80808085] tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-z-20 tw-transition-opacity
tw-duration-300 tw-scale-0 tw-opacity-0 tw-p-2
tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center" id="video-container-bg">
@@ -125,19 +125,21 @@
class="tw-flex tw-flex-col tw-place-content-center tw-items-center"
>
<div
class="reveal-up tw-text-center tw-text-6xl tw-font-semibold tw-uppercase tw-leading-[80px] max-lg:tw-text-4xl max-md:tw-leading-snug"
class="reveal-up tw-text-center tw-text-6xl tw-font-semibold tw-uppercase tw-leading-[90px]
max-lg:tw-text-4xl gradient-text
max-md:tw-leading-snug"
>
<span class=""> Build Python UI's using <span class="tw-px-3 t"></span>
</span>
<br />
<span class="tw-bg-[#ffe27a] tw-px-3"> Drag and Drop editor </span>
<span class=" tw-px-3 tw-text-5xl"> Drag and Drop editor </span>
</div>
</div>
<div class="tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center">
<div
class="reveal-up tw-mt-3 tw-max-w-[450px] tw-p-2 tw-text-center tw-text-gray-700 max-lg:tw-max-w-full"
class="reveal-up tw-mt-3 tw-max-w-[450px] tw-p-2 tw-text-center tw-text-gray-200 max-lg:tw-max-w-full"
>
Tired of writing code to build you python GUIs, well now you can easily
</div>
@@ -146,13 +148,13 @@
class="reveal-up tw-mt-10 tw-flex tw-place-items-center tw-gap-4"
>
<a
class="btn tw-bg-[#7e22ce85] tw-shadow-lg tw-shadow-primary tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03]"
class="btn !tw-bg-[#7E22CE] !tw-text-white tw-shadow-lg tw-shadow-[#7E22CE] tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03]"
href="#pricing"
>
Start for free
</a>
<button
class="btn tw-flex tw-gap-2 !tw-border-solid !tw-border-[1px] !tw-border-black !tw-text-black !tw-bg-transparent tw-transition-colors tw-duration-[0.3s] hover:!tw-bg-white hover:!tw-text-black"
class="btn tw-flex tw-gap-2 !tw-border-solid !tw-border-[1px] !tw-border-white !tw-text-white !tw-bg-transparent tw-transition-colors tw-duration-[0.3s] hover:!tw-bg-white hover:!tw-text-black"
onclick="openVideo()"
>
@@ -182,241 +184,129 @@
</div>
</section>
<section
id="features"
class="tw-relative tw-mt-10 tw-flex tw-min-h-[100vh] tw-p-1 tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-items-center lg:tw-p-6"
>
<h2 class="rowdies-family tw-text-5xl tw-leading-relaxed tw-font-semibold max-md:tw-text-3xl tw-text-center">
Add personality to your <br class="lg:tw-hidden"> website
<br class="max-lg:tw-hidden">
with fonts
</h2>
<div
class="reveal-up tw-mt-[5%] tw-flex tw-h-full tw-w-full tw-place-content-center tw-gap-8 tw-p-4 max-lg:tw-max-w-full max-lg:tw-flex-col"
>
<div
class="tw-flex tw-flex-col tw-gap-[200px] tw-h-full tw-max-w-[50%] max-lg:tw-max-w-full tw-px-[10%] max-lg:tw-px-4 max-lg:tw-gap-16 max-lg:tw-w-full lg:tw-top-[20%]"
>
<div class="tw-flex tw-gap-6">
<div class="tw-w-[80px] tw-h-[80px] tw-min-w-[80px]
tw-min-h-[80px] tw-text-5xl
max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
<!-- <img src="./assets/images/icons/unlock.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
<i class="bi bi-fonts"></i>
</div>
<h3
class="tw-text-4xl chivo-family max-lg:tw-text-2xl max-lg:tw-font-normal"
>
Pick and test 1000+ google fonts
</h3>
</div>
<div class="tw-flex tw-gap-6">
<div class="tw-w-[80px] tw-h-[80px] tw-text-5xl tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
<!-- <img src="./assets/images/icons/lighting.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
<i class="bi bi-layout-text-window-reverse"></i>
</div>
<h3
class="tw-text-4xl bellota-family max-lg:tw-text-2xl max-lg:tw-font-normal"
>
Test on any website or landing page
</h3>
</div>
<div class="tw-flex tw-gap-6">
<div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
<!-- <img src="./assets/images/icons/credit-card.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
<i class="bi bi-highlighter"></i>
</div>
<h3
class="tw-text-4xl battambang-family max-lg:tw-text-2xl max-lg:tw-font-normal"
>
Easily change specific text fonts with the highlighter feature
</h3>
</div>
<div class="tw-flex tw-gap-6">
<div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
<!-- <img src="./assets/images/icons/music.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
<i class="bi bi-distribute-vertical"></i>
</div>
<h3
class="tw-text-4xl archivo-black-family max-lg:tw-text-2xl max-lg:tw-font-normal"
>
Set font weight and line height
</h3>
</div>
<div class="tw-flex tw-gap-6">
<div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
<!-- <img src="./assets/images/icons/unlock.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
<i class="bi bi-type-italic"></i>
</div>
<h3
class="tw-text-4xl didact-gothic-family max-lg:tw-text-2xl max-lg:tw-font-normal"
>
set Italics, underline and more
</h3>
</div>
<div class="tw-flex tw-gap-6">
<div class="tw-w-[80px] tw-text-5xl tw-h-[80px] tw-min-w-[80px] tw-min-h-[80px] max-lg:tw-min-h-[60px] max-lg:tw-min-w-[60px] max-lg:tw-h-[60px] max-lg:tw-w-[60px]">
<!-- <img src="./assets/images/icons/lighting.png" alt="unlock" class="tw-object-contain tw-w-full tw-h-full"> -->
<i class="bi bi-clipboard2-check"></i>
</div>
<h3
class="tw-text-4xl max-lg:tw-text-2xl max-lg:tw-font-normal"
>
Easily copy the code for the fonts
</h3>
</div>
</div>
<div
class="tw-relative tw-flex tw-max-w-[30%] max-lg:tw-max-w-full tw-flex-col tw-place-items-start tw-gap-4 tw-p-2 max-lg:tw-place-items-center max-lg:tw-place-content-center max-lg:tw-w-full"
>
<div
class="tw-top-20 lg:tw-sticky tw-shadow-md tw-max-h-[800px] tw-h-fit tw-max-w-[850px] max-lg:tw-max-h-fit max-lg:tw-max-w-[320px] tw-overflow-hidden tw-rounded-lg"
>
<!-- <img
src="./assets/images/home/font-selector.png"
alt="phone"
class="tw-h-full tw-w-full tw-object-contain"
/> -->
<div id="font-selector-widget"></div>
</div>
</div>
</div>
</section>
<section className="tw-mt-1 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[2%] max-lg:tw-p-2" id="pricing">
<h3 className="tw-text-2xl tw-font-medium max-md:tw-text-2xl">Choose your plan</h3>
<div className="tw-mt-10 tw-flex tw-place-content-center tw-gap-8 max-lg:tw-flex-col">
<div className="tw-flex tw-w-[380px] tw-border-[1px] tw-border-gray-500 tw-border-solid tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
<section class="tw-mt-1 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[2%] max-lg:tw-p-2" id="pricing">
<h3 class="tw-text-2xl tw-font-medium max-md:tw-text-2xl">Choose your plan</h3>
<div class="tw-mt-10 tw-flex tw-place-content-center tw-gap-8 max-lg:tw-flex-col">
<div class="tw-flex tw-w-[380px] tw-border-[1px] tw-border-gray-300 tw-border-solid tw-flex-col
tw-place-items-center tw-gap-2 tw-rounded-lg tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
<h3>
<span className="tw-text-5xl tw-font-semibold">$0</span>
<span class="tw-text-5xl tw-font-semibold">$0</span>
</h3>
<p className="tw-mt-3 tw-text-base tw-text-center tw-text-gray-600">
<p class="tw-mt-3 tw-text-base tw-text-center tw-text-gray-400">
Free to use forever, but for added features and to support open-source development, consider buying a lifetime license.
</p>
<hr />
<ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Access to web-based editor</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Commercial use</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Support for PySlide/PyQt</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Preview live</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Save and load files</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Load plugins locally</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Load local UI templates</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Dark theme</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Priority support</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Early access to new features</span>
</li>
</ul>
</div>
<div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
<div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
tw-border-blue-500 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
<div className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
<div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
Limited time offer
</div>
<div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
<div class="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
Hobby
</div>
<h3>
<span className="tw-text-5xl tw-font-semibold">
<s className="tw-font-medium tw-text-4xl">$129</s>
<span class="tw-text-5xl tw-font-semibold">
<s class="tw-font-medium tw-text-4xl">$129</s>
<span>$29</span>
</span>
<span className="tw-text-2xl tw-text-gray-600">Forever</span>
<span class="tw-text-2xl tw-text-gray-600">Forever</span>
</h3>
<p className="tw-mt-3 tw-text-center tw-text-gray-600">
<p class="tw-mt-3 tw-text-center tw-text-gray-600">
Support open-source development 🚀. Plus, get added benefits.
</p>
<hr />
<ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Access to web-based editor</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Preview live</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Save and load files</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Load plugins locally</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Load local UI templates</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Dark theme</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Priority support</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Early access to new features</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Support for PySlide/PyQt</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Commercial use</span>
</li>
@@ -426,76 +316,75 @@
href="https://ko-fi.com/s/4a3dffb3b9"
target="_blank"
rel="noreferrer noopener"
className="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
class="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
>
<span>Buy License</span>
<CrownFilled />
<!-- <CrownFilled /> -->
</a>
</div>
{/* Paid Plan */}
<div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-3 tw-border-solid
<div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-3 tw-border-solid
tw-border-green-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
<div className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
<div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
Limited time offer
</div>
<div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
<div class="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
Commercial
</div>
<h3>
<span className="tw-text-5xl tw-font-semibold">
<s className="tw-font-medium tw-text-4xl">$180</s>
<span class="tw-text-5xl tw-font-semibold">
<s class="tw-font-medium tw-text-4xl">$180</s>
<span>$49</span>
</span>
<span className="tw-text-2xl tw-text-gray-600">Forever</span>
<span class="tw-text-2xl tw-text-gray-600">Forever</span>
</h3>
<p className="tw-mt-3 tw-text-center tw-text-gray-600">
<p class="tw-mt-3 tw-text-center tw-text-gray-600">
Support open-source development 🚀. Plus, get added benefits.
</p>
<hr />
<ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Access to web-based editor</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Preview live</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Save and load files</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Load plugins locally</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Load local UI templates</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Dark theme</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Priority support</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Early access to new features</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Support for PySlide/PyQt</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<li class="tw-flex tw-place-items-center tw-gap-2">
<i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Commercial use</span>
</li>
@@ -505,7 +394,7 @@
href="https://ko-fi.com/s/560a3b6b05"
target="_blank"
rel="noreferrer noopener"
className="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
class="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
>
<span>Buy License</span>
<CrownFilled />
@@ -518,7 +407,7 @@
class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-p-[5%] tw-px-[10%]"
>
<h3
class="tw-text-4xl tw-font-medium tw-text-gray-800 max-md:tw-text-2xl"
class="tw-text-4xl tw-font-medium tw-text-gray-300 max-md:tw-text-2xl"
>
Faq
</h3>
@@ -535,11 +424,10 @@
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
</div>
<div class="content">
Yes, this is an open-source project, you can visit the
source code on
Yes, source code is available at
<a target="_blank"
rel="noopener noreferrer"
href="https://github.com/PaulleDemon/font-tester-chrome"
href="https://github.com/PaulleDemon/PyUIBuilder"
class="tw-underline">Github</a>
</div>
</div>
@@ -550,11 +438,11 @@
<div
class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
>
<span>Can I try the extension for free?</span>
<span>Can I try the PyUIBuilder for free?</span>
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
</div>
<div class="content">
Yes, the chrome extension is free to use forever, however to support
Yes, PyUIBuilder is free to use forever, however to support
open-source development, some features are only available to premium users.
</div>
</div>
@@ -607,7 +495,7 @@
class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-place-items-center tw-gap-6 max-md:tw-w-full"
>
<img
src="./assets/logo/logo.svg"
src="./assets/logo/logo.png"
alt="logo"
srcset=""
class="tw-max-w-[120px]"
@@ -707,28 +595,5 @@
}
</style>
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
centeredSlides: true,
// If we need pagination
pagination: {
el: '.pagination-container',
clickable: true,
renderBullet: function (index, className) {
return `<span class="${className}"></span>`
},
},
// Navigation arrows
navigation: {
nextEl: '.testmonial-next',
prevEl: '.testmonial-prev',
},
})
</script>
<script src="https://gumroad.com/js/gumroad.js"></script>
</html>

6
landingpages/landingpage/index.js
View File

@@ -64,7 +64,7 @@ gsap.to(".reveal-up", {
y: "100%",
})
const slideShowContainer = document.querySelector("#slideshow")
// const slideShowContainer = document.querySelector("#slideshow")
gsap.fromTo(".slide-in", {
y: "100%"
@@ -150,6 +150,6 @@ sections.forEach((sec) => {
const reviewContainer = document.querySelector(".review-container")
const reviewSlideShow = new SlideShow(reviewContainer, true, 10000)
// const reviewContainer = document.querySelector(".review-container")
// const reviewSlideShow = new SlideShow(reviewContainer, true, 10000)

196
landingpages/tailwind/tailwind-runtime.css
View File

@@ -585,10 +585,6 @@ video {
top: 0.5rem;
}
.tw-top-20 {
top: 5rem;
}
.tw-top-3 {
top: 0.75rem;
}
@@ -651,10 +647,6 @@ video {
margin-top: 2rem;
}
.tw-mt-\[5\%\] {
margin-top: 5%;
}
.tw-mt-auto {
margin-top: auto;
}
@@ -699,10 +691,6 @@ video {
height: 60px;
}
.tw-h-\[80px\] {
height: 80px;
}
.tw-h-\[90vh\] {
height: 90vh;
}
@@ -719,10 +707,6 @@ video {
max-height: 120px;
}
.tw-max-h-\[800px\] {
max-height: 800px;
}
.tw-max-h-\[90\%\] {
max-height: 90%;
}
@@ -759,10 +743,6 @@ video {
min-height: 70vh;
}
.tw-min-h-\[80px\] {
min-height: 80px;
}
.tw-min-h-full {
min-height: 100%;
}
@@ -791,10 +771,6 @@ video {
width: 50px;
}
.tw-w-\[80px\] {
width: 80px;
}
.tw-w-full {
width: 100%;
}
@@ -803,10 +779,6 @@ video {
width: max-content;
}
.tw-min-w-\[80px\] {
min-width: 80px;
}
.tw-min-w-full {
min-width: 100%;
}
@@ -819,18 +791,10 @@ video {
max-width: 120px;
}
.tw-max-w-\[30\%\] {
max-width: 30%;
}
.tw-max-w-\[450px\] {
max-width: 450px;
}
.tw-max-w-\[50\%\] {
max-width: 50%;
}
.tw-max-w-\[80vw\] {
max-width: 80vw;
}
@@ -900,10 +864,6 @@ video {
place-content: space-around;
}
.tw-place-items-start {
place-items: start;
}
.tw-place-items-center {
place-items: center;
}
@@ -948,10 +908,6 @@ video {
gap: 10%;
}
.tw-gap-\[200px\] {
gap: 200px;
}
.tw-gap-\[20px\] {
gap: 20px;
}
@@ -1037,6 +993,21 @@ video {
border-color: rgb(22 163 74 / var(--tw-border-opacity));
}
.\!tw-border-white {
--tw-border-opacity: 1 !important;
border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
}
.tw-border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.tw-border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.\!tw-bg-gray-100 {
--tw-bg-opacity: 1 !important;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
@@ -1097,6 +1068,30 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.tw-bg-red-300 {
--tw-bg-opacity: 1;
background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}
.tw-bg-\[\#fdfdfdaf\] {
background-color: #fdfdfdaf;
}
.\!tw-bg-\[\#155EEF\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(21 94 239 / var(--tw-bg-opacity)) !important;
}
.\!tw-bg-\[\#73a2ff\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(115 162 255 / var(--tw-bg-opacity)) !important;
}
.\!tw-bg-\[\#7E22CE\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(126 34 206 / var(--tw-bg-opacity)) !important;
}
.tw-bg-opacity-0 {
--tw-bg-opacity: 0;
}
@@ -1117,10 +1112,6 @@ video {
padding: 0.75rem;
}
.tw-p-4 {
padding: 1rem;
}
.tw-p-6 {
padding: 1.5rem;
}
@@ -1249,8 +1240,12 @@ video {
line-height: 80px;
}
.tw-leading-relaxed {
line-height: 1.625;
.tw-leading-\[100px\] {
line-height: 100px;
}
.tw-leading-\[90px\] {
line-height: 90px;
}
.\!tw-text-black {
@@ -1308,6 +1303,21 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.tw-text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.tw-text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.tw-text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.tw-underline {
text-decoration-line: underline;
}
@@ -1347,6 +1357,11 @@ video {
--tw-shadow: var(--tw-shadow-colored);
}
.tw-shadow-\[\#7E22CE\] {
--tw-shadow-color: #7E22CE;
--tw-shadow: var(--tw-shadow-colored);
}
.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);
@@ -1402,6 +1417,11 @@ video {
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.hover\:tw-bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:\!tw-text-black:hover {
--tw-text-opacity: 1 !important;
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
@@ -1412,6 +1432,11 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:tw-text-black:hover {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.dark\:tw-bg-\[\#16171A\]:is(.tw-dark *) {
--tw-bg-opacity: 1;
background-color: rgb(22 23 26 / var(--tw-bg-opacity));
@@ -1440,22 +1465,10 @@ video {
margin-top: 30px;
}
.max-lg\:tw-hidden {
display: none;
}
.max-lg\:tw-h-\[60px\] {
height: 60px;
}
.max-lg\:tw-h-auto {
height: auto;
}
.max-lg\:tw-max-h-fit {
max-height: fit-content;
}
.max-lg\:tw-min-h-\[250px\] {
min-height: 250px;
}
@@ -1464,10 +1477,6 @@ video {
min-height: 400px;
}
.max-lg\:tw-min-h-\[60px\] {
min-height: 60px;
}
.max-lg\:tw-min-h-\[60vh\] {
min-height: 60vh;
}
@@ -1476,10 +1485,6 @@ video {
width: 340px;
}
.max-lg\:tw-w-\[60px\] {
width: 60px;
}
.max-lg\:tw-w-full {
width: 100%;
}
@@ -1488,14 +1493,6 @@ video {
min-width: 320px;
}
.max-lg\:tw-min-w-\[60px\] {
min-width: 60px;
}
.max-lg\:tw-max-w-\[320px\] {
max-width: 320px;
}
.max-lg\:tw-max-w-full {
max-width: 100%;
}
@@ -1504,22 +1501,10 @@ video {
flex-direction: column;
}
.max-lg\:tw-place-content-center {
place-content: center;
}
.max-lg\:tw-place-items-end {
place-items: end;
}
.max-lg\:tw-place-items-center {
place-items: center;
}
.max-lg\:tw-gap-16 {
gap: 4rem;
}
.max-lg\:tw-gap-5 {
gap: 1.25rem;
}
@@ -1537,25 +1522,11 @@ video {
padding-right: 0.5rem;
}
.max-lg\:tw-px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.max-lg\:tw-text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.max-lg\:tw-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.max-lg\:tw-font-normal {
font-weight: 400;
}
.max-lg\:tw-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1590,11 +1561,6 @@ video {
line-height: 2rem;
}
.max-md\:tw-text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.max-md\:tw-text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
@@ -1620,14 +1586,6 @@ video {
}
@media (min-width: 1024px) {
.lg\:tw-sticky {
position: sticky;
}
.lg\:tw-top-\[20\%\] {
top: 20%;
}
.lg\:tw-mx-auto {
margin-left: auto;
margin-right: auto;
@@ -1644,10 +1602,6 @@ video {
.lg\:tw-justify-around {
justify-content: space-around;
}
.lg\:tw-p-6 {
padding: 1.5rem;
}
}