diff --git a/package-lock.json b/package-lock.json
index 9eec934..fb15b2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,8 @@
"@astrojs/react": "^3.0.9",
"@astrojs/tailwind": "^5.1.0",
"@radix-ui/react-icons": "^1.3.0",
+ "@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
- "@types/leaflet": "^1.9.8",
"@types/react": "^18.2.47",
"@types/react-dom": "^18.2.18",
"astro": "^4.1.2",
@@ -1102,6 +1102,52 @@
"react": "^16.x || ^17.x || ^18.x"
}
},
+ "node_modules/@radix-ui/react-primitive": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+ "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-slot": "1.0.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-separator": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+ "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-primitive": "1.0.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-slot": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -1326,11 +1372,6 @@
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
},
- "node_modules/@types/geojson": {
- "version": "7946.0.13",
- "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
- "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ=="
- },
"node_modules/@types/google.maps": {
"version": "3.54.10",
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.54.10.tgz",
@@ -1345,14 +1386,6 @@
"@types/unist": "*"
}
},
- "node_modules/@types/leaflet": {
- "version": "1.9.8",
- "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
- "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
- "dependencies": {
- "@types/geojson": "*"
- }
- },
"node_modules/@types/mdast": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
diff --git a/package.json b/package.json
index 1b57f02..d276ad5 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
"@astrojs/react": "^3.0.9",
"@astrojs/tailwind": "^5.1.0",
"@radix-ui/react-icons": "^1.3.0",
+ "@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
- "@types/leaflet": "^1.9.8",
"@types/react": "^18.2.47",
"@types/react-dom": "^18.2.18",
"astro": "^4.1.2",
diff --git a/src/components/LockedContent.tsx b/src/components/LockedContent.tsx
index 32818b8..30f1ac5 100644
--- a/src/components/LockedContent.tsx
+++ b/src/components/LockedContent.tsx
@@ -1,81 +1,94 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import distance from "@/utils/distance";
+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 { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons"
+import { useEffect, useState } from "react"
-import "../styles/locked-content.css";
+import "../styles/locked-content.css"
const LocationButton = () => {
- const [isLocked, setIsLocked] = useState(true);
+ const [atTarget, setAtTarget] = useState(false)
+ const [contentVisible, setContentVisible] = useState(false)
+ const [hasPermission, setHasPermission] = useState(false)
+
+ const startWatchingLocation = () => {
+ setHasPermission(true)
+ navigator.geolocation.watchPosition(
+ (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") {
+ setAtTarget(true)
+ }
+ },
+ () => null,
+ { enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }
+ )
+ }
useEffect(() => {
- setInterval(
- () =>
- navigator.geolocation.getCurrentPosition(
- (position: GeolocationPosition) => {
- const pos = {
- lat: position.coords.latitude,
- lng: position.coords.longitude,
- };
+ navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => {
+ if (permissionStatus.state === "granted") {
+ setHasPermission(true)
+ startWatchingLocation()
+ }
+ })
+ }, [])
- const totalDistanceInKM = distance(
- pos.lat,
- pos.lng,
- pos.lat,
- pos.lng
- ).toFixed(0);
-
- if (totalDistanceInKM === "0") {
- setIsLocked(false);
- }
- }
- ),
- 3000
- );
- }, []);
-
- if (isLocked) {
- return (
-
-
-
-
- İçerik Kilitli
-
-
-
-
-
- İçeriği görmek için konuma gitmelisin!
-
-
-
-
- );
+ if (contentVisible) {
+ return
} else {
return (
-
-
-
- );
+ )
}
-};
+}
-export default LocationButton;
+export default LocationButton
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..6d7f122
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+
+ )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3ef0367..47bc3aa 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
---
-const googleSdkKey = import.meta.env.MAPS_SDK_KEY;
+
---
@@ -23,7 +23,7 @@ const googleSdkKey = import.meta.env.MAPS_SDK_KEY;
Konulu Konum
-
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9013bc2..00e8990 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,17 +13,36 @@ import {
import { CalendarIcon } from '@radix-ui/react-icons';
import '../styles/locked-page.css';
-import LocationButton from '@/components/LockedContent';
+import LockedContent from '@/components/LockedContent';
+import { Separator } from '@/components/ui/separator';
---
-
+
+
+
+
+ Arkadaşınız size bir fotoğraf ve bir not bıraktı. Fakat fotoğrafı
+ görebilmeniz için aşağıdaki konuma gitmeniz gerekiyor. Konuma
+ yaklaştığınızda butona basıp fotoğrafı görüntüleyebilirsiniz.
+
+
+
+
+
Abdurrahman
- Aşağıdaki konuma gitmen gerekiyor.
+
+ Hacı sana çok özel bir sürpriz hazırladık, aşağıdaki konuma muhakak
+ git.
+
@@ -31,11 +50,16 @@ import LocationButton from '@/components/LockedContent';
-
+
-
+
+
+ Paylaş
+
+
+ Fotoğrafın kilidi şu ana dek 2 kez açıldı
+
+
-
- Paylaş
diff --git a/src/scripts/initMap.js b/src/scripts/initMap.js
index d672e43..545bea2 100644
--- a/src/scripts/initMap.js
+++ b/src/scripts/initMap.js
@@ -15,6 +15,13 @@ var targetLocationIcon = L.icon({
L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
+var circle = L.circle(TARGET_LOCATION, {
+ color: 'blue',
+ fillColor: '#30f',
+ fillOpacity: 0.2,
+ radius: 50
+}).addTo(map);
+
var currentLocationIcon = L.icon({
iconUrl: 'blue-dot.png',
iconSize: [32, 32],
@@ -92,3 +99,39 @@ L.control.targetLocation = function (opts) {
L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
+
+navigator.permissions
+ .query({ name: "geolocation" })
+ .then((permissionStatus) => {
+ if (permissionStatus === 'granted') {
+ navigator.geolocation.watchPosition(
+ (position) => {
+ const pos = {
+ lat: position.coords.latitude,
+ lng: position.coords.longitude
+ }
+
+ console.log('The map location is' + pos)
+ },
+ () => null,
+ { enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 }
+ )
+ } else {
+ permissionStatus.onchange = () => {
+ if (permissionStatus.state === 'granted') {
+ navigator.geolocation.watchPosition(
+ (position) => {
+ const pos = {
+ lat: position.coords.latitude,
+ lng: position.coords.longitude
+ }
+
+ console.log('The map location is' + pos)
+ },
+ () => null,
+ { enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 }
+ )
+ }
+ };
+ }
+ });
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6a75725..8abdb15 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,7 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
+
@layer base {
:root {
--background: 0 0% 100%;
@@ -9,63 +9,63 @@
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
-
+
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
-
+
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
-
+
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
-
+
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
-
+
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
-
+
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
-
+
--radius: 0.5rem;
}
-
+
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
-
+
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
-
+
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
-
+
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
-
+
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
-
+
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
-
+
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
-
+
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
-
+
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
-
+
@layer base {
* {
@apply border-border;
@@ -73,4 +73,4 @@
body {
@apply bg-background text-foreground;
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/locked-content.css b/src/styles/locked-content.css
index 5b65507..bb3a8b9 100644
--- a/src/styles/locked-content.css
+++ b/src/styles/locked-content.css
@@ -5,6 +5,13 @@
overflow: hidden;
}
+.module-unlocked {
+ display: grid;
+ place-items: center;
+ position: relative;
+ overflow: hidden;
+}
+
.module::before {
content: "";
top: 0;
@@ -18,6 +25,18 @@
filter: blur(20px);
}
+.module-unlocked::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;
+}
+
.module-inside {
position: relative;
}