blob: 155d605d3a43f9189df87bad3b425d1f1bc08f38 [file] [log] [blame]
pineafan5b612d92022-02-17 19:22:50 +00001import { Card, CardRow } from '../Components/Card';
Samuel Shuert8aac6012021-09-02 13:21:30 -05002import Header from '../Components/Header'
pineafane0283a82022-02-13 10:05:56 +00003import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
4import { List, ListItem, Code } from '../Components/Texttools';
pineafan1de98762022-02-13 13:35:30 +00005import React from 'react';
Samuel Shuert8aac6012021-09-02 13:21:30 -05006
pineafan1de98762022-02-13 13:35:30 +00007export default class Home extends React.Component {
8 constructor(props) {
9 super(props);
10 this.state = {
11 toHighlight: null,
12 };
13 }
14
pineafanff3d4522022-05-06 19:51:02 +010015 highlightSection(section) {
16 this.setState({toHighlight: section});
pineafan1de98762022-02-13 13:35:30 +000017 }
18
19 render() {
20 return (
21 <>
22 <Header
pineafanff3d4522022-05-06 19:51:02 +010023 name={"Clicks​Forms"}
24 customImage={"https://assets.clicks.codes/web/logos/clicksforms.svg"}
25 embedImage="https://assets.clicks.codes/bots/clicksforms/normal.png"
pineafan1de98762022-02-13 13:35:30 +000026 subtext="Custom forms on Discord"
27 gradient={["71AFE5", "6576CC"]}
28 wave="web/waves/header/clicksforms"
29 buttons={[
30 {id: "commands", color: "6576CC", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
31 {id: "services", color: "6576CC", buttonText: "FFFFFF", link: "#services", text: "Services"},
32 {id: "privacy", color: "6576CC", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
33 {id: "invite", color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
34 ]}
pineafanff3d4522022-05-06 19:51:02 +010035 callback={() => this.highlightSection()}
pineafan1de98762022-02-13 13:35:30 +000036 />
37 <AutoLayout>
38 <Panel halfSize={true} id="commands">
39 <Title>Commands</Title>
pineafanff3d4522022-05-06 19:51:02 +010040 <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="commands"/>
pineafan1de98762022-02-13 13:35:30 +000041 <Text>Standard commands to use ClicksForms</Text>
42 <List colour="6576CC">
43 <ListItem><Code colour="6576CC">/accept</Code> Completes a form you are asked to fill in.</ListItem>
44 <ListItem><Code colour="6576CC">/apply</Code> Apply to a form.</ListItem>
45 <ListItem><Code colour="6576CC">/create</Code> Creates a new form.</ListItem>
46 <ListItem><Code colour="6576CC">/download</Code> Downloads a form from a service e.g. Google Forms.</ListItem>
47 <ListItem><Code colour="6576CC">/help</Code> Lists all commands.</ListItem>
48 <ListItem><Code colour="6576CC">/responses</Code> Lets you view responses to your servers form.</ListItem>
49 <ListItem><Code colour="6576CC">/manage</Code> Lets you manage your servers forms.</ListItem>
50 </List>
51 </Panel>
pineafan9babd752022-10-21 21:47:52 +010052 <Panel halfSize={true} id="services" style={this.state.toHighlight === "services" ? {border: "solid 10px red"} : {}}>
pineafan1de98762022-02-13 13:35:30 +000053 <Title>Services</Title>
pineafanff3d4522022-05-06 19:51:02 +010054 <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="services"/>
pineafan3b0852d2022-05-06 20:39:59 +010055 <Text>ClicksForms supports services such as <a href="https://docs.google.com/forms">Google Forms</a> through our Add-on.</Text>
56 <Text>Our API is public. You can view it <a href="/clicksforms/docs">here</a>.</Text>
pineafan1de98762022-02-13 13:35:30 +000057 </Panel>
58 <Panel halfSize={true} id="privacy">
59 <Title>Privacy</Title>
pineafanff3d4522022-05-06 19:51:02 +010060 <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="privacy"/>
pineafan3b0852d2022-05-06 20:39:59 +010061 <Text>You should always know what we know and store about you, so <a href="https://clicksminuteper.github.io/policies/clicksforms">here</a> is the complete list.</Text>
62 <Text>We also have a list of terms for using ClicksForms, it can be viewed <a href="https://clicksminuteper.github.io/policies/clicksformstos">here</a>.</Text>
pineafan1de98762022-02-13 13:35:30 +000063 </Panel>
64 <Panel halfSize={true} id="invite">
65 <Title>Invite</Title>
pineafanff3d4522022-05-06 19:51:02 +010066 <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="invite"/>
pineafan1de98762022-02-13 13:35:30 +000067 <CardRow><Card
68 wave="clicksforms"
69 icon="bots/clicksforms/circle"
70 buttonText={"FFFFFF"} gradient={["71AFE5", "6576CC"]}
pineafanff3d4522022-05-06 19:51:02 +010071 title="ClicksForms"
pineafan1de98762022-02-13 13:35:30 +000072 subtext="Invite ClicksForms to your server"
73 buttons={[
74 {color: "775EBF", link: "https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands", text: "Invite"}
75 ]}
pineafanff3d4522022-05-06 19:51:02 +010076 url="https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands"
pineafan1de98762022-02-13 13:35:30 +000077 /></CardRow>
78 </Panel>
79 </AutoLayout>
80 </>
81 )
82 }
pineafanff3d4522022-05-06 19:51:02 +010083}