Spaces:
Building
Building
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Flare Admin</title> | |
<base href="/"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="icon" type="image/x-icon" href="favicon.ico"> | |
<link rel="preconnect" href="https://fonts.gstatic.com"> | |
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
<style> | |
/* Initial loading spinner */ | |
.initial-loader { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: #f5f5f5; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
z-index: 10000; | |
transition: opacity 0.3s ease-out; | |
} | |
.initial-loader.fade-out { | |
opacity: 0; | |
} | |
.spinner { | |
width: 60px; | |
height: 60px; | |
border: 4px solid #e0e0e0; | |
border-top: 4px solid #3f51b5; | |
border-radius: 50%; | |
animation: spin 1s linear infinite; | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
.initial-loader p { | |
margin-top: 20px; | |
color: #666; | |
font-size: 16px; | |
font-family: 'Roboto', sans-serif; | |
} | |
</style> | |
</head> | |
<body class="mat-typography"> | |
<app-root> | |
<!-- This spinner shows while Angular is loading --> | |
<div class="initial-loader"> | |
<div class="spinner"></div> | |
<p>Loading Flare Admin...</p> | |
</div> | |
</app-root> | |
</body> | |
</html> |