Mirrors
/
riffusion-app
mirror of https://github.com/riffusion/riffusion-app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding initial back and forth from about page

This commit is contained in:
Seth Forsgren 2022-12-08 11:10:01 -08:00
parent 6e041a0c21
commit 7ca84f28f4
6 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Info.tsx
View File

@ -20,9 +20,9 @@ export default function Info() {
var classNameCondition = ""
if (open) {
classNameCondition = "fixed z-90 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
classNameCondition = "fixed z-90 top-44 right-4 sm:top-48 sm:right-8 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
} else {
classNameCondition = "fixed z-90 top-48 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
classNameCondition = "fixed z-90 top-44 right-4 sm:top-48 sm:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
return (

4
components/Pause.tsx
View File

@ -22,9 +22,9 @@ export default function Pause({
var classNameCondition = ""
if (paused) {
classNameCondition="animate-pulse fixed z-90 top-8 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
classNameCondition="animate-pulse fixed z-90 top-4 right-4 sm:top-8 sm:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
} else {
classNameCondition="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
classNameCondition="fixed z-90 top-4 right-4 sm:top-8 sm:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
return (

4
components/Share.tsx
View File

@ -30,9 +30,9 @@ export default function Share({
var classNameCondition = ""
if (open) {
classNameCondition = "fixed z-90 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
classNameCondition = "fixed z-90 top-24 right-4 sm:top-28 sm:right-8 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
} else {
classNameCondition = "fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
classNameCondition = "fixed z-90 top-24 right-4 sm:top-28 sm:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
// function to copy link to moment in song to the clipboard

21
components/ToApp.tsx Normal file
View File

@ -0,0 +1,21 @@
export default function ToApp() {
return (
<>
{/* <button
type="button"
className="fixed z-90 top-8 right-8 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
onClick={() => window.location.href = "/"}
>
Let&apos;s Riff 🎸
</button> */}
<button
type="button"
className="fixed z-90 top-4 right-4 sm:top-8 sm:right-8 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
onClick={() => window.location.href = "/"}
>
🎸
</button>
</>
);
};

4
pages/about.tsx
View File

@ -8,11 +8,15 @@ import fourierTransformImg from "../public/about/fourier_transform.png";
import spectrogramLabelImg from "../public/about/spectrogram_label.png";
import webAppScreenshot from "../public/about/web_app_screenshot.png";
import ToApp from "../components/ToApp";
export default function Home() {
return (
<>
<PageHead />
<ToApp/>
<main className="bg-white flex flex-row text-black place-content-center">
<div className="w-3/4 md:w-2/3 lg:w-1/2 text-lg pb-20">
<h1 className="pt-20 pb-1 text-4xl font-bold">[ RIFFUSION ]</h1>

4
pages/index.tsx
View File

@ -229,14 +229,14 @@ export default function Home() {
}}
/>
<Info />
<Pause paused={paused} setPaused={setPaused} />
<Share
inferenceResults={inferenceResults}
nowPlayingResult={nowPlayingResult}
/>
<Pause paused={paused} setPaused={setPaused} />
<Info />
</div>
</>
);