forked from snxraven/ravenscott-blog
update AI page
This commit is contained in:
parent
b53389532f
commit
74ab9c9da6
@ -245,3 +245,85 @@ pre code {
|
||||
.alert.fade-out {
|
||||
animation: fadeSlideOut 0.5s forwards;
|
||||
}
|
||||
|
||||
|
||||
/* Dropdown menu styling */
|
||||
.navbar .dropdown-menu {
|
||||
background-color: #1e1e1e;
|
||||
/* Match the chat box background */
|
||||
border: none;
|
||||
/* Remove border */
|
||||
box-shadow: none;
|
||||
/* Remove shadow */
|
||||
padding: 0;
|
||||
/* Remove padding */
|
||||
}
|
||||
|
||||
.navbar .dropdown-item {
|
||||
background-color: #1e1e1e;
|
||||
/* Match the chat box background */
|
||||
color: white;
|
||||
/* White text */
|
||||
padding: 10px 20px;
|
||||
/* Add padding for spacing */
|
||||
border-bottom: 1px solid #444;
|
||||
/* Add a subtle separator */
|
||||
}
|
||||
|
||||
.navbar .dropdown-item:last-child {
|
||||
border-bottom: none;
|
||||
/* Remove border for the last item */
|
||||
}
|
||||
|
||||
.navbar .dropdown-item:hover {
|
||||
background-color: #282828;
|
||||
/* Slightly lighter background on hover */
|
||||
color: #f1f1f1;
|
||||
/* Lighter text on hover */
|
||||
}
|
||||
|
||||
.navbar .dropdown-item:focus {
|
||||
background-color: #282828;
|
||||
/* Match hover style for focused items */
|
||||
outline: none;
|
||||
/* Remove default outline */
|
||||
}
|
||||
|
||||
.navbar .dropdown-toggle {
|
||||
color: white;
|
||||
/* White text */
|
||||
}
|
||||
|
||||
.navbar .dropdown-toggle::after {
|
||||
border-top: 0.3em solid white;
|
||||
/* White arrow for dropdown */
|
||||
}
|
||||
|
||||
.navbar .dropdown-menu.show {
|
||||
opacity: 1;
|
||||
/* Fully opaque when shown */
|
||||
transform: translateY(0);
|
||||
/* Reset transform */
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
/* Smooth fade and slide transition */
|
||||
}
|
||||
|
||||
.navbar .dropdown-menu {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
/* Start hidden and slightly raised */
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
/* Smooth fade and slide transition */
|
||||
}
|
||||
|
||||
/* Styling the dropdown toggle button */
|
||||
.navbar .dropdown-toggle:hover {
|
||||
color: #f1f1f1;
|
||||
/* Lighter text on hover */
|
||||
}
|
||||
|
||||
/* Separator between regular menu items and dropdown */
|
||||
.navbar .separator {
|
||||
color: #555;
|
||||
/* Subtle separator color */
|
||||
}
|
||||
|
@ -24,14 +24,14 @@
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<script>
|
||||
const menuItems = [
|
||||
{ title: 'GPU Stats', customFunction: 'openGpuStats()' },
|
||||
{ title: 'Live Log', customFunction: 'openLiveLog()' },
|
||||
{ title: 'Top', customFunction: 'openTop()' },
|
||||
{ title: 'Home', url: '/', openNewPage: false }
|
||||
];
|
||||
</script>
|
||||
<script>
|
||||
const menuItems = [
|
||||
{ title: 'GPU Stats', customFunction: 'openGpuStats()' },
|
||||
{ title: 'Live Log', customFunction: 'openLiveLog()' },
|
||||
{ title: 'Top', customFunction: 'openTop()' },
|
||||
{ title: 'Home', url: '/', openNewPage: false }
|
||||
];
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark text-white">
|
||||
@ -51,35 +51,38 @@
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<% menuItems.forEach(item=> { %>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="<%= item.url %>" <%=item.openNewPage ? 'target="_blank"' : '' %>>
|
||||
<a class="nav-link" href="<%= item.url %>" <%=item.openNewPage ? 'target="_blank"' : ''
|
||||
%>>
|
||||
<%= item.title %>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
|
||||
<!-- Add a vertical divider -->
|
||||
<li class="nav-item">
|
||||
<span class="nav-link separator">|</span>
|
||||
</li>
|
||||
<!-- Add a vertical divider -->
|
||||
<li class="nav-item">
|
||||
<span class="nav-link separator">|</span>
|
||||
</li>
|
||||
|
||||
<!-- Inject custom menu items here -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" onclick="openLiveLog()">Live Log</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" onclick="openTop()">Top</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" onclick="openGpuStats()">GPU Stats</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" onclick="openAbout()">About RayAI</a>
|
||||
</li>
|
||||
<!-- Inject custom menu items here as a dropdown -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Tools
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||
<li><a class="dropdown-item" href="#" onclick="openLiveLog()">Live Log</a></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="openTop()">Top</a></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="openGpuStats()">GPU Stats</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#" onclick="openAbout()">About RayAI</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<div id="success-alert" class="alert alert-success mt-3" style="display: none;"></div>
|
||||
<div id="error-alert" class="alert alert-danger mt-3" style="display: none;"></div>
|
||||
|
Loading…
Reference in New Issue
Block a user