Add project files.
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="flex flex-col sm:flex-row relative min-h-screen">
|
||||
<div class="bg-gradient-to-b from-[#052767] to-[#3a0647] sm:w-[250px] sm:h-screen sm:sticky sm:top-0">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main class="flex-1 flex flex-col">
|
||||
<div class="bg-[#f7f7f7] border-b border-[#d6d5d5] flex items-center justify-between sm:justify-end h-14 sm:sticky sm:top-0 z-10 px-4 sm:px-8">
|
||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank" class="whitespace-nowrap sm:ml-6 no-underline hover:underline overflow-hidden text-ellipsis">About</a>
|
||||
</div>
|
||||
|
||||
<article class="px-4 sm:px-8 py-4">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui" class="hidden fixed bottom-0 left-0 w-full bg-[#ffffe0] p-3 shadow-[0_-1px_2px_rgba(0,0,0,0.2)] z-[1000]" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
<a href="." class="underline text-blue-600">Reload</a>
|
||||
<span class="dismiss cursor-pointer absolute right-3 top-2 text-gray-700">🗙</span>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<div class="min-h-[3.5rem] bg-black/40 flex items-center px-3 relative">
|
||||
<div class="container-fluid">
|
||||
<a class="text-[1.1rem] text-white no-underline" href="">Tmt.SaqaTravel</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-14 h-10 text-white absolute top-2 right-4 border border-white/10 rounded bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:1.75rem] checked:bg-white/50 sm:hidden" />
|
||||
|
||||
<div class="hidden peer-checked:block sm:block sm:h-[calc(100vh-3.5rem)] sm:overflow-y-auto" onclick="document.querySelector('.peer').click()">
|
||||
<nav class="flex flex-col">
|
||||
<div class="text-[0.9rem] pb-2 pt-4 px-3">
|
||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="" Match="NavLinkMatch.All">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" /></svg>
|
||||
Home
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="text-[0.9rem] pb-2 px-3">
|
||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="counter">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z" /></svg>
|
||||
Counter
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="text-[0.9rem] pb-4 px-3">
|
||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="weather">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z" /></svg>
|
||||
Weather
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -0,0 +1,118 @@
|
||||
<style>
|
||||
.components-reconnect-first-attempt-visible,
|
||||
.components-reconnect-repeated-attempt-visible,
|
||||
.components-reconnect-failed-visible,
|
||||
.components-pause-visible,
|
||||
.components-resume-failed-visible,
|
||||
.components-rejoining-animation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
|
||||
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<dialog id="components-reconnect-modal" class="bg-white w-80 my-[20vh] mx-auto p-8 rounded-lg shadow-lg opacity-0 transition-all duration-500 backdrop:bg-black/40 backdrop:animate-[fadeIn_0.5s_ease-in-out] open:animate-[slideUp_1.5s_cubic-bezier(0.05,0.89,0.25,1.02)_0.3s,fadeIn_0.5s_ease-in-out_0.3s]" data-nosnippet>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="components-rejoining-animation relative w-20 h-20" aria-hidden="true">
|
||||
<div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite]"></div>
|
||||
<div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite] -delay-500"></div>
|
||||
</div>
|
||||
<p class="components-reconnect-first-attempt-visible m-0 text-center">
|
||||
Rejoining the server...
|
||||
</p>
|
||||
<p class="components-reconnect-repeated-attempt-visible m-0 text-center">
|
||||
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
|
||||
</p>
|
||||
<p class="components-reconnect-failed-visible m-0 text-center">
|
||||
Failed to rejoin.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-reconnect-button" class="components-reconnect-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
|
||||
Retry
|
||||
</button>
|
||||
<p class="components-pause-visible m-0 text-center">
|
||||
The session has been paused by the server.
|
||||
</p>
|
||||
<p class="components-resume-failed-visible m-0 text-center">
|
||||
Failed to resume the session.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-resume-button" class="components-pause-visible components-resume-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
|
||||
Resume
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// Set up event handlers
|
||||
const reconnectModal = document.getElementById("components-reconnect-modal");
|
||||
reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
|
||||
|
||||
const retryButton = document.getElementById("components-reconnect-button");
|
||||
retryButton.addEventListener("click", retry);
|
||||
|
||||
const resumeButton = document.getElementById("components-resume-button");
|
||||
resumeButton.addEventListener("click", resume);
|
||||
|
||||
function handleReconnectStateChanged(event) {
|
||||
if (event.detail.state === "show") {
|
||||
reconnectModal.showModal();
|
||||
} else if (event.detail.state === "hide") {
|
||||
reconnectModal.close();
|
||||
} else if (event.detail.state === "failed") {
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
} else if (event.detail.state === "rejected") {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
async function retry() {
|
||||
document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
|
||||
try {
|
||||
// Reconnect will asynchronously return:
|
||||
// - true to mean success
|
||||
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
|
||||
// - exception to mean we didn't reach the server (this can be sync or async)
|
||||
const successful = await Blazor.reconnect();
|
||||
if (!successful) {
|
||||
// We have been able to reach the server, but the circuit is no longer available.
|
||||
// We'll reload the page so the user can continue using the app as quickly as possible.
|
||||
const resumeSuccessful = await Blazor.resumeCircuit();
|
||||
if (!resumeSuccessful) {
|
||||
location.reload();
|
||||
} else {
|
||||
reconnectModal.close();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// We got an exception, server is currently unavailable
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
}
|
||||
}
|
||||
|
||||
async function resume() {
|
||||
try {
|
||||
const successful = await Blazor.resumeCircuit();
|
||||
if (!successful) {
|
||||
location.reload();
|
||||
}
|
||||
} catch {
|
||||
reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function retryWhenDocumentBecomesVisible() {
|
||||
if (document.visibilityState === "visible") {
|
||||
await retry();
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user