feat: front

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

declarations.d.ts

@@ -0,0 +1,3 @@
+// NOTE: The declaration below was injected by `"framer"`
+// see https://www.framer.com/docs/guides/handshake for more information.
+declare module "https://framer.com/m/*";

package-lock.json

@@ -8,8 +8,10 @@
       "name": "braintok-2",
       "version": "0.1.0",
       "dependencies": {
+        "framer": "^2.4.1",
         "next": "14.2.15",
         "react": "^18",
+        "react-circular-progressbar": "^2.1.0",
         "react-dom": "^18"
       },
       "devDependencies": {
@@ -36,6 +38,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -234,6 +255,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@next/env": {
       "version": "14.2.15",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.15.tgz",
@@ -2171,6 +2198,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2297,6 +2330,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fontfaceobserver": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
+      "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2324,6 +2363,50 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/framer/-/framer-2.4.1.tgz",
+      "integrity": "sha512-kInsb+tmtNEvOeRa8wT2oRAl8Xe1L8ev4ahinB875Xh0zPBLt5Di6fuvBUILnDUU6mqmM+6QPiNxg62Va66V4Q==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.3.1",
+        "eventemitter3": "^3.1.0",
+        "fontfaceobserver": "^2.1.0",
+        "hoist-non-react-statics": "^3.3.2",
+        "hsluv": "^0.0.3"
+      },
+      "peerDependencies": {
+        "framer-motion": "^10.13.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
+      "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2645,6 +2728,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hsluv": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
+      "integrity": "sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ==",
+      "license": "MIT"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4112,6 +4210,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-circular-progressbar": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
+      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -4129,7 +4236,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/read-cache": {

package.json

@@ -9,18 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer": "^2.4.1",
+    "next": "14.2.15",
     "react": "^18",
-    "react-dom": "^18",
+    "react-circular-progressbar": "^2.1.0",
-    "next": "14.2.15"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.15",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
+    "typescript": "^5"
-    "eslint-config-next": "14.2.15"
   }
 }

src/app/landing/page.tsx

@@ -3,20 +3,29 @@
 import arrow from "../../img/arrow.png";
 import gradient from "../../img/gradient.png";
 import Image from "next/image";
+import { useState } from "react";
+import { Time } from "@/app/landing/time";
 
 export default function Landing() {
+    const [clicked, setClicked] = useState(false);
+
     return (
-        <div className="flex-grow flex flex-col">
+            clicked ?
-            <div className="my-auto">
+                <Time />
-                <div className="text-5xl text-center font-bold">
+                :
-                    Swipe to start grinding
+                <div onMouseDown={() => setClicked(true)} className="flex-grow flex flex-col">
+                    <div className="my-auto">
+                        <div unselectable="on" className="select-none text-5xl text-center font-bold">
+                            Swipe to start grinding
+                        </div>
+                        <Image draggable={false} unselectable={"on"} className="mx-auto mt-10" width={65} alt="arrow"
+                               src={arrow} />
+                    </div>
+                    <Image className="absolute bottom-0 z-[-999] w-full h-[200px] opacity-60 pointer-events-none"
+                           alt="" draggable={false} unselectable={"on"}
+                           width={window.innerWidth}
+                           src={gradient}
+                    />
                 </div>
-                <Image className="mx-auto mt-10" width={65} alt="arrow" src={arrow} />
-            </div>
-            <Image className="absolute bottom-0 z-[-999] w-full h-[200px] opacity-60"
-                   alt=""
-                 width={window.innerWidth}
-                 src={gradient}/>
-        </div>
     )
 }

src/app/landing/time.tsx

@@ -0,0 +1,26 @@
+"use client"
+import 'react-circular-progressbar/dist/styles.css';
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+// import { useState } from "react";
+
+export function Time() {
+    // const [secondsLeft, _setSecondsLeft] = useState(100);
+    const percentage = 66;
+
+    return <div className="absolute top-0 z-[-999] flex flex-col bg-[#ff5757] h-full w-full items-center justify-center">
+        <h1 className="absolute text-9xl font-bold drop-shadow-md shadow-black">
+            {
+                Math.trunc(100 / 60)
+            }
+        </h1>
+        <div className="flex w-[300px] h-[300px]">
+            <CircularProgressbar
+                background={false}
+                styles={buildStyles({
+                    pathColor: "white",
+                    trailColor: "#ff5757",
+                    strokeLinecap: "butt"
+                })} value={percentage} />
+        </div>
+    </div>
+}

src/app/layout.tsx

@@ -22,7 +22,6 @@ export default function RootLayout({
         className="antialiased h-[100vh] flex flex-col"
     >
         <div className="flex w-100 p-5 text-5xl text-center flex-shrink py-6">
-            <Image className="mr-auto" alt="mindmap" width={45} src={mindmap}/>
             <h1 className={raleway_heavy.className + " top-[20px] absolute left-[50%] translate-x-[-50%]"}>
                 logo
             </h1>