Skip to content

Instantly share code, notes, and snippets.

@adamcjoiner

adamcjoiner/brainhub-developer-toolbox.markdown

Last active September 19, 2023 15:40
Show Gist options
  • Save adamcjoiner/b7f90375bfed4c3918f39d9c45932fa1 to your computer and use it in GitHub Desktop.
Save adamcjoiner/b7f90375bfed4c3918f39d9c45932fa1 to your computer and use it in GitHub Desktop.
Download ZIP
BrainHub / Developer Toolbox
Raw
index.html
<div id="app" class="app">
<div id ="view-level1" class="wrapper">
<nav id="view-level1-nav" aria-controls="view-level2" class="menu sideMenu sideMenu--iconBar">
<a id="iconBar--cg" href="#" title="ChatGPT - Standard Chat GPT client" class="menu-item bg-color-yellow" data-=""><sup>1</sup> Cg</a>
<a id="iconBar--da" href="#" title="Data Points - Documents that have been added and indexed; can be used to frame the start for new GPT conversations" class="menu-item bg-color-blue" data-=""><sup>2</sup> Da</a>
<a id="iconBar--ai" href="#" title="AI - Converse with the database: This is a custom AI that I've built with the GPT API; lists previous convos in left menu (.sideMenu--inbox) and 'datapoints' from 'Da' in righthand menu (.sideMenu) that can be toggled on to incorporate them as topics in the current conversation" class="menu-item bg-color-red" data=""><sup>3</sup> Ai</a>
<a id="iconBar--kn" href="#" title="AI Knowledge - Language models that have been built from documents or conversations" class="menu-item active bg-color-violet" data-=""><sup>4</sup> Kn</a>
<a id="iconBar--tk" href="#" title="" class="menu-item bg-color-orange" data-=""><sup>5</sup> Tk</a>
<a id="iconBar--bb" href="#" title="Bootstrap Bin" class="menu-item bg-color-green" data-=""><sup>6</sup> Bb</a>
<a id="iconBar--ht" href="#" title="" class="menu-item bg-color-teal" data-=""><sup>7</sup> Ht</a>
<a id="iconBar--addbtn" href="#" title="" class="menu-item btn-add" data-="">+</a>
</nav>
<div id="view-level2" class="wrapper">
<nav id="view-level2-nav" aria-controls="view-level3" class="menu sideMenu">
<div class="header">Knowledge <i class="item-meta fa fa-circle-info"></i></div>
<a id="view-level2-nav--1" href="#" class="menu-item active"><i class="dot bg-color-teal"></i> Getting started code sni...</a>
<a id="view-level2-nav--2" href="#" class="menu-item"><i class="dot bg-color-yellow"></i> Account management</a>
<a id="view-level2-nav--3" href="#" class="menu-item"><i class="dot bg-color-red"></i> Onboarding</a>
</nav>
<div id="view-level3" class="wrapper stacked">
<div>
<nav id="view-level3-header" aria-controls="view-level3-nav" class="menu topMenu">
<input id="search" name="search" class="searchBox" placeholder="Find by collection, tag, code...">
<div class=" d-flex align-items-center px-3">
<a href="#" class="btn-notifications"><i class="fa fa-bell"></i></a>
<a href="#" class="btn-userMenu"></a>
<nav class="userMenu">
<a href="#">Signup</a>
<a href="#">Login</a>
</nav>
</div>
</nav>
</div>
<div id="view-level3" class="wrapper">
<nav id="view-level3-nav" aria-controls="view5" class="menu sideMenu sideMenu--inbox">
<div class="header">Getting started code snipp...<span class="item-count">(5)</span></div>
<a id="view-level3-nav--1" href="#" class="menu-item">
<div class="item-title">
<i class="fa fa-rss fa-flip-horizontal"></i> Start new API project
</div>
<div class="item-description">
def sum_eq_n?(arr, n)<br>
return true if arr.emp...
</div>
<div class="item-meta">
<span class="meta-icon">LA</span>
<span class="meta-date">5m</span>
</div>
</a>
<a id="view-level3-nav--2" href="#" class="menu-item">
<div class="item-title">
<i class="fa fa-rss fa-flip-horizontal"></i> Start new API project
</div>
<div class="item-description">
def sum_eq_n?(arr, n)<br>
return true if arr.emp...
</div>
<div class="item-meta">
<span class="meta-icon">LA</span>
<span class="meta-date">5m</span>
</div>
</a>
<a id="view-level3-nav--3" href="#" class="menu-item active">
<div class="item-title">
<i class="fa fa-rss fa-flip-horizontal"></i>
Simple calculator logic
</div>
<div class="item-description">
export default function<br>
calculate (obj, buttonNam...
</div>
<div class="item-meta">
<span class="meta-icon">LA</span>
<span class="meta-date">5m</span>
</div>
</a>
<a id="view-level3-nav--4" href="#" class="menu-item">
<div class="item-title">
<i class="fa fa-rss fa-flip-horizontal"></i> Start new API project
</div>
<div class="item-description">
def sum_eq_n?(arr, n)<br>
return true if arr.emp...
</div>
<div class="item-meta">
<span class="meta-icon">LA</span>
<span class="meta-date">5m</span>
</div>
</a>
<a id="view-level3-nav--5" href="#" class="menu-item">
<div class="item-title">
<i class="fa fa-rss fa-flip-horizontal"></i> Start new API project
</div>
<div class="item-description">
def sum_eq_n?(arr, n)<br>
return true if arr.emp...
</div>
<div class="item-meta">
<span class="meta-icon">LA</span>
<span class="meta-date">5m</span>
</div>
</a>
</nav>
<div id="view-level4" class="viewPane">
<img src="https://assets.codepen.io/324771/osx_finder.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Raw
script.js
let $menuItem = $('.menu-item');
$menuItem.click( function(e) {
let $parentMenu = $(this).parent('.menu');
$parentMenu.find('.menu-item').removeClass("active");
$(this).addClass('active');
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
Raw
style.css
:root {
--main-bg-color: ;
--color-green: #216a51;
--color-teal: #086770;
--color-blue: #153f66;
--color-purple: #4f278f;
--color-green: #014c3a;
--color-violet: #5d1d4d;
--color-red: #751c1d;
--color-orange: #66350a;
--color-yellow: #886500;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: hidden;
color: white;
}
body {
/* font-family: 'Open Sans', sans-serif; */
font-size: .8em;
}
/* Utilities */
.color-green {
color: var(--color-green) !important;
}
.color-teal {
color: var(--color-teal) !important;
}
.color-blue {
color: var(--color-blue) !important;
}
.color-purple {
color: var(--color-purple) !important;
}
.color-violet {
color: var(--color-violet) !important;
}
.color-red {
color: var(--color-red) !important;
}
.color-orange {
color: var(--color-orange) !important;
}
.color-peach {
color: var(--color-peach) !important;
}
.color-yellow {
color: var(--color-yellow) !important;
}
.bg-color-green {
background-color: var(--color-green) !important;
}
.bg-color-teal {
background-color: var(--color-teal) !important;
}
.bg-color-blue {
background-color: var(--color-blue) !important;
}
.bg-color-purple {
background-color: var(--color-purple) !important;
}
.bg-color-violet {
background-color: var(--color-violet) !important;
}
.bg-color-red {
background-color: var(--color-red) !important;
}
.bg-color-orange {
background-color: var(--color-orange) !important;
}
.bg-color-peach {
background-color: var(--color-peach) !important;
}
.bg-color-yellow {
background-color: var(--color-yellow) !important;
}
/* END Utilities */
.app {
display: flex;
flex-direction: row;
background-color: #1F1F21;
color: #767779;
}
.wrapper {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.wrapper.stacked {
display: flex;
flex-direction: column;
}
.dot {
display: inline-block;
margin-top: 2px;
margin-right: 14px;
width: 7px;
height: 7px;
border-radius: 7px;
background-color: white;
}
.fa {
color: #696A6C;
}
.item-meta {
color: #696A6C;
cursor: pointer;
}
.header {
color: #A0A1A3;
text-transform: uppercase;
font-size: .88rem;
font-weight: 600;
margin-top: 5px;
margin-bottom: 10px;
line-height: normal;
}
.menu {
border-color: #1A1A1C;
border-width: 2px;
border-style: solid;
border-top-width: 0px;
border-left-width: 0px;
}
.menu a {
opacity: .85;
color: #888;
text-decoration: none;
}
.menu a:hover {
color: #EBEBEB;
}
.sideMenu {
height: 100vh;
display: flex;
width: 280px;
flex-direction: column;
justify-content: start;
align-items: start;
padding: 15px 20px;
}
.sideMenu a {
display: flex;
align-items: center;
justify-content: start;
padding: 4px 12px 7px;
border-radius: 5px;
width: 100%;
font-size: .92rem;
}
.sideMenu a.active {
color: #EBEBEB;
background-color: #131416;
}
.sideMenu a:hover {
color: #EBEBEB;
background-color: #131416;
}
.sideMenu--iconBar {
display: flex;
align-items: center;
padding-top: 25px;
width: 85px;
}
.sideMenu--iconBar a {
display: flex;
width: 44px;
height: 44px;
border-radius: 10px;
background-color: #2e3942;
margin-bottom: 20px;
padding: 5px;
color: white;
font-size: 1.05rem;
font-weight: 600;
text-decoration: none;
justify-content: end;
align-items: end;
}
.sideMenu--iconBar a sup {
top: -27px;
left: 3px;
width: 100%;
font-size: .55rem;
opacity: .35;
}
.sideMenu--iconBar a.active, .sideMenu--iconBar a:not(.btn-add):hover {
outline-style: solid;
outline-color: #cfcfcf;
outline-width: 3px;
}
.sideMenu--iconBar a.btn-add {
background-color: unset;
align-items: center;
justify-content: center;
font-size: 1.7rem;
}
.sideMenu--inbox {
width: 400px;
background-color: #131416;
}
.sideMenu--inbox .header {
text-transform: none;
font-size: 1.2rem;
margin: 10px 0 25px;
}
.sideMenu--inbox .header .item-count {
opacity: .5;
}
.sideMenu--inbox a.menu-item {
position: relative;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding: 14px 20px 14px 45px;
margin-bottom: 3.5px;
}
.sideMenu--inbox a.menu-item.active, .sideMenu--inbox a.menu-item:hover {
background-color: #0D0B0C;
outline-style: solid;
outline-color: white;
outline-width: 2px;
color: #b2b2b2;
}
.item-title {
color: #EDEEF0;
font-size: 1rem;
font-weight: 500;
}
.item-title .fa {
position: absolute;
left: 15px;
top: 19px;
font-size: 1.05rem;
}
.item-description {
margin-top: 5px;
line-height: 1.35rem;
font-size: .9rem;
}
.menu-item .item-meta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
right: 20px;
font-size: .8rem;
}
.menu-item .item-meta .meta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
border-radius: 27px;
margin-bottom: 4px;
background-color: #30303B;
color: #cfcfcf;
font-weight: 500;
}
.topMenu {
display: flex;
justify-content: space-between;
align-items: stretch;
height: 65px;
background-color: #131416;
}
.topMenu .searchBox {
flex: 1;
background-color: unset;
border-width: 0;
color: #A5A6A8;
padding: 0 15px;
}
.topMenu .searchBox:focus {
outline-width: 0;
}
.topMenu .searchBox::placeholder {
color: #414141;
font-weight: 500;
}
.viewPane {
flex: 1;
background-color: #131416;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment