757 lines
42 KiB
HTML
757 lines
42 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>PyUIBuilder - A Drag and Drop builder for python GUIs</title>
|
|
<meta name="description" content="A Drag and Drop builder for Python GUIs, including Tkinter, Custom Tkinter and more" />
|
|
<link
|
|
rel="shortcut icon"
|
|
href="./assets/logo/icon48.png"
|
|
type="image/x-icon"
|
|
/>
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<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://about.pyuibuilder.com" />
|
|
<!--Replace with the current website url-->
|
|
<meta property="og:image" content="" />
|
|
|
|
<link rel="stylesheet" href="../tailwind/tailwind-runtime.css" />
|
|
<!-- <link rel="stylesheet" href="./css/tailwind-build.css"> -->
|
|
<link rel="stylesheet" href="css/index.css" />
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
|
|
integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-');
|
|
</script>
|
|
</head>
|
|
<body
|
|
class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-white tw-text-black"
|
|
>
|
|
<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"
|
|
>
|
|
<a class="tw-h-[50px] tw-w-[50px] tw-p-[4px]" href="">
|
|
<img
|
|
src="./assets/logo/logo.png"
|
|
alt="logo"
|
|
class="tw-object tw-h-full tw-w-full"
|
|
/>
|
|
</a>
|
|
<div
|
|
class="collapsible-header animated-collapse max-lg:tw-shadow-md"
|
|
id="collapsed-header-items"
|
|
>
|
|
<div
|
|
class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base
|
|
max-lg:tw-mt-[30px] max-lg:tw-flex-col max-lg:tw-place-items-end
|
|
max-lg:tw-gap-5 lg:tw-mx-auto lg:tw-place-items-center"
|
|
>
|
|
<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/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"
|
|
>
|
|
<a
|
|
href="https://pyuibuilder.com"
|
|
aria-label="start"
|
|
class="tw-rounded-md tw-border-[1px] tw-border-black
|
|
tw-bg-[#0F1727] tw-px-3 tw-py-2 tw-text-white
|
|
tw-duration-[0.3s]
|
|
tw-transition-all hover:tw-translate-x-2
|
|
"
|
|
>
|
|
<span>Start free</span>
|
|
<i class="bi bi-arrow-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-white lg:tw-hidden"
|
|
onclick="toggleHeader()"
|
|
aria-label="menu"
|
|
id="collapse-btn"
|
|
></button>
|
|
</header>
|
|
|
|
<section
|
|
class="hero-section tw-relative tw-flex tw-min-h-[80vh] tw-w-full tw-max-w-[100vw] tw-flex-col
|
|
tw-overflow-hidden max-md:tw-mt-[50px] tw-place-content-center tw-place-items-center"
|
|
id="hero-section"
|
|
>
|
|
|
|
<!-- video container -->
|
|
<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">
|
|
|
|
<div class="tw-max-w-[80vw] max-lg:tw-max-w-full max-lg:tw-w-full tw-scale-0 tw-transition-transform tw-duration-500 tw-p-6 tw-rounded-xl max-lg:tw-px-2 tw-w-full tw-gap-2 tw-shadow-md
|
|
tw-h-[90vh] max-lg:tw-h-auto max-lg:tw-min-h-[400px] tw-bg-white dark:tw-bg-[#16171A] tw-max-h-full
|
|
" id="video-container">
|
|
<div class="tw-w-full tw-flex">
|
|
<button type="button" onclick="closeVideo()" class="tw-ml-auto tw-text-xl" title="close">
|
|
<i class="bi bi-x-circle-fill"></i>
|
|
</button>
|
|
</div>
|
|
<div class="tw-flex tw-w-full tw-rounded-xl tw-px-[5%] max-md:tw-px-2 tw-min-h-[300px] tw-max-h-[90%] tw-h-full">
|
|
|
|
<div class="tw-relative tw-bg-black tw-min-w-full tw-min-h-full tw-overflow-clip tw-rounded-md">
|
|
<!-- add your youtube video link here -->
|
|
<iframe class="tw-absolute tw-top-[50%] tw--translate-y-[50%] tw-left-[50%] tw--translate-x-[50%] tw-w-full tw-h-full" src="https://www.youtube.com/embed/CjwkUoGDX2g?si=gGG8Bs0Qc_J8ZF3a&controls=1&rel=1&showinfo=0&autoplay=0&loop=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="tw-flex tw-h-full max-lg:tw-mt-10 max-lg:tw-min-h-[80vh] tw-min-h-[70vh] tw-w-full tw-flex-col tw-place-content-center tw-gap-6 tw-p-[5%] max-xl:tw-place-items-center max-lg:tw-p-4"
|
|
>
|
|
<div
|
|
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-[90px]
|
|
max-lg:tw-text-4xl tw-text-[#0F1727]
|
|
max-md:tw-leading-snug"
|
|
>
|
|
<span class=""> Build Python UI's using <span class="tw-px-3 t"></span>
|
|
</span>
|
|
<br />
|
|
<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"
|
|
>
|
|
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
|
|
</div>
|
|
|
|
<div
|
|
class="reveal-up tw-mt-10 tw-flex tw-place-items-center tw-gap-4"
|
|
>
|
|
<a
|
|
class="btn !tw-bg-[#0F1727] !tw-text-white tw-shadow-lg tw-shadow-[#4d395e] 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-[#0F1727] !tw-text-[#0F1727] !tw-bg-transparent tw-transition-colors tw-duration-[0.3s] hover:!tw-bg-white hover:!tw-text-black"
|
|
onclick="openVideo()"
|
|
|
|
>
|
|
<i class="bi bi-play-circle-fill"></i>
|
|
<span>Watch video</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section
|
|
class="tw-relative tw-flex tw-w-full tw-min-h-[50vh] tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-p-8"
|
|
>
|
|
|
|
<div class="reveal-up tw-flex tw-border-[1px] max-lg:tw-w-full tw-border-black tw-rounded-md tw-p-2 tw-max-w-[850px] tw-w-[1000px] tw-min-h-[550px] max-lg:tw-min-w-[320px] max-lg:tw-min-h-[250px] max-lg:tw-h-auto">
|
|
|
|
<div class="tw-relative tw-bg-black tw-min-w-full tw-min-h-full tw-overflow-clip tw-rounded-md">
|
|
<!-- <iframe class="tw-absolute tw-top-[50%] tw--translate-y-[50%] tw-left-[50%] tw--translate-x-[50%] tw-w-full tw-h-full" src="https://www.youtube.com/embed/aXq0A6iJoKU?si=dF3UZT2eTRDU8u7a?si=QOMSCki8Jl30_CkW&controls=1&rel=0&showinfo=0&autoplay=1&loop=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> -->
|
|
<img class="tw-object-contain tw-w-full tw-h-full"
|
|
alt="Pyui gif" src="./assets/images/home/promo.gif" >
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="tw-relative tw-flex tw-w-full tw-min-h-[100vh] tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-p-8"
|
|
>
|
|
|
|
<h2 class="tw-text-5xl tw-text-center tw-font-medium tw-uppercase">
|
|
Everything you need <br>
|
|
to perfect Python GUIs
|
|
</h2>
|
|
<div
|
|
class="tw-flex tw-flex-col tw-max-w-[1150px] max-lg:tw-max-w-full tw-h-full
|
|
tw-p-4 tw-mt-4 max-lg:tw-place-content-center tw-gap-8"
|
|
>
|
|
|
|
<div class="max-xl:tw-flex max-xl:tw-flex-col tw-place-items-center tw-grid tw-grid-cols-3 tw-gap-8
|
|
tw-place-content-center tw-auto-rows-auto">
|
|
|
|
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
|
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
|
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
|
hover:tw-scale-[1.02]">
|
|
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
|
<img src="./assets/images/home/benefits/1.svg"
|
|
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
|
|
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
|
|
</div>
|
|
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Drag and Drop editor</h2>
|
|
<p class="tw-leading-normal tw-text-gray-800 tw-overflow-clip">
|
|
Easily drag and drop desired widgets from sidebar and create beautiful Python GUI's
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
|
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
|
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
|
hover:tw-scale-[1.02]">
|
|
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
|
<img src="./assets/images/home/benefits/1.svg"
|
|
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
|
|
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
|
|
</div>
|
|
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Support for multiple UI libraries</h2>
|
|
<p class="tw-leading-normal tw-text-gray-800 tw-overflow-clip">
|
|
We currently support multiple UI libraries such as Tkinter, CustomTk and soon will offer support for PySide and
|
|
kivy.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
|
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
|
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
|
hover:tw-scale-[1.02]">
|
|
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
|
<img src="./assets/images/home/benefits/1.svg"
|
|
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
|
|
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
|
|
</div>
|
|
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Supports many UI Widgets</h2>
|
|
<p class="tw-leading-normal tw-text-gray-800 tw-overflow-clip">
|
|
Our editor includes pre-defined widgets like Buttons and Labels, compatible with Pack/Flex, Grid, and absolute layouts.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
|
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
|
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
|
hover:tw-scale-[1.02]">
|
|
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
|
<img src="./assets/images/home/benefits/1.svg"
|
|
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
|
|
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
|
|
</div>
|
|
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Generate clean Python code</h2>
|
|
<p class="tw-leading-normal tw-text-gray-800">
|
|
Our editor doesn't just let you drag and drop, but also lets you generate clean pyhon code in
|
|
library of your choice
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
|
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
|
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
|
hover:tw-scale-[1.02]">
|
|
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
|
<img src="./assets/images/home/benefits/1.svg"
|
|
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
|
|
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
|
|
</div>
|
|
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">3rd Party Plugin support</h2>
|
|
<p class="tw-leading-normal tw-text-gray-800">
|
|
We support your favorite 3rd party widgets such as video player, Map viewer and more.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
|
|
<div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card tw-gap-5 tw-flex
|
|
tw-flex-col tw-w-full tw-h-full tw-bg-[#eeeeee] tw-border-2 tw-border-white tw-rounded-3xl
|
|
hover:tw-scale-[1.02]">
|
|
<div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
|
|
<img src="./assets/images/home/benefits/1.svg"
|
|
alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
|
|
<!-- <i class="bi bi-grid-1x2-fill"></i> -->
|
|
</div>
|
|
<h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Supports asset upload</h2>
|
|
<p class="tw-leading-normal tw-text-gray-800">
|
|
Adding images and logos is important while developing GUIs so we support asset uploads.
|
|
The best part is nothing is sent to server.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<a
|
|
class="tw-mt-6 btn tw-my-6 tw-flex tw-gap-1 tw-bg-[#0F1727]
|
|
tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03] tw-group"
|
|
href="#pricing"
|
|
>
|
|
Make it yours
|
|
<i class="bi bi-arrow-right tw-transition-transform group-hover:tw-translate-x-1 tw-duration-300"></i>
|
|
</a>
|
|
</section>
|
|
|
|
<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">Pre-order your License</h3>
|
|
|
|
<div class="tw-max-w-[650px] tw-my-2">
|
|
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.
|
|
</div>
|
|
<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 class="tw-text-5xl tw-font-semibold">$0</span>
|
|
</h3>
|
|
<p class="tw-mt-3 tw-text-base tw-text-center tw-text-gray-800">
|
|
Free to use forever, but for added features and to support open-source development, consider buying a lifetime license.
|
|
</p>
|
|
<hr />
|
|
<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 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 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 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>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
|
|
</li>
|
|
<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 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 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 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 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 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 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 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>
|
|
<a
|
|
href="https://pyuibuilder.com"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
class=" !tw-bg-[#0F1727] tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.01] !tw-mt-auto !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
|
|
>
|
|
<span>Get Started</span>
|
|
<!-- <CrownFilled /> -->
|
|
</a>
|
|
</div>
|
|
|
|
<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-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
|
|
<div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
|
|
Limited time offer
|
|
</div>
|
|
<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 class="tw-text-5xl tw-font-semibold">
|
|
<s class="tw-font-medium tw-text-4xl">$129</s>
|
|
<span>$29</span>
|
|
</span>
|
|
<span class="tw-text-2xl tw-text-gray-600">Forever</span>
|
|
</h3>
|
|
<p class="tw-mt-3 tw-text-center tw-text-gray-600">
|
|
Support open-source development 🚀. Plus, get added benefits.
|
|
</p>
|
|
<hr />
|
|
<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 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 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>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
|
|
</li>
|
|
<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 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 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 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 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 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 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 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 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>
|
|
|
|
</ul>
|
|
|
|
<a
|
|
href="https://ko-fi.com/s/4a3dffb3b9"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
class="tw-mt-8 tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.01] !tw-bg-[#0F1727] !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
|
|
>
|
|
<span>Buy License</span>
|
|
<!-- <CrownFilled /> -->
|
|
</a>
|
|
</div>
|
|
|
|
<div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-[3px] tw-border-solid
|
|
!tw-border-green-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
|
|
<div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
|
|
Limited time offer
|
|
</div>
|
|
<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 class="tw-text-5xl tw-font-semibold">
|
|
<s class="tw-font-medium tw-text-4xl">$180</s>
|
|
<span>$49</span>
|
|
</span>
|
|
<span class="tw-text-2xl tw-text-gray-600">Forever</span>
|
|
</h3>
|
|
<p class="tw-mt-3 tw-text-center tw-text-gray-600">
|
|
Support open-source development 🚀. Plus, get added benefits.
|
|
</p>
|
|
<hr />
|
|
<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 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 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>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
|
|
</li>
|
|
<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 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 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 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 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 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 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 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 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>
|
|
|
|
</ul>
|
|
|
|
<a
|
|
href="https://ko-fi.com/s/560a3b6b05"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
class="tw-mt-8 !tw-bg-[#0F1727] tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.02] !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md
|
|
tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
|
|
>
|
|
<span>Buy License</span>
|
|
<!-- <i class="bi bi-crown"></i> -->
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
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"
|
|
>
|
|
Faq
|
|
</h3>
|
|
<div
|
|
class="tw-mt-5 tw-flex tw-min-h-[300px] tw-w-full tw-max-w-[850px] tw-flex-col tw-gap-4"
|
|
>
|
|
<div
|
|
class="faq tw-w-full"
|
|
>
|
|
<div
|
|
class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
|
|
>
|
|
<span>Is the source code available?</span>
|
|
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
|
|
</div>
|
|
<div class="content">
|
|
Yes, source code is available at
|
|
<a target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="https://github.com/PaulleDemon/PyUIBuilder"
|
|
class="tw-underline">Github</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="faq tw-w-full"
|
|
>
|
|
<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 PyUIBuilder for free?</span>
|
|
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
|
|
</div>
|
|
<div class="content">
|
|
Yes, PyUIBuilder is free to use forever, however to support
|
|
open-source development, some features are only available to premium users.
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="faq tw-w-full"
|
|
>
|
|
<div
|
|
class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
|
|
>
|
|
<span>How can I save and load UI files?</span>
|
|
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
|
|
</div>
|
|
<div class="content">
|
|
Saving and loading UI Files will be made available to premium users, when it becomes available.
|
|
If you hold a premium license you'll be notified of the release.
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="faq tw-w-full"
|
|
>
|
|
<div
|
|
class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
|
|
>
|
|
<span>When will premium features roll out</span>
|
|
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
|
|
</div>
|
|
<div class="content">
|
|
Premium features will start rolling out from mid of April in phase wise.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<footer
|
|
class="tw-mt-auto tw-flex tw-w-full tw-place-content-around tw-gap-3 tw-p-[5%] tw-px-[10%] tw-text-black max-md:tw-flex-col"
|
|
>
|
|
<div
|
|
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.png"
|
|
alt="logo"
|
|
srcset=""
|
|
class="tw-max-w-[120px]"
|
|
/>
|
|
|
|
<div class="tw-mt-3 tw-text-lg tw-font-semibold">Follow</div>
|
|
<div class="tw-flex tw-gap-4 tw-text-2xl">
|
|
<a href="https://www.youtube.com/@paultalkstech"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
aria-label="Youtube">
|
|
<i class="bi bi-youtube"></i>
|
|
</a>
|
|
<a
|
|
href="https://twitter.com/@pauls_freeman"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
aria-label="Twitter"
|
|
>
|
|
<i class="bi bi-twitter"></i>
|
|
</a>
|
|
<a
|
|
href="https://github.com/PaulleDemon"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
class="tw-h-[40px] tw-w-[40px]"
|
|
aria-label="Github"
|
|
>
|
|
<i class="bi bi-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
|
|
<!-- <h2 class="tw-text-3xl max-md:tw-text-xl">Company</h2> -->
|
|
<div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
|
|
<a href="#features" class="footer-link">Features</a>
|
|
<a href="#pricing" class="footer-link">Pricing</a>
|
|
<a href="https://github.com/PaulleDemon/font-tester-chrome/blob/main/roadmap.md" class="footer-link">Roadmap</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
|
|
<div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
|
|
<a href="" class="footer-link">About</a>
|
|
<a href="#faq" class="footer-link">FAQ</a>
|
|
<a href="https://github.com/PaulleDemon/font-tester-chrome" class="footer-link">Github</a>
|
|
<a href="https://github.com/PaulleDemon/font-tester-chrome" class="footer-link">Report issue</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"
|
|
integrity="sha512-B1lby8cGcAUU3GR+Fd809/ZxgHbfwJMp0jLTVfHiArTuUt++VqSlJpaJvhNtRf3NERaxDNmmxkdx2o+aHd4bvw=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js"
|
|
integrity="sha512-AY2+JxnBETJ0wcXnLPCcZJIJx0eimyhz3OJ55k2Jx4RtYC+XdIi2VtJQ+tP3BaTst4otlGG1TtPJ9fKrAUnRdQ=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" integrity="sha512-rd0qOHVMOcez6pLWPVFIv7EfSdGKLt+eafXh4RO/12Fgr41hDQxfGvoi1Vy55QIVcQEujUE1LQrATCLl2Fs+ag==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<script src="./widget/content.js"></script>
|
|
|
|
<script src="./scripts/utils.js"></script>
|
|
<script src="./index.js"></script>
|
|
|
|
<style>
|
|
.swiper-pagination-bullet {
|
|
width: 10px;
|
|
height: 10px;
|
|
text-align: center;
|
|
/* font-size: 12px; */
|
|
opacity: 1;
|
|
background: #dad8d8fa;
|
|
left: auto;
|
|
}
|
|
.swiper-pagination-bullet:hover {
|
|
color: #000;
|
|
opacity: 1;
|
|
background: #ede0e0bd;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background: #000000 !important;
|
|
}
|
|
|
|
.swiper {
|
|
padding: 10px !important;
|
|
}
|
|
</style>
|
|
|
|
|
|
</html>
|