316 lines
13 KiB
HTML
316 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="test">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>MassTech - Premium Marketplace</title>
|
|
<base href="/" />
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
<link rel="stylesheet" href="css/app.min.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Site-wide Gradient Background (TEST) */
|
|
.site-gradient-bg {
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%) !important;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.site-gradient-bg::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
animation: gradient-shift 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* App Loader - Professional Loading Screen */
|
|
.app-loader {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-loader::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.3) 0%, transparent 50%);
|
|
animation: gradient-shift 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.7; transform: scale(1.1); }
|
|
}
|
|
|
|
.loader-content {
|
|
position: relative;
|
|
text-align: center;
|
|
color: white;
|
|
padding: 2rem;
|
|
animation: fade-in 0.8s ease-out;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.logo-wrapper {
|
|
position: relative;
|
|
width: 96px;
|
|
height: 96px;
|
|
margin: 0 auto 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gear-wrapper {
|
|
position: relative;
|
|
width: 180px;
|
|
height: 180px;
|
|
margin: 0 auto 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gear-orbit {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
border: 2px dashed rgba(255, 215, 0, 0.3);
|
|
animation: orbit-rotate 12s linear infinite;
|
|
}
|
|
|
|
@keyframes orbit-rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.gear {
|
|
position: absolute;
|
|
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6))
|
|
drop-shadow(0 0 40px rgba(255, 215, 0, 0.3));
|
|
}
|
|
|
|
.gear-large {
|
|
width: 110px;
|
|
height: 110px;
|
|
animation: gear-spin 4s linear infinite;
|
|
}
|
|
|
|
.gear-large svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: url(#goldGradient);
|
|
}
|
|
|
|
.gear-small {
|
|
width: 60px;
|
|
height: 60px;
|
|
top: 10px;
|
|
right: 10px;
|
|
animation: gear-spin-reverse 3s linear infinite;
|
|
}
|
|
|
|
.gear-small svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: url(#goldGradient);
|
|
}
|
|
|
|
@keyframes gear-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes gear-spin-reverse {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(-360deg); }
|
|
}
|
|
|
|
.logo-icon {
|
|
display: none;
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
letter-spacing: -0.05em;
|
|
margin: 0 0 0.5rem;
|
|
background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 4px 30px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.brand-tagline {
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
color: #94a3b8;
|
|
margin: 0 0 2.5rem;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 240px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 999px;
|
|
margin: 0 auto 1rem;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
|
|
background-size: 200% 100%;
|
|
border-radius: 999px;
|
|
animation: progress-slide 2s ease-in-out infinite, gradient-flow 3s linear infinite;
|
|
}
|
|
|
|
@keyframes progress-slide {
|
|
0% { width: 0%; margin-left: 0; }
|
|
50% { width: 60%; margin-left: 20%; }
|
|
100% { width: 0%; margin-left: 100%; }
|
|
}
|
|
|
|
@keyframes gradient-flow {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 200% 50%; }
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #64748b;
|
|
margin: 0;
|
|
letter-spacing: 0.025em;
|
|
animation: text-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes text-pulse {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
</style>
|
|
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
|
|
<!-- Important: Increment the version parameter whenever you update MudBlazor to prevent caching issues -->
|
|
<link href="_content/MudBlazor/MudBlazor.min.css?v=1" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body class="site-gradient-bg">
|
|
<!-- SVG Gradient Definition for Gold Gears -->
|
|
<svg width="0" height="0" style="position:absolute">
|
|
<defs>
|
|
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#fef3c7;stop-opacity:1" />
|
|
<stop offset="30%" style="stop-color:#fde68a;stop-opacity:1" />
|
|
<stop offset="60%" style="stop-color:#fbbf24;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div id="app">
|
|
<div class="app-loader">
|
|
<div class="loader-content">
|
|
<div class="gear-wrapper">
|
|
<div class="gear-orbit"></div>
|
|
<div class="gear gear-large">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="gear gear-small">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 class="brand-name">MassTech</h1>
|
|
<p class="brand-tagline">Premium Quality Marketplace</p>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill"></div>
|
|
</div>
|
|
<p class="loading-text">Loading your experience...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="blazor-error-ui">
|
|
An unhandled error has occurred.
|
|
<a href="." class="reload">Reload</a>
|
|
<span class="dismiss">🗙</span>
|
|
</div>
|
|
|
|
<script>
|
|
// Set initial direction and language from cookie on page load
|
|
(function() {
|
|
const value = "; " + document.cookie;
|
|
const parts = value.split("; .AspNetCore.Culture=");
|
|
if (parts.length == 2) {
|
|
const cookieValue = decodeURIComponent(parts.pop().split(";").shift());
|
|
// Extract just the culture code (format: "c=en|uic=en")
|
|
const culture = cookieValue.split('|')[0].split('=')[1];
|
|
const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
|
|
document.documentElement.dir = rtlLanguages.some(lang => culture === lang) ? 'rtl' : 'ltr';
|
|
document.documentElement.lang = culture;
|
|
}
|
|
})();
|
|
|
|
window.cultureInfo = {
|
|
get: () => {
|
|
const value = "; " + document.cookie;
|
|
const parts = value.split("; .AspNetCore.Culture=");
|
|
if (parts.length == 2) return decodeURIComponent(parts.pop().split(";").shift());
|
|
},
|
|
set: (value) => {
|
|
const cookieValue = encodeURIComponent(`c=${value}|uic=${value}`);
|
|
document.cookie = `.AspNetCore.Culture=${cookieValue}; path=/; max-age=31536000`;
|
|
// Set RTL direction for Arabic and other RTL languages
|
|
const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
|
|
document.documentElement.dir = rtlLanguages.some(lang => value === lang) ? 'rtl' : 'ltr';
|
|
document.documentElement.lang = value;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script src="_framework/blazor.webassembly.js"></script>
|
|
<script src="_content/MudBlazor/MudBlazor.min.js?v=1"></script>
|
|
|
|
<!-- Media Component Assets -->
|
|
<link href="_content/Media.RCL/lib/cropper.min.css" rel="stylesheet" />
|
|
<script src="_content/Media.RCL/lib/cropper.min.js"></script>
|
|
<!-- <script src="_content/LayoutLib/Resources"></script>
|
|
<script src="_content/LayoutLib"></script> -->
|
|
|
|
<script src="_content/Media.RCL/js/mediaInterop.js"></script>
|
|
|
|
<!-- Carousel Scripts -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
|
<script src="_content/Common.RCL/css/carousal.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |