bugs
diff --git a/Components/NavBar.js b/Components/NavBar.js
index 4af9457..a55c15e 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -35,7 +35,7 @@
}
}
- onEnter() {
+ /* onEnter() {
if ( !this.isTouchDevice ) {
return this.toggleVertical(this, true)
}
@@ -44,7 +44,7 @@
onLeave() {
return this.toggleVertical(this, false)
}
-
+*/
onClick() {
if ( this.isTouchDevice ) {
return this.toggleVertical(this)
@@ -60,10 +60,10 @@
render() {
return (
<>
- <div ref={this.hoverSensor} className={(Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null))} onMouseLeave={() => {this.onLeave()}}>
+ <div ref={this.hoverSensor} className={this.isTouchDevice ? (Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null)) : Styles.containerDesktop + " " + Styles.container}>
<div className={Styles.group}>
- <img className={Styles.headerIcon} src="/Icons/CMP.svg" onMouseEnter={() => {this.onEnter()}} onClick={() => {this.onClick()}}/>
- <a href="/#"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
+ <img className={Styles.headerIcon} src="/Icons/CMP.svg" onClick={() => {this.onClick()}}/>
+ <a href="/#"><img className={Styles.icon} src="/Icons/Homepage.svg"/></a>
<a href="/gps#"><img className={Styles.icon} src="/Icons/GS.svg"/></a>
<a href="/rsm#"><img className={Styles.icon} src="/Icons/RM.svg"/></a>
<a href="/clicksforms#"><img className={Styles.icon} src="/Icons/CF.svg"/></a>
diff --git a/pages/clicksforms.js b/pages/clicksforms.js
index a69f314..3eb62f3 100644
--- a/pages/clicksforms.js
+++ b/pages/clicksforms.js
@@ -5,7 +5,9 @@
import CardRow from '../Components/CardRow'
import Header from '../Components/Header'
import AutoSpacing from '../Components/AutoSpacing'
+import TileRow from '../Components/TileRow'
import SectionHeading from '../Components/SectionHeading'
+import Paragraph from '../Components/Paragraph'
export default function Home() {
return (
@@ -18,6 +20,7 @@
buttons={[
{color: "6576CC", buttonText: "FFFFFF", link: "#features", text: "Features"},
{color: "6576CC", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
+ {color: "6576CC", buttonText: "FFFFFF", link: "#services", text: "Services"},
{color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
hideArrow={true}
@@ -25,8 +28,32 @@
<AutoSpacing
elements={[
<SectionHeading title="Features" id="features"/>,
+ <TileRow tiles={[
+ <img src="/Features/ClicksForms/Anonymous.svg" />,
+ <img src="/Features/ClicksForms/Buttons.svg" />,
+ <img src="/Features/ClicksForms/Export.svg" />,
+ <img src="/Features/ClicksForms/Forms.svg" />,
+ <img src="/Features/ClicksForms/Multichoice.svg" />,
+ <img src="/Features/ClicksForms/Questions.svg" />,
+ <img src="/Features/ClicksForms/Types.svg" />,
+ <img src="/Features/ClicksForms/Responses.svg" />,
+ ]} />,
<SectionHeading title="Commands" id="commands"/>,
- <SectionHeading title="Invite" id="invite"/>
+ <Paragraph><code>/accept</code>: Completes a form you are asked to fill in</Paragraph>,
+ <Paragraph><code>/apply</code>: Apply to a form</Paragraph>,
+ <Paragraph><code>/create</code>: Creates a new form</Paragraph>,
+ <Paragraph><code>/download</code>: Downloads a form from a service e.g. Google Forms</Paragraph>,
+ <Paragraph><code>/help</code>: Lists all commands</Paragraph>,
+ <Paragraph><code>/responses</code>: Lets you view responses to your servers form</Paragraph>,
+ <Paragraph><code>/manage</code>: Lets you manage your servers forms</Paragraph>,
+ <SectionHeading title="Services" id="services"/>,
+ <Paragraph>ClicksForms support services like <a href="https://forms.google.com">Google Forms</a> through our Add-on (Awaiting approval)</Paragraph>,
+ <Paragraph>Our API is public. You can view it on <a href="https://clicksminuteper.giuthub.io/docs/clicksforms">GitHub</a></Paragraph>,
+ <SectionHeading title="Invite" id="invite"/>,
+ <Paragraph>
+ ClicksForms is available for free on
+ <a href="https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands" text="Discord">Discord</a>
+ </Paragraph>
]}/>
</>
)
diff --git a/pages/index.js b/pages/index.js
index c32a325..91f31e9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -12,7 +12,7 @@
<>
<Header
name="Clicks Minute Per"
- subtext="We do cool stuff"
+ subtext="Custom Made Programs"
gradient={["6576CC", "4B5899"]}
wave="Main"
buttons={[]}
diff --git a/styles/globals.css b/styles/globals.css
index ba7da79..1ddc94c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -7,11 +7,16 @@
--card-overlay-color: rgba(0, 0, 0, 0);
--card-filter: drop-shadow(0px 0px 5px #00000080);
--page-background: #ffffff;
+ --link-color: #6576CC;
+ --hint-color: #f1f1f1;
/* --card-background-color: rgba(0, 0, 0, 0.65);
--card-text-color: #ffffff;
--card-overlay-filter: brightness(0.75);
--card-filter: drop-shadow(0px 0px 5px #42424280);
- --page-background: #252525; */
+ --page-background: #252525;
+ --link-color: #6576CC;
+ --hint-color: #10;
+ */
background-color: var(--page-background);
@@ -19,8 +24,9 @@
}
a {
- color: inherit;
text-decoration: none;
+ transition: 0.5s ease-in-out;
+ color: var(--link-color)
}
* {
@@ -28,3 +34,14 @@
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
+
+code {
+ font-family: monospace;
+ font-weight: bold;
+ color: #F27878;
+ background-color: var(--hint-color);
+ padding: 2px;
+ font-size: 105%;
+ border-radius: 5px;
+ padding-left: 5px;
+}
diff --git a/styles/navbar.module.css b/styles/navbar.module.css
index 37ab894..09d3389 100644
--- a/styles/navbar.module.css
+++ b/styles/navbar.module.css
@@ -17,7 +17,6 @@
border-radius: 32px;
transition: 0.5s ease-in-out;
}
-
.group {
display: flex;
flex-direction: column;
@@ -50,10 +49,27 @@
}
.containerOpen {
- max-height: 550px;
+ max-height: 460px;
}
-@media screen and (min-width: 550px) {
+.containerDesktop {
+ animation-name: containerCloseOnStart;
+ animation-duration: 0.5s;
+ animation-direction: forwards;
+ animation-timing-function: ease-in-out;
+}
+
+@keyframes containerCloseOnStart {
+ from { max-height: 460px; }
+ to { max-height: 64px ; }
+}
+
+.containerDesktop:hover {
+ max-height: 460px;
+ animation-name: none;
+}
+
+@media screen and (min-width: 450px) {
.container {
flex-direction: row;
justify-content: left;
@@ -87,7 +103,11 @@
margin-left: -3px;
}
.containerOpen {
- max-width: 550px;
+ max-width: 460px;
+ max-height: 64px;
+ }
+ .containerDesktop:hover {
+ max-width: 460px;
max-height: 64px;
}
.icon {
@@ -95,4 +115,8 @@
width: 50px;
margin-left: 5px;
}
+ @keyframes containerCloseOnStart {
+ from { max-width: 460px; }
+ to { max-width: 64px ; }
+ }
}
\ No newline at end of file
diff --git a/styles/tilerow.module.css b/styles/tilerow.module.css
index 832b95e..701f9fc 100644
--- a/styles/tilerow.module.css
+++ b/styles/tilerow.module.css
@@ -10,4 +10,7 @@
.item {
display: flex;
height: 35vmin;
+ width: fit-content;
+ margin-left: 10px;
+ margin-right: 10px;
}
\ No newline at end of file