log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sample photo

Browse Source
This commit is contained in:
log101 2024-01-14 22:25:46 +03:00
parent e184e055c6
commit 4794b66718
3 changed files with 83 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/sample-selfie.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 KiB

27
src/layouts/Layout.astro
View File

@ -1,20 +1,19 @@
---
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Konulu Konum</title>
</head>
<body class="bg-purple-50 container">
<slot />
</body>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Konulu Konum</title>
</head>
<body class="bg-purple-50 container">
<slot />
</body>
</html>
<style is:global>
</style>
<style is:global></style>

102
src/pages/index.astro
View File

@ -1,53 +1,91 @@
---
import '@/styles/globals.css'
import '@/styles/globals.css';
import Layout from '../layouts/Layout.astro';
import { Button } from "@/components/ui/button"
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
} from '@/components/ui/card';
import { CalendarIcon } from "@radix-ui/react-icons"
import { CalendarIcon } from '@radix-ui/react-icons';
import { LockClosedIcon } from '@radix-ui/react-icons';
const apiKey = import.meta.env.MAPS_SDK_KEY
const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V25yhQRsA2NsrXtDp8&key=${apiKey}`
const apiKey = import.meta.env.MAPS_SDK_KEY;
const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V25yhQRsA2NsrXtDp8&key=${apiKey}`;
---
<Layout>
<main class="flex flex-col gap-3 mt-4">
<Card>
<CardHeader>
<CardTitle>Ayşe</CardTitle>
</CardHeader>
<CardContent>
<p>Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen lazım 😘</p>
</CardContent>
<CardFooter className='gap-2'>
<CalendarIcon />
<p>5 saat önce</p>
</CardFooter>
</Card>
<main class="flex flex-col gap-3 my-4 items-center">
<Card>
<CardHeader>
<CardTitle>Ayşe</CardTitle>
</CardHeader>
<CardContent>
<p>
Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
lazım 😘
</p>
</CardContent>
<CardFooter className="gap-2">
<CalendarIcon />
<p>5 saat önce</p>
</CardFooter>
</Card>
<Button className='w-full bg-indigo-500'>Haritayı Gizle</Button>
<Button className="w-full bg-indigo-500">Haritayı Gizle</Button>
<iframe height="450" style="border:0" loading="lazy" allowfullscreen src={mapSrc}></iframe>
<iframe
height="450"
style="border:0"
loading="lazy"
allowfullscreen
src={mapSrc}
class="w-full"></iframe>
<div class="w-full h-[200px] bg-gray-600 rounded"></div>
<Button className='w-full'>Paylaş</Button>
</main>
<div class="module w-full h-[450px] p-4">
<div
class="module-inside flex flex-col justify-center items-center gap-2"
>
<Button>
<LockClosedIcon className="mr-2 h-4 w-4" />İçerik Kilitli
</Button>
<Card className="p-2">
<CardContent className="pb-0 text-center">
İçeriği görmek için konuma gitmelisin!
</CardContent>
</Card>
</div>
</div>
<Button className="w-full">Paylaş</Button>
</main>
</Layout>
<style>
gmp-map {
height: 100%;
}
.module {
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
html,
body {
margin: 0;
padding: 0;
}
.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;
}
</style>