master
lza_menace 2 years ago
parent 64d53d4289
commit cb0381ff4e

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<title>React App</title> <title>Web3 Community and It's Future</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

@ -1,6 +1,8 @@
import { ConnectButton } from '@rainbow-me/rainbowkit'; import { ConnectButton } from '@rainbow-me/rainbowkit';
import { AwesomeButton } from 'react-awesome-button'; import { AwesomeButton } from 'react-awesome-button';
import './styles/buttons.css';
export function Wallet() { export function Wallet() {
return ( return (
@ -22,7 +24,7 @@ export function Wallet() {
return ( return (
<div <div
className='buttons' className='walletButtons'
{...(!ready && { {...(!ready && {
'aria-hidden': true, 'aria-hidden': true,
'style': { 'style': {

@ -1,7 +1,7 @@
import '@blueprintjs/core/lib/css/blueprint.css'; import '@blueprintjs/core/lib/css/blueprint.css';
import '@rainbow-me/rainbowkit/styles.css'; import '@rainbow-me/rainbowkit/styles.css';
import 'react-awesome-button/dist/styles.css'; import 'react-awesome-button/dist/styles.css';
import "./styles.css"; import "./styles/main.css";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import React from "react"; import React from "react";
@ -11,12 +11,10 @@ import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, goerli, localhost } from 'wagmi/chains'; import { mainnet, goerli, localhost } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public'; import { publicProvider } from 'wagmi/providers/public';
import ParticlesBg from "particles-bg";
import { ParallaxProvider } from 'react-scroll-parallax'; import { ParallaxProvider } from 'react-scroll-parallax';
import { Wallet } from "./Wallet"; import { Wallet } from "./Wallet";
import { Section1, Section2, Section3 } from './template/Sections'; import { Section1, Section2, Section3 } from './template/Sections';
import { Footer } from "./template/Footer";
const { chains, provider, webSocketProvider } = configureChains( const { chains, provider, webSocketProvider } = configureChains(
@ -25,12 +23,12 @@ const { chains, provider, webSocketProvider } = configureChains(
); );
const { connectors } = getDefaultWallets({ const { connectors } = getDefaultWallets({
appName: 'My RainbowKit App', appName: 'Unaboomer',
chains chains
}); });
const wagmiClient = createClient({ const wagmiClient = createClient({
autoConnect: true, autoConnect: false,
connectors, connectors,
provider, provider,
webSocketProvider webSocketProvider
@ -39,18 +37,13 @@ const wagmiClient = createClient({
ReactDOM.createRoot(document.getElementById("root")).render( ReactDOM.createRoot(document.getElementById("root")).render(
<ParallaxProvider> <ParallaxProvider>
<WagmiConfig client={wagmiClient}> <WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains}> <RainbowKitProvider chains={chains} initialChain={1337}>
<ParticlesBg type="cobweb" num={40} bg={{
position: "fixed",
zIndex: -1,
}}/>
<Wallet /> <Wallet />
<div className="scrollContainer"> <div className="scrollContainer">
<Section1 /> <Section1 />
<Section2 /> <Section2 />
<Section3 /> <Section3 />
</div> </div>
<Footer />
</RainbowKitProvider> </RainbowKitProvider>
</WagmiConfig> </WagmiConfig>
</ParallaxProvider> </ParallaxProvider>

@ -1,258 +0,0 @@
#root {
height: 100vh;
}
.section {
height: 100vh;
text-align: center;
/* scroll-snap-align: start; */
}
.sec2Text {
width: 75%;
margin: 0 auto;
padding-bottom: 1em;
}
.subtext {
font-size: .8em;
}
.scrollContainer {
height: 100vh;
/* overflow-y: scroll; */
/* scroll-snap-type: y mandatory; */
}
.mainPanel {
backdrop-filter: blur(3px);
background-color: rgba(255,255,255,0.6);
height: 60%;
width: 60%;
border-radius: 10px;
margin: 0 auto;
margin-top: 10%;
padding-top: 5%;
padding-bottom: 5%;
left: 0;
right: 0;
position: absolute;
}
#heroText {
padding-top: 20vh;
font-size: 4em;
width: 80%;
text-align: center;
margin: 2em auto .5em auto;
}
.wrap {
word-break: break-word;
}
.buttons {
position: absolute;
right: 1em;
top: 1em;
}
.aws-btn {
--button-default-height: 55px;
--button-default-font-size: 14px;
--button-default-border-radius: 6px;
--button-horizontal-padding: 20px;
--button-raise-level: 6px;
--button-hover-pressure: 1;
--transform-speed: 0.185s;
--button-primary-color: #3a3a3a;
--button-primary-color-dark: #141414;
--button-primary-color-light: #fbfbfb;
--button-primary-color-hover: #2d2d2d;
--button-primary-color-active: #212121;
--button-primary-border: 2px solid #3a3a3a;
--button-secondary-color: #fbfbfb;
--button-secondary-color-dark: #3a3a3a;
--button-secondary-color-light: #3a3a3a;
--button-secondary-color-hover: #eeeeee;
--button-secondary-color-active: #e2e2e2;
--button-secondary-border: 2px solid #3a3a3a;
--button-anchor-color: #ffe727;
--button-anchor-color-dark: #212121;
--button-anchor-color-light: #97735d;
--button-anchor-color-hover: #ffe727;
--button-anchor-color-active: #ffe727;
--button-anchor-border: 2px solid #876753;
--button-danger-color: #733086;
--button-danger-color-dark: #431c4e;
--button-danger-color-light: #77cd38;
--button-danger-color-hover: #6d2d7e;
--button-danger-color-active: #632973;
--button-danger-border: none;
}
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(--white);
--accent: var(--black);
margin: 0;
padding: 0;
background-color: var(--background);
color: var(--accent);
}
.particles-bg-canvas-self {
height: 90%;
}
* {
font-family: input-mono, monospace;
font-weight: 400;
font-style: normal;
}
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 {
margin: 0 0 30px 0;
font-size: 18px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20px;
background-image: radial-gradient(
rgba(0, 0, 0, 0) 1px,
var(--background) 1px
);
background-size: 4px 4px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-moz-backdrop-filter: blur(3px);
font-size: 14px;
line-height: 14px;
}
footer::before {
display: block;
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--accent);
opacity: 0.2;
}
footer svg {
margin-right: 20px;
}
footer a {
text-decoration: none;
color: var(--accent);
}
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
);
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: 999;
}
nav::before {
display: block;
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--accent);
opacity: 0.2;
}
code {
font-family: input-mono, monospace;
font-weight: 400;
font-style: normal;
}
::-webkit-scrollbar {
height: 12px;
width: 5px;
background: var(--background);
}
::-webkit-scrollbar-thumb {
background: var(--accent);
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: var(--background);
}
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
canvas {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
image-rendering: optimize-contrast;
position: inherit;
}

@ -0,0 +1,39 @@
.walletButtons {
position: absolute;
right: 1em;
top: 1em;
}
.aws-btn {
--button-default-height: 55px;
--button-default-font-size: 14px;
--button-default-border-radius: 6px;
--button-horizontal-padding: 20px;
--button-raise-level: 6px;
--button-hover-pressure: 1;
--transform-speed: 0.185s;
--button-primary-color: #3a3a3a;
--button-primary-color-dark: #141414;
--button-primary-color-light: #fbfbfb;
--button-primary-color-hover: #2d2d2d;
--button-primary-color-active: #212121;
--button-primary-border: 2px solid #3a3a3a;
--button-secondary-color: #fbfbfb;
--button-secondary-color-dark: #3a3a3a;
--button-secondary-color-light: #3a3a3a;
--button-secondary-color-hover: #eeeeee;
--button-secondary-color-active: #e2e2e2;
--button-secondary-border: 2px solid #3a3a3a;
--button-anchor-color: #ffe727;
--button-anchor-color-dark: #212121;
--button-anchor-color-light: #97735d;
--button-anchor-color-hover: #ffe727;
--button-anchor-color-active: #ffe727;
--button-anchor-border: 2px solid #876753;
--button-danger-color: #733086;
--button-danger-color-dark: #431c4e;
--button-danger-color-light: #77cd38;
--button-danger-color-hover: #6d2d7e;
--button-danger-color-active: #632973;
--button-danger-border: none;
}

@ -0,0 +1,99 @@
* {
font-family: 'Times New Roman', Times, serif;
font-weight: 400;
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(--white);
--accent: var(--black);
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 {
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
);
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: 999;
}
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;
}
::-webkit-scrollbar-corner {
background: var(--background);
}
.wrap {
word-break: break-word;
}

@ -0,0 +1,14 @@
.mainPanel {
backdrop-filter: blur(3px);
background-color: rgba(255,255,255,0.6);
height: 60%;
width: 60%;
border-radius: 10px;
margin: 0 auto;
margin-top: 10%;
padding-top: 5%;
padding-bottom: 5%;
left: 0;
right: 0;
position: absolute;
}

@ -0,0 +1,34 @@
/* #root {
height: 100vh;
} */
.section {
height: 100vh;
text-align: center;
/* scroll-snap-align: start; */
}
.sec2Text {
width: 75%;
margin: 0 auto;
padding-bottom: 1em;
}
.subtext {
font-size: .8em;
}
.scrollContainer {
height: 100vh;
/* overflow-y: scroll; */
/* scroll-snap-type: y mandatory; */
}
#heroText {
padding-top: 20vh;
font-size: 4em;
width: 80%;
text-align: center;
margin: 2em auto .5em auto;
}

@ -1,24 +0,0 @@
import Typewriter from 'react-ts-typewriter';
import { Logo } from "./Logo";
export function Footer() {
return (
<footer>
<Logo />
<code>
<Typewriter
text={[
"world builders, story tellers, and artists",
"shaping the future of web3 and metaverse",
"we are con artists",
"send us your money you gullible loser",
"we hate you"
]}
loop={true}
delay={2500}
random={0}
/>
</code>
</footer>
);
}

@ -1,16 +0,0 @@
export function Logo() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="2 8 16 24"
width="16"
height="24"
>
<path
d="M 10 32 L 10 24 L 18 24 L 2 8 L 18 8 L 18 16 L 2 16 L 2 24 L 10 32 L 10 24 L 2 24"
fill="var(--accent)"
></path>
</svg>
);
}

@ -3,6 +3,8 @@ import { Card, Elevation } from "@blueprintjs/core";
import { AwesomeButton } from 'react-awesome-button'; import { AwesomeButton } from 'react-awesome-button';
import { usePrepareSendTransaction, useSendTransaction, useAccount } from 'wagmi' import { usePrepareSendTransaction, useSendTransaction, useAccount } from 'wagmi'
import '../styles/panel.css';
export function Panel({ opacity, panelText, mintButtonText }) { export function Panel({ opacity, panelText, mintButtonText }) {
const { isConnected } = useAccount(); const { isConnected } = useAccount();

@ -1,41 +1,25 @@
import React from 'react'; import React from 'react';
import Typewriter from 'react-ts-typewriter';
import { Panel } from "./Panel"; import { Panel } from "./Panel";
import '../styles/sections.css';
export class Section1 extends React.Component { export class Section1 extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
let titles = { this.state = {title: ''};
0: 'Innovative Web3 and Metaverse experiences',
1: 'Immersive and engaging worlds and communities',
2: 'We sell useless pictures to fools'
}
let subtitles = {
0: 'Connecting the ethereal to the real',
1: 'Connecting our audience to a larger purpose',
2: 'Connecting your money to our bank account'
}
this.state = {title: titles[0], iter: 0, subtitle: subtitles[0]};
setInterval(() => { setInterval(() => {
let iter = this.state.iter + 1; this.setState({title: 'The Web3 Revolution and it\'s consequences have been a disaster for the human race.'});
this.setState({ }, 1200);
title: titles[iter % 3],
subtitle: subtitles[iter % 3],
iter: iter
});
}, 4500);
} }
render() { render() {
return ( return (
<section className="section"> <section className="section">
<h1 id="heroText"> <h1 id="heroText">
{this.state.title} <Typewriter text={this.state.title} cursor={true} />
</h1> </h1>
<p>
{this.state.subtitle}
</p>
</section> </section>
) )
} }
@ -45,30 +29,8 @@ export function Section2() {
return ( return (
<section className="section"> <section className="section">
<div className="sec2Text"> <div className="sec2Text">
<p className="subtext"> <h2>The Web3 Revolution and it's consequences have been a disaster for the human race.</h2>
A <strong>Web3</strong> company whose goal is to extract as much money as possible from the NFT space. <p className="subtext">ok</p>
</p>
<h2>
<strong>Community</strong> is the foundation of our business
</h2>
<p className="subtext">
getting holders of our tokens to convince others to buy it so that we may sell tokens to the next generation of holders.
</p>
<h2>
<strong>Utility</strong> is the main driver of all of our products
</h2>
<p className="subtext">
Holders of our NFTs should be able to get more NFTs which then enables them to get more NFTs which is more gooder.
</p>
<h2>
<strong>Decentralization</strong> is a core tenant of our ethos
</h2>
<p className="subtext">
we have formed a United States Limited Liability Corporation and accepted money from Venture Capital funds, we wish to have a global audience of dummies to fleece.
</p>
<p>
WAGMI!
</p>
</div> </div>
</section> </section>
) )

Loading…
Cancel
Save