snxraven/ravenscott-blog
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update AI page

Browse Source
This commit is contained in:
Raven Scott 2024-10-02 05:51:00 -04:00
parent b53389532f
commit 74ab9c9da6
2 changed files with 116 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
public/css/chat.css
View File

@ -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 */
}

57
views/chat.ejs
View File

@ -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>