dwd-projects
/
barta-india.in
generated from dwd/boilarplate-astro-tailwind
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove weather

b4
dev sp 2024-01-24 14:07:59 +00:00
parent e59a1168ce
commit f378065344
15 changed files with 554 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,2 @@
{
}

28
src/components/WeatherandTime.astro
View File

@ -7,7 +7,16 @@
<p id="description"></p> <p id="description"></p>
</div> </div>
</section> </section>
<div class="flex flex-col justify-center place-items-center fixed top-[50%] right-[50%] bg-white md:max-w-lg w-full p-6 rounded-2xl shadow-xl" style="display: none;" id="weatherPermission">
<p>know weather information allow location Permission</p>
<div class="flex flex-row gap-6">
<button id="yesButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Allow</button>
<button id="noButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Deny</button>
</div>
</div>
<!-- <div class="bg-red-500 text-black" id="weatherInfo"></div> --> <!-- <div class="bg-red-500 text-black" id="weatherInfo"></div> -->
</div> </div>
</main> </main>
<script is:inline> <script is:inline>
@ -106,7 +115,26 @@
// <p>Description: ${description}</p> // <p>Description: ${description}</p>
// `; // `;
} }
function windowOnload() {
document.getElementById('weatherPermission').style.display = 'block';
// Attach click event handlers to the buttons
document.getElementById('yesButton').addEventListener('click', onYesButtonClick);
document.getElementById('noButton').addEventListener('click', onNoButtonClick);
}
function onYesButtonClick() {
// Call the function to display the city name and weather information // Call the function to display the city name and weather information
showCityName(); showCityName();
// Hide the weather permission div
document.getElementById('weatherPermission').style.display = 'none';
}
function onNoButtonClick() {
// Hide the weather permission div without fetching weather information
document.getElementById('weatherPermission').style.display = 'none';
}
window.onload = windowOnload;
</script> </script>

2
src/layouts/Layout.astro
View File

@ -60,7 +60,7 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
<MainHeader /> <MainHeader />
</div> </div>
<div class="mt-[100px]"> <div class="mt-[100px]">
<WeatherandTime /> <!-- <WeatherandTime /> -->
<slot /> <slot />
</div> </div>
<Footer /> <Footer />

1
src/layouts/LayoutBN.astro
View File

@ -57,7 +57,6 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
<body> <body>
<div> <div>
<MainHeaderBN /> <MainHeaderBN />
</div> </div>
<div class="mt-[150px]"> <div class="mt-[150px]">
<slot /> <slot />

30
src/pages/bn/index.astro
View File

@ -36,29 +36,30 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/bn/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/bn/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify ">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/bn/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -66,10 +67,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/bn/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/bn/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

30
src/pages/bn/local/index.astro
View File

@ -35,29 +35,30 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/bn/local/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/bn/local/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify ">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/bn/local/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/local/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -65,10 +66,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/bn/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/bn/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

30
src/pages/bn/national/index.astro
View File

@ -35,29 +35,30 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/bn/national/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/bn/national/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify ">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/bn/national/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/national/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -65,10 +66,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/bn/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/bn/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

30
src/pages/bn/politics/index.astro
View File

@ -36,29 +36,30 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/bn/politics/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/bn/politics/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify ">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/bn/politics/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/politics/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -66,10 +67,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/bn/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/bn/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

30
src/pages/bn/technology/index.astro
View File

@ -36,29 +36,30 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/bn/technology/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/bn/technology/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify ">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/bn/technology/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/technology/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -66,10 +67,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/bn/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/bn/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

30
src/pages/index.astro
View File

@ -34,29 +34,30 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -64,10 +65,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

31
src/pages/local/index.astro
View File

@ -36,29 +36,31 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/local/${items.slug}`}>
<a class="flex flex-col" href={`/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/local/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/local/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/local/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -66,10 +68,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

31
src/pages/national/index.astro
View File

@ -36,29 +36,31 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/national/${items.slug}`}>
<a class="flex flex-col" href={`/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/national/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/national/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/national/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -66,10 +68,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

31
src/pages/politics/index.astro
View File

@ -36,29 +36,31 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/politics/${items.slug}`}>
<a class="flex flex-col" href={`/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/politics/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/politics/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/politics/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -66,10 +68,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

31
src/pages/technology/index.astro
View File

@ -36,29 +36,31 @@ const items = metaJSON.data[0];
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) => {data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="">
<a class="flex flex-col" href={`/technology/${items.slug}`}>
<a class="flex flex-col" href={`/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<a href={`/technology/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a> <h2 class="text-lg text-justify">{items.title}</h2>
<div class=" overflow-y-hidden"> <!--h-[100px] --> </a>
<h2 class="text-lg ">{items.title}</h2> </div>
<div> <div>
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]"> <dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
<form method="dialog"> <form method="dialog">
<div class="float-right -mt-4 -mr-4">
<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
</div>
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/technology/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center"> <div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit"> <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div> </div>
<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl"> <div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/technology/${items.slug}`}>Details</a> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
</div> </div>
</div> </div>
</div> </div>
@ -66,10 +68,9 @@ const items = metaJSON.data[0];
</dialog> </dialog>
</div> </div>
</div> </div>
</div>
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button> <button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
<a href={`/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>

140
src/pages/weather.astro Normal file
View File

@ -0,0 +1,140 @@
<main>
<div>
<section class="container mx-auto px-4">
<div id="swicthDIVBG">
<p id="cityName"></p>
<p id="temper"></p>
<p id="description"></p>
</div>
</section>
<div class="flex flex-col justify-center place-items-center fixed top-[50%] right-[50%] bg-white md:max-w-lg w-full p-6 rounded-2xl shadow-xl" style="display: none;" id="weatherPermission">
<p>know weather information allow location Permission</p>
<div class="flex flex-row gap-6">
<button id="yesButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Allow</button>
<button id="noButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Deny</button>
</div>
</div>
<!-- <div class="bg-red-500 text-black" id="weatherInfo"></div> -->
</div>
</main>
<script is:inline>
async function getCurrentLocation() {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => resolve(position.coords),
(error) => reject(error)
);
} else {
reject(new Error('Geolocation is not supported by this browser.'));
}
});
}
async function getCityName(latitude, longitude) {
const apiKey = '4d54049b61eb45c4b121ab2cff9808ba'; // Replace with your OpenCage API key
const apiUrl = `https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${apiKey}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error('Error fetching data from the server.');
}
const data = await response.json();
if (data.results && data.results.length > 0) {
const city = data.results[0].components.city;
return city;
} else {
throw new Error('City not found.');
}
} catch (error) {
console.error('Error:', error.message);
throw new Error('Error fetching city name.');
}
}
async function getWeatherData(city) {
const apiKey = 'aed8dd87581613e1d2bbbf63eeb618da';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error('Error fetching weather data from the server.');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error.message);
throw new Error('Error fetching weather data.');
}
}
async function showCityName() {
try {
const location = await getCurrentLocation();
const city = await getCityName(location.latitude, location.longitude);
// document.getElementById('weatherInfo').innerText = 'Current City: ' + city;
const weatherData = await getWeatherData(city);
displayWeather(weatherData);
} catch (error) {
console.error(error.message);
// document.getElementById('weatherInfo').innerText = 'Error fetching data.';
}
}
function displayWeather(data) {
// const weatherInfoDiv = document.getElementById('weatherInfo');
// Extract relevant information from the API response
const cityName = data.name;
const temperature = data.main.temp;
const description = data.weather[0].description;
document.getElementById('cityName').innerHTML= 'City: ' + cityName;
document.getElementById('temper').innerHTML = 'Temperature: ' + temperature;
document.getElementById('description').innerHTML = 'Description: ' + description;
let switchBG = document.innerHTML = description;
if (switchBG === 'clear sky') {
let clearSkyBG = document.getElementById('swicthDIVBG').style.backgroundImage = 'url(/img/clear_sky.webp)';
clearSkyBG.style.backgroundRepeat = 'no-repeat';
clearSkyBG.style.backgroundSize = 'cover';
}
// Display the weather information switchDiv.style.backgroundImage = 'url("path/to/clear-sky-image.jpg")';
// weatherInfoDiv.innerHTML = `
// <p>City: ${cityName}</p>
// <p>Temperature: ${temperature} °C</p>
// <p>Description: ${description}</p>
// `;
}
function windowOnload() {
document.getElementById('weatherPermission').style.display = 'block';
// Attach click event handlers to the buttons
document.getElementById('yesButton').addEventListener('click', onYesButtonClick);
document.getElementById('noButton').addEventListener('click', onNoButtonClick);
}
function onYesButtonClick() {
// Call the function to display the city name and weather information
showCityName();
// Hide the weather permission div
document.getElementById('weatherPermission').style.display = 'none';
}
function onNoButtonClick() {
// Hide the weather permission div without fetching weather information
document.getElementById('weatherPermission').style.display = 'none';
}
window.onload = windowOnload;
</script>