barant/JetCore
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add global music player, invoicing/payment system, account subpages, mail account admin, and the qualityiron.vegas Jet 2.0 port

Browse Source 
Jet interpreter (Tag.cpp, __call.cpp, __imap*.cpp/h, __smtpsend.cpp/h,
__imapemptyfolder.cpp/h - new): assorted parser/tag fixes found across
this work - a stray literal-tag-in-comment and backslash-quote parser
corruption class, a dangling-pointer fix, a __call.cpp fd leak, IMAP
folder-management tags, multi-account/per-host IMAP support, and a
smtpsend Message-ID fix.

barant.com site (jetc/barant-site/):
- A site-wide persistent music player (header band, playlist/queue,
  stereo FFT EQ, session-persisted state) fed by new library/
  ianslibrary/music song-list subpages.
- /account split into info/phones/invoices subpages; a full invoicing
  and Square payment system (create/edit/copy/pay/email invoice);
  admin invoice management and mail-account management subpages.
- /services split into overview/hosting/siptrunking/documents
  subpages, retiring the old standalone pages.
- SIPPHONE.tag: a Jet 2.0 WebRTC softphone tag.
- main.css/spa.js/email.js: the SPA loading indicator, the music
  player band styling, and assorted fixes accumulated alongside this
  work.

qualityiron-site/: the qualityiron.vegas job/contractor/customer/
document management app, ported from its original Jet 1.4 codebase to
Jet 2.0 as barant.coms APIServers second multi-tenant site.

wcwc/wcwc.jet: the WCWC site Jet source (wcwc.jtc build output not
included).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Brad ArantandClaude Sonnet 5 committed 2026-10-06 17:42:01 +00:00
1 parent 905fbafa5a
commit b8f7793773
406 files changed
+15803 -587
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

jetc/barant-site/assets/images/main.css
+530 -15
View File
@@ -13,16 +13,16 @@
@font-face {
font-family: avenir;
src: url('https://barant.com/fonts/AvenirLTStd-Light.ttf');
src: url('https://barant.com/assets/AvenirLTStd-Light.ttf');
}
@font-face {
font-family: source;
src: url('https://barant.com/fonts/jackinput.TTF');
src: url('https://barant.com/assets/jackinput.TTF');
}
@font-face {
font-family: exo2;
src: url('https://barant.com/fonts/Exo2-RegularCondensed.otf');
src: url('https://barant.com/assets/Exo2-RegularCondensed.otf');
}
:root {
@@ -283,7 +283,7 @@ textarea.fieldinputerror {
background: linear-gradient(180deg, #131318, #0d0d10);
border-radius: 5px 5px 0px 0px;
border-bottom: 1px solid var(--bond-line);
max-height: 80px;
max-height: 125px;
}
.entryform {
background: #232330;
@@ -365,24 +365,43 @@ textarea.fieldinputerror {
transition: color 0.2s ease, border-color 0.2s ease;
}
/* The currently-active entry in a page's own sidebar submenu (e.g.
opensource.menu's list of subpages) - a background highlight rather
than baritemselected's "raised tab" treatment, since these are plain
inline links stacked in a list, not tabs sitting on a bar edge.
Applied server-side (see opensource.menu) by comparing each
linkbutton's own subpage against $[SUBPAGE] - spa.js already
re-renders and swaps this menu's markup on every client-side
navigation (see its #_spa_panelmenu handling), so this stays correct
without any script of its own. */
/* Every entry in a page's own sidebar submenu (e.g. opensource.menu's
list of subpages) shares this same box model - selected and
unselected alike - so the only thing that changes when an item
becomes active is its background/border, never its box size or the
position of its own text. Giving only the active item padding/margin
(the original approach) made its text visibly shift the moment it
was selected, since the unselected items sat flush with none. */
#panelmenu a {
display: block;
padding: 2px 6px;
margin: 2px 0;
}
/* The currently-active entry - a background highlight rather than
baritemselected's "raised tab" treatment, since these are plain
links stacked in a list, not tabs sitting on a bar edge. Applied
server-side (see opensource.menu) by comparing each linkbutton's own
subpage against $[SUBPAGE] - spa.js also applies it instantly client-
side on click (see its #panelmenu click listener) and then
re-confirms it from the server's own #_spa_panelmenu markup once the
fetch resolves, so this stays correct either way. */
.submenuitem-active {
background: var(--bond-panel-2);
color: var(--bond-gold-bright) !important;
padding: 2px 6px;
margin: -2px -6px;
border-radius: 3px;
box-shadow: inset 0 0 0 1px var(--bond-gold);
}
/* Every menu entry's own markup is <linkbutton...></linkbutton><br> - that
<br> was needed to force a line break after an inline link, but every
entry is display:block now (its own implicit line break), so the
trailing <br> doubles up into a blank line for every item, not just
the active one. */
#panelmenu a + br {
display: none;
}
.panel {
background: var(--bond-panel);
margin: 10px;
@@ -861,3 +880,499 @@ textarea.fieldinputerror {
.filemgr-progress-fill { height: 100%; width: 0%; background: var(--bond-gold-bright); transition: width 0.15s ease; }
.filemgr-item.filemgr-done .filemgr-progress-fill { background: #6c6; }
.filemgr-item.filemgr-failed .filemgr-progress-fill { background: #c66; }
/* Fades in during an SPA navigation fetch - lives outside #content (a
content.innerHTML swap would just wipe it out otherwise), positioned
relative to the viewport rather than the resizable content column so
dragging #panelmenu-resizer narrower/wider never throws its centering
off. The transition duration alone (no separate timer) is what keeps
a fast load from ever showing it at a noticeable opacity before the
class comes back off. */
.spa-loading-indicator {
position: fixed;
top: 90px;
left: 50%;
transform: translateX(-50%);
color: var(--bond-text-dim);
font-size: 10pt;
letter-spacing: 1px;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
z-index: 500;
}
.spa-loading-indicator.spa-loading-visible {
opacity: 1;
}
/* Fades in during an SPA navigation fetch - lives outside #content (a
content.innerHTML swap would just wipe it out otherwise), positioned
relative to the viewport rather than the resizable content column so
dragging #panelmenu-resizer narrower/wider never throws its centering
off. The transition duration alone (no separate timer) is what keeps
a fast load from ever showing it at a noticeable opacity before the
class comes back off. */
.spa-loading-indicator {
position: fixed;
top: 90px;
left: 50%;
transform: translateX(-50%);
color: var(--bond-text-dim);
font-size: 10pt;
letter-spacing: 1px;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
z-index: 500;
}
.spa-loading-indicator.spa-loading-visible {
opacity: 1;
}
/* Keeps the music/library/ianslibrary subpages pinned to the browser
window's height (footer always visible, no whole-page scroll) while
the song list itself scrolls internally - the exact same pattern
already proven for the email app's own message list
(.pageclass:has(#email-app)), just scoped to this marker instead and
adapted for <sectionframe>'s own heading-then-contents structure
(the heading needs to stay a fixed size above the scrolling list,
not get swept into the same scroll region). height:100% has to be
set explicitly at every level down to .music-song-list itself -
percentage heights only resolve against an ancestor with its own
definite height, and a plain block element's default is auto, which
does not count, so skipping any one level here would silently break
the whole chain. #main-subpage (main.page's generic per-subpage
wrapper, between #content and .sectionframe) is exactly that kind of
skip - missing it let .sectionframe's height:100% resolve to auto,
so .music-song-list sized itself to its full content height instead
of a scrollable box, and the overflow got clipped by .pageclass's
own overflow:hidden with no scrollbar to show for it. */
.pageclass:has(.music-song-list) {
height: calc(100vh - 150px);
overflow: hidden;
}
#content:has(.music-song-list) {
height: 100%;
overflow: hidden;
}
#main-subpage:has(.music-song-list) {
height: 100%;
overflow: hidden;
}
.sectionframe:has(.music-song-list) {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
.sectionframe:has(.music-song-list) .sectionframecontents {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.music-song-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Fades in during an SPA navigation fetch - lives outside #content (a
content.innerHTML swap would just wipe it out otherwise), positioned
relative to the viewport rather than the resizable content column so
dragging #panelmenu-resizer narrower/wider never throws its centering
off. The transition duration alone (no separate timer) is what keeps
a fast load from ever showing it at a noticeable opacity before the
class comes back off. */
.spa-loading-indicator {
position: fixed;
top: 90px;
left: 50%;
transform: translateX(-50%);
color: var(--bond-text-dim);
font-size: 10pt;
letter-spacing: 1px;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
z-index: 500;
}
.spa-loading-indicator.spa-loading-visible {
opacity: 1;
}
/* Global persistent music player band - slides open only while playing */
.globalplayer-band {
max-height: 0;
overflow: hidden;
display: flex;
align-items: center;
gap: 10px;
background: var(--bond-panel);
border-bottom: 1pt solid var(--bond-line);
padding: 0 16px;
box-sizing: border-box;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.globalplayer-band.globalplayer-open {
max-height: 54px;
padding: 10px 16px;
}
.globalplayer-title {
position: relative;
flex: 1;
/* A flex item's default min-width is its content's own min-content
size, not 0 - without this, a long song name would force the whole
LCD panel wider (squeezing the volume slider/buttons) rather than
actually truncating against the space it is given. */
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
background: #000;
border: 1px solid #333;
border-radius: 4px;
padding: 4px 10px;
box-sizing: border-box;
box-shadow: inset 0 0 8px rgba(26,143,196,0.12), inset 0 2px 4px rgba(0,0,0,0.8);
}
.globalplayer-duration {
position: absolute;
top: 4px;
right: 8px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 10pt;
color: #1a8fc4;
text-shadow: 0 0 4px rgba(26,143,196,0.7);
opacity: 0.85;
}
.globalplayer-random-indicator {
position: absolute;
top: 20px;
right: 8px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 7pt;
letter-spacing: 1px;
color: #1a8fc4;
text-shadow: 0 0 4px rgba(26,143,196,0.7);
opacity: 0.85;
display: none;
}
.globalplayer-random-indicator.globalplayer-random-indicator-visible {
display: block;
}
.globalplayer-title-text {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 20pt;
line-height: 1.1;
color: #1a8fc4;
text-shadow: 0 0 5px rgba(26,143,196,0.8), 0 0 1px rgba(26,143,196,0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.globalplayer-progress {
position: relative;
height: 8px;
width: 100%;
background: rgba(26,143,196,0.15);
border-radius: 4px;
margin-top: 4px;
box-sizing: border-box;
cursor: pointer;
touch-action: none;
}
.globalplayer-progress-fill {
height: 100%;
width: 0%;
background: #1a8fc4;
border-radius: 4px 0 0 4px;
box-shadow: 0 0 4px rgba(26,143,196,0.8);
transition: width 0.2s linear;
pointer-events: none;
}
.globalplayer-progress-handle {
position: absolute;
top: 50%;
left: 0%;
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff6d0 0%, #d4af37 55%, #6b5313 100%);
border: 1px solid #5a4410;
box-shadow: 0 1px 3px rgba(0,0,0,0.7);
transform: translate(-50%, -50%);
transition: left 0.2s linear;
pointer-events: none;
}
.globalplayer-progress.globalplayer-progress-dragging .globalplayer-progress-fill,
.globalplayer-progress.globalplayer-progress-dragging .globalplayer-progress-handle {
transition: none;
}
/* Square, touch-tone-style buttons for the player band - same dished
gold-on-black look as the sipphone tag's dialpad keys. */
.globalplayer-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: radial-gradient(circle at 50% 50%, #8a6a22 0%, #b8903a 32%, #d4af37 55%, #ecce79 80%, #fff6d0 100%);
border: 1px solid #5a4410;
box-shadow:
0 2px 0 #4a3a0f,
0 3px 5px rgba(0,0,0,0.5),
inset 0 3px 5px rgba(0,0,0,0.45),
inset 0 -1px 1px rgba(255,255,255,0.5);
color: #3a2d05;
cursor: pointer;
transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.globalplayer-btn svg { width: 16px; height: 16px; }
.globalplayer-btn:active {
transform: translateY(2px);
box-shadow:
inset 0 4px 8px rgba(0,0,0,0.6),
inset 0 -1px 1px rgba(255,255,255,0.3);
}
.globalplayer-btn-text {
width: auto;
padding: 0 12px;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
white-space: nowrap;
}
/* Stereo FFT-style bar graph - left channel above the midline, right
channel below it, drawn directly onto a small canvas. */
.globalplayer-eq {
flex-shrink: 0;
width: 60px;
height: 32px;
background: #000;
border: 1px solid #333;
border-radius: 4px;
}
/* Playlist dropdown - its own independent sliding strip directly below
the player band, NOT nested inside it: the band's own overflow:hidden
(needed for its slide animation) would otherwise clip anything
positioned to pop out below it, which is why this was invisible
before despite the open/close class toggling correctly in JS. */
.globalplayer-queue {
max-height: 0;
overflow: hidden;
background: var(--bond-panel-2);
border-bottom: 1pt solid var(--bond-line);
transition: max-height 0.25s ease;
}
.globalplayer-queue.globalplayer-queue-open {
max-height: 240px;
overflow-y: auto;
}
.globalplayer-queue-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 6px 10px;
padding: 8px 14px;
border: 1px solid var(--bond-line);
border-radius: 8px;
background: rgba(255,255,255,0.03);
color: var(--bond-text-dim);
}
.globalplayer-queue-name {
font-size: 18pt;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.globalplayer-queue-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.globalplayer-queue-handle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--bond-text-dim);
cursor: grab;
}
.globalplayer-queue-handle svg {
width: 14px;
height: 14px;
}
.globalplayer-queue-item.globalplayer-queue-dragging {
opacity: 0.4;
}
.globalplayer-queue-item.globalplayer-queue-dragover {
border-top: 2px solid var(--bond-gold-bright);
}
.globalplayer-queue-right {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
}
.globalplayer-queue-duration {
flex-shrink: 0;
font-size: 9pt;
opacity: 0.75;
}
.globalplayer-queue-remove {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
margin: 0;
border-radius: 6px;
border: 1px solid var(--bond-line);
background: linear-gradient(180deg, #1c1c24, #131318);
color: var(--bond-text-dim);
cursor: pointer;
transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.globalplayer-queue-remove svg {
width: 12px;
height: 12px;
display: block;
}
.globalplayer-queue-remove:hover {
border-color: var(--bond-red);
color: var(--bond-red);
box-shadow: 0 0 0.5em rgba(161,58,58,0.35);
background: linear-gradient(180deg, #24242e, #1a1a20);
}
.globalplayer-queue-item.globalplayer-queue-current {
color: var(--bond-gold-bright);
font-weight: 600;
border-color: var(--bond-gold);
background: rgba(212,175,55,0.08);
}
/* Tactile feedback for clicking a song to queue it: an immediate flash
on the row, plus a lasting checkmark so it is clear at a glance which
songs are already in the queue. */
/* Scoped to the name span, not the row itself: the row is a flex
container with justify-content:space-between, and a ::before on it
directly becomes its own flex item - with 3 items instead of 2, the
name ends up looking centered between the checkmark and the duration/
remove group instead of staying left-aligned. Putting it on the name
span keeps it as ordinary inline content inside that one flex item. */
.song-queued .music-song-name::before {
content: "\2713 ";
color: var(--bond-gold-bright);
}
.song-queued-flash {
animation: songQueuedFlash 0.6s ease;
}
@keyframes songQueuedFlash {
0% { background: var(--bond-gold-bright); color: var(--bond-bg); }
100% { background: transparent; }
}
/* Song-picker rows (music/jukebox subpages) - same boxed, rounded-corner
look as the playlist dropdown's own entries, for visual consistency
between "songs you can pick" and "what's in the queue". */
.music-song-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 4px 0;
padding: 5px 10px;
border: 1px solid var(--bond-line);
border-radius: 8px;
background: rgba(255,255,255,0.03);
color: var(--bond-text-dim);
cursor: pointer;
}
.music-song-row:hover {
border-color: var(--bond-gold);
background: rgba(255,255,255,0.06);
}
.music-song-name {
font-size: 12pt;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-song-duration {
flex-shrink: 0;
font-size: 8pt;
opacity: 0.75;
}
/* Volume slider - a small gold knob riding a thin gold-tinted track */
.globalplayer-volume {
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
width: 70px;
height: 4px;
border-radius: 2px;
background: var(--bond-line);
outline: none;
cursor: pointer;
}
.globalplayer-volume::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff6d0 0%, #d4af37 55%, #6b5313 100%);
border: 1px solid #5a4410;
box-shadow: 0 1px 2px rgba(0,0,0,0.6);
cursor: pointer;
}
.globalplayer-volume::-moz-range-track {
height: 4px;
border-radius: 2px;
background: var(--bond-line);
}
.globalplayer-volume::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff6d0 0%, #d4af37 55%, #6b5313 100%);
border: 1px solid #5a4410;
box-shadow: 0 1px 2px rgba(0,0,0,0.6);
cursor: pointer;
}