diff --git a/packages/fakeyou/public/mascot/kitsune_pose4.png b/packages/fakeyou/public/mascot/kitsune_pose4.png new file mode 100644 index 0000000000..3c90f33055 Binary files /dev/null and b/packages/fakeyou/public/mascot/kitsune_pose4.png differ diff --git a/packages/fakeyou/src/App.scss b/packages/fakeyou/src/App.scss index d30fd462c4..79c26a1c80 100644 --- a/packages/fakeyou/src/App.scss +++ b/packages/fakeyou/src/App.scss @@ -179,6 +179,10 @@ nav { } } +a.top-bar-text:hover { + color: $primary !important; +} + .top-bar { display: flex; align-items: center; @@ -188,7 +192,7 @@ nav { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-bottom: 1px solid; - border-color: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.04); .top-bar-text { color: #fff; @@ -290,10 +294,11 @@ nav { // padding: 0 15px; // } -// .git-sha { -// color: #999; -// font-size: 0.8rem; -// } +.git-sha { + color: #999; + font-size: 0.8rem; + margin-top: 10px; +} // /* TAILWIND STYLE CLASSES */ diff --git a/packages/fakeyou/src/scss/site-refresh.scss b/packages/fakeyou/src/scss/site-refresh.scss index 52bfac4a4a..22fd143bb9 100644 --- a/packages/fakeyou/src/scss/site-refresh.scss +++ b/packages/fakeyou/src/scss/site-refresh.scss @@ -21,10 +21,6 @@ a { } } -a.top-bar-text:hover { - color: $primary !important; -} - hr { border: 0; border-top: 1px solid $white; @@ -175,7 +171,12 @@ code { } .form-text { - color: lighten($primary, 5%); + margin-top: 10px; + color: darken($white, 10%); + + &.red { + color: lighten($primary, 5%); + } } .alert { @@ -247,6 +248,7 @@ code { margin-left: auto; max-width: 1080px; border-radius: 8px; + backdrop-filter: blur(5px); } .panel { diff --git a/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx b/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx index 903b837a22..9c0495b140 100644 --- a/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx +++ b/packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx @@ -1,17 +1,33 @@ -import './VoiceCloneRequestPage.css'; +import "./VoiceCloneRequestPage.css"; -import { v4 as uuidv4 } from 'uuid'; -import { faEnvelope, faMicrophone, faRedo, faUser } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import React, { useCallback, useEffect, useState } from 'react'; -import { faDiscord } from '@fortawesome/free-brands-svg-icons'; -import { CreateVoiceCloneApplication, CreateVoiceCloneApplicationIsError, CreateVoiceCloneApplicationIsSuccess, CreateVoiceCloneApplicationRequest } from '@storyteller/components/src/api/clone_requests/CreateVoiceCloneApplicationRequest'; -import { CheckVoiceCloneApplication, CheckVoiceCloneApplicationIsError, CheckVoiceCloneApplicationIsSuccess, CheckVoiceCloneApplicationRequest } from '@storyteller/components/src/api/clone_requests/CheckVoiceCloneApplication'; -import { Link } from 'react-router-dom'; -import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig'; +import { v4 as uuidv4 } from "uuid"; +import { + faEnvelope, + faMicrophone, + faRedo, + faUser, +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import React, { useCallback, useEffect, useState } from "react"; +import { faDiscord } from "@fortawesome/free-brands-svg-icons"; +import { + CreateVoiceCloneApplication, + CreateVoiceCloneApplicationIsError, + CreateVoiceCloneApplicationIsSuccess, + CreateVoiceCloneApplicationRequest, +} from "@storyteller/components/src/api/clone_requests/CreateVoiceCloneApplicationRequest"; +import { + CheckVoiceCloneApplication, + CheckVoiceCloneApplicationIsError, + CheckVoiceCloneApplicationIsSuccess, + CheckVoiceCloneApplicationRequest, +} from "@storyteller/components/src/api/clone_requests/CheckVoiceCloneApplication"; +import { Link } from "react-router-dom"; +import { FrontendUrlConfig } from "../../../common/FrontendUrlConfig"; +import { distance, delay, delay2, duration } from "../../../data/animation"; +const Fade = require("react-reveal/Fade"); -interface Props { -} +interface Props {} function VoiceCloneRequestPage(props: Props) { // Contact @@ -34,7 +50,7 @@ function VoiceCloneRequestPage(props: Props) { const [isOwnVoice, setIsOwnVoice] = useState(false); const [isThirdPartyVoice, setIsThirdPartyVoice] = useState(false); const [notesOnSubject, setNotesOnSubject] = useState(""); - + // Equipment const [hasCleanAudioRecordings, setHasCleanAudioRecordings] = useState(false); const [hasGoodMicrophone, setHasGoodMicrophone] = useState(false); @@ -48,12 +64,11 @@ function VoiceCloneRequestPage(props: Props) { const [formWasSubmitted, setFormWasSubmitted] = useState(false); // Previous form submission state - const [formWasPrevioiuslySubmitted, setFormWasPreviouslySubmitted] = useState(false); + const [formWasPrevioiuslySubmitted, setFormWasPreviouslySubmitted] = + useState(false); const checkPreviousApplication = useCallback(async () => { - - const request : CheckVoiceCloneApplicationRequest = { - }; + const request: CheckVoiceCloneApplicationRequest = {}; const response = await CheckVoiceCloneApplication(request); @@ -78,19 +93,19 @@ function VoiceCloneRequestPage(props: Props) { const handleSubjectChange = (ev: React.FormEvent) => { const value = (ev.target as HTMLInputElement).value; switch (value) { - case 'mine': + case "mine": setIsOwnVoice(true); setIsThirdPartyVoice(false); break; - case 'family': + case "family": setIsOwnVoice(false); setIsThirdPartyVoice(true); break; - case 'client': + case "client": setIsOwnVoice(false); setIsThirdPartyVoice(true); break; - case '3rd': + case "3rd": setIsOwnVoice(false); setIsThirdPartyVoice(true); break; @@ -121,7 +136,9 @@ function VoiceCloneRequestPage(props: Props) { setIsForOther(!isForOther); }; - const handleOptionalNotesOnUseChange = (ev: React.FormEvent) => { + const handleOptionalNotesOnUseChange = ( + ev: React.FormEvent + ) => { setOptionalNotesOnUse((ev.target as HTMLInputElement).value); }; @@ -133,7 +150,7 @@ function VoiceCloneRequestPage(props: Props) { setIsForPublicUse(!isForPublicUse); }; - const handleHasCleanAudioRecordingsChange= () => { + const handleHasCleanAudioRecordingsChange = () => { setHasCleanAudioRecordings(!hasCleanAudioRecordings); }; @@ -141,11 +158,15 @@ function VoiceCloneRequestPage(props: Props) { setHasGoodMicrophone(!hasGoodMicrophone); }; - const handleOptionalExtraCommentsChange = (ev: React.FormEvent) => { + const handleOptionalExtraCommentsChange = ( + ev: React.FormEvent + ) => { setOptionalExtraComments((ev.target as HTMLTextAreaElement).value); }; - const handleOptionalQuestionsChange = (ev: React.FormEvent) => { + const handleOptionalQuestionsChange = ( + ev: React.FormEvent + ) => { setOptionalQuestions((ev.target as HTMLTextAreaElement).value); }; @@ -158,11 +179,13 @@ function VoiceCloneRequestPage(props: Props) { } if (!!discord.trim() && !discord.includes("#")) { - setFormErrorMessage("Discord username is invalid. It needs the '#' number."); + setFormErrorMessage( + "Discord username is invalid. It needs the '#' number." + ); return false; } - let request : CreateVoiceCloneApplicationRequest = { + let request: CreateVoiceCloneApplicationRequest = { idempotency_token: uuidv4(), // Contact @@ -206,7 +229,7 @@ function VoiceCloneRequestPage(props: Props) { request.optional_extra_comments = optionalExtraComments.trim(); } - const response = await CreateVoiceCloneApplication(request) + const response = await CreateVoiceCloneApplication(request); if (CreateVoiceCloneApplicationIsSuccess(response)) { setFormWasSubmitted(true); @@ -216,33 +239,43 @@ function VoiceCloneRequestPage(props: Props) { } return false; - } + }; const header = ( -
-
- -
- -
-
- FakeYou's mascot! +
+
+
+
+ + FakeYou Mascot + +
+
+
+ +
+

+ Professionally Clone Your Voice +

+

(or any voice) for just $70

+
+

Want a Custom Voice You Can Use?

+

+ For Music, Videos, Twitch Rewards, API, Friends, Family… + whatever you want! +

+
-
- -
-

- Professionally Clone Your Voice -

-

- (or any voice) for just $70 -

- -
- +
-
+ ); if (formWasSubmitted) { @@ -262,22 +295,24 @@ function VoiceCloneRequestPage(props: Props) { - Back to home  - + > + Back to home  + + ); } let previouslySubmittedNote = <>; - + if (formWasPrevioiuslySubmitted) { previouslySubmittedNote = ( <>
- It looks like you've already submitted a request, but feel free to submit another! + It looks like you've already submitted a request, but feel free to + submit another!
(Especially if you have another voice for us!)
@@ -301,279 +336,355 @@ function VoiceCloneRequestPage(props: Props) { return (
- {header} -
-
+ +
+
+

Clone Your Voice

+
+ {previouslySubmittedNote} +
+

+ We have an extremely talented staff that will personally + handle your voice clone request. Please help us understand + more about your voice and how you want to use it, and we'll be + in touch shortly. +

-

Want a Custom Voice You Can Use?

-

For Music, Videos, Twitch Rewards, API, Friends, Family… whatever you want!

+

First, how should we get in touch?

- {previouslySubmittedNote} +
+ +
+ + + + +
+

+

+
-

- We have an extremely talented staff that will personally handle your voice clone request. - Please help us understand more about your voice and how you want to use it, and we'll be in touch - shortly. -

+
+ +
+ + + + +
+

+ Don't forget the #0000 part of your username! +

+

+
-
- -

First, how should we get in touch?

- -
- -
- - - - +
+

Who's voice is this?

+

+ If it's your voice, you'll be able to do anything you want + with it. If it's another person's voice, you may have limits + on how you can use it (eg. limits on commercialization.) + That doesn't mean we can't help you. Even if you just want + your favorite character so you can make Twitter memes, + that's fine! +

+
+
-

-

-
-
-
-
+
- {errorMessage} + {errorMessage} - - +
-
+
); } -export { VoiceCloneRequestPage } \ No newline at end of file +export { VoiceCloneRequestPage };