22 أسطر
1.1 KiB
HTML
22 أسطر
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='ar' dir='rtl'>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
|
|
<title>Qibla Finder</title>
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css'>
|
|
</head>
|
|
<body class='bg-gray-900 text-gray-100 min-h-screen'>
|
|
<main class='container mx-auto px-4 py-8 max-w-md'>
|
|
<h1 class='text-3xl font-bold text-center mb-6'>Qibla Finder</h1>
|
|
<div class='bg-gray-800 rounded-lg p-6 text-center'>
|
|
<div class='relative w-48 h-48 mx-auto mb-4'>
|
|
<div class='absolute inset-0 rounded-full border-4 border-gray-600'></div>
|
|
<div id='n' class='absolute top-1/2 left-1/2 w-1 h-20 bg-green-500 origin-bottom' style='transform:translate(-50%,-100%) rotate(0deg)'></div>
|
|
<div class='absolute top-2 left-1/2 -translate-x-1/2 text-green-400 font-bold'>Kaaba</div></div>
|
|
<p id='b' class='text-2xl font-bold text-green-400'>Locating...</p></div>
|
|
<button id='btn' class='w-full mt-4 bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold'>Find My Location</button>
|
|
</main>
|
|
<script src='app.js'></script>
|
|
</body></html>
|