save chanes on reskin
parent
a52fb77716
commit
86d37ab5dc
Binary file not shown.
@ -1,133 +0,0 @@
|
||||
import { ConnectButton } from '@rainbow-me/rainbowkit';
|
||||
import { AwesomeButton } from 'react-awesome-button';
|
||||
|
||||
import './styles/buttons.css';
|
||||
|
||||
|
||||
export function Wallet() {
|
||||
return (
|
||||
<nav className="navbar">
|
||||
<ConnectButton.Custom>
|
||||
{({
|
||||
account,
|
||||
chain,
|
||||
openAccountModal,
|
||||
openChainModal,
|
||||
openConnectModal,
|
||||
mounted,
|
||||
}) => {
|
||||
const ready = mounted;
|
||||
const connected =
|
||||
ready &&
|
||||
account &&
|
||||
chain;
|
||||
|
||||
return (
|
||||
<div
|
||||
className='walletButtons'
|
||||
{...(!ready && {
|
||||
'aria-hidden': true,
|
||||
'style': {
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
},
|
||||
})}
|
||||
>
|
||||
{(() => {
|
||||
if (!connected) {
|
||||
return (
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openConnectModal();
|
||||
release();
|
||||
}}>
|
||||
Connect Wallet
|
||||
</AwesomeButton>
|
||||
);
|
||||
}
|
||||
|
||||
if (chain.unsupported) {
|
||||
return (
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openChainModal();
|
||||
release();
|
||||
}}>
|
||||
Wrong network
|
||||
</AwesomeButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openChainModal();
|
||||
release();
|
||||
}}>
|
||||
{chain.hasIcon && (
|
||||
<div
|
||||
style={{
|
||||
background: chain.iconBackground,
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 999,
|
||||
overflow: 'hidden',
|
||||
marginRight: 4,
|
||||
}}
|
||||
>
|
||||
{chain.iconUrl && (
|
||||
<img
|
||||
alt={chain.name ?? 'Chain icon'}
|
||||
src={chain.iconUrl}
|
||||
style={{ width: 12, height: 12 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{chain.name}
|
||||
</AwesomeButton>
|
||||
|
||||
<AwesomeButton
|
||||
type="primary"
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openAccountModal();
|
||||
release();
|
||||
}}>
|
||||
{account.displayName}
|
||||
{account.displayBalance
|
||||
? ` (${account.displayBalance})`
|
||||
: ''}
|
||||
</AwesomeButton>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ConnectButton.Custom>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
|
||||
import '../styles/hero.css';
|
||||
import Unaboomer from '../img/unaboomer.png';
|
||||
import Mailbomb from '../img/mailbomb.png';
|
||||
import Explosion from '../img/explosion.png';
|
||||
import Arrow from '../img/arrow_right.png';
|
||||
|
||||
export class Hero extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div id='hero'>
|
||||
<h1>the web3 revolution & its consequences have been a disaster for the human race.</h1>
|
||||
<div id='heroFlex'>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
|
||||
<p>
|
||||
Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin,
|
||||
and expensive JPEGs have made them angry. <br /><br />
|
||||
They've begun to radicalize. 35,000 Boomers have joined forces
|
||||
to lash out at the system.
|
||||
</p>
|
||||
<button className='doThing buttom'>Radicalize boomer</button>
|
||||
<p>(0 ETH)</p>
|
||||
</div>
|
||||
<div className='heroFlexArrow'>
|
||||
<img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
|
||||
</div>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Mailbomb} width='280px' alt='Pixelated Mailbomb image - handle with caution.' />
|
||||
<p>
|
||||
Don't let the Boomers win, fight back! Assemble a mailbomb and blow 'em to smithereens. <br /><br />
|
||||
(Warning: Some bombs are duds!)
|
||||
</p>
|
||||
<button className='doThing buttom'>assemble mailbomb</button>
|
||||
<p>(.01 ETH)</p>
|
||||
</div>
|
||||
<div className='heroFlexArrow'>
|
||||
<img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
|
||||
</div>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Explosion} width='280px' alt='Pixelated explosion image.' />
|
||||
<p>
|
||||
Ready for mayhem? Burn your mailrooms to blow up a random boomer. <br /><br />
|
||||
If your bomb is live it will destroy a Boomer PFP forever. <br /><br />
|
||||
(Warning: Your Boomer might explode!)
|
||||
</p>
|
||||
<button className='doThing buttom'>mail a bomb</button>
|
||||
<p>(0 ETH)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { ConnectButton } from '@rainbow-me/rainbowkit';
|
||||
|
||||
import '../styles/navbar.css';
|
||||
import Logo from '../img/logo.png';
|
||||
|
||||
export class Navbar extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<nav id='primaryNav'>
|
||||
<div id='logo'>
|
||||
<img src={Logo} alt='Unaboomer NFT project logo. A red hood with black background.' />
|
||||
</div>
|
||||
<div id='wallet'>
|
||||
<ConnectButton chainStatus="none" />
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
#hero {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hero h1 {
|
||||
width: 80%;
|
||||
text-transform: uppercase;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
#heroFlex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroFlexItem {
|
||||
flex: 0 25%;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroFlexItem p {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroFlexArrow {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button.doThing {
|
||||
margin: 1em;
|
||||
}
|
||||
@ -1,110 +1,66 @@
|
||||
@font-face {
|
||||
font-family: 'SummerPixel';
|
||||
src: url('../../public/SummerPixel22Regular-jE0W7.ttf');
|
||||
font-family: 'Depixel';
|
||||
src: url('../../public/depixelschmal.otf');
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
font-family: 'SummerPixel';
|
||||
/* font-weight: 400; */
|
||||
font-family: 'Depixel';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
--black: #000000;
|
||||
--ash-black: #222;
|
||||
--white: #fafafa;
|
||||
--sky: #00ccff;
|
||||
--green: #22dddd;
|
||||
--blue: #1300ff;
|
||||
--dusk: #6600ff;
|
||||
--purple: #9900ff;
|
||||
--pink: #ff0066;
|
||||
--red: #fe0222;
|
||||
--orange: #fd7702;
|
||||
--yellow: #ffbb00;
|
||||
|
||||
--background: var(--black);
|
||||
--accent: var(--white);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--background);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
margin: 100px 0 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
background-color: #231f20;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 30px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background-image: radial-gradient(
|
||||
rgba(0, 0, 0, 0) 1px,
|
||||
var(--background) 1px
|
||||
button {
|
||||
background-color: #ef3b39;
|
||||
color: #f9f9f9;
|
||||
text-transform: uppercase;
|
||||
padding: 1em;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
box-shadow: 0 5px #f9f9f9;
|
||||
clip-path: polygon(
|
||||
0px 20px,
|
||||
4px 20px,
|
||||
4px 12px,
|
||||
8px 12px,
|
||||
8px 8px,
|
||||
12px 8px,
|
||||
12px 4px,
|
||||
16px 4px,
|
||||
20px 4px,
|
||||
20px 0px,
|
||||
calc(100% - 20px) 0px,
|
||||
calc(100% - 20px) 4px,
|
||||
calc(100% - 12px) 4px,
|
||||
calc(100% - 12px) 8px,
|
||||
calc(100% - 8px) 8px,
|
||||
calc(100% - 8px) 12px,
|
||||
calc(100% - 4px) 12px,
|
||||
calc(100% - 4px) 16px,
|
||||
calc(100% - 4px) 20px,
|
||||
100% 20px,
|
||||
100% calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 4px),
|
||||
calc(100% - 16px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 4px),
|
||||
calc(100% - 20px) 100%,
|
||||
20px 100%,
|
||||
20px calc(100% - 4px),
|
||||
12px calc(100% - 4px),
|
||||
12px calc(100% - 8px),
|
||||
8px calc(100% - 8px),
|
||||
8px calc(100% - 12px),
|
||||
4px calc(100% - 12px),
|
||||
4px calc(100% - 16px),
|
||||
4px calc(100% - 20px),
|
||||
0px calc(100% - 20px)
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
-moz-backdrop-filter: blur(3px);
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
nav::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--accent);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 5px;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent);
|
||||
-webkit-border-radius: 1ex;
|
||||
border-radius: 1ex;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
#primaryNav {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#wallet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#wallet button {
|
||||
font-family: 'Depixel';
|
||||
background-color: #ef3b39;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 5px #fff;
|
||||
}
|
||||
Loading…
Reference in New Issue