Enhance sidebar UI and layout
This commit is contained in:
Qaisyousuf
parent
4c2901023a
commit
34f87c6390
18 changed files with 3585 additions and 689 deletions
|
|
@ -10,7 +10,7 @@ using Web.ViewModel.DashboardVM;
|
|||
|
||||
namespace Web.Areas.Admin.Controllers
|
||||
{
|
||||
[Authorize(Roles = "Admin")]
|
||||
[Authorize(Roles = "Admin,Demo")]
|
||||
public class AdminController : Controller
|
||||
{
|
||||
private readonly SignInManager<ApplicationUser> _signInManager;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
{
|
||||
|
||||
|
||||
|
||||
public class FooterController : Controller
|
||||
{
|
||||
private readonly IFooterRepository _footer;
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
return View(listViewModel);
|
||||
}
|
||||
|
||||
[Authorize(Roles = "Admin")]
|
||||
public IActionResult Create()
|
||||
{
|
||||
var totalSubscribedUsers = _context.Subscriptions.Count(s => s.IsSubscribed);
|
||||
|
|
@ -102,7 +103,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
}
|
||||
|
||||
|
||||
|
||||
[Authorize(Roles = "Admin")]
|
||||
[HttpPost]
|
||||
public async Task<IActionResult> Create(SendNewsLetterViewModel viewModel)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
});
|
||||
}
|
||||
[HttpGet]
|
||||
[Authorize(Roles = "Admin")]
|
||||
public IActionResult Create()
|
||||
|
||||
|
||||
|
|
@ -120,6 +121,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
return View(questionnaire);
|
||||
}
|
||||
[HttpPost]
|
||||
[Authorize(Roles = "Admin")]
|
||||
public async Task<IActionResult> Create(QuestionnaireViewModel viewmodel)
|
||||
{
|
||||
if (ModelState.IsValid)
|
||||
|
|
@ -172,6 +174,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
}
|
||||
|
||||
[HttpGet]
|
||||
[Authorize(Roles = "Admin")]
|
||||
public IActionResult Edit(int id)
|
||||
{
|
||||
var questionTypes = Enum.GetValues(typeof(QuestionType))
|
||||
|
|
@ -214,7 +217,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
|
||||
return View(viewModel);
|
||||
}
|
||||
|
||||
[Authorize(Roles = "Admin")]
|
||||
[HttpPost]
|
||||
public async Task<IActionResult> Edit(EditQuestionnaireViewModel viewModel)
|
||||
{
|
||||
|
|
@ -510,6 +513,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
}
|
||||
}
|
||||
[HttpGet]
|
||||
[Authorize(Roles = "Admin")]
|
||||
public IActionResult Delete(int id)
|
||||
{
|
||||
var questionTypes = Enum.GetValues(typeof(QuestionType)).Cast<QuestionType>();
|
||||
|
|
@ -830,6 +834,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
// Add these methods to your existing QuestionnaireController class
|
||||
|
||||
[HttpGet]
|
||||
[Authorize(Roles = "Admin")]
|
||||
public IActionResult SetLogic(int id)
|
||||
{
|
||||
var questionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(id);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ using Web.ViewModel.AccountVM;
|
|||
namespace Web.Areas.Admin.Controllers
|
||||
{
|
||||
|
||||
[Authorize(Roles = "Admin")]
|
||||
public class UsersController : Controller
|
||||
{
|
||||
private readonly UserManager<ApplicationUser> _userManager;
|
||||
|
|
|
|||
|
|
@ -9,54 +9,419 @@
|
|||
<link rel="stylesheet" href="~/Web.styles.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Override default styles while preserving functionality */
|
||||
|
||||
|
||||
/* Modern Glassmorphism Sidebar - Icons only by default */
|
||||
#sidebar {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
height: 100vh !important;
|
||||
min-width: 80px; /* Small width by default - icons only */
|
||||
max-width: 80px;
|
||||
background: rgba(10, 15, 25, 0.85) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.8) !important;
|
||||
border-right: 1px solid rgba(59, 130, 246, 0.15) !important;
|
||||
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05) !important;
|
||||
color: #fff;
|
||||
-webkit-transition: all 0.3s;
|
||||
-o-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 1000;
|
||||
text-align: center; /* Center icons by default */
|
||||
}
|
||||
|
||||
#sidebar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Default: Hide text, show only icons centered */
|
||||
#sidebar ul.components li a {
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid transparent;
|
||||
margin: 4px 8px;
|
||||
}
|
||||
|
||||
#sidebar ul.components li a span.bi {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Hide text by default */
|
||||
#sidebar ul.components li a .nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Expanded state: Show both icons and text */
|
||||
#sidebar.active {
|
||||
min-width: 280px; /* Wide when expanded */
|
||||
max-width: 280px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#sidebar.active ul.components li a {
|
||||
padding: 14px 18px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 4px 12px;
|
||||
}
|
||||
|
||||
#sidebar.active ul.components li a span.bi {
|
||||
margin-right: 15px;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#sidebar.active ul.components li a .nav-text {
|
||||
display: inline; /* Show text when expanded */
|
||||
}
|
||||
|
||||
/* Logo styling */
|
||||
#sidebar .logo {
|
||||
display: block;
|
||||
color: #fff !important;
|
||||
font-weight: 900;
|
||||
font-size: 1.2rem !important; /* Smaller by default */
|
||||
padding: 20px 0;
|
||||
-webkit-transition: 0.3s;
|
||||
-o-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid rgba(59, 130, 246, 0.15);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#sidebar.active .logo {
|
||||
font-size: 1.8rem !important; /* Larger when expanded */
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
/* Navigation List Styling */
|
||||
#sidebar ul.components {
|
||||
padding: 0;
|
||||
-webkit-transition: 0.3s;
|
||||
-o-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#sidebar ul li {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#sidebar ul li > ul {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#sidebar ul li > ul li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#sidebar ul li a:hover {
|
||||
color: #fff;
|
||||
background: rgba(59, 130, 246, 0.12) !important;
|
||||
transform: translateX(4px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
#sidebar ul li.active > a {
|
||||
background: rgba(20, 184, 166, 0.15) !important;
|
||||
color: #fff;
|
||||
border: 1px solid rgba(20, 184, 166, 0.3);
|
||||
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2);
|
||||
}
|
||||
|
||||
/* Responsive behavior */
|
||||
@@media (max-width: 991.98px) {
|
||||
#sidebar {
|
||||
position: fixed !important;
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
left: -80px !important; /* Hide by default on mobile */
|
||||
}
|
||||
|
||||
#sidebar.active {
|
||||
left: 0 !important; /* Show when active on mobile */
|
||||
}
|
||||
|
||||
#sidebarCollapse span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
-webkit-transition: all 0.3s;
|
||||
-o-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* Modern Navbar Styling */
|
||||
.navbar {
|
||||
padding: 15px 10px;
|
||||
background: rgba(5, 8, 18, 0.85) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.8);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
margin-bottom: 40px;
|
||||
border-bottom: 1px solid rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.navbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Modern Button Styling */
|
||||
.btn.btn-primary {
|
||||
background: linear-gradient(135deg, #3b82f6, #14b8a6) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.btn.btn-primary:hover,
|
||||
.btn.btn-primary:focus {
|
||||
background: linear-gradient(135deg, #2563eb, #0d9488) !important;
|
||||
border-color: rgba(59, 130, 246, 0.5) !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
|
||||
border-color: rgba(239, 68, 68, 0.5) !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
/* Dropdown Styling */
|
||||
.dropdown-menu {
|
||||
background: rgba(5, 8, 18, 0.95) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.8) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2) !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.1) !important;
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
font-weight: 500;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(59, 130, 246, 0.15) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Badge Styling */
|
||||
.badge-danger {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
|
||||
color: white !important;
|
||||
border-radius: 50%;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Text colors */
|
||||
.text-white {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
#sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(59, 130, 246, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
/* Preserve original footer styling */
|
||||
.footer {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
@@media (max-width: 991.98px) {
|
||||
.footer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Preserve original dropdown toggle */
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Navbar button styling */
|
||||
.navbar-btn {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper d-flex align-items-stretch">
|
||||
<nav id="sidebar" class="active">
|
||||
<h1><a class="logo">OS</a></h1>
|
||||
<nav id="sidebar">
|
||||
<h1><a class="logo">NVKN</a></h1>
|
||||
<ul class="list-unstyled components mb-5">
|
||||
<li class="sidebarCollapse">
|
||||
<a asp-controller="admin" asp-action="index"><span class="bi bi-speedometer"></span> Admin</a>
|
||||
<a asp-controller="admin" asp-action="index">
|
||||
<span class="bi bi-speedometer"></span>
|
||||
<span class="nav-text">Admin</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="Page" asp-action="index"><span class="bi bi-file-earmark-fill"></span> Pages</a>
|
||||
<a asp-controller="Page" asp-action="index">
|
||||
<span class="bi bi-file-earmark-fill"></span>
|
||||
<span class="nav-text">Pages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="banner" asp-action="index"><span class="bi bi-card-image"></span> Banners</a>
|
||||
<a asp-controller="banner" asp-action="index">
|
||||
<span class="bi bi-card-image"></span>
|
||||
<span class="nav-text">Banners</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="footer" asp-action="index"><span class="bi bi-c-circle-fill"></span> Footer</a>
|
||||
<a asp-controller="footer" asp-action="index">
|
||||
<span class="bi bi-c-circle-fill"></span>
|
||||
<span class="nav-text">Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="address" asp-action="index"><span class="bi bi-pin-map"></span> Address</a>
|
||||
<a asp-controller="address" asp-action="index">
|
||||
<span class="bi bi-pin-map"></span>
|
||||
<span class="nav-text">Address</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="SocialMedia" asp-action="index"><span class="bi bi-collection-play-fill"></span> Social Media</a>
|
||||
<a asp-controller="SocialMedia" asp-action="index">
|
||||
<span class="bi bi-collection-play-fill"></span>
|
||||
<span class="nav-text">Social Media</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a asp-controller="Questionnaire" asp-action="index"><span class="bi bi-question-circle"></span> Survey</a>
|
||||
<a asp-controller="Questionnaire" asp-action="index">
|
||||
<span class="bi bi-question-circle"></span>
|
||||
<span class="nav-text">Survey</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="SurveyAnalysis" asp-action="index"><span class="bi bi-graph-up-arrow"></span> Analyzer</a>
|
||||
<a asp-controller="SurveyAnalysis" asp-action="index">
|
||||
<span class="bi bi-graph-up-arrow"></span>
|
||||
<span class="nav-text">Analyzer</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a asp-controller="UserResponse" asp-action="index"><span class="bi bi-clipboard-data"></span> Response</a>
|
||||
<a asp-controller="UserResponse" asp-action="index">
|
||||
<span class="bi bi-clipboard-data"></span>
|
||||
<span class="nav-text">Response</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a asp-controller="UserResponseStatus" asp-action="index"><span class="bi bi-heart-pulse"></span> User status</a>
|
||||
<a asp-controller="UserResponseStatus" asp-action="index">
|
||||
<span class="bi bi-heart-pulse"></span>
|
||||
<span class="nav-text">User status</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="newsletters" asp-action="index"><span class="bi bi-newspaper"></span> Subscibers</a>
|
||||
<a asp-controller="newsletters" asp-action="index">
|
||||
<span class="bi bi-newspaper"></span>
|
||||
<span class="nav-text">Subscibers</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- Page Content -->
|
||||
|
|
@ -69,7 +434,7 @@
|
|||
<span class="sr-only">Toggle Menu</span>
|
||||
</button>
|
||||
<button class="navbar-toggler btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="bi bi-list"></i>
|
||||
<span class="sr-only"></span>
|
||||
</button>
|
||||
|
|
@ -79,14 +444,13 @@
|
|||
|
||||
<span class="dropdown m-2">
|
||||
<button class="bg-transparent text-white btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="badge badge-danger" id="notificationCount">0</span>
|
||||
<span class="badge badge-danger" id="notificationCount">0</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" id="notificationDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">
|
||||
|
||||
<div id="notifications">
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -115,10 +479,10 @@
|
|||
</nav>
|
||||
|
||||
|
||||
<main>
|
||||
<main>
|
||||
|
||||
@RenderBody()
|
||||
</main>
|
||||
</main>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -221,95 +585,6 @@
|
|||
</script>
|
||||
|
||||
|
||||
@* <script type="text/javascript">
|
||||
// Establish a connection to the SignalR hub
|
||||
const connection = new signalR.HubConnectionBuilder()
|
||||
.withUrl("/notificationHub")
|
||||
.build();
|
||||
|
||||
// Function to load notifications from local storage
|
||||
function loadNotifications() {
|
||||
const notificationsList = document.getElementById("notifications");
|
||||
const notificationCount = document.getElementById("notificationCount");
|
||||
|
||||
// Retrieve notifications from local storage
|
||||
const storedNotifications = JSON.parse(localStorage.getItem("notifications")) || [];
|
||||
|
||||
// Update the notification count
|
||||
notificationCount.textContent = storedNotifications.length;
|
||||
|
||||
// Add each stored notification to the list
|
||||
storedNotifications.forEach(notification => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "list-group-item";
|
||||
div.textContent = notification.text;
|
||||
|
||||
// Add click event to remove notification
|
||||
div.addEventListener("click", () => {
|
||||
removeNotification(div, notification.id);
|
||||
});
|
||||
|
||||
notificationsList.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to add a notification to the list
|
||||
function addNotification(userName, email) {
|
||||
const notificationsList = document.getElementById("notifications");
|
||||
const notificationCount = document.getElementById("notificationCount");
|
||||
|
||||
// Create a unique ID for the notification
|
||||
const notificationId = Date.now();
|
||||
|
||||
// Create notification item
|
||||
const div = document.createElement("div");
|
||||
div.className = "list-group-item";
|
||||
div.textContent = `New submission from ${userName}`;
|
||||
|
||||
// Add click event to remove notification
|
||||
div.addEventListener("click", () => {
|
||||
removeNotification(div, notificationId);
|
||||
});
|
||||
|
||||
// Append the new notification
|
||||
notificationsList.appendChild(div);
|
||||
|
||||
// Update the notification count
|
||||
notificationCount.textContent = parseInt(notificationCount.textContent) + 1;
|
||||
|
||||
// Store the notification in local storage
|
||||
const storedNotifications = JSON.parse(localStorage.getItem("notifications")) || [];
|
||||
storedNotifications.push({ id: notificationId, text: div.textContent });
|
||||
localStorage.setItem("notifications", JSON.stringify(storedNotifications));
|
||||
}
|
||||
|
||||
// Function to remove a notification
|
||||
function removeNotification(div, id) {
|
||||
div.remove();
|
||||
|
||||
// Update the notification count
|
||||
const notificationCount = document.getElementById("notificationCount");
|
||||
notificationCount.textContent = parseInt(notificationCount.textContent) - 1;
|
||||
|
||||
// Remove the notification from local storage
|
||||
let storedNotifications = JSON.parse(localStorage.getItem("notifications")) || [];
|
||||
storedNotifications = storedNotifications.filter(notification => notification.id !== id);
|
||||
localStorage.setItem("notifications", JSON.stringify(storedNotifications));
|
||||
}
|
||||
|
||||
// Receive notification from the server
|
||||
connection.on("ReceiveNotification", function (userName, email) {
|
||||
addNotification(userName, email);
|
||||
});
|
||||
|
||||
// Start the connection
|
||||
connection.start().then(loadNotifications).catch(function (err) {
|
||||
return console.error(err.toString());
|
||||
});
|
||||
</script> *@
|
||||
|
||||
|
||||
|
||||
@await RenderSectionAsync("Scripts", required: false)
|
||||
@await RenderSectionAsync("Styles", required: false)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1 @@
|
|||
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
|
||||
for details on configuring this project to bundle and minify static web assets. */
|
||||
|
||||
a.navbar-brand {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0077cc;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
button.accept-policy {
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
444
Web/Controllers/DemoRequestController.cs
Normal file
444
Web/Controllers/DemoRequestController.cs
Normal file
|
|
@ -0,0 +1,444 @@
|
|||
using Data;
|
||||
using Microsoft.AspNetCore.Identity;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Model;
|
||||
using Services.EmailSend;
|
||||
using Services.Interaces;
|
||||
using System.Text;
|
||||
|
||||
namespace Web.Controllers
|
||||
{
|
||||
public class DemoRequestController : Controller
|
||||
{
|
||||
private readonly UserManager<ApplicationUser> _userManager;
|
||||
private readonly SurveyContext _context;
|
||||
private readonly IEmailServices _emailService;
|
||||
|
||||
public DemoRequestController(UserManager<ApplicationUser> userManager, SurveyContext context, IEmailServices emailService)
|
||||
{
|
||||
_userManager = userManager;
|
||||
_context = context;
|
||||
_emailService = emailService;
|
||||
}
|
||||
|
||||
// Danish Demo Endpoint
|
||||
[HttpPost]
|
||||
public async Task<IActionResult> RequestDemo([FromBody] DemoRequest request)
|
||||
{
|
||||
return await CreateDemoAccount(request, "da");
|
||||
}
|
||||
|
||||
// English Demo Endpoint
|
||||
[HttpPost]
|
||||
public async Task<IActionResult> RequestDemoEN([FromBody] DemoRequest request)
|
||||
{
|
||||
return await CreateDemoAccount(request, "en");
|
||||
}
|
||||
|
||||
// Shared logic for both languages
|
||||
private async Task<IActionResult> CreateDemoAccount(DemoRequest request, string language)
|
||||
{
|
||||
try
|
||||
{
|
||||
// Validate email
|
||||
if (string.IsNullOrEmpty(request.Email))
|
||||
{
|
||||
var errorMsg = language == "da" ? "Email er påkrævet" : "Email is required";
|
||||
return Json(new { success = false, message = errorMsg });
|
||||
}
|
||||
|
||||
// Check if user already exists
|
||||
var existingUser = await _userManager.FindByEmailAsync(request.Email);
|
||||
if (existingUser != null)
|
||||
{
|
||||
var existsMsg = language == "da" ? "Email allerede i brug" : "Email already in use";
|
||||
return Json(new { success = false, message = existsMsg });
|
||||
}
|
||||
|
||||
// Generate password
|
||||
string demoPassword = GeneratePassword();
|
||||
|
||||
// Create demo user
|
||||
var demoUser = new ApplicationUser
|
||||
{
|
||||
UserName = request.Email,
|
||||
Email = request.Email,
|
||||
EmailConfirmed = true,
|
||||
FirstName = "Demo",
|
||||
LastName = "User"
|
||||
};
|
||||
|
||||
// Create user
|
||||
var result = await _userManager.CreateAsync(demoUser, demoPassword);
|
||||
|
||||
if (result.Succeeded)
|
||||
{
|
||||
// Assign Demo role
|
||||
await _userManager.AddToRoleAsync(demoUser, "Demo");
|
||||
|
||||
// Send email with credentials (language-specific)
|
||||
bool emailSent = await SendDemoCredentialsEmail(demoUser.Email, demoPassword, language);
|
||||
|
||||
if (emailSent)
|
||||
{
|
||||
var successMsg = language == "da"
|
||||
? "Demo konto oprettet! Check din email for login detaljer."
|
||||
: "Demo account created! Check your email for login details.";
|
||||
return Json(new { success = true, message = successMsg });
|
||||
}
|
||||
else
|
||||
{
|
||||
var emailErrorMsg = language == "da"
|
||||
? "Demo konto oprettet, men email kunne ikke sendes. Kontakt support."
|
||||
: "Demo account created, but email could not be sent. Please contact support.";
|
||||
return Json(new { success = true, message = emailErrorMsg });
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
var errors = string.Join(", ", result.Errors.Select(e => e.Description));
|
||||
var userErrorMsg = language == "da"
|
||||
? "Fejl ved oprettelse af bruger: " + errors
|
||||
: "Error creating user: " + errors;
|
||||
return Json(new { success = false, message = userErrorMsg });
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
var exceptionMsg = language == "da" ? "Fejl: " + ex.Message : "Error: " + ex.Message;
|
||||
return Json(new { success = false, message = exceptionMsg });
|
||||
}
|
||||
}
|
||||
|
||||
// Language-aware email sending
|
||||
private async Task<bool> SendDemoCredentialsEmail(string email, string password, string language)
|
||||
{
|
||||
if (language == "da")
|
||||
{
|
||||
return await SendDanishDemoEmail(email, password);
|
||||
}
|
||||
else
|
||||
{
|
||||
return await SendEnglishDemoEmail(email, password);
|
||||
}
|
||||
}
|
||||
|
||||
// Danish email template
|
||||
private async Task<bool> SendDanishDemoEmail(string email, string password)
|
||||
{
|
||||
var subject = "🚀 Din A-Survey Demo Konto er Klar!";
|
||||
|
||||
var htmlBody = $@"
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<style>
|
||||
body {{
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}}
|
||||
.container {{
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}}
|
||||
.header {{
|
||||
background: linear-gradient(135deg, #6441a5, #2a9d8f);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}}
|
||||
.content {{
|
||||
background: #f9f9f9;
|
||||
padding: 30px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}}
|
||||
.credentials {{
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid #3498db;
|
||||
}}
|
||||
.btn {{
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #00d2ff, #3a7bd5);
|
||||
color: white;
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}}
|
||||
.warning {{
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}}
|
||||
.footer {{
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: 20px;
|
||||
}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<h1>🎯 Velkommen til A-Survey Demo!</h1>
|
||||
<p>Din demo konto er klar til brug med fulde AI-funktioner</p>
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
<h2>🔐 Login Detaljer</h2>
|
||||
|
||||
<div class='credentials'>
|
||||
<p><strong>📧 Email:</strong> {email}</p>
|
||||
<p><strong>🔑 Adgangskode:</strong> <code style='background: #f4f4f4; padding: 5px; border-radius: 4px; font-family: monospace; font-weight: bold; color: #e74c3c;'>{password}</code></p>
|
||||
</div>
|
||||
|
||||
<div style='text-align: center; margin: 30px 0;'>
|
||||
<a href='https://unabused-terina-wavier.ngrok-free.dev/Account/Login' class='btn'>
|
||||
🚀 Log Ind til A-Survey
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class='warning'>
|
||||
<h3>📅 Demo Information:</h3>
|
||||
<ul style='margin: 10px 0; padding-left: 20px;'>
|
||||
<li>✨ <strong>Demo periode:</strong> 14 dage fra i dag</li>
|
||||
<li>🧠 <strong>AI-funktioner:</strong> Alle tilgængelige</li>
|
||||
<li>📊 <strong>Analytics:</strong> Komplet dashboard inkluderet</li>
|
||||
<li>📋 <strong>Surveys:</strong> Ubegrænset oprettelse</li>
|
||||
<li>🔄 <strong>Opgradering:</strong> Kan opgraderes til fuld version</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style='background: #e8f4fd; border: 1px solid #bee5eb; padding: 15px; border-radius: 8px; margin: 20px 0;'>
|
||||
<h3>💡 Kom Hurtigt i Gang:</h3>
|
||||
<ol style='margin: 10px 0; padding-left: 20px;'>
|
||||
<li>Klik på login linket ovenfor</li>
|
||||
<li>Indtast din email og adgangskode</li>
|
||||
<li>Udforsk de forudindlæste demo surveys</li>
|
||||
<li>Test AI-analyse funktionerne</li>
|
||||
<li>Opret dine egne surveys</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p><strong>Har du spørgsmål eller brug for hjælp?</strong><br>
|
||||
Kontakt os på: <a href='mailto:info@seosoft.dk'>info@seosoft.dk</a><br>
|
||||
Telefon: +45 61 77 73 36</p>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<p>
|
||||
Med venlig hilsen<br>
|
||||
<strong>A-Survey Team</strong><br>
|
||||
SeoSoft ApS<br>
|
||||
<small>Intelligent Survey Platform med AI-indsigter</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>";
|
||||
|
||||
try
|
||||
{
|
||||
var emailToSend = new EmailToSend(email, subject, htmlBody);
|
||||
return await _emailService.SendConfirmationEmailAsync(emailToSend);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// English email template
|
||||
private async Task<bool> SendEnglishDemoEmail(string email, string password)
|
||||
{
|
||||
var subject = "🚀 Your A-Survey Demo Account is Ready!";
|
||||
|
||||
var htmlBody = $@"
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<style>
|
||||
body {{
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}}
|
||||
.container {{
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}}
|
||||
.header {{
|
||||
background: linear-gradient(135deg, #6441a5, #2a9d8f);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}}
|
||||
.content {{
|
||||
background: #f9f9f9;
|
||||
padding: 30px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}}
|
||||
.credentials {{
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid #3498db;
|
||||
}}
|
||||
.btn {{
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #00d2ff, #3a7bd5);
|
||||
color: white;
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}}
|
||||
.warning {{
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}}
|
||||
.footer {{
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: 20px;
|
||||
}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<h1>🎯 Welcome to A-Survey Demo!</h1>
|
||||
<p>Your demo account is ready with full AI capabilities</p>
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
<h2>🔐 Login Credentials</h2>
|
||||
|
||||
<div class='credentials'>
|
||||
<p><strong>📧 Email:</strong> {email}</p>
|
||||
<p><strong>🔑 Password:</strong> <code style='background: #f4f4f4; padding: 5px; border-radius: 4px; font-family: monospace; font-weight: bold; color: #e74c3c;'>{password}</code></p>
|
||||
</div>
|
||||
|
||||
<div style='text-align: center; margin: 30px 0;'>
|
||||
<a href='https://unabused-terina-wavier.ngrok-free.dev/Account/Login' class='btn'>
|
||||
🚀 Login to A-Survey
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class='warning'>
|
||||
<h3>📅 Demo Information:</h3>
|
||||
<ul style='margin: 10px 0; padding-left: 20px;'>
|
||||
<li>✨ <strong>Demo period:</strong> 14 days from today</li>
|
||||
<li>🧠 <strong>AI features:</strong> All available</li>
|
||||
<li>📊 <strong>Analytics:</strong> Complete dashboard included</li>
|
||||
<li>📋 <strong>Surveys:</strong> Unlimited creation</li>
|
||||
<li>🔄 <strong>Upgrade:</strong> Convert to full version anytime</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style='background: #e8f4fd; border: 1px solid #bee5eb; padding: 15px; border-radius: 8px; margin: 20px 0;'>
|
||||
<h3>💡 Quick Start Guide:</h3>
|
||||
<ol style='margin: 10px 0; padding-left: 20px;'>
|
||||
<li>Click the login button above</li>
|
||||
<li>Enter your email and password</li>
|
||||
<li>Explore the pre-loaded demo surveys</li>
|
||||
<li>Test the AI analysis features</li>
|
||||
<li>Create your own surveys</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p><strong>Questions or need help?</strong><br>
|
||||
Contact us at: <a href='mailto:info@seosoft.dk'>info@seosoft.dk</a><br>
|
||||
Phone: +45 61 77 73 36</p>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<p>
|
||||
Best regards,<br>
|
||||
<strong>A-Survey Team</strong><br>
|
||||
SeoSoft ApS<br>
|
||||
<small>Intelligent Survey Platform with AI Insights</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>";
|
||||
|
||||
try
|
||||
{
|
||||
var emailToSend = new EmailToSend(email, subject, htmlBody);
|
||||
return await _emailService.SendConfirmationEmailAsync(emailToSend);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
private string GeneratePassword()
|
||||
{
|
||||
var random = new Random();
|
||||
|
||||
// Ensure password meets all ASP.NET Identity requirements
|
||||
var digits = "0123456789";
|
||||
var lowercase = "abcdefghijklmnopqrstuvwxyz";
|
||||
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
var special = "!@#$%";
|
||||
|
||||
// Guarantee at least one of each required type
|
||||
var password = new StringBuilder();
|
||||
password.Append(digits[random.Next(digits.Length)]); // At least 1 digit
|
||||
password.Append(lowercase[random.Next(lowercase.Length)]); // At least 1 lowercase
|
||||
password.Append(uppercase[random.Next(uppercase.Length)]); // At least 1 uppercase
|
||||
password.Append(special[random.Next(special.Length)]); // At least 1 special char
|
||||
|
||||
// Fill the rest with random characters
|
||||
var allChars = digits + lowercase + uppercase + special;
|
||||
for (int i = 0; i < 4; i++) // Add 4 more random chars
|
||||
{
|
||||
password.Append(allChars[random.Next(allChars.Length)]);
|
||||
}
|
||||
|
||||
// Shuffle the password to randomize position of guaranteed chars
|
||||
var passwordArray = password.ToString().ToCharArray();
|
||||
for (int i = passwordArray.Length - 1; i > 0; i--)
|
||||
{
|
||||
int j = random.Next(i + 1);
|
||||
(passwordArray[i], passwordArray[j]) = (passwordArray[j], passwordArray[i]);
|
||||
}
|
||||
|
||||
return $"Demo{new string(passwordArray)}";
|
||||
}
|
||||
}
|
||||
|
||||
public class DemoRequest
|
||||
{
|
||||
public string Email { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -41,7 +41,15 @@ builder.Services.AddSignalR();
|
|||
builder.Services.ConfigureAIAnalysis();
|
||||
|
||||
|
||||
|
||||
builder.Services.AddCors(options =>
|
||||
{
|
||||
options.AddPolicy("AllowSeoSoft", policy =>
|
||||
{
|
||||
policy.WithOrigins("https://seosoft.dk", "https://unabused-terina-wavier.ngrok-free.dev")
|
||||
.AllowAnyMethod()
|
||||
.AllowAnyHeader();
|
||||
});
|
||||
});
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
|
|
@ -65,7 +73,7 @@ app.UseAuthorization();
|
|||
|
||||
app.MapRazorPages();
|
||||
app.MapControllers();
|
||||
|
||||
app.UseCors("AllowSeoSoft");
|
||||
|
||||
app.MapControllerRoute(
|
||||
name: "page",
|
||||
|
|
|
|||
|
|
@ -1,192 +1,473 @@
|
|||
@model Web.ViewModel.AccountVM.LoginViewModel
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Login";
|
||||
Layout = "~/Views/Shared/_LoginLayout.cshtml";
|
||||
}
|
||||
|
||||
<style>
|
||||
body {
|
||||
height: 100% !important;
|
||||
background-repeat: no-repeat;
|
||||
background: linear-gradient(119deg, rgba(47,82,131,1) 0%, rgba(29,33,59,1) 34%, rgba(27,54,61,1) 67%, rgba(58,82,116,1) 100%) !important
|
||||
}
|
||||
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
#rowSectionError {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#Errocard {
|
||||
|
||||
|
||||
box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
|
||||
-webkit-box-shadow: 0px 0px 20px 2px rgba(20, 101, 230, 1);
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
height: 400px;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding: 87px 50px 0 50px;
|
||||
margin: 150px 0px 0px 0px;
|
||||
#BannerBackground {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, #000000 0%, #0a0e1a 30%, #000000 70%, #000101 100%);
|
||||
color: white;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
#boxError{
|
||||
display: inline;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@media (max-width: 792px) {
|
||||
|
||||
|
||||
#Errocard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
height: 70vh;
|
||||
padding: 70 20px 0 20px;
|
||||
}
|
||||
|
||||
#boxError {
|
||||
width: auto;
|
||||
height: 30%;
|
||||
margin: 5px;
|
||||
}
|
||||
#BannerBackground::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.06) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.04) 0%, transparent 40%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@media (max-width: 800px) {
|
||||
|
||||
|
||||
#Errocard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
height: 70vh;
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
|
||||
#boxError {
|
||||
width: auto;
|
||||
height: 30%;
|
||||
margin: 5px;
|
||||
}
|
||||
/* Floating elements animation */
|
||||
.floating-elements {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.08));
|
||||
animation: float 20s infinite linear;
|
||||
}
|
||||
|
||||
@@media (max-width: 1300px) {
|
||||
|
||||
|
||||
#Errocard {
|
||||
|
||||
box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
|
||||
-webkit-box-shadow: 0px 0px 20px 2px rgba(20,101,230,1);
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
height: 400px;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding: 89px 0px 0 0px;
|
||||
margin: 50px 0px 0px 0px;
|
||||
color: white;
|
||||
.floating-element:nth-child(1) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
#boxError {
|
||||
width: auto;
|
||||
margin: 5px;
|
||||
.floating-element:nth-child(2) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: 70%;
|
||||
right: 10%;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
|
||||
#boxBanner {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 5px;
|
||||
.floating-element:nth-child(3) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: -14s;
|
||||
}
|
||||
|
||||
}
|
||||
@@keyframes float {
|
||||
0%, 100%
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
{
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Main login container */
|
||||
.login-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: calc(1.5em + 0.75rem + 2px);
|
||||
padding: 0.375rem 0.75rem;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Modern glassmorphic login card */
|
||||
.login-card {
|
||||
background: rgba(5, 8, 18, 0.85);
|
||||
backdrop-filter: blur(25px) saturate(1.8);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, transparent 30%, rgba(20, 184, 166, 0.04) 70%, rgba(249, 115, 22, 0.02) 100%);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Login header */
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #73494900 !important;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #115caf;
|
||||
border-radius: 0.25rem;
|
||||
-webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
-o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Modern form group styling */
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Form labels */
|
||||
.form-label {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.9rem !important;
|
||||
margin-bottom: 8px !important;
|
||||
display: block !important;
|
||||
letter-spacing: 0.3px !important;
|
||||
}
|
||||
|
||||
/* Modern form control styling */
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
border-radius: 12px !important;
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
padding: 16px 20px !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
backdrop-filter: blur(15px);
|
||||
height: 56px !important;
|
||||
line-height: 1.5 !important;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
|
||||
outline: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
-moz-appearance: none !important;
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
/* Remove autofill styling */
|
||||
.form-control:-webkit-autofill,
|
||||
.form-control:-webkit-autofill:hover,
|
||||
.form-control:-webkit-autofill:focus {
|
||||
-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
|
||||
-webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
|
||||
transition: background-color 5000s ease-in-out 0s !important;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-color: rgba(59, 130, 246, 0.6) !important;
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 30px rgba(59, 130, 246, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
|
||||
transform: translateY(-2px);
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4) !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
/* Modern checkbox styling */
|
||||
.form-check {
|
||||
margin: 20px 0 24px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
border-radius: 6px !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
cursor: pointer !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%) !important;
|
||||
border-color: rgba(59, 130, 246, 0.6) !important;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
font-size: 0.9rem !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
margin-bottom: 0 !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* Modern submit button */
|
||||
.login-submit-btn {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, var(--bs-primary-text-emphasis) 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 12px !important;
|
||||
color: white !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.1rem !important;
|
||||
padding: 16px 32px !important;
|
||||
width: 100% !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
cursor: pointer !important;
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.login-submit-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.login-submit-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.login-submit-btn:hover {
|
||||
transform: translateY(-3px) !important;
|
||||
box-shadow: 0 12px 40px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.15) !important;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #059669 50%, #ea580 100%) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.login-submit-btn:active {
|
||||
transform: translateY(-1px) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.login-submit-btn:focus {
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 12px 40px rgba(59, 130, 246, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Validation messages styling */
|
||||
.text-danger {
|
||||
color: rgba(239, 68, 68, 0.9) !important;
|
||||
font-size: 0.85rem !important;
|
||||
font-weight: 500 !important;
|
||||
margin-top: 6px !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.validation-summary-errors {
|
||||
background: rgba(239, 68, 68, 0.1) !important;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 12px 16px !important;
|
||||
margin-bottom: 24px !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.validation-summary-errors ul {
|
||||
margin: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
||||
.validation-summary-errors li {
|
||||
color: rgba(239, 68, 68, 0.9) !important;
|
||||
font-size: 0.85rem !important;
|
||||
font-weight: 500 !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.validation-summary-errors li:before {
|
||||
content: '⚠ ';
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Notification styling */
|
||||
.alert {
|
||||
background: rgba(59, 130, 246, 0.1) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3) !important;
|
||||
border-radius: 12px !important;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
backdrop-filter: blur(15px);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@@media (max-width: 768px) {
|
||||
#BannerBackground
|
||||
|
||||
{
|
||||
padding: 20px 0;
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 32px 24px;
|
||||
border-radius: 16px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 14px 16px !important;
|
||||
font-size: 0.95rem !important;
|
||||
height: 52px !important;
|
||||
}
|
||||
|
||||
.login-submit-btn {
|
||||
padding: 14px 28px !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@media (max-width: 480px) {
|
||||
.login-card
|
||||
|
||||
{
|
||||
padding: 24px 20px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 12px 14px !important;
|
||||
font-size: 0.9rem !important;
|
||||
height: 48px !important;
|
||||
}
|
||||
|
||||
.login-submit-btn {
|
||||
padding: 12px 24px !important;
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div class="d-flex flex-column" id="BannerBackground">
|
||||
<!-- Floating background elements -->
|
||||
<div class="floating-elements">
|
||||
<div class="floating-element"></div>
|
||||
<div class="floating-element"></div>
|
||||
<div class="floating-element"></div>
|
||||
</div>
|
||||
|
||||
<!-- FOR DEMO PURPOSE -->
|
||||
<!-- Main login section -->
|
||||
<section class="text-white">
|
||||
<div class="container py-1">
|
||||
<partial name="_Notification" />
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<!-- Login header -->
|
||||
<div class="login-header">
|
||||
<h1 class="login-title">Welcome Back</h1>
|
||||
<p class="login-subtitle">Sign in to your account to continue</p>
|
||||
</div>
|
||||
|
||||
<div class="" id="Errocard">
|
||||
<div class="col-lg-6 col-md-6 offset-md-3 offset-lg-3 col-sm-12">
|
||||
<!-- Notifications -->
|
||||
<partial name="_Notification" />
|
||||
|
||||
<!-- Login form -->
|
||||
<form asp-action="Login">
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
|
||||
<div class="form-floating mb-3">
|
||||
<input asp-for="Email" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||
<label for="floatingInput">Email address</label>
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger validation-summary-errors"></div>
|
||||
|
||||
<div class="form-group">
|
||||
<label asp-for="Email" class="form-label">Email Address</label>
|
||||
<input asp-for="Email" type="email" class="form-control" placeholder="Enter your email address">
|
||||
<span asp-validation-for="Email" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password" asp-for="Password" class="form-control" id="floatingPassword" placeholder="Password">
|
||||
<label for="floatingPassword">Password</label>
|
||||
|
||||
<div class="form-group">
|
||||
<label asp-for="Password" class="form-label">Password</label>
|
||||
<input asp-for="Password" type="password" class="form-control" placeholder="Enter your password">
|
||||
<span asp-validation-for="Password" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group form-check mt-2">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" asp-for="RememberMe" /> @Html.DisplayNameFor(model => model.RememberMe)
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" asp-for="RememberMe" type="checkbox" id="rememberMe">
|
||||
<label class="form-check-label" for="rememberMe">
|
||||
@Html.DisplayNameFor(model => model.RememberMe)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Login" class="btn btn-outline-info btn-sm" />
|
||||
<button type="submit" class="btn login-submit-btn">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
|
|
|
|||
|
|
@ -3,37 +3,198 @@
|
|||
ViewData["Title"] = "Home Page";
|
||||
}
|
||||
|
||||
<style>
|
||||
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
#MainContent {
|
||||
background: #000000;
|
||||
font-family: 'Inter', sans-serif;
|
||||
position: relative;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
#MainContent::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 35%), radial-gradient(circle at 75% 75%, rgba(20, 184, 166, 0.06) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.04) 0%, transparent 40%), linear-gradient(135deg, #010203 0%, #050812 30%, #010203 70%, #000101 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tech-pattern-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 2px), radial-gradient(circle at 70% 70%, rgba(20, 184, 166, 0.06) 0%, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
|
||||
background-size: 120px 120px, 150px 150px, 60px 60px, 60px 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.main-content-wrapper {
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
backdrop-filter: blur(25px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
border-radius: 24px;
|
||||
padding: 40px 40px;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.main-content-wrapper:hover {
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 25px 50px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: -0.02em;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
color: white !important;
|
||||
padding: 16px 40px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-main:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 30px rgba(30, 41, 59, 0.6);
|
||||
color: white !important;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
<!-- FOR DEMO PURPOSE -->
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
#MainContent
|
||||
|
||||
{
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.main-content-wrapper {
|
||||
padding: 30px 25px;
|
||||
margin: 0 15px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
padding: 14px 32px;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.floating-elements-main {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@media (max-width: 480px) {
|
||||
.main-content-wrapper
|
||||
|
||||
{
|
||||
padding: 25px 20px;
|
||||
margin: 0 10px;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
padding: 12px 28px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="MainContent" class="text-white">
|
||||
<div class="container py-1">
|
||||
@* <div class="col-12" id="boxBanner">
|
||||
<h1 class="display-6 text-white font-weight-bold">@Model.Description.ToUpper()</h1>
|
||||
</div> *@
|
||||
<div id="rowSectionMain">
|
||||
<div class="tech-pattern-main"></div>
|
||||
|
||||
<div class="col-lg-12" id="boxMain">
|
||||
<h4 class="font-weight-bold text-white">@Model.Title.ToUpper()</h4>
|
||||
<div class="floating-elements-main">
|
||||
<div class="floating-element-main"></div>
|
||||
<div class="floating-element-main"></div>
|
||||
<div class="floating-element-main"></div>
|
||||
</div>
|
||||
|
||||
|
||||
@* <p class="fst-italic text-muted">@Html.Raw(Model.Content) <a class="text-primary" href="@Model.Sitecopyright" target="_blank">SeoSoft</a></p> *@
|
||||
<p class="text-white">@Html.Raw(Model.Content)</p>
|
||||
<a href="#" class="btn btn-sm mt-1" id="HomeButon"> Contact</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="container-fluid py-1">
|
||||
<div class="main-content-wrapper">
|
||||
<h4 class="main-title">@Model.Title.ToUpper()</h4>
|
||||
<p class="main-content">@Html.Raw(Model.Content)</p>
|
||||
<a href="#" class="btn-main">Contact</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@section Scripts {
|
||||
|
||||
|
||||
@{
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
|
||||
|
||||
<div class="col-lg-2 col-md-6">
|
||||
<div>
|
||||
<h5 class="text-white mb-3">Address</h5>
|
||||
@foreach (var item in Model.Take(1))
|
||||
{
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</p>
|
||||
}
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-6">
|
||||
<div>
|
||||
<h5 class="text-white mb-3">Contact</h5>
|
||||
@foreach (var item in Model.Take(1))
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,31 +1,446 @@
|
|||
@model Banner
|
||||
|
||||
<div class="d-flex flex-column" id="BannerBackground">
|
||||
<style>
|
||||
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
<!-- FOR DEMO PURPOSE -->
|
||||
<section class="hero text-white">
|
||||
<div class="container py-1">
|
||||
@* <div class="col-12" id="boxBanner">
|
||||
<h1 class="display-6 text-white font-weight-bold">@Model.Description.ToUpper()</h1>
|
||||
</div> *@
|
||||
<div id="rowSectionBanner">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
<div class="col-lg-6" id="boxBanner">
|
||||
<h4 class="display-6 font-weight-bold" id="BtnColor">@Model.Title.ToUpper()</h4>
|
||||
<h6 class="text-white font-weight-bold">@Model.Description.ToUpper()</h6>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #000000;
|
||||
color: white;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.08) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 40%), linear-gradient(135deg, #010203 0%, #050812 30%, #010203 70%, #000101 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tech-pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
background-size: 100px 100px, 130px 130px, 50px 50px, 50px 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 24px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@media (min-width: 1200px) {
|
||||
.hero-content
|
||||
|
||||
{
|
||||
gap: 45px;
|
||||
}
|
||||
|
||||
.description-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto 32px auto;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 4vw, 4.5rem);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@media (min-width: 1025px) and (max-width: 1199px) {
|
||||
.hero-content
|
||||
|
||||
{
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.description-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 18px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 32px auto;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.2rem, 4vw, 4rem);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(1.5rem, 4vw, 4rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -0.02em;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
display: block;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #147bb8 50%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.description-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.description-card {
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.description-card:hover {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.description-card:nth-child(2n) {
|
||||
background: rgba(20, 184, 166, 0.08);
|
||||
border-color: rgba(20, 184, 166, 0.2);
|
||||
}
|
||||
|
||||
.description-card:nth-child(2n):hover {
|
||||
background: rgba(20, 184, 166, 0.12);
|
||||
border-color: rgba(20, 184, 166, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
color: white !important;
|
||||
padding: 16px 40px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.animation-container {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 30px;
|
||||
transition: all 0.3s ease;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.animation-container:hover {
|
||||
background: transparent;
|
||||
border: none;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
dotlottie-player {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@media (max-width: 1024px) {
|
||||
.hero-content
|
||||
|
||||
{
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description-cards {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 14px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.animation-container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.left-column,
|
||||
.right-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.page-container
|
||||
|
||||
{
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(1.4rem, 5vw, 2.2rem);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.description-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 12px 24px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.animation-container {
|
||||
padding: 15px;
|
||||
min-height: 220px;
|
||||
max-width: 350px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dotlottie-player {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: 180px !important;
|
||||
max-width: 320px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@media (max-width: 480px) {
|
||||
.page-container
|
||||
|
||||
{
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(1.2rem, 6vw, 2rem);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.description-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.description-card {
|
||||
padding: 10px 14px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.animation-container {
|
||||
padding: 10px;
|
||||
min-height: 180px;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dotlottie-player {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: 160px !important;
|
||||
max-width: 260px !important;
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="tech-pattern"></div>
|
||||
|
||||
<div class="floating-elements">
|
||||
<div class="floating-element"></div>
|
||||
<div class="floating-element"></div>
|
||||
<div class="floating-element"></div>
|
||||
</div>
|
||||
|
||||
<div class="hero-section">
|
||||
<div class="hero-content">
|
||||
<div class="left-column">
|
||||
<h1 class="hero-title">
|
||||
@Model.Title.ToUpper()
|
||||
<span class="title-accent">@Model.Description.ToUpper()</span>
|
||||
</h1>
|
||||
|
||||
<div class="description-cards">
|
||||
|
||||
<div class="description-card">
|
||||
@Html.Raw(Model.Content)
|
||||
</div>
|
||||
|
||||
@* <p class="fst-italic text-muted">@Html.Raw(Model.Content) <a class="text-primary" href="@Model.Sitecopyright" target="_blank">SeoSoft</a></p> *@
|
||||
<p class="text-white">@Html.Raw(Model.Content)</p>
|
||||
<a href="@Model.LinkUrl" class="btn btn-sm mt-1" id="BannerButon"> Contact <i class="bi bi-ui-checks"></i></a>
|
||||
</div>
|
||||
<div class="col-lg-6" id="boxBanner">
|
||||
|
||||
<a href="tel:+4561777336" class="btn-primary">
|
||||
Request Demo
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="right-column">
|
||||
<div class="animation-container">
|
||||
<script src="https://unpkg.com/@@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
|
||||
<dotlottie-player src="@Model.ImageUrl" class="img-fluid" speed="1" style="width: auto; height: auto;" direction="1" playMode="normal" loop autoplay></dotlottie-player>
|
||||
<dotlottie-player src="@Model.ImageUrl"
|
||||
speed="1"
|
||||
direction="1"
|
||||
playMode="normal"
|
||||
loop
|
||||
autoplay>
|
||||
</dotlottie-player>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -1,97 +1,524 @@
|
|||
@model Footer
|
||||
|
||||
<style>
|
||||
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
#Background {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, #000000 0%, #0a0e1a 30%, #000000 70%, #000101 100%);
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#Background::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.06) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.04) 0%, transparent 40%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Hero Section Styles */
|
||||
.glass-hero-section {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 80px 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.glass-hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.glass-hero-text h4 {
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #147bb8 50%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.glass-hero-text p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.glass-hero-text .fst-italic {
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-style: italic;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.glass-hero-animation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
dotlottie-player {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Footer Styles */
|
||||
.glass-footer-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba(59, 130, 246, 0.15);
|
||||
padding: 60px 0 0 0;
|
||||
}
|
||||
|
||||
.glass-footer-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.glass-footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Glassmorphic cards restored */
|
||||
.glass-footer-section {
|
||||
background: rgba(59, 130, 246, 0.06);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-footer-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #3b82f6, #14b8a6, #f97316);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-footer-section:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.glass-footer-section:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glass-footer-section:nth-child(even) {
|
||||
background: rgba(20, 184, 166, 0.06);
|
||||
border-color: rgba(20, 184, 166, 0.15);
|
||||
}
|
||||
|
||||
.glass-footer-section:nth-child(even):hover {
|
||||
background: rgba(20, 184, 166, 0.1);
|
||||
border-color: rgba(20, 184, 166, 0.25);
|
||||
}
|
||||
|
||||
.glass-footer-heading {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.glass-footer-heading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3b82f6, #14b8a6);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.glass-footer-section:nth-child(2) .glass-footer-heading::after {
|
||||
background: linear-gradient(90deg, #14b8a6, #f97316);
|
||||
}
|
||||
|
||||
.glass-footer-section:nth-child(3) .glass-footer-heading::after {
|
||||
background: linear-gradient(90deg, #f97316, #3b82f6);
|
||||
}
|
||||
|
||||
/* Style ViewComponent content */
|
||||
.glass-footer-section h5,
|
||||
.glass-footer-section h6 {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.glass-footer-section p,
|
||||
.glass-footer-section span,
|
||||
.glass-footer-section div {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.glass-footer-section a {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.glass-footer-section a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.glass-footer-section a::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3b82f6, #14b8a6);
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.glass-footer-section a:hover::before {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* Special styling for social media links */
|
||||
.glass-footer-section ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.glass-footer-section li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Newsletter input styling */
|
||||
.glass-footer-section input[type="email"],
|
||||
.glass-footer-section input[type="text"] {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
border-radius: 8px !important;
|
||||
color: white !important;
|
||||
padding: 12px 16px !important;
|
||||
margin-bottom: 10px !important;
|
||||
width: 100% !important;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.glass-footer-section input[type="email"]:focus,
|
||||
.glass-footer-section input[type="text"]:focus {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-color: rgba(59, 130, 246, 0.5) !important;
|
||||
box-shadow: 0 0 15px rgba(59, 130, 246, 0.2) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.glass-footer-section input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
|
||||
.glass-footer-section button,
|
||||
.glass-footer-section .btn {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 8px !important;
|
||||
color: white !important;
|
||||
padding: 12px 20px !important;
|
||||
font-weight: 600 !important;
|
||||
cursor: pointer !important;
|
||||
transition: all 0.3s ease !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
text-decoration: none !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.glass-footer-section button:hover,
|
||||
.glass-footer-section .btn:hover {
|
||||
transform: scale(1.05) !important;
|
||||
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Footer Bottom with Cards */
|
||||
.glass-footer-bottom {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(15px);
|
||||
border-top: 1px solid rgba(59, 130, 246, 0.1);
|
||||
padding: 32px 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.glass-footer-bottom-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.glass-footer-info-card {
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-footer-info-card:hover {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.glass-footer-info-text {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.glass-footer-info-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@@media (max-width: 1024px) {
|
||||
.glass-hero-content
|
||||
|
||||
{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.glass-footer-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.glass-hero-section
|
||||
|
||||
{
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.glass-hero-content {
|
||||
padding: 0 16px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.glass-hero-text h4 {
|
||||
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.glass-hero-animation {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.glass-footer-wrapper {
|
||||
padding: 0 16px 32px 16px;
|
||||
}
|
||||
|
||||
.glass-footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.glass-footer-section {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.glass-footer-bottom-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@media (max-width: 480px) {
|
||||
.glass-hero-section
|
||||
|
||||
{
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.glass-hero-content {
|
||||
padding: 0 12px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.glass-hero-text h4 {
|
||||
font-size: clamp(1.5rem, 6vw, 2rem);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.glass-hero-animation {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.glass-footer-wrapper {
|
||||
padding: 0 12px 24px 12px;
|
||||
}
|
||||
|
||||
.glass-footer-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.glass-footer-heading {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="d-flex flex-column" id="Background">
|
||||
|
||||
<!-- FOR DEMO PURPOSE -->
|
||||
<section class="text-white flex-grow-1">
|
||||
<div class="container py-4">
|
||||
<div id="rowSection">
|
||||
<div class="col-lg-6" id="box">
|
||||
<h4 class=" font-weight-bold" id="BtnColor">@Model.Title.ToUpper()</h4>
|
||||
|
||||
<p>@Html.Raw(Model.Content)</p>
|
||||
<p class="fst-italic text-muted">@Model.Sitecopyright</p>
|
||||
</div>
|
||||
<div class="col-lg-6" id="box">
|
||||
<script src="https://unpkg.com/@@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
|
||||
<dotlottie-player src="https://lottie.host/f2df0cd6-fbde-4071-ab90-d9e74a075d5a/ygq5zJ9mzx.json" class="img-fluid" speed="1" style="width: auto; height: auto;" direction="1" playMode="normal" loop autoplay></dotlottie-player>
|
||||
</div>
|
||||
<!-- HERO SECTION -->
|
||||
<section class="glass-hero-section flex-grow-1">
|
||||
<div class="glass-hero-content">
|
||||
<div class="glass-hero-text">
|
||||
<h4>@Model.Title.ToUpper()</h4>
|
||||
<p>@Html.Raw(Model.Content)</p>
|
||||
<p class="fst-italic">@Model.Sitecopyright</p>
|
||||
</div>
|
||||
<div class="glass-hero-animation">
|
||||
<script src="https://unpkg.com/@@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
|
||||
<dotlottie-player src="https://lottie.host/f2df0cd6-fbde-4071-ab90-d9e74a075d5a/ygq5zJ9mzx.json"
|
||||
speed="1"
|
||||
direction="1"
|
||||
playMode="normal"
|
||||
loop
|
||||
autoplay>
|
||||
</dotlottie-player>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="w-100 py-4 flex-shrink-0">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-around">
|
||||
<vc:address></vc:address>
|
||||
<div class="col-lg-2 col-md-6">
|
||||
<vc:navigation-footer></vc:navigation-footer>
|
||||
<!-- MODERN FOOTER -->
|
||||
<footer class="glass-footer-container w-100 flex-shrink-0">
|
||||
<div class="glass-footer-wrapper">
|
||||
<div class="glass-footer-grid">
|
||||
<!-- Address Section with Card -->
|
||||
<div class="glass-footer-section">
|
||||
<h3 class="glass-footer-heading">Contact Info</h3>
|
||||
<vc:address></vc:address>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="text-white">Newsletter</h5>
|
||||
<!-- Navigation Section with Card -->
|
||||
<div class="glass-footer-section">
|
||||
<h3 class="glass-footer-heading">Quick Links</h3>
|
||||
<vc:navigation-footer></vc:navigation-footer>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Section with Card -->
|
||||
<div class="glass-footer-section">
|
||||
<h3 class="glass-footer-heading">Newsletter</h3>
|
||||
<vc:subscription></vc:subscription>
|
||||
@* <form action="#">
|
||||
<div class="input-group mb-3">
|
||||
<input class="form-control" type="text" placeholder="Recipient's username" aria-label="Email" aria-describedby="button-addon2">
|
||||
<button class="btn" id="BannerButon" type="button">Subscribe</button>
|
||||
</div>
|
||||
</form> *@
|
||||
|
||||
<ul class="list-unstyled text-muted">
|
||||
<!-- Social Media Section -->
|
||||
<h6 style="color: rgba(255, 255, 255, 0.9); font-weight: 600; margin: 24px 0 12px 0; font-size: 1.1rem;">Follow Us</h6>
|
||||
<ul>
|
||||
@foreach (var footerSocialMedia in Model.FooterSocialMedias)
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a id="LinkColor" href="@footerSocialMedia.SocialMedia.Url" target="_blank">@footerSocialMedia.SocialMedia.Name</a>
|
||||
<li>
|
||||
<a href="@footerSocialMedia.SocialMedia.Url" target="_blank">
|
||||
@footerSocialMedia.SocialMedia.Name
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<hr class="border border-primary border-start-0 border-1 opacity-35">
|
||||
<div class="row d-flex justify-content-around">
|
||||
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<span class="text-muted">Designed by @Model.CreatedBy</span>
|
||||
|
||||
<!-- Footer Bottom with Cards -->
|
||||
<div class="glass-footer-bottom">
|
||||
<div class="glass-footer-bottom-content">
|
||||
<div class="glass-footer-info-card">
|
||||
<span class="glass-footer-info-label">Designed By</span>
|
||||
<p class="glass-footer-info-text">@Model.CreatedBy</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<span class="text-muted">Update by @Model.UpdatedBy</span>
|
||||
|
||||
<div class="glass-footer-info-card">
|
||||
<span class="glass-footer-info-label">Updated By</span>
|
||||
<p class="glass-footer-info-text">@Model.UpdatedBy</p>
|
||||
</div>
|
||||
@using System.Globalization
|
||||
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<span class="text-muted">
|
||||
Updated @Model.LastUpdated.ToString("dd-MM-yyyy HH:mm", new CultureInfo("da-DK"))
|
||||
</span>
|
||||
<div class="glass-footer-info-card">
|
||||
<span class="glass-footer-info-label">Last Updated</span>
|
||||
@using System.Globalization
|
||||
<p class="glass-footer-info-text">
|
||||
@Model.LastUpdated.ToString("dd-MM-yyyy HH:mm", new CultureInfo("da-DK"))
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<span class=" text-muted">Owner @Model.Owner</span>
|
||||
|
||||
<div class="glass-footer-info-card">
|
||||
<span class="glass-footer-info-label">Owner</span>
|
||||
<p class="glass-footer-info-text">@Model.Owner</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -10,73 +10,604 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #000000;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Background Effects */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.03) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.02) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.01) 0%, transparent 40%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Ultra Modern Glassmorphism Navbar */
|
||||
.navbar {
|
||||
background: rgba(5, 8, 18, 0.85) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.8);
|
||||
border-bottom: 1px solid rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
padding: 14px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Enhanced Brand Styling */
|
||||
.navbar-brand {
|
||||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
color: #ffffff !important;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.navbar-brand::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3b82f6, #14b8a6, #f97316);
|
||||
transition: width 0.4s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.navbar-brand:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
|
||||
}
|
||||
|
||||
/* Compact Modern Toggle Button */
|
||||
.navbar-toggler {
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 42px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.navbar-toggler::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.navbar-toggler:focus {
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
.navbar-toggler:hover {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2859, 130, 246, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
|
||||
transition: all 0.3s ease;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Enhanced Navigation Links */
|
||||
.navbar-nav .nav-link {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
font-weight: 500;
|
||||
padding: 8px 14px !important;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
margin: 0 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(10px);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.08), rgba(59, 130, 246, 0.1));
|
||||
transition: left 0.5s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #ffffff !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Modern Account Dropdown */
|
||||
.account-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08)) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3) !important;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-weight: 600;
|
||||
border-radius: 8px !important;
|
||||
padding: 8px 14px !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(15px);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
||||
font-size: 0.85rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle:hover {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18)) !important;
|
||||
border-color: rgba(59, 130, 246, 0.5) !important;
|
||||
color: #ffffff !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.account-dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.account-dropdown-toggle::after {
|
||||
border: none !important;
|
||||
content: '\f078' !important;
|
||||
font-family: 'Font Awesome 6 Free' !important;
|
||||
font-weight: 900 !important;
|
||||
font-size: 0.7rem !important;
|
||||
margin-left: 4px !important;
|
||||
transition: transform 0.3s ease !important;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle[aria-expanded="true"]::after {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
|
||||
.account-icon {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Modern Dropdown Menu */
|
||||
.dropdown-menu {
|
||||
background: rgba(5, 8, 18, 0.95) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.8) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2) !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.1) !important;
|
||||
padding: 8px !important;
|
||||
margin-top: 8px !important;
|
||||
min-width: 240px !important;
|
||||
animation: dropdownFadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@@keyframes dropdownFadeIn {
|
||||
from
|
||||
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown-menu::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 30%, rgba(20, 184, 166, 0.03) 70%, rgba(249, 115, 22, 0.02) 100%);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* User Info in Dropdown */
|
||||
.user-info {
|
||||
background: rgba(59, 130, 246, 0.1) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 12px !important;
|
||||
margin-bottom: 8px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.user-details h6 {
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 0 !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.user-details small {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
font-size: 0.75rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.75rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
padding: 8px 12px 4px 12px !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
font-weight: 500 !important;
|
||||
padding: 10px 12px !important;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
margin: 2px 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
font-size: 0.85rem !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.dropdown-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.08), rgba(59, 130, 246, 0.1));
|
||||
transition: left 0.5s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dropdown-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(59, 130, 246, 0.15) !important;
|
||||
color: #ffffff !important;
|
||||
transform: translateX(4px) !important;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
.dropdown-item:focus {
|
||||
background: rgba(59, 130, 246, 0.2) !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.danger-item {
|
||||
color: rgba(239, 68, 68, 0.9) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.danger-item::before {
|
||||
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.08), rgba(239, 68, 68, 0.1));
|
||||
}
|
||||
|
||||
.dropdown-item.danger-item:hover {
|
||||
background: rgba(239, 68, 68, 0.15) !important;
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.admin-item {
|
||||
color: rgba(20, 184, 166, 0.9) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.admin-item::before {
|
||||
background: linear-gradient(90deg, rgba(20, 184, 166, 0.1), rgba(59, 130, 246, 0.08), rgba(20, 184, 166, 0.1));
|
||||
}
|
||||
|
||||
.dropdown-item.admin-item:hover {
|
||||
background: rgba(20, 184, 166, 0.15) !important;
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2) !important;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-color: rgba(59, 130, 246, 0.2) !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
/* Sign In Button for unauthenticated users */
|
||||
.btn-outline-info.signin-btn {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08));
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
padding: 8px 14px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(15px);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
||||
font-size: 0.85rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-outline-info.signin-btn:hover {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18));
|
||||
border-color: rgba(59, 130, 246, 0.6);
|
||||
color: #ffffff !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
/* Icon styling */
|
||||
.dropdown-item i {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Smooth Navbar Scroll Effect */
|
||||
.navbar.scrolled {
|
||||
background: rgba(2, 4, 12, 0.95) !important;
|
||||
backdrop-filter: blur(30px) saturate(2);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(59, 130, 246, 0.08);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@@media (max-width: 768px) {
|
||||
.navbar
|
||||
|
||||
{
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background: rgba(5, 8, 18, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 12px;
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 200px !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle {
|
||||
padding: 6px 12px !important;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.user-details h6 {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
.user-details small {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Ultra smooth collapse animation */
|
||||
.navbar-collapse {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Add scroll effect to navbar
|
||||
window.addEventListener('scroll', function() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light shadow-lg">
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online survey</a>
|
||||
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online Survey</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon text-white"></span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
|
||||
<ul class="navbar-nav flex-grow-1">
|
||||
<vc:navigation></vc:navigation>
|
||||
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
@if (User.Identity.IsAuthenticated)
|
||||
{
|
||||
<li class="nav-item text-white">
|
||||
|
||||
<span class="badge mt-3">Hi @User.Identity.Name</span>
|
||||
|
||||
<li class="nav-item dropdown account-dropdown">
|
||||
<button class="btn dropdown-toggle account-dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="bi bi-person-circle account-icon"></i>
|
||||
<span>Account</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li class="user-info">
|
||||
<div class="user-avatar">
|
||||
@(User.Identity.Name?.Substring(0, 1).ToUpper() ?? "U")
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h6>@User.Identity.Name</h6>
|
||||
<small>Account Holder</small>
|
||||
</div>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Actions</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item admin-item" asp-controller="Admin" asp-action="Index" asp-area="Admin">
|
||||
<i class="bi bi-gear"></i>Admin Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post" class="d-inline w-100">
|
||||
<button type="submit" class="dropdown-item danger-item w-100" style="border: none; background: none;">
|
||||
<i class="bi bi-box-arrow-left"></i>Logout
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item text-white m-2">
|
||||
|
||||
<a asp-controller="Admin" asp-action="Index" asp-area="Admin" class="btn btn-outline-info btn-sm " id="BannerButton">
|
||||
@* <span class="text-white navbar-text">Admin Dashboard</span> *@
|
||||
<span class="bi bi-gear"></span> Admin Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item m-2">
|
||||
<form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post">
|
||||
<button type="submit" class="btn btn-danger btn-sm"> <span class="bi bi-box-arrow-left"></span> Logout</button>
|
||||
</form>
|
||||
</li>
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a asp-controller="Account" asp-action="Login" class="btn btn-outline-info btn-sm" id="BannerButton">
|
||||
<span class="bi bi-box-arrow-right"></span> Sign in
|
||||
<a asp-controller="Account" asp-action="Login" class="btn btn-outline-info signin-btn">
|
||||
<i class="bi bi-box-arrow-right"></i>Sign In
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
|
||||
<vc:banner></vc:banner>
|
||||
<partial name="_Notification" />
|
||||
|
||||
@RenderBody()
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
<vc:footer></vc:footer>
|
||||
<main role="main">
|
||||
<vc:banner></vc:banner>
|
||||
<partial name="_Notification" />
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
<vc:footer></vc:footer>
|
||||
|
||||
<script src="~/lib/jquery/dist/jquery.min.js"></script>
|
||||
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,48 +1 @@
|
|||
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
|
||||
for details on configuring this project to bundle and minify static web assets. */
|
||||
|
||||
a.navbar-brand {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0077cc;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
button.accept-policy {
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
|
|
@ -8,49 +8,489 @@
|
|||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/Web.styles.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #000000;
|
||||
color: white;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Background Effects */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.03) 0%, transparent 35%), radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.02) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.01) 0%, transparent 40%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Ultra Modern Glassmorphism Navbar */
|
||||
.navbar {
|
||||
background: rgba(5, 8, 18, 0.85) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.8);
|
||||
border-bottom: 1px solid rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
padding: 14px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 30%, rgba(20, 184, 166, 0.05) 70%, rgba(249, 115, 22, 0.03) 100%);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Enhanced Brand Styling */
|
||||
.navbar-brand {
|
||||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
color: #ffffff !important;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.navbar-brand::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3b82f6, #14b8a6, #f97316);
|
||||
transition: width 0.4s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.navbar-brand:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
|
||||
}
|
||||
|
||||
/* Compact Modern Toggle Button */
|
||||
.navbar-toggler {
|
||||
border: 1px solid rgba(59, 130, 246, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 10px !important;
|
||||
background: rgba(59, 130, 246, 0.08) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 42px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.navbar-toggler::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.navbar-toggler:focus {
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
|
||||
border-color: rgba(59, 130, 246, 0.5) !important;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover {
|
||||
background: rgba(59, 130, 246, 0.15) !important;
|
||||
border-color: rgba(59, 130, 246, 0.5) !important;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2859, 130, 246, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
|
||||
transition: all 0.3s ease;
|
||||
width: 22px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
/* Modern Account Dropdown */
|
||||
.account-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08)) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3) !important;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-weight: 600;
|
||||
border-radius: 8px !important;
|
||||
padding: 8px 14px !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(15px);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
||||
font-size: 0.85rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle:hover {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18)) !important;
|
||||
border-color: rgba(59, 130, 246, 0.5) !important;
|
||||
color: #ffffff !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.account-dropdown-toggle::after {
|
||||
border: none !important;
|
||||
content: '\f078' !important;
|
||||
font-family: 'Font Awesome 6 Free' !important;
|
||||
font-weight: 900 !important;
|
||||
font-size: 0.7rem !important;
|
||||
margin-left: 4px !important;
|
||||
transition: transform 0.3s ease !important;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle[aria-expanded="true"]::after {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
|
||||
/* Modern Dropdown Menu */
|
||||
.dropdown-menu {
|
||||
background: rgba(5, 8, 18, 0.95) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.8) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2) !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.1) !important;
|
||||
padding: 8px !important;
|
||||
margin-top: 8px !important;
|
||||
min-width: 240px !important;
|
||||
animation: dropdownFadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@@keyframes dropdownFadeIn {
|
||||
from
|
||||
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* User Info in Dropdown */
|
||||
.user-info {
|
||||
background: rgba(59, 130, 246, 0.1) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 12px !important;
|
||||
margin-bottom: 8px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.user-details h6 {
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 0 !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.user-details small {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
font-size: 0.75rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.75rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
padding: 8px 12px 4px 12px !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
font-weight: 500 !important;
|
||||
padding: 10px 12px !important;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
margin: 2px 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
font-size: 0.85rem !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(59, 130, 246, 0.15) !important;
|
||||
color: #ffffff !important;
|
||||
transform: translateX(4px) !important;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.danger-item {
|
||||
color: rgba(239, 68, 68, 0.9) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.danger-item:hover {
|
||||
background: rgba(239, 68, 68, 0.15) !important;
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.admin-item {
|
||||
color: rgba(20, 184, 166, 0.9) !important;
|
||||
}
|
||||
|
||||
.dropdown-item.admin-item:hover {
|
||||
background: rgba(20, 184, 166, 0.15) !important;
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2) !important;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-color: rgba(59, 130, 246, 0.2) !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
/* Sign In Button for unauthenticated users */
|
||||
.btn-outline-info.signin-btn {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.08)) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4) !important;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-weight: 600;
|
||||
border-radius: 8px !important;
|
||||
padding: 8px 14px !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(15px);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
||||
font-size: 0.85rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-outline-info.signin-btn:hover {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(20, 184, 166, 0.18)) !important;
|
||||
border-color: rgba(59, 130, 246, 0.6) !important;
|
||||
color: #ffffff !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
/* Main content styling */
|
||||
main {
|
||||
min-height: calc(100vh - 80px);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Icon styling */
|
||||
.dropdown-item i {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Smooth Navbar Scroll Effect */
|
||||
.navbar.scrolled {
|
||||
background: rgba(2, 4, 12, 0.95) !important;
|
||||
backdrop-filter: blur(30px) saturate(2);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(59, 130, 246, 0.08);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@@media (max-width: 768px) {
|
||||
.navbar
|
||||
|
||||
{
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background: rgba(5, 8, 18, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 12px;
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 200px !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
.account-dropdown-toggle {
|
||||
padding: 6px 12px !important;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.user-details h6 {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
.user-details small {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Ultra smooth collapse animation */
|
||||
.navbar-collapse {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Add scroll effect to navbar
|
||||
window.addEventListener('scroll', function() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light shadow-lg">
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online survey</a>
|
||||
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Online Survey</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon text-white"></span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
|
||||
<ul class="navbar-nav flex-grow-1">
|
||||
|
||||
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
@if (User.Identity.IsAuthenticated)
|
||||
{
|
||||
<li class="nav-item text-white">
|
||||
|
||||
<span class="badge mt-3">Hi @User.Identity.Name</span>
|
||||
|
||||
<li class="nav-item dropdown account-dropdown">
|
||||
<button class="btn dropdown-toggle account-dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
<span>Account</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li class="user-info">
|
||||
<div class="user-avatar">
|
||||
@(User.Identity.Name?.Substring(0, 1).ToUpper() ?? "U")
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h6>@User.Identity.Name</h6>
|
||||
<small>Account Holder</small>
|
||||
</div>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Actions</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item admin-item" asp-controller="Admin" asp-action="Index" asp-area="Admin">
|
||||
<i class="bi bi-gear"></i>Admin Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post" class="d-inline w-100">
|
||||
<button type="submit" class="dropdown-item danger-item w-100" style="border: none; background: none;">
|
||||
<i class="bi bi-box-arrow-left"></i>Logout
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item text-white m-2">
|
||||
|
||||
<a asp-controller="Admin" asp-action="Index" asp-area="Admin" class="btn btn-outline-info btn-sm " id="BannerButton">
|
||||
@* <span class="text-white navbar-text">Admin Dashboard</span> *@
|
||||
<span class="bi bi-gear"></span> Admin Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item m-2">
|
||||
<form asp-area="Admin" asp-controller="Admin" asp-action="Logout" method="post">
|
||||
<button type="submit" class="btn btn-danger btn-sm"> <span class="bi bi-box-arrow-left"></span> Logout</button>
|
||||
</form>
|
||||
</li>
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a asp-controller="Account" asp-action="Login" class="btn btn-outline-info btn-sm" id="BannerButton">
|
||||
<span class="bi bi-box-arrow-right"></span> Sign in
|
||||
<a asp-controller="Account" asp-action="Login" class="btn btn-outline-info signin-btn">
|
||||
<i class="bi bi-box-arrow-right"></i>Sign In
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
|
|
@ -60,16 +500,9 @@
|
|||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<main role="main">
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
<script src="~/lib/jquery/dist/jquery.min.js"></script>
|
||||
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -35,12 +35,141 @@
|
|||
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
/*_______________________________________________________________________________start of the custom CSS_____________________________________________________________*/
|
||||
/* Additional Footer Improvements - Compact Version */
|
||||
|
||||
/* Footer section styling */
|
||||
footer {
|
||||
background: linear-gradient(135deg, #141c27 0%, #1a2332 100%);
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Enhanced Navbar Styles */
|
||||
.bg-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
border-color: rgba(255, 255, 255, 0.4) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.notification-btn {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.notification-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
font-size: 0.6rem !important;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.notification-dropdown {
|
||||
min-width: 320px;
|
||||
border: 0;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.notification-list:empty::after {
|
||||
content: "No new notifications";
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
padding: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.account-btn {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
|
||||
border: none !important;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8px 16px !important;
|
||||
}
|
||||
|
||||
.account-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
|
||||
}
|
||||
|
||||
.account-dropdown {
|
||||
min-width: 220px;
|
||||
border: 0;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
border: 1px solid rgba(220, 53, 69, 0.3) !important;
|
||||
color: #dc3545 !important;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8px 16px !important;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background-color: #dc3545 !important;
|
||||
color: white !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600 !important;
|
||||
color: #495057 !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
transition: all 0.2s ease;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: rgba(0, 123, 255, 0.1);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.dropdown-footer {
|
||||
padding: 10px 16px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
footer::before {
|
||||
|
|
@ -74,112 +203,10 @@ footer {
|
|||
}
|
||||
|
||||
/* Compact footer headings */
|
||||
footer h5 {
|
||||
color: #33b3ae !important;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
footer h5::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
background: #33b3ae;
|
||||
}
|
||||
|
||||
footer h6 {
|
||||
color: #ffffff !important;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Compact social media links styling */
|
||||
footer .d-flex a {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid rgba(51, 179, 174, 0.3);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(51, 179, 174, 0.1);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
footer .d-flex a:hover {
|
||||
background: #33b3ae;
|
||||
color: #ffffff !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(51, 179, 174, 0.3);
|
||||
}
|
||||
|
||||
/* Compact navigation links styling */
|
||||
footer .nav-item a {
|
||||
transition: all 0.3s ease;
|
||||
padding: 2px 0;
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
footer .nav-item a:hover {
|
||||
color: #33b3ae !important;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* Compact contact links styling */
|
||||
footer a[href^="mailto:"],
|
||||
footer a[href^="tel:"] {
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
footer a[href^="mailto:"]:hover,
|
||||
footer a[href^="tel:"]:hover {
|
||||
color: #33b3ae !important;
|
||||
}
|
||||
|
||||
/* Compact bottom section styling */
|
||||
footer hr {
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
footer .row:last-child span {
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Compact text styling */
|
||||
footer .small {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
footer .text-muted.small {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
/* Responsive improvements for compact design */
|
||||
@media (max-width: 992px) {
|
||||
#rowSection {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100% !important;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
footer .container-fluid .row {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .d-flex {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact animation for footer elements */
|
||||
@keyframes fadeInUp {
|
||||
|
|
@ -194,26 +221,7 @@ footer .text-muted.small {
|
|||
}
|
||||
}
|
||||
|
||||
footer .col-lg-3,
|
||||
footer .col-lg-2,
|
||||
footer .col-lg-4 {
|
||||
animation: fadeInUp 0.5s ease forwards;
|
||||
}
|
||||
|
||||
footer .col-lg-3:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
footer .col-lg-2:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
footer .col-lg-4:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
#Background {
|
||||
background-color: #141c27 !important;
|
||||
}
|
||||
.navbar-light .navbar-text{
|
||||
color:white !important;
|
||||
}
|
||||
|
|
@ -576,9 +584,8 @@ body, html {
|
|||
.navbar {
|
||||
margin-bottom: 0px !important;
|
||||
background-color: #16202d !important;
|
||||
box-shadow: 0px 2px 5px 0px rgba(140,140,140,0.79) !important;
|
||||
-webkit-box-shadow: 0px 2px 5px 0px rgba(140,140,140,0.79) !important;
|
||||
-moz-box-shadow: 0px 2px 5px 0px rgba(140,140,140,0.79) !important;
|
||||
|
||||
|
||||
}
|
||||
.navbar-brand {
|
||||
color: #33b3ae !important;
|
||||
|
|
@ -12088,7 +12095,7 @@ body, html {
|
|||
#sidebar.active ul.components li a span {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
|
||||
}
|
||||
|
||||
#sidebar.active .logo {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue