added landing page
This commit is contained in:
paul
9622
landingpages/landingpage/assets/images/background/dots.svg
Normal file
9622
landingpages/landingpage/assets/images/background/dots.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 216 KiB |
BIN
landingpages/landingpage/assets/logo/logo.png
Normal file
BIN
landingpages/landingpage/assets/logo/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
345
landingpages/landingpage/css/index.css
Normal file
345
landingpages/landingpage/css/index.css
Normal file
@@ -0,0 +1,345 @@
|
||||
@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*/
|
||||
|
||||
--primary-text-color: #000;
|
||||
--header-link-hover: #000;
|
||||
--input-hover-bd-color: #000;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.fondamento-family{
|
||||
font-family: "Fondamento", handwriting;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
header > .collapsible-header{
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
place-content: center;
|
||||
overflow: hidden;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.animated-collapse{
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.header-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: fit-content;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
transition: background-color 0.5s, color 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.header-links:hover {
|
||||
color: #000000;
|
||||
/* background-color: var(--header-link-hover); */
|
||||
}
|
||||
|
||||
.primary-text-color{
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
|
||||
.signup-img-section{
|
||||
background-image: url("../assets/images/home/darkbg.png");
|
||||
background-position: center; /* Center the image */
|
||||
background-repeat: no-repeat; /* Do not repeat the image */
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.edge-gradient{
|
||||
background: rgb(28, 28, 28);
|
||||
background: linear-gradient(83deg, #ffffff 0%, #ffffff00 20%, #ffffff00 80%, rgb(255, 255, 255) 100%);
|
||||
}
|
||||
|
||||
.scroller{
|
||||
/* width: max-content;
|
||||
flex-wrap: nowrap; */
|
||||
animation: scroll 40s forwards linear infinite;
|
||||
}
|
||||
|
||||
.scroller[data-direction="right"] {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.scroller[data-direction="left"] {
|
||||
animation-direction: forwards;
|
||||
}
|
||||
|
||||
.scroller[data-direction="left"] {
|
||||
animation-direction: forwards;
|
||||
}
|
||||
|
||||
.scroller[data-speed="fast"]{
|
||||
animation-duration: 30s;
|
||||
}
|
||||
|
||||
.scroller[data-speed="slow"]{
|
||||
animation-duration: 80s;
|
||||
}
|
||||
|
||||
.opacity-0{
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.opacity-100{
|
||||
opacity: 100 !important;
|
||||
}
|
||||
|
||||
.btn{
|
||||
padding: 10px 15px;
|
||||
width: max-content;
|
||||
border-radius: 5px;
|
||||
color: var(--btn-color);
|
||||
background-color: var(--btn-bg);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
|
||||
}
|
||||
|
||||
.btn:disabled{
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.input{
|
||||
padding: 10px;
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
/* outline: none; */
|
||||
min-width: 100px;
|
||||
border: 1px solid #818080;
|
||||
/* transition: border 0.3s; */
|
||||
}
|
||||
|
||||
.input:active, .input:focus, .input:focus-within{
|
||||
border: 1px solid var(--input-hover-bd-color) !important;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
display: inline-block;
|
||||
animation: scroll 10s linear infinite;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
display: inline-block;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link{
|
||||
color: #434242;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-link:hover{
|
||||
color: #0b0b0b;
|
||||
}
|
||||
|
||||
/* Navigation dots styling */
|
||||
.dots-container {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #bbb;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dots-container .active,
|
||||
.dot:hover {
|
||||
background-color: #717171;
|
||||
}
|
||||
|
||||
/* Next & previous buttons */
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
padding: 16px;
|
||||
margin-top: -22px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Position the "next button" to the right */
|
||||
.next {
|
||||
right: 0px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* On hover, add a black background color with a little bit see-through */
|
||||
.prev:hover,
|
||||
.next:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Style for the collapsible content such as faq commonly known as: accordion */
|
||||
|
||||
.faq{
|
||||
background-color: #fff;
|
||||
color: #000000;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
background-color: inherit;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
padding: 15px 18px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
transition: height 0.4s;
|
||||
}
|
||||
|
||||
.faq .content {
|
||||
padding: 0px 18px;
|
||||
color: #232323;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
text-align: justify;
|
||||
max-height: 0px;
|
||||
transition: max-height 0.4s, padding 0.4s;
|
||||
}
|
||||
|
||||
.faq-accordion .active,
|
||||
.faq-accordion:hover {
|
||||
/* background-color: #2e2c2c; */
|
||||
}
|
||||
|
||||
@media not all and (min-width: 1024px) {
|
||||
header .collapsible-header {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
height: 100dvh;
|
||||
width: 0vw;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
place-items: end;
|
||||
background-color: #e4e4e4;
|
||||
color: #111111;
|
||||
overflow-y: auto;
|
||||
box-shadow: 3px 0px 3px 2px #9f9f9f;
|
||||
}
|
||||
|
||||
.header-links{
|
||||
color: #0c0c0c;
|
||||
}
|
||||
|
||||
}
|
||||
1
landingpages/landingpage/css/tailwind-build.css
Normal file
1
landingpages/landingpage/css/tailwind-build.css
Normal file
File diff suppressed because one or more lines are too long
10
landingpages/landingpage/css/tailwind.css
Normal file
10
landingpages/landingpage/css/tailwind.css
Normal file
@@ -0,0 +1,10 @@
|
||||
@config "../tailwind.config.js";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components{
|
||||
}
|
||||
|
||||
|
||||
734
landingpages/landingpage/index.html
Normal file
734
landingpages/landingpage/index.html
Normal file
@@ -0,0 +1,734 @@
|
||||
<!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://github.com/PaulleDemon/font-tester-chrome" />
|
||||
<!--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/font-tester-chrome"> 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
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://chromewebstore.google.com/detail/font-tester/deachoodakeofjlfikfkohihnpcgiaim"
|
||||
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"
|
||||
>
|
||||
<span>Download</span>
|
||||
<i class="bi bi-download"></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"
|
||||
onclick="toggleHeader()"
|
||||
aria-label="menu"
|
||||
id="collapse-btn"
|
||||
></button>
|
||||
</header>
|
||||
|
||||
<section
|
||||
class="hero-section tw-relative tw-flex tw-min-h-[60vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden max-md:tw-mt-[50px]"
|
||||
id="hero-section"
|
||||
>
|
||||
|
||||
<!-- 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
|
||||
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/aXq0A6iJoKU?si=dF3UZT2eTRDU8u7a&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-[60vh] 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-[80px] max-lg:tw-text-4xl 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>
|
||||
</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"
|
||||
>
|
||||
Tired of writing code to build you python GUIs, well now you can easily
|
||||
</div>
|
||||
|
||||
<div
|
||||
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]"
|
||||
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"
|
||||
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="font tester gif" src="./assets/images/home/fonttester.gif" > -->
|
||||
</div>
|
||||
|
||||
</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]">
|
||||
<h3>
|
||||
<span className="tw-text-5xl tw-font-semibold">$0</span>
|
||||
</h3>
|
||||
<p className="tw-mt-3 tw-text-base tw-text-center tw-text-gray-600">
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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
|
||||
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">
|
||||
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">
|
||||
Hobby
|
||||
</div>
|
||||
<h3>
|
||||
<span className="tw-text-5xl tw-font-semibold">
|
||||
<s className="tw-font-medium tw-text-4xl">$129</s>
|
||||
<span>$29</span>
|
||||
</span>
|
||||
<span className="tw-text-2xl tw-text-gray-600">Forever</span>
|
||||
</h3>
|
||||
<p className="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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span>Commercial use</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<a
|
||||
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"
|
||||
>
|
||||
<span>Buy License</span>
|
||||
<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
|
||||
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">
|
||||
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">
|
||||
Commercial
|
||||
</div>
|
||||
<h3>
|
||||
<span className="tw-text-5xl tw-font-semibold">
|
||||
<s className="tw-font-medium tw-text-4xl">$180</s>
|
||||
<span>$49</span>
|
||||
</span>
|
||||
<span className="tw-text-2xl tw-text-gray-600">Forever</span>
|
||||
</h3>
|
||||
<p className="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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span>Commercial use</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<a
|
||||
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"
|
||||
>
|
||||
<span>Buy License</span>
|
||||
<CrownFilled />
|
||||
</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, this is an open-source project, you can visit the
|
||||
source code on
|
||||
<a target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/PaulleDemon/font-tester-chrome"
|
||||
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 extension 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
|
||||
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>Is Safari, Edge and Firefox addons available?</span>
|
||||
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
The Safari, Edge and firefox addons will be available for premium users when released.
|
||||
If you purchase a license, you'll be notified when its released.
|
||||
</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>Where can I find the upcoming features?</span>
|
||||
<i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
You can find the upcoming features on the
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/PaulleDemon/font-tester-chrome/blob/main/roadmap.md"
|
||||
class="tw-underline"
|
||||
>Roadmap</a
|
||||
>
|
||||
</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.svg"
|
||||
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>
|
||||
|
||||
<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>
|
||||
155
landingpages/landingpage/index.js
Normal file
155
landingpages/landingpage/index.js
Normal file
@@ -0,0 +1,155 @@
|
||||
// initialization
|
||||
|
||||
const RESPONSIVE_WIDTH = 1024
|
||||
|
||||
let headerWhiteBg = false
|
||||
let isHeaderCollapsed = window.innerWidth < RESPONSIVE_WIDTH
|
||||
const collapseBtn = document.getElementById("collapse-btn")
|
||||
const collapseHeaderItems = document.getElementById("collapsed-header-items")
|
||||
|
||||
|
||||
|
||||
function onHeaderClickOutside(e) {
|
||||
|
||||
if (!collapseHeaderItems.contains(e.target)) {
|
||||
toggleHeader()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function toggleHeader() {
|
||||
if (isHeaderCollapsed) {
|
||||
// collapseHeaderItems.classList.remove("max-md:tw-opacity-0")
|
||||
collapseHeaderItems.classList.add("opacity-100",)
|
||||
collapseHeaderItems.style.width = "60vw"
|
||||
collapseBtn.classList.remove("bi-list")
|
||||
collapseBtn.classList.add("bi-x", "max-lg:tw-fixed")
|
||||
isHeaderCollapsed = false
|
||||
|
||||
setTimeout(() => window.addEventListener("click", onHeaderClickOutside), 1)
|
||||
|
||||
} else {
|
||||
collapseHeaderItems.classList.remove("opacity-100")
|
||||
collapseHeaderItems.style.width = "0vw"
|
||||
collapseBtn.classList.remove("bi-x", "max-lg:tw-fixed")
|
||||
collapseBtn.classList.add("bi-list")
|
||||
isHeaderCollapsed = true
|
||||
window.removeEventListener("click", onHeaderClickOutside)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function responsive() {
|
||||
if (window.innerWidth > RESPONSIVE_WIDTH) {
|
||||
collapseHeaderItems.style.width = ""
|
||||
|
||||
} else {
|
||||
isHeaderCollapsed = true
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("resize", responsive)
|
||||
|
||||
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
|
||||
gsap.to(".reveal-up", {
|
||||
opacity: 0,
|
||||
y: "100%",
|
||||
})
|
||||
|
||||
const slideShowContainer = document.querySelector("#slideshow")
|
||||
|
||||
gsap.fromTo(".slide-in", {
|
||||
y: "100%"
|
||||
}, {
|
||||
y: "0%",
|
||||
duration: 1,
|
||||
})
|
||||
|
||||
|
||||
const videoBg = document.querySelector("#video-container-bg")
|
||||
const videoContainer = document.querySelector("#video-container")
|
||||
|
||||
function openVideo(){
|
||||
videoBg.classList.remove("tw-scale-0", "tw-opacity-0")
|
||||
videoBg.classList.add("tw-scale-100", "tw-opacity-100")
|
||||
videoContainer.classList.remove("tw-scale-0")
|
||||
videoContainer.classList.add("tw-scale-100")
|
||||
|
||||
document.body.classList.add("modal-open")
|
||||
}
|
||||
|
||||
function closeVideo(){
|
||||
videoContainer.classList.add("tw-scale-0")
|
||||
videoContainer.classList.remove("tw-scale-100")
|
||||
|
||||
setTimeout(() => {
|
||||
videoBg.classList.remove("tw-scale-100", "tw-opacity-100")
|
||||
videoBg.classList.add("tw-scale-0", "tw-opacity-0")
|
||||
}, 400)
|
||||
|
||||
|
||||
document.body.classList.remove("modal-open")
|
||||
|
||||
}
|
||||
|
||||
const faqAccordion = document.querySelectorAll('.faq-accordion')
|
||||
|
||||
faqAccordion.forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
this.classList.toggle('active')
|
||||
|
||||
// Toggle 'rotate' class to rotate the arrow
|
||||
let content = this.nextElementSibling
|
||||
|
||||
// content.classList.toggle('!tw-hidden')
|
||||
if (content.style.maxHeight === '200px') {
|
||||
content.style.maxHeight = '0px'
|
||||
content.style.padding = '0px 18px'
|
||||
|
||||
} else {
|
||||
content.style.maxHeight = '200px'
|
||||
content.style.padding = '20px 18px'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
// ------------- reveal section animations ---------------
|
||||
|
||||
const sections = gsap.utils.toArray("section")
|
||||
|
||||
sections.forEach((sec) => {
|
||||
|
||||
const revealUptimeline = gsap.timeline({paused: true,
|
||||
scrollTrigger: {
|
||||
trigger: sec,
|
||||
start: "10% 80%", // top of trigger hits the top of viewport
|
||||
end: "20% 90%",
|
||||
// markers: true,
|
||||
// scrub: 1,
|
||||
}})
|
||||
|
||||
revealUptimeline.to(sec.querySelectorAll(".reveal-up"), {
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
y: "0%",
|
||||
stagger: 0.2,
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const reviewContainer = document.querySelector(".review-container")
|
||||
const reviewSlideShow = new SlideShow(reviewContainer, true, 10000)
|
||||
|
||||
141
landingpages/landingpage/scripts/utils.js
Normal file
141
landingpages/landingpage/scripts/utils.js
Normal file
@@ -0,0 +1,141 @@
|
||||
class SlideShow{
|
||||
|
||||
constructor(slideContainer, autoNext=true, timeout=6000){
|
||||
|
||||
this.slideContainer = slideContainer
|
||||
this.autoNext = autoNext
|
||||
|
||||
this.slideIndex = 0
|
||||
this.timeout = null
|
||||
|
||||
this.timeoutTime = timeout
|
||||
|
||||
const dots = this.slideContainer.querySelectorAll('.dot')
|
||||
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
this.showSlides(index)
|
||||
})
|
||||
})
|
||||
|
||||
const nextBtn = this.slideContainer.querySelector(".next")
|
||||
const previousBtn = this.slideContainer.querySelector(".prev")
|
||||
|
||||
if (nextBtn && previousBtn){
|
||||
|
||||
nextBtn.addEventListener("click", () => {this.plusSlides(1)})
|
||||
previousBtn.addEventListener("click", () => {this.plusSlides(-1)})
|
||||
|
||||
}
|
||||
|
||||
this.plusSlides = this.plusSlides.bind(this)
|
||||
this.currentSlide = this.currentSlide.bind(this)
|
||||
this.showSlides = this.showSlides.bind(this)
|
||||
|
||||
this.showSlides(this.slideIndex)
|
||||
|
||||
}
|
||||
|
||||
plusSlides(i) {
|
||||
this.showSlides(this.slideIndex + i)
|
||||
}
|
||||
|
||||
currentSlide(i) {
|
||||
this.showSlides(this.slideIndex + i)
|
||||
}
|
||||
|
||||
showSlides(n){
|
||||
let slides = this.slideContainer.querySelectorAll(".slides")
|
||||
let dots = this.slideContainer.querySelectorAll(".dot")
|
||||
|
||||
this.slideIndex = n
|
||||
|
||||
if (n >= slides.length) {
|
||||
this.slideIndex = 0
|
||||
}
|
||||
if (n < 0) {
|
||||
this.slideIndex = slides.length -1
|
||||
}
|
||||
for (let i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none"
|
||||
}
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
dots[i].className = dots[i].className.replace("active", "")
|
||||
}
|
||||
|
||||
slides[this.slideIndex].style.display = "block"
|
||||
dots[this.slideIndex].className += " active"
|
||||
|
||||
if (this.autoNext){
|
||||
|
||||
clearTimeout(this.timeout)
|
||||
|
||||
this.timeout = setTimeout(() => this.plusSlides(1), this.timeoutTime)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
class Modal{
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} modal
|
||||
*/
|
||||
constructor(modal, title, description){
|
||||
|
||||
this.modal = modal
|
||||
|
||||
const closeBtn = modal.querySelector("#modal-close")
|
||||
|
||||
this.show = this.show.bind(this)
|
||||
this.close = this.close.bind(this)
|
||||
this.updateModal = this.updateModal.bind(this)
|
||||
this.updateButton = this.updateButton.bind(this)
|
||||
this.showModalInput = this.showModalInput.bind(this)
|
||||
this.hideModalInput = this.hideModalInput.bind(this)
|
||||
|
||||
this.updateModal(title, description)
|
||||
closeBtn.addEventListener("click", this.close)
|
||||
|
||||
}
|
||||
|
||||
close(){
|
||||
this.modal.classList.add("tw-hidden")
|
||||
}
|
||||
|
||||
show(){
|
||||
this.modal.classList.remove("tw-hidden")
|
||||
}
|
||||
|
||||
showModalInput(){
|
||||
const input = this.modal.querySelector("#modal-input")
|
||||
input.classList.remove("tw-hidden")
|
||||
}
|
||||
|
||||
hideModalInput(){
|
||||
const input = this.modal.querySelector("#modal-input")
|
||||
input.classList.add("tw-hidden")
|
||||
}
|
||||
|
||||
updateButton(text, link){
|
||||
|
||||
const actionBtn = this.modal.querySelector("#modal-action-btn")
|
||||
actionBtn.textContent = text
|
||||
if (link){
|
||||
actionBtn.setAttribute("href", link)
|
||||
}else{
|
||||
actionBtn.removeAttribute("href")
|
||||
}
|
||||
actionBtn.addEventListener("click", this.close)
|
||||
}
|
||||
|
||||
updateModal(title, description){
|
||||
|
||||
this.modal.querySelector("#modal-title").textContent = title
|
||||
this.modal.querySelector("#modal-description").textContent = description
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
21
landingpages/landingpage/tailwind.config.js
Normal file
21
landingpages/landingpage/tailwind.config.js
Normal file
@@ -0,0 +1,21 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
prefix: 'tw-',
|
||||
important: false,
|
||||
content: [
|
||||
"landing-page/**/*.{html, jsx, js}",
|
||||
"landing-page/**/*.js",
|
||||
"landing-page/**/*.html",
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#fff',
|
||||
secondary: "#000",
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
1
landingpages/landingpage/widget/background.js
Normal file
1
landingpages/landingpage/widget/background.js
Normal file
@@ -0,0 +1 @@
|
||||
(()=>{chrome.runtime.onInstalled.addListener((()=>{}));let e=!1;function r(){const e=document.getElementById("font-selector-root"),r=document.getElementById("font-tester-script");e&&e.remove(),r&&r.remove()}chrome.action.onClicked.addListener((t=>{e?chrome.scripting.executeScript({target:{tabId:t.id},function:r},(()=>{chrome.runtime.lastError?console.error(chrome.runtime.lastError.message):e=!1})):chrome.scripting.executeScript({target:{tabId:t.id},files:["content.js"]},(r=>{chrome.runtime.lastError?console.error(chrome.runtime.lastError.message):e=!0}))})),chrome.runtime.onMessage.addListener(((t,o,n)=>{"widgetClosed"===t.action&&(e=!1,chrome.scripting.executeScript({target:{tabId:o.tab?.id},function:r},(()=>{chrome.runtime.lastError?console.error(chrome.runtime.lastError.message):e=!1})))}))})();
|
||||
2
landingpages/landingpage/widget/content.js
Normal file
2
landingpages/landingpage/widget/content.js
Normal file
File diff suppressed because one or more lines are too long
79
landingpages/landingpage/widget/content.js.LICENSE.txt
Normal file
79
landingpages/landingpage/widget/content.js.LICENSE.txt
Normal file
@@ -0,0 +1,79 @@
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/
|
||||
|
||||
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-is.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
BIN
landingpages/landingpage/widget/icons/icon128.png
Normal file
BIN
landingpages/landingpage/widget/icons/icon128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
landingpages/landingpage/widget/icons/icon16.png
Normal file
BIN
landingpages/landingpage/widget/icons/icon16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 191 B |
BIN
landingpages/landingpage/widget/icons/icon32.png
Normal file
BIN
landingpages/landingpage/widget/icons/icon32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
BIN
landingpages/landingpage/widget/icons/icon48.png
Normal file
BIN
landingpages/landingpage/widget/icons/icon48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 667 B |
1
landingpages/landingpage/widget/index.html
Normal file
1
landingpages/landingpage/widget/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><link rel="icon" href="%PUBLIC_URL%/favicon.ico"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#000000"><meta name="description" content="Chrome extension for testing fonts, created by Paul"><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"><link rel="manifest" href="%PUBLIC_URL%/manifest.json"><title>Font Tester - Test 1000+ google fonts</title><script defer="defer" src="background.js"></script><script defer="defer" src="content.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="font-selector-widget"></div><div>This is a fantastic line</div><div>This is a fantastic line for testing purposes only</div></body></html>
|
||||
30
landingpages/landingpage/widget/manifest.json
Normal file
30
landingpages/landingpage/widget/manifest.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Font tester",
|
||||
"description": "Test different fonts types on a webpage. Made for developers",
|
||||
"version": "1.0",
|
||||
"icons": {
|
||||
"16": "icons/icon16.png",
|
||||
"32": "icons/icon32.png",
|
||||
"48": "icons/icon48.png",
|
||||
"128": "icons/icon128.png"
|
||||
},
|
||||
"action": {
|
||||
"default_title": "Font tester - Test different font types"
|
||||
},
|
||||
"permissions": ["activeTab", "scripting"],
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"web_accessible_resources": [{
|
||||
"resources": [
|
||||
"content.js",
|
||||
"bmc.svg",
|
||||
"assets/*",
|
||||
"dist/*.js",
|
||||
"dist/*.css"
|
||||
],
|
||||
"matches": ["<all_urls>"]
|
||||
}]
|
||||
|
||||
}
|
||||
@@ -3,9 +3,9 @@ module.exports = {
|
||||
prefix: 'tw-',
|
||||
important: false,
|
||||
content: [
|
||||
"landingpages/**/*.{html, jsx, js}",
|
||||
"landingpages/**/*.js",
|
||||
"landingpages/**/*.html",
|
||||
"landingpages/landingpage/**/*.{html, jsx, js}",
|
||||
"landingpages/landingpage/**/*.js",
|
||||
"landingpages/landingpage/**/*.html",
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user