diff --git a/prettierrc.json b/prettierrc.json
new file mode 100644
index 0000000..38462e4
--- /dev/null
+++ b/prettierrc.json
@@ -0,0 +1,18 @@
+{
+ "endOfLine": "lf",
+ "printWidth": 120,
+ "arrowParens": "avoid",
+ "bracketSpacing": true,
+ "htmlWhitespaceSensitivity": "css",
+ "insertPragma": false,
+ "bracketSameLine": false,
+ "jsxSingleQuote": true,
+ "proseWrap": "preserve",
+ "quoteProps": "as-needed",
+ "requirePragma": false,
+ "semi": false,
+ "singleQuote": false,
+ "tabWidth": 2,
+ "trailingComma": "none",
+ "useTabs": false
+}
diff --git a/public/blue-dot.png b/public/blue-dot.png
new file mode 100644
index 0000000..1856f48
Binary files /dev/null and b/public/blue-dot.png differ
diff --git a/src/components/LockedContent.tsx b/src/components/LockedContent.tsx
new file mode 100644
index 0000000..32818b8
--- /dev/null
+++ b/src/components/LockedContent.tsx
@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import distance from "@/utils/distance";
+
+import { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons";
+import { useEffect, useState } from "react";
+
+import "../styles/locked-content.css";
+
+const LocationButton = () => {
+ const [isLocked, setIsLocked] = useState(true);
+
+ useEffect(() => {
+ setInterval(
+ () =>
+ navigator.geolocation.getCurrentPosition(
+ (position: GeolocationPosition) => {
+ const pos = {
+ lat: position.coords.latitude,
+ lng: position.coords.longitude,
+ };
+
+ const totalDistanceInKM = distance(
+ pos.lat,
+ pos.lng,
+ pos.lat,
+ pos.lng
+ ).toFixed(0);
+
+ if (totalDistanceInKM === "0") {
+ setIsLocked(false);
+ }
+ }
+ ),
+ 3000
+ );
+ }, []);
+
+ if (isLocked) {
+ return (
+
+
+
+
+
+
+
+
+ İçeriği görmek için konuma gitmelisin!
+
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+
+
+ İçeriği görmek için butona bas!
+
+
+
+
+ );
+ }
+};
+
+export default LocationButton;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9df5626..9232e47 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,9 +11,9 @@ import {
} from '@/components/ui/card';
import { CalendarIcon } from '@radix-ui/react-icons';
-import { LockClosedIcon } from '@radix-ui/react-icons';
import '../styles/locked-page.css';
+import LocationButton from '@/components/LockedContent';
---
@@ -36,23 +36,10 @@ import '../styles/locked-page.css';
-
-
-
-
-
- İçeriği görmek için konuma gitmelisin!
-
-
-
-
-
-
+
+
+
-
-
diff --git a/src/pages/unlocked.astro b/src/pages/unlocked.astro
new file mode 100644
index 0000000..da6a201
--- /dev/null
+++ b/src/pages/unlocked.astro
@@ -0,0 +1,198 @@
+---
+import '@/styles/globals.css';
+import Layout from '../layouts/Layout.astro';
+import { Button } from '@/components/ui/button';
+import {
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+
+import { CalendarIcon } from '@radix-ui/react-icons';
+import { LockClosedIcon } from '@radix-ui/react-icons';
+
+import '../styles/locked-page.css';
+---
+
+
+
+
+
+ Ayşe
+
+
+
+ Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
+ lazım 😘
+
+
+
+
+ 5 saat önce
+
+
+
+
+
+
+
+
+
+
+ İçeriği görmek için konuma gitmelisin!
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/locked-content.css b/src/styles/locked-content.css
new file mode 100644
index 0000000..5b65507
--- /dev/null
+++ b/src/styles/locked-content.css
@@ -0,0 +1,23 @@
+.module {
+ display: grid;
+ place-items: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.module::before {
+ content: "";
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-image: url("/sample-selfie.webp");
+ background-position: center;
+ background-repeat: no-repeat;
+ filter: blur(20px);
+}
+
+.module-inside {
+ position: relative;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 92402b2..c05caa2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,9 +5,7 @@
"jsxImportSource": "react",
"baseUrl": ".",
"paths": {
- "@/*": [
- "./src/*"
- ]
+ "@/*": ["./src/*"]
}
}
}