footer4.cfm

</div> <!-- Flash Of Unstyled Content -->
<script src="/Inc/js/autosize.js"></script>
<cfscript>
param request.lf = chr(10);
WriteOutput('<script src="/Inc/footer4.js"></script>' & request.lf)
request.cgiName = getPageContext().getRequest().getServletPath()
request.pgmPath = GetDirectoryFromPath(request.cgiName)
request.pgmDir  = ExpandPath(request.pgmPath)
request.pgmName = ListLast(request.cgiName,'/')
request.pgmName = Left(request.pgmName,Len(request.pgmName)-4)
if (fileExists(request.pgmDir & '\' & request.pgmName & '.js')) {
	WriteOutput('<script src="' & request.pgmName & '.js"></script>' & request.lf)
}
param request.bootstrap.js = '<script	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"
		integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"
		integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"></script>';
WriteOutput(request.bootstrap.js)
</cfscript>
</body>
</html>

footer4.js

function log(x) {
	console.log(x)
}

$('.dropdown-item').appendTo('.dropdown-menu')
if ($('#about.modal').length) {
	$('.dropdown-menu').append(
		 '<div class="dropdown-divider"></div>'
		+'<a data-toggle="modal" href="#about">About</a>'
	)
}
$('.dropdown-menu a').addClass('dropdown-item')

$('table').not('.no-table').addClass('table')
//$('table').not('.no-responsive')
//	.wrap('<div class="table-responsive"></div>')
$('.table').not('.no-hover').addClass('table-hover')
$('.table').not('.no-striped').addClass('table-striped')
$('.table').not('.no-bordered').addClass('table-bordered')
$('.table').not('.no-sm').addClass('table-sm')
$('textarea,input:text,input:password,input[type=email],select')
	.not('.no-control')
	.addClass('form-control')
	
//getbootstrap.com/docs/4.1/components/forms/#form-groups
//$('form').not('no-card')
//	.addClass('card') This was a mistake.
//getbootstrap.com/docs/4.1/components/forms/#form-row
$('form .row').removeClass('row').addClass('form-row')

$('button,.btn-lg,.btn-block,.btn-secondary,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link').addClass('btn')

$('img').not('[hidden]')
	.not('.no-responsive')
	.addClass('img-responsive') // img-rounded

//$('nav').addClass('navbar navbar-expand-md navbar-dark bg-dark')
$('nav .navbar-collapse').addClass('collapse')
$('nav .navbar-collapse ul li').addClass('nav-item')
$('nav .navbar-collapse a').addClass('nav-link')
$('nav .navbar-collapse ul').addClass('navbar-nav') // See: head.css

pgm.navbarAnchor = function() {
	if ($(this).find('.fa-arrow-left').length) {
		window.history.back()
	}
}
$(document).on('click','.navbar a',pgm.navbarAnchor)

if (!$('form').attr('method')) {
	$('form').attr('method','post')
}

pgm.fail = function(xhr, status, response) {
	$('.card-header').addClass('label-primary')
	var msg = $('.card-header span')
	if (msg.length) {
		$(msg).text(status + ': ' + response)
	} else {
		$('.card-header').text(status + ': ' + response)
	}
	$('.card-body:first').html(xhr.responseText)
}

pgm.outlineDanger = function() {
	if (!confirm($(this).attr('title') || 'Are you sure?')) {
		return false
	}
}
$(document).on('click','[name=Delete].btn-outline-danger',pgm.outlineDanger)

pgm.geturl = function(name) {
	var variables = {}
	variables.name = name.toUpperCase()
	variables.result = ''
	var questionMark = window.location.href.indexOf('?')
	var hrefs = window.location.href
		.slice(questionMark+1)
		.split('&')
	hrefs.forEach(each)
	return variables.result
	
	function each(nameValue) {
		var arr = nameValue.split('=')
		if (arr[0].toUpperCase() === variables.name) {
			variables.result = arr[1]
			return false
		}
	}
}

$('.navbar-nav li').addClass('nav-item')
$('.navbar-nav li a').addClass('nav-link')

$('th .fa-sort, th .fa-sort-down, th .fa-sort-up').addClass('fas')
	.parent()
	.addClass('float-right')
$('.nav-link').addClass('nav-item').appendTo('.navbar-nav')

pgm.fouc = function() {
	$('#fouc').removeAttr('hidden')
}
setTimeout(pgm.fouc,500)

gistfile1.txt

<cfscript>
param request.home='/';
param request.bootstrap.css = '<link	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"
		integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk">';
param request.icons  = '<script	src="https://kit.fontawesome.com/2e601c03b4.js" crossorigin="anonymous"></script>';
param request.jQuery = '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>';
param request.container = 'container';
param request.navbar = true;
param request.lf = chr(10);
param request.fouc = 'fouc'; // Flash Of Unstyled Content 
</cfscript>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/Inc/SwatchDog.js"></script>
<cfscript>
WriteOutput(request.bootstrap.css & request.lf)
if (IsDefined('request.title')) {
	WriteOutput('<title>' & request.title & '</title>' & request.lf)
}
WriteOutput('<link	href="/Inc/header4.css" rel="stylesheet">' & request.lf)
request.cgiName = getPageContext().getRequest().getServletPath()
request.pgmPath = getDirectoryFromPath(request.cgiName)
request.pgmDir  = ExpandPath(request.pgmPath)
request.pgmName = ListLast(request.cgiName,'/')
request.pgmName = Left(request.pgmName,Len(request.pgmName)-4)
if (fileExists(request.pgmDir & '\' & request.pgmName & '.css')) {
	WriteOutput('<link	href="' & request.pgmName & '.css" rel="stylesheet">' & request.lf)
}
WriteOutput(request.icons  & request.lf)
WriteOutput(request.jQuery & request.lf)
WriteOutput('</head>')
</cfscript>

<body class="<cfoutput>#request.container#</cfoutput>">
<cfoutput>
<cfif request.navbar>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
	<a class="navbar-brand" href="/" title="SwatchDog">
		<span class="fas fa-home"></span>
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" 
		data-target=".navbar-collapse">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse">
	<cfif IsDefined('session.qryUsr.usrName')>
		<div class="ml-auto">
			<div class="dropdown show">
				<a class="nav-item nav-link dropdown-toggle" 
					href="JavaScript:;" 
					role="button" 
					data-toggle="dropdown">
						#session.qryUsr.usrName#
				</a>
				<div class="dropdown-menu">
					<a href="#request.home#?logout"
					<cfif IsDefined('session.qryUsr.usrid')> title="usrid: #session.qryUsr.usrid#"</cfif>
					>Logout
					</a>
					<div class="dropdown-divider"></div>
					<a href="/Profile/profile.cfm">Profile</a>
				</div>
			</div>
		</div>
	</cfif>
	</div>
</nav>
</cfif>
<div id="#request.fouc#">
<script src="/Inc/header4.js"></script>
</cfoutput>

header4.css

p {
	margin-top:1rem;
}

.navbar-dark .navbar-brand {
	color:rgb(255,255,255,.5);
	width:22.5px; 
}
.navbar-brand.active {
	color:white;
}
/*
.dropdown-toggle {
	color:rgb(255,255,255,.5);
}
*/
.dropdown-toggle:hover {
	color:white;
}

img {
	max-width:100%
}
.transparent {
	opacity:0.01
}
.cursor-pointer {
	cursor:pointer
}

body {
	font-family:"Times New Roman", Times, serif;
	font-size:20px;
}
label, .cursorPointer {
	cursor:pointer
}
th.text-right .float-right {
	margin-left:10px
}
th .fa-sort, th .fa-sort-up, th .fa-sort-down {
	cursor:pointer
}
usrid { /* The <usrid> tag is used for debugging */
	display:none
}

.btn-danger, .bg-danger, .dropdown-item:active { /* https://charliepark.org/bootstrap_buttons */
	background-color: hsl(0, 100%, 24%) !important;
	background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e00000", endColorstr="#7a0000");
	background-image: -khtml-gradient(linear, left top, left bottom, from(#e00000), to(#7a0000));
	background-image: -moz-linear-gradient(top, #e00000, #7a0000);
	background-image: -ms-linear-gradient(top, #e00000, #7a0000);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e00000), color-stop(100%, #7a0000));
	background-image: -webkit-linear-gradient(top, #e00000, #7a0000);
	background-image: -o-linear-gradient(top, #e00000, #7a0000);
	background-image: linear-gradient(#e00000, #7a0000);
	border-color: #7a0000 #7a0000 hsl(0, 100%, 19%);
	color: #fff !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
	-webkit-font-smoothing: antialiased;
	font-weight:bold;
}

.btn-secondary {
	background-color:#e9ecef;
	color:black;
	border-color:#ced4da;
}
.dropdown-toggle {
	border-left:1px solid #343a40;
	color:#ffffff80;
}
.btn-primary {
  background-color: hsl(195, 60%, 35%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d95b7", endColorstr="#23748e");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#2d95b7), to(#23748e));
  background-image: -moz-linear-gradient(top, #2d95b7, #23748e);
  background-image: -ms-linear-gradient(top, #2d95b7, #23748e);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d95b7), color-stop(100%, #23748e));
  background-image: -webkit-linear-gradient(top, #2d95b7, #23748e);
  background-image: -o-linear-gradient(top, #2d95b7, #23748e);
  background-image: linear-gradient(#2d95b7, #23748e);
  border-color: #23748e #23748e hsl(195, 60%, 32.5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
  -webkit-font-smoothing: antialiased;
}
.btn-secondary {
  background-color: hsl(0, 0%, 16%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5b5b5b", endColorstr="#282828");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5b5b5b), to(#282828));
  background-image: -moz-linear-gradient(top, #5b5b5b, #282828);
  background-image: -ms-linear-gradient(top, #5b5b5b, #282828);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b5b5b), color-stop(100%, #282828));
  background-image: -webkit-linear-gradient(top, #5b5b5b, #282828);
  background-image: -o-linear-gradient(top, #5b5b5b, #282828);
  background-image: linear-gradient(#5b5b5b, #282828);
  border-color: #282828 #282828 hsl(0, 0%, 11%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;
}

header4.js

var pgm = {}
var dom = {}

$('#fouc').attr('hidden',true)
pgm.fouc2 = function() {
	$('#fouc').removeAttr('hidden')
}
setTimeout(pgm.fouc2,5000) // This will trigger if footer4.js doesn't exist.