Skip to content

Commit

Permalink
popup screens
Browse files Browse the repository at this point in the history
  • Loading branch information
devsisingh committed Jun 22, 2024
1 parent 17d6aee commit a7eab14
Show file tree
Hide file tree
Showing 9 changed files with 3,504 additions and 0 deletions.
2,919 changes: 2,919 additions & 0 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

Binary file added public/Vector.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/trophy1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/trophy2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions src/app/popup1/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React from 'react';
import Link from 'next/link';

const page = () => {
return (
<div>
<div
style={{
// backgroundColor: "#FFFFFFB2",
display: "flex",
overflowY: "auto",
overflowX: "hidden",
position: "fixed",
inset: 0,
zIndex: 50,
justifyContent: "center",
alignItems: "center",
width: "100%",
maxHeight: "100%",
}}
id="popupmodal"
>
<div
style={{
position: "relative",
padding: "16px",
width: "100%",
maxWidth: "32rem",
maxHeight: "100%",
}}
>
<div
style={{
position: "relative",
borderRadius: "0.5rem",
boxShadow: "0 0.25rem 0.75rem rgba(0, 0, 0, 0.25)",
color: "black",
background: "white",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "16px",
borderRadius: "20px",
borderColor: "#4B5563",
}}
>
{/* Add any additional content or buttons here */}
</div>

<div style={{ padding: "16px", spaceY: "16px" }}>
<p
style={{backgroundImage: "linear-gradient(90deg, #30D8FF, #5B0292)",
WebkitBackgroundClip: "text",
backgroundClip: "text",
color: "transparent",
paddingBottom: "10px",
fontSize: "2.5rem", textAlign: "center", fontWeight: "bold"}}>
Congratulations!
</p>
<p style={{ fontSize: "1.2rem", textAlign: "center", paddingTop: "40px" }}>
You have successfully created your avatar.
</p>
<p style={{ fontSize: "1.2rem", textAlign: "center", paddingTop: "10px" }}>
Download your avatar (png)
</p>
</div>
<div style={{ display: "flex", alignItems: "center", paddingTop: "20px", paddingBottom: "60px" }}>
<Link
href=""
type="button"
style={{
width: "50%",
marginLeft: "auto",
marginRight: "auto",
color: "black",
// fontWeight: "600",
focusRing: "4px",
outline: "none",
borderRadius: "30rem",
fontSize: "1.2rem",
padding: "10px 20px",
textAlign: "center",
backgroundColor: '#30D8FF',
}}
>
Go back to Studio
</Link>
</div>
</div>
</div>
</div>
</div>
)
}

export default page
88 changes: 88 additions & 0 deletions src/app/popup2/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react';
import Link from 'next/link';

const page = () => {
return (
<div>
<div
style={{
// backgroundColor: "#FFFFFFB2",
display: "flex",
overflowY: "auto",
overflowX: "hidden",
position: "fixed",
inset: 0,
zIndex: 50,
justifyContent: "center",
alignItems: "center",
width: "100%",
maxHeight: "100%",
}}
id="popupmodal"
>
<div
style={{
position: "relative",
padding: "16px",
width: "100%",
maxWidth: "32rem",
maxHeight: "100%",
}}
>
<div
style={{
position: "relative",
borderRadius: "0.5rem",
boxShadow: "0 0.25rem 0.75rem rgba(0, 0, 0, 0.25)",
color: "black",
background: "white",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "16px",
borderRadius: "20px",
borderColor: "#4B5563",
}}
>
{/* Add any additional content or buttons here */}
</div>

<div>
<p style={{ fontSize: "1.2rem", textAlign: "center", fontWeight:'600' }}>
Connect wallet to claim NFT and <br></br>unlock the experience
</p>
</div>
<div style={{ display: "flex", alignItems: "center", paddingTop: "20px", paddingBottom: "20px" }}>
<Link
href=""
type="button"
style={{
width: "50%",
marginLeft: "auto",
marginRight: "auto",
color: "black",
// fontWeight: "600",
focusRing: "4px",
outline: "none",
borderRadius: "1rem",
fontSize: "1.2rem",
padding: "10px 20px",
textAlign: "center",
backgroundColor: '#30D8FF',
}}
>
Connect
</Link>
</div>
</div>
</div>
</div>
</div>
)
}

export default page
127 changes: 127 additions & 0 deletions src/app/popup3/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import React from 'react';
import Link from 'next/link';

const page = () => {
return (
<div>
<div
style={{
// backgroundColor: "#FFFFFFB2",
display: "flex",
overflowY: "auto",
overflowX: "hidden",
position: "fixed",
inset: 0,
zIndex: 50,
justifyContent: "center",
alignItems: "center",
width: "100%",
maxHeight: "100%",
}}
id="popupmodal"
>
<div
style={{
position: "relative",
padding: "16px",
width: "100%",
maxWidth: "50rem",
maxHeight: "100%",
}}
>
<div
style={{
position: "relative",
borderRadius: "0.5rem",
boxShadow: "0 0.25rem 0.75rem rgba(0, 0, 0, 0.25)",
color: "black",
background: "white",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "16px",
borderRadius: "20px",
borderColor: "#4B5563",
}}
>
{/* Add any additional content or buttons here */}
</div>

<div style={{ padding: "16px", spaceY: "16px" }}>
<div style={{display:'flex', justifyContent: 'space-around'}}>
<img src="./trophy2.png"/>
<p
style={{backgroundImage: "linear-gradient(90deg, #30D8FF, #5B0292)",
WebkitBackgroundClip: "text",
backgroundClip: "text",
color: "transparent",
paddingTop: "60px",
fontSize: "2.5rem", textAlign: "center", fontWeight: "bold"}}>
Congratulations!
</p>
<img src="./trophy1.png"/>
</div>
<p style={{ fontSize: "1.2rem", textAlign: "center", paddingTop: "20px" }}>
You have successfully minted (phygital name) phygital NFT!
</p>
<p style={{ fontSize: "1.2rem", textAlign: "center", padding: "40px", fontWeight:'600' }}>
As the owner of (phygital name), you are also the owner of this avatar!

</p>
<p style={{ fontSize: "1.2rem", textAlign: "center", paddingLeft: "40px" , paddingRight: "40px" }}>
You can customize the avatar and get a chance to compete against other avatars for weekly rewards on MyriadFlow leaderboard.
</p>
</div>
<div style={{ display: "flex", alignItems: "center", paddingTop: "20px", paddingBottom: "60px" }}>
<Link
href=""
type="button"
style={{
width: "30%",
marginLeft: "auto",
marginRight: "auto",
color: "black",
focusRing: "4px",
outline: "none",
borderRadius: "30rem",
fontSize: "1.2rem",
padding: "10px 0px",
textAlign: "center",
backgroundColor: '#30D8FF',
}}
>
View in my assets
</Link>

<Link
href=""
type="button"
style={{
width: "30%",
marginLeft: "auto",
marginRight: "auto",
color: "black",
focusRing: "4px",
outline: "none",
borderRadius: "30rem",
fontSize: "1.2rem",
padding: "10px 0px",
textAlign: "center",
border: '1px solid #5B0292'
}}
>
Continue Experience
</Link>
</div>
</div>
</div>
</div>
</div>
)
}

export default page
Loading

0 comments on commit a7eab14

Please sign in to comment.