just fixed some stuff :D
diff --git a/Components/Card.js b/Components/Card.js
index a5c23ce..0673883 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -1,23 +1,27 @@
import { Component } from "react";
import Styles from '../styles/Components/card.module.css';
+import react from 'react'
class Card extends Component {
constructor(props) {
super(props);
+ this.state = {
+ clicked: false,
+ }
}
render() {
return (
- <div className={Styles.card} style={{
+ <div className={Styles.card + " " + (this.state.clicked ? Styles.clicked : "")} style={{
margin: "0"
- }}>
- <div className={Styles.backgroundGradient} style={{
+ }} onClick={() => { this.setState({clicked: !this.state.clicked}) }}>
+ <div className={Styles.backgroundGradient + " " + (this.state.clicked ? Styles.clicked : "")} style={{
backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`
}} />
<img alt="" className={Styles.backgroundImage} src={`https://assets.clicksminuteper.net/web/waves/card/${this.props.wave}.svg`} draggable={false} />
<div className={Styles.panel}>
<div className={Styles.titleContainer}>
- <img alt="Project icon" className={Styles.image} src={"https://assets.clicksminuteper.net/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
+ <img alt="Project icon" className={Styles.image + " " + (this.state.clicked ? Styles.clicked : "")} src={"https://assets.clicksminuteper.net/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
<h1 className={Styles.title}>{this.props.title}</h1>
</div>
<p className={Styles.subtext}>{this.props.subtext}</p>
@@ -41,4 +45,23 @@
}
}
-export default Card;
\ No newline at end of file
+class CardRow extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+
+ render() {
+ return (
+ <div className={Styles.container}>
+ {
+ react.Children.toArray(this.props.children).map((item, index) => {
+ return <div className={Styles.item} key={index}>{item}</div>
+ })
+ }
+ </div>
+ )
+ }
+}
+
+export { Card, CardRow };
\ No newline at end of file
diff --git a/Components/CardRow.js b/Components/CardRow.js
deleted file mode 100644
index 7421f19..0000000
--- a/Components/CardRow.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import react, { Component } from "react";
-import Styles from '../styles/Components/cardrow.module.css';
-
-class CardRow extends Component {
- constructor(props) {
- super(props);
- }
-
-
- render() {
- return (
- <div className={Styles.container}>
- {
- react.Children.toArray(this.props.children).map((item, index) => {
- return <div className={Styles.item} key={index}>{item}</div>
- })
- }
- </div>
- )
- }
-}
-
-export default CardRow;
\ No newline at end of file
diff --git a/Components/Docs.js b/Components/Docs.js
index 5e6b623..c15b1d3 100644
--- a/Components/Docs.js
+++ b/Components/Docs.js
@@ -1,6 +1,3 @@
-import react, { Component } from "react";
-import Styles from '../styles/Components/cardrow.module.css';
-
class Docs extends Component {
/*
Properties:
@@ -29,7 +26,3 @@
return "a"
}
}
-
-
-
-export default CardRow;
\ No newline at end of file
diff --git a/pages/404.js b/pages/404.js
index 996d01c..fc521ec 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,5 +1,5 @@
import Header from '../Components/Header'
-import {Component} from 'react'
+import { Component } from 'react'
export default class Home extends Component {
constructor(props) {
diff --git a/pages/clicksforms.js b/pages/clicksforms.js
index 1211c9e..bd2d7aa 100644
--- a/pages/clicksforms.js
+++ b/pages/clicksforms.js
@@ -1,5 +1,4 @@
-import Card from '../Components/Card'
-import CardRow from '../Components/CardRow';
+import { Card, CardRow } from '../Components/Card';
import Header from '../Components/Header'
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
import { List, ListItem, Code } from '../Components/Texttools';
diff --git a/pages/cpm.js b/pages/cpm.js
index 22b3a68..e3cf768 100644
--- a/pages/cpm.js
+++ b/pages/cpm.js
@@ -1,5 +1,4 @@
-import Card from '../Components/Card';
-import CardRow from '../Components/CardRow';
+import { Card, CardRow } from '../Components/Card';
import Header from '../Components/Header';
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
diff --git a/pages/gps.js b/pages/gps.js
index aeb9dd8..971c419 100644
--- a/pages/gps.js
+++ b/pages/gps.js
@@ -1,5 +1,4 @@
-import Card from '../Components/Card'
-import CardRow from '../Components/CardRow';
+import { Card, CardRow } from '../Components/Card';
import Header from '../Components/Header'
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
import { List, ListItem, Code } from '../Components/Texttools';
diff --git a/pages/hooky.js b/pages/hooky.js
index 50573c9..f8fe17f 100644
--- a/pages/hooky.js
+++ b/pages/hooky.js
@@ -1,5 +1,4 @@
-import Card from '../Components/Card'
-import CardRow from '../Components/CardRow';
+import { Card, CardRow } from '../Components/Card';
import Header from '../Components/Header'
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
diff --git a/pages/index.js b/pages/index.js
index 80ee8a0..a72d401 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,4 @@
-import Card from '../Components/Card';
-import CardRow from '../Components/CardRow';
+import { Card, CardRow } from '../Components/Card';
import Header from '../Components/Header';
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
@@ -24,7 +23,6 @@
icon="bots/gps/circle"
buttons={[
{color: "6576CC", link: "https://discordapp.com/oauth2/authorize?client_id=679361555732627476&scope=bot&permissions=130048", text: "Invite"},
- {color: "6576CC", link: "/gps", text: "About"}
]}
buttonText={"FFFFFF"} gradient={["78ECF2", "71AFE5"]}
/>
@@ -33,7 +31,6 @@
icon="bots/rsm/circle"
buttons={[
{color: "424242", link: "https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands",text:"Invite"},
- {color: "424242", link: "/rsm", text:"About"}
]}
buttonText={"FFFFFF"} gradient={["F27878", "D96B6B"]}
/>
@@ -41,9 +38,7 @@
wave="clicksforms" title="ClicksForms" subtext="Create custom forms for Discord"
icon="bots/clicksforms/circle"
buttons={[
- {color: "775EBF", link: "https://clicksminuteper.github.io/docs/clicksforms", text:"API", newTab: true},
{color: "775EBF", link: "https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands",text:"Invite"},
- {color: "775EBF", link: "/clicksforms", text: "About"}
]}
buttonText={"FFFFFF"} gradient={["71AFE5", "6576CC"]}
/>
@@ -51,7 +46,6 @@
wave="castaway" title="Castaway" subtext="Stranded on Discord"
icon="bots/castaway/circle"
buttons={[
- {color: "F2D478", link: "/castaway", text: "About"}
]}
buttonText={"000000"} gradient={["71AFE5", "78ECF2"]}
/>
@@ -60,7 +54,6 @@
icon="bots/hooky/circle"
buttons={[
{color: "EDC575", link: "https://discord.com/oauth2/authorize?client_id=752188923505279037&scope=bot&permissions=536882176", text: "Invite"},
- {color: "EDC575", link: "/hooky", text: "About"}
]}
buttonText={"000000"} gradient={["424242", "8D8D8D"]}
/>
@@ -68,8 +61,7 @@
wave="clcks" title="Clcks" subtext="Clicks Minute Per web apps"
icon="web/icons/clcks"
buttons={[
- {color: "78ECF2", link: "https://clcks.dev", text: "View Apps"
- }]}
+ ]}
buttonText={"000000"} gradient={["C4C4C4", "8D8D8D"]}
/>
</CardRow>
diff --git a/pages/rsm.js b/pages/rsm.js
index 1aa96da..8f63c30 100644
--- a/pages/rsm.js
+++ b/pages/rsm.js
@@ -1,8 +1,7 @@
-import Card from '../Components/Card'
+import { Card, CardRow } from '../Components/Card';
import Header from '../Components/Header'
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
import { List, ListItem, Code } from '../Components/Texttools';
-import CardRow from '../Components/CardRow'
// import FeatureImages from '../public/Features/RSM/Images.svg';
// import FeatureAutomate from '../public/Features/RSM/Automate.svg';
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 52544a4..775be5c 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -32,6 +32,13 @@
overflow: hidden;
margin: 100px;
transition: filter 0.3s ease-in-out;
+ transition: transform 0.15s ease-in-out;
+
+ transition: all 10s ease-in-out;
+}
+.card:hover {
+ transform: scale(1.025);
+ cursor: pointer;
}
@@ -117,4 +124,36 @@
.card {
height: 254px;
}
+}
+
+
+.card.clicked {
+ transform: scale(1) !important;
+ z-index: 9999;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+}
+
+.backgroundGradient.clicked {
+ background-image: red;
+}
+
+/* .image.clicked {
+ width: 1000px !important;
+} */
+
+.container {
+ width: calc(100% - 20px);
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+}
+
+.item {
+ width: min(428px, 90%);
}
\ No newline at end of file