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 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 | |
| > | |
| <a | |
| href="#" | |
| 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</a | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div | |
| class="w-full bg-center bg-cover h-[38rem]" | |
| style="background-image: url('static/image/hero-city-pin.png')" | |
| > | |
| <div | |
| class="flex items-center justify-center w-full h-full bg-gray-900/40" | |
| > | |
| <div class="text-center"> | |
| <h1 class="text-3xl font-semibold text-white lg:text-4xl"> | |
| Economic-Disaster for <span class="text-blue-400">Business</span> | |
| </h1> | |
| <a href="analytics.html"> | |
| <button | |
| class="w-full px-5 py-2 mt-4 text-sm font-medium text-white capitalize transition-colors duration-300 transform bg-blue-400 rounded-md lg:w-auto hover:bg-blue-200 focus:outline-none focus:bg-blue-500" | |
| > | |
| Demo | |
| </button> | |
| </a> | |
| <a href="story.html"> | |
| <button | |
| class="w-full px-5 py-2 ml-8 mt-4 text-sm font-medium text-white capitalize transition-colors duration-300 transform bg-sky-300 rounded-md lg:w-auto hover:bg-blue-200 focus:outline-none focus:bg-blue-500" | |
| > | |
| Story | |
| </button> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="bg-white dark:bg-gray-900"> | |
| <div class="container px-6 py-10 mx-auto"> | |
| <h1 | |
| class="text-lg font-semibold text-center text-blue-800 capitalize lg:text-3xl dark:text-white" | |
| > | |
| Analytical Integration for Finance and Geoinfomatics | |
| </h1> | |
| <div | |
| class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 lg:grid-cols-4" | |
| > | |
| <div | |
| class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl" | |
| style="background-image: url('static/image/flood.jpeg')" | |
| > | |
| <div | |
| class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60" | |
| > | |
| <h2 | |
| class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white" | |
| > | |
| Disaster Impact | |
| </h2> | |
| <p | |
| class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400" | |
| > | |
| Finance | |
| </p> | |
| </div> | |
| </div> | |
| <div | |
| class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl" | |
| style="background-image: url('static/image/economic.webp')" | |
| > | |
| <div | |
| class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60" | |
| > | |
| <h2 | |
| class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white" | |
| > | |
| Economic Affect | |
| </h2> | |
| <p | |
| class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400" | |
| > | |
| Loss and Gain | |
| </p> | |
| </div> | |
| </div> | |
| <div | |
| class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl" | |
| style="background-image: url('static/image/pin-location.jpeg')" | |
| > | |
| <div | |
| class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60" | |
| > | |
| <h2 | |
| class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white" | |
| > | |
| Location Visual | |
| </h2> | |
| <p | |
| class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400" | |
| > | |
| 3D Map | |
| </p> | |
| </div> | |
| </div> | |
| <div | |
| class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl" | |
| style="background-image: url('static/image/climate.webp')" | |
| > | |
| <div | |
| class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60" | |
| > | |
| <h2 | |
| class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white" | |
| > | |
| Forecasting | |
| </h2> | |
| <p | |
| class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400" | |
| > | |
| 10 Years | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="flex justify-center items-center p-6"> | |
| <div | |
| class="flex flex-col md:flex-row items-center bg-white p-6 md:p-12 rounded-lg max-w-4xl" | |
| > | |
| <!-- Text Section --> | |
| <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8 text-center md:text-left"> | |
| <h2 class="text-3xl font-bold text-indigo-800 mb-4"> | |
| High-Capability Analysis | |
| </h2> | |
| <p class="text-indigo-500 text-lg leading-relaxed italic"> | |
| Enable geospatial data on disaster location hightlighting occurances | |
| affecting business unit. | |
| </p> | |
| </div> | |
| <!-- Image Section --> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img | |
| src="static/image/hero.png" | |
| alt="Data Insights" | |
| class="rounded-lg shadow-lg w-full max-w-xs md:max-w-sm" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center bg-white p-8 md:p-16"> | |
| <!-- Image Section --> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img | |
| src="static/image/report.jpeg" | |
| alt="Data Insights" | |
| class="rounded-lg shadow-lg w-full max-w-sm" | |
| /> | |
| </div> | |
| <!-- Text Section --> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold text-indigo-800 mb-4"> | |
| Evaluate Financial Impact Concerns | |
| </h2> | |
| <p class="text-indigo-600 text-lg leading-relaxed italic"> | |
| Discover insights and make data-driven decisions for business. | |
| Academic proved modeling enlightens considerable fianances for future | |
| management. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div | |
| class="grid sm:grid-cols-2 items-start gap-14 p-8 mx-auto max-w-4xl bg-white shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] rounded-md font-[sans-serif]" | |
| > | |
| <div> | |
| <h1 class="text-gray-800 text-3xl font-extrabold">Interesting?</h1> | |
| <p class="text-sm text-gray-500 mt-4"> | |
| Feel free to contact us for more updates and news. Ask anything and | |
| let's talk together | |
| </p> | |
| <div class="mt-12"> | |
| <h2 class="text-gray-800 text-base font-bold">Email</h2> | |
| <ul class="mt-4"> | |
| <li class="flex items-center"> | |
| <div | |
| class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0" | |
| > | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="20px" | |
| height="20px" | |
| fill="#007bff" | |
| viewBox="0 0 479.058 479.058" | |
| > | |
| <path | |
| d="M434.146 59.882H44.912C20.146 59.882 0 80.028 0 104.794v269.47c0 24.766 20.146 44.912 44.912 44.912h389.234c24.766 0 44.912-20.146 44.912-44.912v-269.47c0-24.766-20.146-44.912-44.912-44.912zm0 29.941c2.034 0 3.969.422 5.738 1.159L239.529 264.631 39.173 90.982a14.902 14.902 0 0 1 5.738-1.159zm0 299.411H44.912c-8.26 0-14.971-6.71-14.971-14.971V122.615l199.778 173.141c2.822 2.441 6.316 3.655 9.81 3.655s6.988-1.213 9.81-3.655l199.778-173.141v251.649c-.001 8.26-6.711 14.97-14.971 14.97z" | |
| data-original="#000000" | |
| /> | |
| </svg> | |
| </div> | |
| <a | |
| href="javascript:void(0)" | |
| class="text-[#007bff] text-sm ml-4" | |
| > | |
| <small class="block">Mail</small> | |
| <strong>info@example.com</strong> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-12"> | |
| <h2 class="text-gray-800 text-base font-bold">Socials</h2> | |
| <ul class="flex mt-4 space-x-4"> | |
| <li | |
| class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0" | |
| > | |
| <a href="javascript:void(0)"> | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="20px" | |
| height="20px" | |
| fill="#007bff" | |
| viewBox="0 0 24 24" | |
| > | |
| <path | |
| d="M6.812 13.937H9.33v9.312c0 .414.335.75.75.75l4.007.001a.75.75 0 0 0 .75-.75v-9.312h2.387a.75.75 0 0 0 .744-.657l.498-4a.75.75 0 0 0-.744-.843h-2.885c.113-2.471-.435-3.202 1.172-3.202 1.088-.13 2.804.421 2.804-.75V.909a.75.75 0 0 0-.648-.743A26.926 26.926 0 0 0 15.071 0c-7.01 0-5.567 7.772-5.74 8.437H6.812a.75.75 0 0 0-.75.75v4c0 .414.336.75.75.75zm.75-3.999h2.518a.75.75 0 0 0 .75-.75V6.037c0-2.883 1.545-4.536 4.24-4.536.878 0 1.686.043 2.242.087v2.149c-.402.205-3.976-.884-3.976 2.697v2.755c0 .414.336.75.75.75h2.786l-.312 2.5h-2.474a.75.75 0 0 0-.75.75V22.5h-2.505v-9.312a.75.75 0 0 0-.75-.75H7.562z" | |
| data-original="#000000" | |
| /> | |
| </svg> | |
| </a> | |
| </li> | |
| <li | |
| class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0" | |
| > | |
| <a href="javascript:void(0)"> | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="20px" | |
| height="20px" | |
| fill="#007bff" | |
| viewBox="0 0 511 512" | |
| > | |
| <path | |
| d="M111.898 160.664H15.5c-8.285 0-15 6.719-15 15V497c0 8.285 6.715 15 15 15h96.398c8.286 0 15-6.715 15-15V175.664c0-8.281-6.714-15-15-15zM96.898 482H30.5V190.664h66.398zM63.703 0C28.852 0 .5 28.352.5 63.195c0 34.852 28.352 63.2 63.203 63.2 34.848 0 63.195-28.352 63.195-63.2C126.898 28.352 98.551 0 63.703 0zm0 96.395c-18.308 0-33.203-14.891-33.203-33.2C30.5 44.891 45.395 30 63.703 30c18.305 0 33.195 14.89 33.195 33.195 0 18.309-14.89 33.2-33.195 33.2zm289.207 62.148c-22.8 0-45.273 5.496-65.398 15.777-.684-7.652-7.11-13.656-14.942-13.656h-96.406c-8.281 0-15 6.719-15 15V497c0 8.285 6.719 15 15 15h96.406c8.285 0 15-6.715 15-15V320.266c0-22.735 18.5-41.23 41.235-41.23 22.734 0 41.226 18.495 41.226 41.23V497c0 8.285 6.719 15 15 15h96.403c8.285 0 15-6.715 15-15V302.066c0-79.14-64.383-143.523-143.524-143.523zM466.434 482h-66.399V320.266c0-39.278-31.953-71.23-71.226-71.23-39.282 0-71.239 31.952-71.239 71.23V482h-66.402V190.664h66.402v11.082c0 5.77 3.309 11.027 8.512 13.524a15.01 15.01 0 0 0 15.875-1.82c20.313-16.294 44.852-24.907 70.953-24.907 62.598 0 113.524 50.926 113.524 113.523zm0 0" | |
| data-original="#000000" | |
| /> | |
| </svg> | |
| </a> | |
| </li> | |
| <li | |
| class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0" | |
| > | |
| <a href="javascript:void(0)"> | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="20px" | |
| height="20px" | |
| fill="#007bff" | |
| viewBox="0 0 24 24" | |
| > | |
| <path | |
| d="M12 9.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Zm0-1.8a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm5.85-.225a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0ZM12 4.8c-2.227 0-2.59.006-3.626.052-.706.034-1.18.128-1.618.299a2.59 2.59 0 0 0-.972.633 2.601 2.601 0 0 0-.634.972c-.17.44-.265.913-.298 1.618C4.805 9.367 4.8 9.714 4.8 12c0 2.227.006 2.59.052 3.626.034.705.128 1.18.298 1.617.153.392.333.674.632.972.303.303.585.484.972.633.445.172.918.267 1.62.3.993.047 1.34.052 3.626.052 2.227 0 2.59-.006 3.626-.052.704-.034 1.178-.128 1.617-.298.39-.152.674-.333.972-.632.304-.303.485-.585.634-.972.171-.444.266-.918.299-1.62.047-.993.052-1.34.052-3.626 0-2.227-.006-2.59-.052-3.626-.034-.704-.128-1.18-.299-1.618a2.619 2.619 0 0 0-.633-.972 2.595 2.595 0 0 0-.972-.634c-.44-.17-.914-.265-1.618-.298-.993-.047-1.34-.052-3.626-.052ZM12 3c2.445 0 2.75.009 3.71.054.958.045 1.61.195 2.185.419A4.388 4.388 0 0 1 19.49 4.51c.457.45.812.994 1.038 1.595.222.573.373 1.227.418 2.185.042.96.054 1.265.054 3.71 0 2.445-.009 2.75-.054 3.71-.045.958-.196 1.61-.419 2.185a4.395 4.395 0 0 1-1.037 1.595 4.44 4.44 0 0 1-1.595 1.038c-.573.222-1.227.373-2.185.418-.96.042-1.265.054-3.71.054-2.445 0-2.75-.009-3.71-.054-.958-.045-1.61-.196-2.185-.419A4.402 4.402 0 0 1 4.51 19.49a4.414 4.414 0 0 1-1.037-1.595c-.224-.573-.374-1.227-.419-2.185C3.012 14.75 3 14.445 3 12c0-2.445.009-2.75.054-3.71s.195-1.61.419-2.185A4.392 4.392 0 0 1 4.51 4.51c.45-.458.994-.812 1.595-1.037.574-.224 1.226-.374 2.185-.419C9.25 3.012 9.555 3 12 3Z" | |
| ></path> | |
| </svg> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <form class="ml-auo space-y-4"> | |
| <input | |
| type="text" | |
| placeholder="How can we call your name?" | |
| class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500" | |
| /> | |
| <input | |
| type="email" | |
| placeholder="Email" | |
| class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500" | |
| /> | |
| <input | |
| type="text" | |
| placeholder="Something may we can help you?" | |
| class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500" | |
| /> | |
| <textarea | |
| placeholder="We are great to see your comments..." | |
| rows="6" | |
| class="w-full text-gray-800 rounded-md px-4 border text-sm pt-2.5 outline-blue-500" | |
| ></textarea> | |
| <button | |
| type="button" | |
| class="text-white bg-blue-500 hover:bg-blue-600 rounded-md text-sm px-4 py-3 w-full !mt-6" | |
| > | |
| Greeting us! | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |