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-face {
|
||||||
font-family: 'SummerPixel';
|
font-family: 'Depixel';
|
||||||
src: url('../../public/SummerPixel22Regular-jE0W7.ttf');
|
src: url('../../public/depixelschmal.otf');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: 'SummerPixel';
|
font-family: 'Depixel';
|
||||||
/* font-weight: 400; */
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--black: #000000;
|
background-color: #231f20;
|
||||||
--ash-black: #222;
|
color: #f9f9f9;
|
||||||
--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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
button {
|
||||||
margin: 0 0 30px 0;
|
background-color: #ef3b39;
|
||||||
font-size: 18px;
|
color: #f9f9f9;
|
||||||
}
|
text-transform: uppercase;
|
||||||
|
padding: 1em;
|
||||||
nav {
|
border-radius: 0;
|
||||||
position: fixed;
|
border: 0;
|
||||||
top: 0;
|
box-shadow: 0 5px #f9f9f9;
|
||||||
left: 0;
|
clip-path: polygon(
|
||||||
right: 0;
|
0px 20px,
|
||||||
display: flex;
|
4px 20px,
|
||||||
justify-content: flex-start;
|
4px 12px,
|
||||||
align-items: center;
|
8px 12px,
|
||||||
padding: 40px;
|
8px 8px,
|
||||||
background-image: radial-gradient(
|
12px 8px,
|
||||||
rgba(0, 0, 0, 0) 1px,
|
12px 4px,
|
||||||
var(--background) 1px
|
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