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 { .alert.fade-out {
animation: fadeSlideOut 0.5s forwards; 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"> <link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<script> <script>
const menuItems = [ const menuItems = [
{ title: 'GPU Stats', customFunction: 'openGpuStats()' }, { title: 'GPU Stats', customFunction: 'openGpuStats()' },
{ title: 'Live Log', customFunction: 'openLiveLog()' }, { title: 'Live Log', customFunction: 'openLiveLog()' },
{ title: 'Top', customFunction: 'openTop()' }, { title: 'Top', customFunction: 'openTop()' },
{ title: 'Home', url: '/', openNewPage: false } { title: 'Home', url: '/', openNewPage: false }
]; ];
</script> </script>
</head> </head>
<body class="bg-dark text-white"> <body class="bg-dark text-white">
@ -51,35 +51,38 @@
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<% menuItems.forEach(item=> { %> <% menuItems.forEach(item=> { %>
<li class="nav-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 %> <%= item.title %>
</a> </a>
</li> </li>
<% }) %> <% }) %>
<!-- Add a vertical divider --> <!-- Add a vertical divider -->
<li class="nav-item"> <li class="nav-item">
<span class="nav-link separator">|</span> <span class="nav-link separator">|</span>
</li> </li>
<!-- Inject custom menu items here --> <!-- Inject custom menu items here as a dropdown -->
<li class="nav-item"> <li class="nav-item dropdown">
<a class="nav-link" href="#" onclick="openLiveLog()">Live Log</a> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
</li> data-bs-toggle="dropdown" aria-expanded="false">
<li class="nav-item"> Tools
<a class="nav-link" href="#" onclick="openTop()">Top</a> </a>
</li> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li class="nav-item"> <li><a class="dropdown-item" href="#" onclick="openLiveLog()">Live Log</a></li>
<a class="nav-link" href="#" onclick="openGpuStats()">GPU Stats</a> <li><a class="dropdown-item" href="#" onclick="openTop()">Top</a></li>
</li> <li><a class="dropdown-item" href="#" onclick="openGpuStats()">GPU Stats</a>
<li class="nav-item"> </li>
<a class="nav-link" href="#" onclick="openAbout()">About RayAI</a> <li><a class="dropdown-item" href="#" onclick="openAbout()">About RayAI</a></li>
</li> </ul>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Alert Messages --> <!-- Alert Messages -->
<div id="success-alert" class="alert alert-success mt-3" style="display: none;"></div> <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> <div id="error-alert" class="alert alert-danger mt-3" style="display: none;"></div>