more redesigning stuff
diff --git a/pages/_app.js b/pages/_app.js
index 59c30fc..f019489 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -18,6 +18,7 @@
cardOverlay: '#00000080',
hint: '#E4E4E4',
panelColor: "#F0F0F0",
+ fadeGradient: "rgba(240, 240, 240, 1)",
modes: {
dark: {
@@ -30,7 +31,8 @@
cardFilter: 'brightness(0.5)',
cardOverlay: '#42424280',
hint: '#242424',
- panelColor: "rgba(255, 255, 255, 0.05)"
+ panelColor: "rgba(255, 255, 255, 0.05)",
+ fadeGradient: "rgba(48, 48, 48, 1)",
}
}
},
diff --git a/pages/castaway.js b/pages/castaway.js
index ad1535b..c82fbd0 100644
--- a/pages/castaway.js
+++ b/pages/castaway.js
@@ -16,8 +16,8 @@
/>
<AutoLayout>
<Panel halfSize={false} id="timeline">
- <Divider />
<Title>Under Development</Title>
+ <Divider />
<Text>This bot is still in development, please check back later</Text>
</Panel>
</AutoLayout>
diff --git a/pages/rsmv/index.js b/pages/rsmv/index.js
index 63eecd5..12f4dea 100644
--- a/pages/rsmv/index.js
+++ b/pages/rsmv/index.js
@@ -73,7 +73,7 @@
</>
}
nameOverwrite="Verify"
- subtext={` ${this.props.memberCount} members`}
+ subtext={`${this.props.memberCount} members`}
gradient={["F27878", "D96B6B"]}
wave="web/waves/header/rsm"
buttons={[]}
@@ -82,14 +82,16 @@
<AutoLayout>
<Panel>
<Text>Complete the check below to join {this.props.guild_name}</Text>
- <HCaptcha
- id="Captchas mitigate problems"
- sitekey="85074411-fa13-4d9b-b901-53095c6d1fc6"
- onVerify={token => this.handleVerificationSuccess(this, token)}
- theme={this.theme ? "light" : "dark"}
- />
+ <div style={{height: "125px"}}>
+ <HCaptcha
+ id="Captchas mitigate problems"
+ sitekey="85074411-fa13-4d9b-b901-53095c6d1fc6"
+ onVerify={token => this.handleVerificationSuccess(this, token)}
+ theme={this.theme ? "light" : "dark"}
+ />
+ </div>
<button type="button" className={Styles.button + " " + (this.state.captchaComplete ? Styles.buttonComplete : null)} onClick={(success) => this.submitForm(this)}>Proceed</button>
- <List>
+ <List colour="F27878">
<ListItem>This is an automatic check performed by RSM.</ListItem>
<ListItem>By clicking Proceed, you will be given the <code>{this.props.role_name}</code> role in <code>{this.props.guild_name}</code>.</ListItem>
<ListItem>For the full list of data stored by RSM, please check <a href="https://clicksminuteper.github.io/policies/rsm#verification">Here</a></ListItem>
diff --git a/pages/rsmv/rsmvtesting.js b/pages/rsmv/rsmvtesting.js
new file mode 100644
index 0000000..4a271fa
--- /dev/null
+++ b/pages/rsmv/rsmvtesting.js
@@ -0,0 +1,96 @@
+import { Component } from 'react';
+import Styles from '../../styles/rsmv/rsmv.module.css'
+import HCaptcha from 'react-hcaptcha';
+import Axios from 'axios';
+import Router from 'next/router';
+import React from 'react';
+import Header from '../../Components/Header'
+
+import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../../Components/Panels';
+import { List, ListItem, Code } from '../../Components/Texttools';
+class RSMV extends Component {
+
+ constructor(props) {
+ super(props);
+ this.v = false;
+ this.state = {
+ captchaComplete: false,
+ clicked: false
+ }
+ }
+
+ async handleVerificationSuccess(cls, token) {
+ const chk = await Axios.put('/api/rsmv/verifyTkn', { tkn: token.toString() })
+ if(chk.data.success == true) {
+ this.setState({
+ captchaComplete: true
+ })
+ return cls.v = true;
+ } else {
+ return;
+ }
+ }
+
+ async submitForm(cls) {
+ if ( cls.state.clicked ) {
+ return
+ }
+ cls.setState({
+ clicked: true
+ })
+ if (!cls.v) {
+ return Router.push('/rsmv/failure','/rsmv')
+ }
+ let code = await Axios.post('/api/rsmv/complete', {
+ uid:cls.props.uID,
+ rid:cls.props.rID,
+ gid:cls.props.gID,
+ code:cls.props.code
+ });
+ console.log(code.status)
+ if (code.status === 200 ) return Router.push('/rsmv/success','/rsmv')
+ else return Router.push('/rsmv/failure','/rsmv')
+ }
+
+ render() {
+ return <>
+ <Header
+ name={
+ <>
+ <img alt="Server icon" style={{borderRadius: "50%", height: "64px", width: "auto"}} src={"https://i1.sndcdn.com/artworks-000045941811-q634od-t500x500.jpg"} />
+ <br />
+ {"ERROR"}
+ </>
+ }
+ nameOverwrite="Verify"
+ subtext={`-5 members`}
+ gradient={["F27878", "D96B6B"]}
+ wave="web/waves/header/rsm"
+ buttons={[]}
+ />
+ <p id="start" />
+ <AutoLayout>
+ <Panel>
+ <Text>Complete the check below to join ERROR</Text>
+ <div style={{height: "125px"}}>
+ <HCaptcha
+ id="Captchas mitigate problems"
+ sitekey="85074411-fa13-4d9b-b901-53095c6d1fc6"
+ onVerify={token => this.handleVerificationSuccess(this, token)}
+ theme={this.theme ? "light" : "dark"}
+ />
+ </div>
+ <button type="button" className={Styles.button + " " + (this.state.captchaComplete ? Styles.buttonComplete : null)} onClick={(success) => this.submitForm(this)}>Proceed</button>
+ <List colour="F27878">
+ <ListItem>This is an automatic check performed by RSM.</ListItem>
+ <ListItem>By clicking Proceed, you will be given the <code>MISSING</code> role in <code>ERROR</code>.</ListItem>
+ <ListItem>For the full list of data stored by RSM, please check <a href="https://clicksminuteper.github.io/policies/rsm#verification">Here</a></ListItem>
+ </List>
+ <Text>You can add RSM to your server by inviting it <a href="https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands">here</a>.</Text>
+ </Panel>
+ </AutoLayout>
+ </>
+ }
+}
+
+export default RSMV;
diff --git a/pages/supporters.js b/pages/supporters.js
index 2cde96c..1220e60 100644
--- a/pages/supporters.js
+++ b/pages/supporters.js
@@ -1,6 +1,85 @@
import Header from '../Components/Header'
+import Marquee from 'react-fast-marquee'
+import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
+import { Component } from 'react';
+import Image from 'next/image';
+import { Popover } from 'react-tiny-popover';
+
+class Supporter extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isPopoverOpen: false,
+ };
+ }
+
+ clicked() {
+ let content = this.props.children
+ navigator.clipboard.writeText(content)
+ this.setState({isPopoverOpen: true})
+ setTimeout(() => {
+ this.setState({isPopoverOpen: false})
+ }, 2500)
+ }
+
+ render() {
+ if ( this.props.clickable === false) {
+ return <div style={{
+ display: 'flex', flexDirection: 'column', alignItems: 'center',
+ justifyContent: 'center', backgroundColor: '#6576CC', color: '#FFFFFF',
+ paddingInline: '20px', paddingBlock: '0.25rem',
+ borderRadius: '10px', boxShadow: '0px -3px 10px 2px #424242'
+ }}>{this.props.children}</div>
+ } else {
+ return <Popover
+ isOpen={this.state.isPopoverOpen}
+ positions={['top', 'bottom', 'left', 'right']} // preferred positions by priority
+ content={<Supporter colour={this.props.colour} clickable={false}>{this.props.sub}</Supporter>}
+ >
+ <div onClick={() => this.clicked()} style={{
+ display: 'flex', flexDirection: 'column', alignItems: 'center',
+ justifyContent: 'center', backgroundColor: '#6576CC', color: '#FFFFFF',
+ paddingInline: '20px', paddingBlock: '0.25rem', marginInline: '5px',
+ borderRadius: '10px'
+ }}>{this.props.children}</div>
+ </Popover>
+ }
+ }
+}
+
+
export default function Home() {
+ const groups = [
+ { // Devs and testers
+ "TheCodedProf": "Programmer",
+ "Minion3665": "Programmer",
+ "PineappleFan": "Programmer",
+ "Eek": "Programmer",
+ "Dilythion": "Programmer",
+ "Tani": "Programmer",
+ "CocoboloDesk": "Legal",
+ "GenElectrovise": "Plugins"
+ },
+ { // Packages
+ "react-tiny-popover": "React popovers",
+ "react-in-viewport": "Scroll in effects",
+ "hcaptcha": "RSM Verify captchas",
+ "react-fast-marquee": "These scrolling sections",
+ "theme-ui": "Checked out the opposite theme?",
+ "Nextjs": "It's all built in Next"
+ },
+ { // Programs
+ "Figma": "Designing - Thanks for staying free <3",
+ "Discord": "Chatting",
+ "Flaticon": "Icons"
+ },
+ { // Special thanks
+ "InternetMetro": "Minecraft server building",
+ "RetroEvelyne": "Minecraft server command blocks",
+ "Eddy": "Minecraft server building",
+ }
+ ]
return (
<>
<Header
@@ -9,15 +88,37 @@
gradient={["71AFE5", "6576CC"]}
wave="web/waves/header/clicksforms"
buttons={[]}
+ hideArrow={true}
/>
- {/* <AutoSpacing>
- <br />
- <Scroller text={[
- "PineappleFan",
- "TheCodedProf",
- "Minion3665"
- ]} />
- </AutoSpacing>*/}
+ <AutoLayout>
+ <Panel halfSize={false}>
+ <Title>Supporters</Title>
+ <Text>People and packages who have helped and are helping Clicks</Text>
+ {
+ groups.map((group, index) => {
+ return (
+ <div key={index} style={{width: "100%"}}>
+ <Marquee
+ gradient={false}
+ style={{width: "100%", height: "30px"}}
+ speed={Math.floor(Math.random() * (40) + 20)}
+ direction={"right"}
+ >
+ {
+ Object.keys(groups[index]).map((supporter, index2) => {
+ return (
+ <Supporter key={index} sub={groups[index][supporter]}>{supporter}</Supporter>
+ )
+ })
+ }
+ </Marquee>
+ </div>
+ )
+ })
+ }
+ <Image src="/heart.svg" width={100} height={100} />
+ </Panel>
+ </AutoLayout>
</>
)
}