diff --git a/public/index.html b/public/index.html index aa069f2..376e91b 100644 --- a/public/index.html +++ b/public/index.html @@ -15,6 +15,7 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> + - React App + PyUI builder diff --git a/src/assets/logo/bmc.svg b/src/assets/logo/bmc.svg new file mode 100644 index 0000000..edddb83 --- /dev/null +++ b/src/assets/logo/bmc.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo/ko-fi.png b/src/assets/logo/ko-fi.png new file mode 100644 index 0000000..fdcb58c Binary files /dev/null and b/src/assets/logo/ko-fi.png differ diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js index e9147ec..6cbbe09 100644 --- a/src/sidebar/sidebar.js +++ b/src/sidebar/sidebar.js @@ -1,6 +1,11 @@ import { useEffect, useRef, useMemo, useState } from "react"; -import { CloseCircleFilled } from "@ant-design/icons"; +import { CloseCircleFilled, CrownFilled, GithubFilled, ShareAltOutlined } from "@ant-design/icons"; + +import KO_FI from "../assets/logo/ko-fi.png" +import Premium from "./utils/premium"; +import Share from "./utils/share"; + function Sidebar({tabs}){ @@ -44,7 +49,7 @@ function Sidebar({tabs}){ return (
+ + + + + + + + + + + ko-fi + +
diff --git a/src/sidebar/utils/premium.js b/src/sidebar/utils/premium.js new file mode 100644 index 0000000..6e1c865 --- /dev/null +++ b/src/sidebar/utils/premium.js @@ -0,0 +1,268 @@ +import { useState } from "react" + +import { Modal } from "antd" +import { CrownFilled } from "@ant-design/icons" + + +function Premium({ children, className = "" }) { + + const [premiumModalOpen, setPremiumModalOpen] = useState(false) + + + const onClick = () => { + setPremiumModalOpen(true) + } + + const onClose = (event) => { + event.stopPropagation() + setPremiumModalOpen(false) + } + + + return ( +
+ {children} + Buy Pre-order one Time License} + style={{ zIndex: 14000, gap: '10px', maxWidth: '80vw', placeItems: "center" }} + onCancel={onClose} + centered + onOk={onClose} + footer={null} + width={'auto'} + open={premiumModalOpen} + > +
+ I am Paul, an open-source dev, funding open-source projects by providing custom works. + If you find this tool useful and want to support its development, consider buying a one time license. +
+
+ By buying pre-order license, you get advance features, priority support, early access, upcoming features, and more. + + more. + +
+ +
+

Choose your plan

+
+ {/* Free Plan */} +
+

+ $0 +

+

+ Free to use forever, but for added features and to support open-source development, consider buying a lifetime license. +

+
+
    +
  • + + Access to web-based editor +
  • +
  • + + Commercial use +
  • +
  • + + Access to UI builder exe for local development +
  • +
  • + + Support for PySlide/PyQt +
  • +
  • + + Preview live +
  • +
  • + + Save and load files +
  • +
  • + + Load plugins locally +
  • +
  • + + Dark theme +
  • +
  • + + Priority support +
  • +
  • + + Early access to new features +
  • + +
+
+ + {/* Paid Plan */} +
+
+ Limited time offer +
+
+ Hobby +
+

+ + $129 + $29 + + Forever +

+

+ Support open-source development 🚀. Plus, get added benefits. +

+
+
    +
  • + + Access to web-based editor +
  • +
  • + + Access to UI builder exe for local development +
  • +
  • + + Preview live +
  • +
  • + + Save and load files +
  • +
  • + + Load plugins locally +
  • +
  • + + Dark theme +
  • +
  • + + Priority support +
  • +
  • + + Early access to new features +
  • +
  • + + Support for PySlide/PyQt +
  • +
  • + + Commercial use +
  • + +
+ + + Buy License + + +
+ + {/* Paid Plan */} +
+
+ Limited time offer +
+
+ Commercial +
+

+ + $180 + $49 + + Forever +

+

+ Support open-source development 🚀. Plus, get added benefits. +

+
+
    +
  • + + Access to web-based editor +
  • +
  • + + Access to UI builder exe for local development +
  • +
  • + + Preview live +
  • +
  • + + Save and load files +
  • +
  • + + Load plugins locally +
  • +
  • + + Dark theme +
  • +
  • + + Priority support +
  • +
  • + + Early access to new features +
  • +
  • + + Support for PySlide/PyQt +
  • +
  • + + Commercial use +
  • + +
+ + + Buy License + + +
+
+
+ + +
+ +
+ ) + +} + +export default Premium \ No newline at end of file diff --git a/src/sidebar/utils/share.js b/src/sidebar/utils/share.js new file mode 100644 index 0000000..a07e768 --- /dev/null +++ b/src/sidebar/utils/share.js @@ -0,0 +1,110 @@ +import { useMemo, useState } from "react" + +import { Modal, message } from "antd" +import { CopyOutlined, FacebookFilled, LinkedinFilled, MediumCircleFilled, RedditCircleFilled, TwitchFilled, TwitterCircleFilled } from "@ant-design/icons" + + +function Share({children, className=""}){ + + const [shareModalOpen, setShareModalOpen] = useState(false) + + const shareInfo = useMemo(() => { + + return { + url: encodeURI("https://github.com/PaulleDemon/font-tester-chrome"), + text: "Check out Framework agnostic GUI builder for python" + } + }, []) + + const onClick = () => { + setShareModalOpen(true) + } + + const onClose = (event) => { + event.stopPropagation() + setShareModalOpen(false) + } + + const onCopy = (event) => { + event.stopPropagation() + navigator.clipboard.writeText(`Check out Font tester: ${shareInfo.url}`).then(function() { + message.success("Link copied to clipboard") + + }, function(err) { + message.error("Error copying to clipboard") + }) + } + + return ( +
+ {children} + Share FontTester} + styles={{wrapper: {zIndex: 14000, gap: "10px"}}} + onCancel={onClose} + onOk={onClose} + footer={null} + open={shareModalOpen}> + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ ) + +} + +export default Share \ No newline at end of file