Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <title></title> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <script src="static/js/tailwind@3.4.5.js"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <nav x-data="{ isOpen: false }" class="bg-white shadow-lg dark:bg-gray-900"> | |
| <div class="container px-6 py-4 mx-auto"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="flex items-center justify-between"> | |
| <a href="index.html" class="mx-auto"> | |
| <!-- img class="w-auto h-14 sm:h-7" src="static/icon/logo2.png" alt=""--> | |
| <h1 class="text-2xl text-blue-900">Kepler</h1> | |
| </a> | |
| <!-- Mobile menu button --> | |
| <div class="flex lg:hidden"> | |
| <button | |
| x-cloak | |
| @click="isOpen = !isOpen" | |
| type="button" | |
| class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" | |
| aria-label="toggle menu" | |
| > | |
| <svg | |
| x-show="!isOpen" | |
| xmlns="http://www.w3.org/2000/svg" | |
| class="w-6 h-6" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| > | |
| <path | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| d="M4 8h16M4 16h16" | |
| /> | |
| </svg> | |
| <svg | |
| x-show="isOpen" | |
| xmlns="http://www.w3.org/2000/svg" | |
| class="w-6 h-6" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| > | |
| <path | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| d="M6 18L18 6M6 6l12 12" | |
| /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu open: "block", Menu closed: "hidden" --> | |
| <div | |
| x-cloak | |
| :class="[isOpen ? 'translate-x-0 opacity-100 ' : 'opacity-0 -translate-x-full']" | |
| class="absolute inset-x-0 z-20 w-full px-6 py-4 transition-all duration-300 ease-in-out bg-white shadow-md lg:bg-transparent lg:dark:bg-transparent lg:shadow-none dark:bg-gray-900 lg:mt-0 lg:p-0 lg:top-0 lg:relative lg:w-auto lg:opacity-100 lg:translate-x-0" | |
| > | |
| <div class="-mx-4 lg:flex lg:items-center"> | |
| <a | |
| href="analytics.html" | |
| class="block mx-4 text-blue-900 font-bold capitalize dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400" | |
| >Overview Map</a | |
| > | |
| <a | |
| href="locations.html" | |
| class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400" | |
| >Location-Based</a | |
| > | |
| <a | |
| href="forecast.html" | |
| class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400" | |
| >Forecasting</a | |
| > | |
| <div | |
| class="block mx-4 mt-4 font-bold capitalize text-blue-600 lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400" | |
| >Contact</div | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <div class="text-black bg-white leading-relaxed max-w-5xl mx-auto p-6 mt-8"> | |
| <!-- Hero Section with Image --> | |
| <header class="text-center my-12"> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-4">Empowering Business Resilience with Disaster Analytics</h1> | |
| <p class="text-lg text-gray-600 mb-6"> | |
| Leveraging Geographic Information Systems (GIS) for Economic Insights in Climate-Induced Disaster Risk Management | |
| </p> | |
| <img src="static/image/story-climate.webp" alt="Disaster Impact on Business" class="w-full h-64 object-cover object-bottom rounded shadow-lg mb-8"> | |
| </header> | |
| <!-- Introduction Section --> | |
| <section class="mb-12 text-center"> | |
| <p class="text-lg"> | |
| Climate-related disasters like floods, storms, and air pollution are no longer rare occurrences. For businesses that rely on location-based assets—such as retail outlets, transportation hubs, and supply chains—the economic implications are substantial. Our WebGIS Dashboard is designed to help organizations assess, anticipate, and mitigate these risks through data-driven insights. | |
| </p> | |
| </section> | |
| <!-- Why Disaster Awareness Matters Section with Image Cards --> | |
| <section class="my-12 bg-sky-100 p-8 rounded-lg shadow-lg"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-6 text-center">Why Climate-Related Disasters Demand Business Attention</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded shadow-lg"> | |
| <img src="static/image/story-flood.jpeg" alt="Flood Impact" class="w-full h-40 object-cover rounded mb-4"> | |
| <h3 class="text-xl font-semibold mb-2">Floods and Supply Chains</h3> | |
| <p>Flooding can disrupt supply chains, increase inventory costs, and impact customer access, leading to significant revenue loss.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded shadow-lg"> | |
| <img src="static/image/story-wind.jpeg" alt="Windstorm Impact" class="w-full h-40 object-cover rounded mb-4"> | |
| <h3 class="text-xl font-semibold mb-2">Windstorms and Logistics</h3> | |
| <p>High winds can delay transportation, increase maintenance costs, and disrupt distribution networks, affecting operational efficiency.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded shadow-lg"> | |
| <img src="static/image/story-air.jpeg" alt="Air Pollution" class="w-full h-40 object-cover rounded mb-4"> | |
| <h3 class="text-xl font-semibold mb-2">Air Pollution’s Hidden Costs</h3> | |
| <p>Poor air quality can decrease foot traffic in urban areas and impact workforce productivity, indirectly affecting profitability.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Economic Impact of Disasters Section with Inline Image --> | |
| <section class="my-12"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-6">The Economic Consequences of Disasters on Business</h2> | |
| <p class="text-lg mb-6"> | |
| The financial impacts of disasters differ by sector. Retail businesses, for instance, face not only physical damage but also disruptions in customer access and supply availability, leading to stockouts and increased costs. Transportation companies encounter delays and rerouting expenses, while sectors reliant on outdoor activities experience reduced customer flow. | |
| </p> | |
| <img src="static/image/story-7-11.webp" alt="Economic Impact Analysis" class="w-full h-64 object-cover rounded shadow-lg mb-8"> | |
| <p class="text-lg"> | |
| To assess these impacts, businesses need tools that combine economic modeling with environmental monitoring. The WebGIS Dashboard addresses this need by providing a real-time, data-rich environment for evaluating both immediate risks and long-term financial consequences, empowering businesses to make evidence-based decisions. | |
| </p> | |
| </section> | |
| <!-- WebGIS Dashboard Highlights Section with Feature Cards --> | |
| <section class="my-12 bg-blue-200 p-8 rounded-lg shadow-lg"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-6 text-center">Key Features of the WebGIS Dashboard</h2> | |
| <p class="text-lg text-center mb-8"> | |
| Our platform combines GIS technology with predictive analytics, enabling organizations to navigate complex disaster risks and optimize resource allocation. | |
| </p> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <img src="static/image/story-dashboard.webp" alt="Real-time Data" class="w-full h-40 object-cover rounded mb-4"> | |
| <h3 class="text-xl font-semibold mb-2">Overview Insight</h3> | |
| <p>Stay with up-to-date data on environmental hazards, enabling swift, data-driven responses to emerging threats.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <img src="static/image/story-locationbased.webp" alt="Predictive Analytics" class="w-full h-40 object-cover rounded mb-4"> | |
| <h3 class="text-xl font-semibold mb-2">Location-Based</h3> | |
| <p>Utilize historical data and machine learning to forecast disaster patterns, supporting proactive risk management.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <img src="static/image/story-forecast.webp" alt="Forecasting Impact" class="w-full h-40 object-cover rounded mb-4"> | |
| <h3 class="text-xl font-semibold mb-2">Forecasting Impact Analysis</h3> | |
| <p>Quantify the potential costs of disasters on operations, helping prioritize investments in risk mitigation.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <img src="static/image/story-deckgl.webp" alt="User Interface" class="w-full h-40 object-cover rounded mb-4"> | |
| <h3 class="text-xl font-semibold mb-2">Modern WebGIS Dashboard</h3> | |
| <p>Interactive maps and dashboards offer an accessible view of complex data, streamlining decision-making for users.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-6 text-center">Kepler Platform</h2> | |
| <div class="flex justify-center mt-10 mb-20"> | |
| <img | |
| src="static/image/story-features.png" | |
| alt="Centered Image" | |
| class="w-3/4 h-auto" | |
| /> | |
| </div> | |
| </body> | |
| </html> | |