daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-05 01:38:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

nav and landing updates

Browse Source
This commit is contained in:
BFlat committed 2023-06-07 14:50:34 +07:00
1 parent 241d3fe4d9
commit 8dc2f3dd0c
3 files changed
+58 -162
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
+23 -2
View File
@@ -76,6 +76,13 @@ function FooterNav(props: Props) {
return () => clearInterval(interval);
}, [pendingTtsJobs]);
let myDataLink = WebUrl.signupPage();
if (props.sessionWrapper.isLoggedIn()) {
let username = props.sessionWrapper.getUsername() as string; // NB: Should be present if logged in
myDataLink = WebUrl.userProfilePage(username);
}
let moderationLink = <span />;
if (props.sessionWrapper.canBanUsers()) {
@@ -176,12 +183,22 @@ function FooterNav(props: Props) {
<li>
<Link to="/video">Video Lipsync</Link>
</li>
<li>
<Link to="/contribute">Upload Models</Link>
</li>
</div>
<div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
<p className="fw-bold">Community</p>
<li>
<Link to="/contribute">Upload Models</Link>
<a
href={ThirdPartyLinks.FAKEYOU_DISCORD}
target="_blank"
rel="noopener noreferrer"
>
Discord
</a>
</li>
<li>
@@ -189,7 +206,11 @@ function FooterNav(props: Props) {
</li>
<li>
<Link to="/firehose">Feed</Link>
<Link to="/guide">Guide</Link>
</li>
<li>
<Link to={myDataLink}>My Data</Link>
</li>
</div>
<div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
+28 -154
View File
@@ -8,13 +8,9 @@ import {
faPlus,
faUsers,
faVideo,
faList,
faTrophy,
faUpload,
faUser,
faSignOutAlt,
faComputer,
faLaptop,
faBook,
faStar,
} from "@fortawesome/free-solid-svg-icons";
@@ -26,14 +22,6 @@ import {
GetPendingTtsJobCountIsOk,
GetPendingTtsJobCountSuccessResponse,
} from "@storyteller/components/src/api/tts/GetPendingTtsJobCount";
import {
container,
item,
panel,
image,
sessionItem,
} from "../../../data/animation";
import Tippy from "@tippyjs/react";
import "tippy.js/dist/tippy.css";
import "tippy.js/animations/shift-away.css";
import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
@@ -56,17 +44,6 @@ interface Props {
}
function TopNav(props: Props) {
// const defaultColourView = window.localStorage.getItem("darkMode");
const defaultLowSpecView = window.localStorage.getItem("lowSpec");
// const [darkModes, toggleDarkModes] = useState(
// defaultColourView === "false" ? true : false
// );
const [lowSpecView, toggleLowSpecs] = useState(
defaultLowSpecView === "false" ? true : false
);
let history = useHistory();
let myDataLink = WebUrl.signupPage();
@@ -109,52 +86,6 @@ function TopNav(props: Props) {
return () => clearInterval(interval);
}, [pendingTtsJobs]);
// const toggleDarkMode = () => {
// window.localStorage.setItem("darkMode", darkModes ? "true" : "false");
// toggleDarkModes(!darkModes);
// };
const toggleLowSpec = () => {
window.localStorage.setItem("lowSpec", lowSpecView ? "true" : "false");
toggleLowSpecs(!lowSpecView);
if (lowSpecView === false) {
image.hidden.opacity = 1;
image.hidden.x = 0;
panel.hidden.y = 0;
item.hidden.y = 0;
sessionItem.hidden.x = 0;
panel.hidden.opacity = 1;
item.hidden.opacity = 1;
container.hidden.opacity = 1;
sessionItem.hidden.opacity = 1;
Analytics.uiTurnOnAnimations();
} else {
image.hidden.opacity = 0;
image.hidden.x = 15;
panel.hidden.y = 15;
item.hidden.y = 15;
sessionItem.hidden.x = 15;
panel.hidden.opacity = 0;
item.hidden.opacity = 0;
container.hidden.opacity = 0;
sessionItem.hidden.opacity = 0;
Analytics.uiTurnOffAnimations();
}
};
useEffect(() => {
// Logic for dark mode toggle
// if (darkModes) document.getElementById("main")!.classList.add("dark-mode");
// else document.getElementById("main")!.classList.remove("dark-mode");
// Logic for the animation toggle
if (lowSpecView) document.getElementById("main")!.classList.add("low-spec");
else document.getElementById("main")!.classList.remove("low-spec");
});
const logoutHandler = async () => {
await Logout();
props.querySessionCallback();
@@ -332,19 +263,6 @@ function TopNav(props: Props) {
</div>
<div className="offcanvas-body">
<ul className="navbar-nav justify-content-start align-items-lg-center flex-grow-1 gap-2 gap-lg-0">
<li data-bs-toggle="offcanvas" className="nav-item">
<Link
to={WebUrl.pricingPageWithReferer("topnav")}
onClick={() => {
Analytics.topbarClickPricing();
}}
className="nav-link"
>
<FontAwesomeIcon icon={faStar} className="me-2" />
{t("nav.TopNav.main.pricingLink")}
</Link>
</li>
{/*<li data-bs-toggle="offcanvas" className="nav-item">
<Link
to={WebUrl.newsPage()}
@@ -369,7 +287,8 @@ function TopNav(props: Props) {
aria-expanded="false"
>
<FontAwesomeIcon icon={faPlus} className="me-2" />
{t("nav.TopNav.main.createDropdown")}
{/* {t("nav.TopNav.main.createDropdown")} */}
AI Tools
</a>
<ul
className="dropdown-menu"
@@ -434,26 +353,6 @@ function TopNav(props: Props) {
className="dropdown-menu"
aria-labelledby="offcanvasNavbarLgDropdown-community"
>
<li data-bs-toggle="offcanvas">
<Link
className="dropdown-item"
to="/contribute"
title="to Upload page"
>
<FontAwesomeIcon icon={faUpload} className="me-2" />
{t("nav.TopNav.main.contributeOption")}
</Link>
</li>
<li data-bs-toggle="offcanvas">
<Link
className="dropdown-item"
to="/leaderboard"
title="to leaderboard"
>
<FontAwesomeIcon icon={faTrophy} className="me-2" />
{t("nav.TopNav.main.leaderboardOption")}
</Link>
</li>
<li data-bs-toggle="offcanvas">
<a
className="dropdown-item"
@@ -466,6 +365,18 @@ function TopNav(props: Props) {
{t("nav.TopNav.main.discordOption")}
</a>
</li>
<li data-bs-toggle="offcanvas">
<Link
className="dropdown-item"
to="/leaderboard"
title="to leaderboard"
>
<FontAwesomeIcon icon={faTrophy} className="me-2" />
{t("nav.TopNav.main.leaderboardOption")}
</Link>
</li>
<li data-bs-toggle="offcanvas">
<Link
className="dropdown-item"
@@ -476,16 +387,7 @@ function TopNav(props: Props) {
{t("nav.TopNav.main.guideOption")}
</Link>
</li>
<li data-bs-toggle="offcanvas">
<Link
className="dropdown-item"
to="/firehose"
title="to feed"
>
<FontAwesomeIcon icon={faList} className="me-2" />
{t("nav.TopNav.main.feedOption")}
</Link>
</li>
<hr className="dropdown-divider" />
<li data-bs-toggle="offcanvas">
<Link
@@ -500,6 +402,19 @@ function TopNav(props: Props) {
</ul>
</li>
<li data-bs-toggle="offcanvas" className="nav-item">
<Link
to={WebUrl.pricingPageWithReferer("topnav")}
onClick={() => {
Analytics.topbarClickPricing();
}}
className="nav-link"
>
<FontAwesomeIcon icon={faStar} className="me-2" />
{t("nav.TopNav.main.pricingLink")}
</Link>
</li>
<li data-bs-toggle="offcanvas" className="nav-item d-lg-none">
<Link
className="nav-link"
@@ -565,47 +480,6 @@ function TopNav(props: Props) {
<li className="d-lg-none">
<hr className="dropdown-divider dropdown-divider-white" />
</li>
<li className="ps-3 d-lg-none">
<div className="d-flex gap-4 py-2">
<div className="top-bar-text mobile">
{t("nav.TopNav.topbar.options")}:
</div>
{/* <Tippy
content={`${
darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
}`}
>
<button
className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
onClick={() => toggleDarkMode()}
>
<FontAwesomeIcon icon={darkModes ? faSun : faMoon} />
</button>
</Tippy> */}
<Tippy
content={`${
lowSpecView
? "Turn on animations"
: "Turn off animations"
}`}
>
<button
className="btn btn-toggle"
onClick={() => toggleLowSpec()}
>
<FontAwesomeIcon
icon={lowSpecView ? faComputer : faLaptop}
className={`${lowSpecView ? "" : ""}`}
/>
</button>
</Tippy>
</div>
</li>
<li className="d-lg-none">
<hr className="dropdown-divider dropdown-divider-white" />
</li>
</ul>
<div className="d-grid d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0">
{userOrLoginButton}
packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+7 -6
View File
@@ -161,7 +161,8 @@ function LandingPage(props: Props) {
<img
src={randomHeroImage}
alt="FakeYou Mascot"
width={450}
height={440}
width={447}
className="img-fluid"
/>
</div>
@@ -353,7 +354,7 @@ function LandingPage(props: Props) {
</div>
</div>
<div className="col-12 col-md-6 col-lg-5 d-flex flex-column justify-content-center gap-3">
<h2 className="fw-bold">Make your favorite characters talk</h2>
<h2 className="fw-bold">Speak as your favorite characters</h2>
<p className="opacity-75">
Our AI-powered text-to-speech and voice conversion tools let you
convert your text or voice into your favorite character's voice.
@@ -410,7 +411,7 @@ function LandingPage(props: Props) {
</div>
</div> */}
<div className="d-flex flex-column section align-items-center panel rounded-0 my-5">
{/* <div className="d-flex flex-column section align-items-center panel rounded-0 my-5">
<div className="d-flex flex-column align-items-center text-center cta-container">
<div className="d-flex d-lg-none align-items-center mb-4 cta-mobile">
<img
@@ -474,9 +475,9 @@ function LandingPage(props: Props) {
height={311}
/>
</div>
</div>
</div> */}
<div className="section pb-5">
<div className="py-4">
<div className="container text-center community-container">
<div className="panel px-4 py-5 d-flex flex-column align-items-center community-container rounded">
<h2 className="fw-bold mb-2">Join the Community</h2>
@@ -508,7 +509,7 @@ function LandingPage(props: Props) {
<img
src="/images/landing/bg-dots.webp"
alt="background dots"
className="dots-right-top me-3"
className="dots-left-bottom me-3"
/>
</div>
</div>