the-tempus-project/thetempusproject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bootstrap 5 + Darkmode changes

Browse Source
This commit is contained in:
Joey Kimsey
2024-12-11 02:08:53 -05:00
parent a0726e6578
commit aaefd66350
32 changed files with 677 additions and 1251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/config/constants.php
View File

@ -38,6 +38,8 @@ if ( ! defined( 'CONFIG_DIRECTORY' ) ) {
# Tempus Debugger
define( 'CANARY_SECURE_HASH', 'd73ed7591a30f0ca7d686a0e780f0d05' );
# Tempus Project Core
define( 'APP_NAME', 'All The Bookmarks');
define( 'TP_DEFAULT_LOGO', 'images/logo.png');
// Check
define( 'MINIMUM_PHP_VERSION', 8.1);
// Cookies

447
app/css/main-dark.css
View File

@ -1,423 +1,124 @@
/* General body background and text color */
body {
background-color: #121212; /* Dark background */
color: #e0e0e0; /* Light text */
}
/* Navbar */
.navbar {
background-color: #1f1f1f;
border-color: #333;
}
.navbar a {
color: #e0e0e0;
}
.navbar a:hover {
color: #ffffff;
}
/* Panels */
.panel {
background-color: #1f1f1f;
border-color: #333;
color: #e0e0e0;
}
.panel-heading {
background-color: #333;
color: #ffffff;
}
/* Buttons */
.btn {
background-color: #333;
color: #ffffff;
border-color: #444;
}
.btn:hover {
background-color: #444;
border-color: #555;
}
/* Forms */
.form-control {
background-color: #1f1f1f;
color: #e0e0e0;
border: 1px solid #333;
}
.form-control:focus {
border-color: #555;
box-shadow: none;
}
/**
* app/css/main.css
/**
* app/css/main-dark.css
*
* This file is for any css that should be applied site wide.
* This file provides dark mode styles to override existing Bootstrap 5 base styles.
*
* @version 3.0
* @version 3.0-dark
* @author Joey Kimsey <Joey@thetempusproject.com>
* @link https://TheTempusProject.com
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
*/
@media ( min-width: 768px ) {
.side-nav {
/* background-color: #222; */
}
.side-nav li a:hover,
.side-nav li a:focus {
background-color: #fff !important;
}
.context-main {
color: #fff;
}
.context-main-bg {
background-color: #2c2c2c;
}
.context-other {
color: #000;
}
body {
background-image: linear-gradient(180deg, #2c2c2c, #1e1e1e 100px, #1e1e1e);
color: #f5f5f5;
}
/**
* Other
*/
.bars {
/* background-color: #333; */
/* box-shadow: 0 5px 0 #333, 0 10px 0 #333; */
}
.bg-gray {
/* background-image: -moz-linear-gradient( center bottom, #BBBBBB 0%, #F0F0F0 100% ); */
/* box-shadow: 0 1px 0 #B4B3B3; */
}
.UI-buffer {
/* border-bottom: 1px solid #CCCCCC; */
}
.UI-page-buffer {
/* border-bottom: 1px solid #CCCCCC; */
}
.table-user-information>tbody>tr {
/* border-top: 1px solid rgb( 221, 221, 221 ); */
}
.sticky-foot-head {
/* background: #EDEFF1; */
/* border-bottom: 1px solid #CCCCCC; */
/* border-top: 1px solid #DDDDDD; */
}
.sticky-foot {
background-color: #fff;
}
.sticky-copy {
background: #282828; /* E3E3E3; */
border-bottom: 1px solid #b0b0b0; /* CCCCCC; */
border-top: 1px solid #bfbfbf; /* DDDDDD; */
}
/**
* Main Carousel
*/
.main-text {
color: #000;
}
.btn-clear {
color: #000;
border-color: #000;
}
.btn-clear:hover {
color: #fff;
/* background-color: #F000FF; */
}
/**
* Top Navigation
*/
.top-nav>li>a {
/* color: #999; */
}
.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
color: #000;
background-color: #fff;
}
.top-nav>.open>.dropdown-menu {
/* border: 1px solid rgba( 0, 0, 0, .15 ); */
background-color: #000;
/* -webkit-box-shadow: 0 6px 12px rgba( 0, 0, 0, .175 ); */
/* box-shadow: 0 6px 12px rgba( 0, 0, 0, .175 ); */
}
/**
* Messages Dropdown
*/
li.message-header {
/* border-bottom: 1px solid rgba( 0, 0, 0, .15 ); */
}
li.message-preview {
/* border-bottom: 1px solid rgba( 0, 0, 0, .15 ); */
}
/**
* Widget
*/
.widget li.list-group-item {
/* border-top: 1px solid #ddd; */
}
.widget li.list-group-item:hover {
/* background-color: rgba( 86, 61, 124, .1 ); */
}
.widget .mic-info {
/* color: #666666; */
}
/**
* Footer and Copyright
*/
.copy {
background: #282828; /* E3E3E3; */
border-bottom: 1px solid #b0b0b0; /* CCCCCC; */
border-top: 1px solid #bfbfbf; /* DDDDDD; */
}
.footer-head {
background: #282828; /* E3E3E3; */
border-bottom: 1px solid #b0b0b0; /* CCCCCC; */
border-top: 1px solid #bfbfbf; /* DDDDDD; */
}
.footer-head h3 {
border-bottom: 1px solid #a1a7ad; /* BAC1C8 */
color: #4a5c6e; /* 54697E */
}
.footer-head ul {
/* color: #7F8C8D; */
}
.footer-head a {
/* color: #78828D */
}
/**
* Side Navigation
*/
.side-nav>li>ul>li>a {
/* color: #999; */
}
.side-nav>li>ul>li>a:hover {
color: #000;
}
.side-nav .active > a {
color: #000;
background-color: #fff;
}
.side-nav .active > a:hover {
color: #000;
background-color: #fff;
}
/**
* Social
*/
.social span {
/* background: none repeat scroll 0 0 #B5B5B5; */
/* border: 2px solid #B5B5B5; */
}
.social span a {
/* color: #EDEFF1; */
}
.social span:hover {
/* border: 2px solid #2c3e50;
background: #2c3e50; */
}
.social span a i {
/* color: #EDEFF1 !important; */
}
/**
* Newsletter Box
*/
.newsletter-box input#appendedInputButton {
background: #000;
}
.newsletter-box .btn {
color: #000;
}
/**
* Colored Badges
*/
.badge {
color: #000;
/* background-color: #999999; */
}
.badge:hover {
color: #000;
}
.badge-error {
/* background-color: #b94a48; */
}
.badge-error:hover {
/* background-color: #953b39; */
}
.badge-warning {
/* background-color: #f89406; */
}
.badge-warning:hover {
/* background-color: #c67605; */
}
.badge-success {
/* background-color: #468847; */
}
.badge-success:hover {
/* background-color: #356635; */
}
.badge-info {
/* background-color: #3a87ad; */
}
.badge-info:hover {
/* background-color: #2d6987; */
}
.badge-inverse {
/* background-color: #333333; */
}
.badge-inverse:hover {
/* background-color: #1a1a1a; */
}
/**
* Install Terms
*/
* Install Terms
*/
.install-terms {
/* border: 1px solid #ccc;
background: #f2f2f2; */
border: 1px solid #555;
background: #3a3a3a;
}
.install-terms p,
.install-terms li {
/* color: #333; */
color: #dcdcdc;
}
.install-terms h3 {
color: #fff;
color: #ffffff;
}
.install-terms h4 {
color: #fff;
color: #eaeaea;
}
.install-terms strong {
color: #fff;
color: #ffffff;
}
.context-main {
color: #ffffff;
}
.context-other {
color: #ffffff;
}
/**
* Terms Page
*/
* Terms Page
*/
.terms-page {
/* border: 1px solid #ccc;
background: #f2f2f2; */
border: 1px solid #555;
background: #3a3a3a;
}
.terms-page p,
.terms-page li {
/* color: #333; */
color: #dcdcdc;
}
.terms-page h3 {
color: #fff;
color: #ffffff;
}
.terms-page h4 {
color: #fff;
color: #eaeaea;
}
.terms-page strong {
color: #fff;
color: #ffffff;
}
/**
* Terms
*/
* Terms
*/
.terms {
/* border: 1px solid #ccc; */
/* background: #f2f2f2; */
border: 1px solid #555;
background: #3a3a3a;
}
.terms p,
.terms li {
/* color: #333; */
color: #dcdcdc;
}
.terms h3 {
color: #fff;
color: #ffffff;
}
.terms h4 {
color: #fff;
color: #eaeaea;
}
.terms strong {
color: #fff;
color: #ffffff;
}
.material-switch > label::before {
/* background: rgb(0, 0, 0); */
/* box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); */
/**
* Form Control
*/
.form-control-dark:focus {
border-color: #1e90ff;
box-shadow: 0 0 0 .25rem rgba(30, 144, 255, .5);
}
.material-switch > label::after {
/* background: rgb(255, 255, 255); */
/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); */
/**
* Example Divider
*/
.b-example-divider {
background-color: rgba(255, 255, 255, .1);
border: solid rgba(255, 255, 255, .15);
box-shadow: inset 0 .5em 1.5em rgba(255, 255, 255, .1), inset 0 .125em .5em rgba(255, 255, 255, .15);
}
/**
* Text Shadows
*/
.text-shadow-1 {
text-shadow: 0 .125rem .25rem rgba(255, 255, 255, .25);
}
.text-shadow-2 {
text-shadow: 0 .25rem .5rem rgba(255, 255, 255, .25);
}
.text-shadow-3 {
text-shadow: 0 .5rem 1.5rem rgba(255, 255, 255, .25);
}

545
app/css/main.css
View File

@ -8,6 +8,75 @@
* @link https://TheTempusProject.com
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
*/
/* Base styles for the switch container */
.material-switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
/* Hide the default checkbox */
.material-switch input {
opacity: 0;
width: 0;
height: 0;
}
/* Style the label as the switch */
.material-switch .label-default {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--switch-off-bg, #ccc);
border-radius: 25px;
transition: background-color 0.3s ease-in-out;
}
/* Style the toggle circle (slider) */
.material-switch .label-default::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: var(--switch-slider-bg, #fff);
bottom: 2.5px;
left: 5px;
transition: transform 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Change background color when checked */
.material-switch input:checked + .label-default {
background-color: var(--switch-on-bg, #555); /* Bootstrap primary color */
}
/* Move the slider when checked */
.material-switch input:checked + .label-default::before {
transform: translateX(25px); /* Adjust based on switch width */
}
.context-main {
color: #000;
}
.context-other {
color: #fff;
}
html {
font-family: 'Open Sans', sans-serif;
position: relative;
@ -16,6 +85,9 @@ html {
pre {
white-space: pre-wrap;
}
body {
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}
@media ( min-width: 768px ) {
.main {
padding-right: 40px;
@ -25,411 +97,9 @@ pre {
padding-right: 225px;
padding-left: 0;
}
}
/**
* Other
*/
.bars {
display: block;
width: 60px;
height: 3px;
background-color: #333;
box-shadow: 0 5px 0 #333, 0 10px 0 #333;
}
.slide-text-bg {
opacity: 0.6;
}
.avatar-125 {
height: 125px;
width: 125px;
}
.full {
width: 100%;
}
.gap {
height: 30px;
width: 100%;
clear: both;
display: block;
}
.supportLi h4 {
font-size: 20px;
font-weight: lighter;
line-height: normal;
margin-bottom: 0 !important;
padding-bottom: 0;
}
.bg-gray {
background-image: -moz-linear-gradient( center bottom, #BBBBBB 0%, #F0F0F0 100% );
box-shadow: 0 1px 0 #B4B3B3;
}
.payments {
font-size: 1.5em;
}
.UI-buffer {
padding-top: 35px;
height: auto;
border-bottom: 1px solid #CCCCCC;
}
.avatar {
max-width: 33px;
}
.UI-page-buffer {
padding-top: 30px;
position: relative;
height: auto;
border-bottom: 1px solid #CCCCCC;
}
.main {
padding: 20px;
padding-bottom: 75px;
}
.user-row {
margin-bottom: 14px;
}
.user-row:last-child {
margin-bottom: 0;
}
.dropdown-user {
margin: 13px 0;
padding: 5px;
height: 100%;
}
.dropdown-user:hover {
cursor: pointer;
}
.table-user-information>tbody>tr {
border-top: 1px solid rgb( 221, 221, 221 );
}
.table-user-information>tbody>tr:first-child {
border-top: 0;
}
.table-user-information>tbody>tr>td {
border-top: 0;
}
.top-pad {
margin-top: 70px;
}
.foot-pad {
padding-bottom: 0;
/* padding-bottom: 261px; */
}
.dynamic-footer-padding {
padding-bottom: var(--footer-height);
}
.footer-head .navbar-toggler {
display: inline-block;
float: none;
}
.avatar-round-40 {
height: 40px;
width: 40px;
}
.sticky-foot-head {
z-index: 10;
position: fixed;
bottom: 51px;
width: 100%;
background: #EDEFF1;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.sticky-foot {
background-color: #000;
position: fixed;
bottom: 0;
width: 100%;
}
.sticky-copy {
z-index: 10;
padding-top: 10px;
padding-bottom: 10px;
height: 50px;
background: #E3E3E3;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
/**
* Main Carousel
*/
.main-text {
padding-bottom: 0px;
padding-top: 0px;
top: 10px;
bottom: auto;
z-index: 10;
width: auto;
color: #FFF;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-clear {
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover {
color: #000;
background-color: #FFF;
}
#carousel-home {
margin-bottom: 30px;
}
.col-centered {
float: none;
margin: 0 auto;
}
/**
* Messages Dropdown
*/
ul.message-dropdown {
padding: 0;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
li.message-header {
margin: 5px 0;
border-bottom: 1px solid rgba( 0, 0, 0, .15 );
}
li.message-preview {
width: 275px;
border-bottom: 1px solid rgba( 0, 0, 0, .15 );
}
li.message-preview>a {
padding-top: 15px;
padding-bottom: 15px;
}
li.message-footer {
margin: 5px 0;
}
ul.alert-dropdown {
width: 200px;
}
/**
* Widget
*/
.widget .list-group {
margin-bottom: 0;
}
.widget .panel-title {
display: inline
}
.widget .label {
float: right;
}
.widget li.list-group-item {
border-radius: 0;
border: 0;
border-top: 1px solid #ddd;
}
.widget li.list-group-item:hover {
background-color: rgba( 86, 61, 124, .1 );
}
.widget .mic-info {
color: #666666;
font-size: 11px;
}
.widget .action {
margin-top: 5px;
}
.widget .comment-text {
font-size: 12px;
}
.widget .btn-block {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
/**
* Footer and Copyright
*/
.copy {
z-index: 10;
padding-top: 10px;
padding-bottom: 10px;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #E3E3E3;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer-head {
z-index: 10;
position: absolute;
bottom: 51px;
width: 100%;
background: #EDEFF1;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer-head p {
margin: 0;
}
.footer-head img {
max-width: 100%;
}
.footer-head h3 {
border-bottom: 1px solid #BAC1C8;
color: #54697E;
font-size: 18px;
font-weight: 600;
line-height: 27px;
padding: 5px 0 10px;
text-transform: uppercase;
}
.footer-head ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #7F8C8D;
}
.footer-head ul li a {
padding: 0 0 5px 0;
display: inline-block;
}
.footer-head a {
color: #78828D
}
/**
* Social
*/
.social {
margin-top: 75px;
bottom: 0;
}
.content {
position: absolute;
}
.social span {
background: none repeat scroll 0 0 #B5B5B5;
border: 2px solid #B5B5B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
float: center;
height: 36px;
line-height: 36px;
margin: 0 8px 0 0;
padding: 0;
text-align: center;
width: 41px;
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.social span:hover {
transform: scale( 1.15 ) rotate( 360deg) ;
-webkit-transform: scale( 1.1 ) rotate( 360deg) ;
-moz-transform: scale( 1.1 ) rotate( 360deg) ;
-ms-transform: scale( 1.1 ) rotate( 360deg) ;
-o-transform: scale( 1.1 ) rotate( 360deg) ;
}
.social span a {
color: #EDEFF1;
}
.social span:hover {
border: 2px solid #2c3e50;
background: #2c3e50;
}
.social span a i {
font-size: 16px;
margin: 0 0 0 5px;
color: #EDEFF1 !important;
}
/**
* Newsletter Box
*/
.newsletter-box input#appendedInputButton {
background: #FFFFFF;
display: inline-block;
float: center;
height: 30px;
clear: both;
width: 100%;
}
.newsletter-box .btn {
border: medium none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
display: inline-block;
height: 40px;
padding: 0;
width: 100%;
color: #fff;
}
.newsletter-box {
overflow: hidden;
}
/**
* Colored Badges
*/
.badge {
padding: 1px 9px 2px;
font-size: 12.025px;
font-weight: bold;
white-space: nowrap;
color: #ffffff;
background-color: #999999;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.badge:hover {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.badge-error {
background-color: #b94a48;
}
.badge-error:hover {
background-color: #953b39;
}
.badge-warning {
background-color: #f89406;
}
.badge-warning:hover {
background-color: #c67605;
}
.badge-success {
background-color: #468847;
}
.badge-success:hover {
background-color: #356635;
}
.badge-info {
background-color: #3a87ad;
}
.badge-info:hover {
background-color: #2d6987;
}
.badge-inverse {
background-color: #333333;
}
.badge-inverse:hover {
background-color: #1a1a1a;
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
/**
@ -517,71 +187,6 @@ ul.alert-dropdown {
.terms strong {
color: #000;
}
.navbar-header {
margin-right: 75px;
}
.pagination {
padding-left: 75px;
}
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px;
}
body {
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.pricing-header {
max-width: 700px;
}

33
app/js/main.js
View File

@ -84,43 +84,24 @@ $(document).ready(function() {
});
// with the dynamic footer, you need to adjust the content padding to make sure the footer doesn't overlap the content
window.onload = function () {
function updateFooterPadding() {
var footer = document.querySelector('footer');
var container = document.querySelector('.container-fluid.top-pad');
if ( ! container ) {
return;
}
// footer has no height but its children do!
var footerHeight = Array.from(footer.children).reduce((totalHeight, child) => {
return totalHeight + child.offsetHeight;
}, 0);
footerHeight += 20; // Add 20px for padding
// console.error(footerHeight);
container.style.setProperty('--footer-height', footerHeight + 'px');
}
// Update padding on initial load
updateFooterPadding();
// Update padding on window resize
window.addEventListener('resize', updateFooterPadding);
};
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('dark-mode-toggle');
const darkModeStylesheet = document.getElementById('dark-mode-stylesheet');
console.error( 'DOMContentLoaded');
// Check if dark mode is saved in localStorage
if (localStorage.getItem('darkMode') === 'enabled') {
darkModeStylesheet.disabled = false;
toggleButton.checked = true;
console.error( 'darkMode enabled');
} else {
console.error( 'darkMode disabled');
}
toggleButton.addEventListener('click', function () {
console.error( 'addEventListener');
if (darkModeStylesheet.disabled) {
darkModeStylesheet.disabled = false;
localStorage.setItem('darkMode', 'enabled');

1
app/plugins/blog/templates/blog.inc.php
View File

@ -29,6 +29,7 @@ class BlogLoader extends DefaultLoader {
$posts = $blog->posts;
Components::set('SIDEBAR', Views::simpleView('blog.sidebar', $posts->recent(5)));
Components::set('SIDEBAR2', Views::simpleView('blog.sidebar2', $posts->archive()));
Components::set('SIDEBARABOUT', Views::simpleView('blog.about'));
Navigation::setCrumbComponent( 'BLOG_BREADCRUMBS', Input::get( 'url' ) );
Components::set( 'BLOG_TEMPLATE_URL', Template::parse( '{ROOT_URL}app/plugins/comments/' ) );
$this->addCss( '<link rel="stylesheet" href="{BLOG_TEMPLATE_URL}css/comments.css">' );

121
app/plugins/blog/templates/blog.tpl
View File

@ -10,10 +10,10 @@
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
-->
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:url" content="{CURRENT_URL}">
<meta name='twitter:card' content='summary' />
<meta name='twitter:card' content='summary_large_image' />
<title>{TITLE}</title>
<meta itemprop="name" content="{TITLE}">
<meta name="twitter:title" content="{TITLE}">
@ -28,10 +28,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="The Tempus Project">
{ROBOT}
<link rel="alternate" hreflang="en-us" href="alternateURL">
<link rel="icon" href="{ROOT_URL}images/favicon.ico">
<!-- Required CSS -->
<link rel="stylesheet" href="{FONT_AWESOME_URL}fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{BOOTSTRAP_CDN}css/bootstrap.min.css" crossorigin="anonymous">
<!-- RSS -->
<link rel="alternate" href="{ROOT_URL}blog/rss" title="{TITLE} Feed" type="application/rss+xml" />
@ -54,38 +53,106 @@
</div>
</div>
</header>
<div class="container-fluid">
{ISSUES}
<div class="container pt-4">
<div class="row">
{ERROR}
{NOTICE}
{SUCCESS}
{INFO}
</div>
</div>
{/ISSUES}
<div class="pt-4">
<div class="container">
<h1 class="blog-title text-center">{SITENAME} Blog</h1>
<div class="d-flex flex-column min-vh-100">
<div class="flex-container flex-grow-1">
{ISSUES}
<div class="container pt-4">
<div class="row">
<div class="col-sm-8">
{BLOG_BREADCRUMBS}
{CONTENT}
{ERROR}
{NOTICE}
{SUCCESS}
{INFO}
</div>
</div>
{/ISSUES}
<!-- Leading Content -->
<div class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
</div>
<div class="col-sm-4 blog-sidebar">
<div class="sidebar-module">
{SIDEBAR}
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
<div class="sidebar-module">
{SIDEBAR2}
</div>
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
</div>
</div>
<div class="pt-4">
<div class="container">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
{SITENAME} Blog
</h3>
<div class="row g-5">
<!-- Main Content -->
<div class="col-md-8">
{CONTENT}
</div>
<!-- Sidebar Content -->
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
{SIDEBARABOUT}
</div>
<div class="p-4">
{SIDEBAR}
</div>
<div class="p-4">
{SIDEBAR2}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{FOOT}
</div>
{FOOT}
<!-- Bootstrap core JavaScript and jquery -->
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="{JQUERY_CDN}jquery.min.js"></script>
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>

6
app/plugins/blog/views/about.html Normal file
View File

@ -0,0 +1,6 @@
<div class="p-4 mb-3 bg-light rounded">
<h4 class="fst-italic">About</h4>
<p class="mb-0">
The blog is mostly here to serve ass a simple way to link to long-form content on the site. There won't be any breaking news or tell-all stories here. Just good ole fashioned boring crap no one wants to read.
</p>
</div>

17
app/plugins/blog/views/list.html
View File

@ -1,18 +1,15 @@
{PAGINATION}
{LOOP}
<div class="blog-post">
<h2 class="blog-post-title"><a href="{ROOT_URL}blog/post/{ID}">{title}</a></h2>
<hr>
<article class="blog-post">
<h2 class="blog-post-title mb-1">{title}</h2>
<p class="blog-post-meta">{DTC date}{created}{/DTC} by <a href="{ROOT_URL}home/profile/{author}">{authorName}</a></p>
<div class="well">
<p class="blog-post-meta">
Posted on <i>{DTC date}{created}{/DTC}</i> by <a href="{ROOT_URL}home/profile/{author}"><strong>{authorName}</strong></a>
</p>
{contentSummary}
</div>
</div>
</article>
<hr>
{/LOOP}
{ALT}
<div class="blog-post">
<article class="blog-post">
<p class="blog-post-meta">No Posts Found.</p>
</div>
</article>
{/ALT}

23
app/plugins/blog/views/sidebar2.html
View File

@ -1,14 +1,11 @@
<div class="card panel-info">
<div class="card-header">
<h3 class="card-title">Archives</h3>
</div>
<div class="card-body">
<ol class="list-unstyled">
{LOOP}
<li>({count}) <a href="{ROOT_URL}blog/month/{month}/{year}">{monthText} {year}</a></li>
{/LOOP}
{ALT}
{/ALT}
</ol>
</div>
<div class="p-4">
<h4 class="fst-italic">Archives</h4>
<ul class="list-unstyled mb-0">
{LOOP}
<li>({count}) <a href="{ROOT_URL}blog/month/{month}/{year}">{monthText} {year}</a></li>
{/LOOP}
{ALT}
<li>None To Show</li>
{/ALT}
</ul>
</div>

5
app/plugins/notifications/views/nav/recentNotificationsDropdown.html
View File

@ -1,11 +1,12 @@
<div class="dropdown nav-item mx-2">
<!-- Notifications Dropdown -->
<div class="dropdown nav-item mx-2">
<a
href="#"
class="nav-link dropdown-toggle"
id="notiificationsDropdown"
data-bs-toggle="dropdown"
aria-expanded="false">
<i class="fa fa-fw fa-bell"></i><span class="ml-3">{MBADGE}</span>
<i class="fa fa-fw fa-bell"></i><span class="ml-3">{NBADGE}</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notiificationsDropdown">
{LOOP}

26
app/templates/admin/admin.inc.php
View File

@ -11,15 +11,37 @@
*/
namespace TheTempusProject\Templates;
use TheTempusProject\Houdini\Classes\Components;
use TheTempusProject\Houdini\Classes\Views;
use TheTempusProject\Houdini\Classes\Navigation;
use TheTempusProject\Houdini\Classes\Components;
use TheTempusProject\Bedrock\Functions\Input;
use TheTempusProject\TheTempusProject as App;
use TheTempusProject\Houdini\Classes\Template;
class AdminLoader extends DefaultLoader {
public function __construct() {
parent::__construct();
Components::set( 'ADMINNAV', Navigation::getMenuView( 'nav.admin', 'ADMIN_LINKS', App::ADMIN_MENU_NAME ) );
$links = Navigation::getMenuLinks( App::ADMIN_MENU_NAME );
foreach ( $links as $key => $link ) {
if ( is_array( $link->url ) ) {
$links[$key]->linkClasses = 'nav-link d-flex align-items-center justify-content-between';
$links[$key]->linkAttributes = Template::parse( 'aria-controls="{dropdownName}Dropdown" data-bs-toggle="collapse" aria-haspopup="true" aria-expanded="false"' );
$name = trim(strip_tags( $link->text ) );
Components::set( 'dropdownName', $name );
$out = [];
foreach ( $link->url as $subKey => $subLink ) {
$out[] = (object) $subLink;
}
$links[$key]->url = '#' . $name . 'Dropdown';
$links[$key]->text = '<span>' . $link->text . '</span><i class="fa fa-fw fa-caret-down ms-2"></i>';
$links[$key]->duuuuuuuh = Views::simpleView( 'nav.adminSub', $out );
} else {
$links[$key]->linkClasses = 'nav-link';
$links[$key]->linkAttributes = '';
$links[$key]->duuuuuuuh = '';
}
}
Components::set( 'ADMIN_LINKS', Views::simpleView( 'nav.admin', $links ) );
Navigation::setCrumbComponent( 'ADMIN_BREADCRUMBS', Input::get( 'url' ) );
}
}

124
app/templates/admin/admin.tpl
View File

@ -24,91 +24,61 @@
{TEMPLATE_CSS_INCLUDES}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<!--Brand and toggle should get grouped for better mobile display but I had to account for additional menus-->
<div class="container-fluid">
<a href="{ROOT_URL}" class="navbar-brand">{SITENAME}</a>
<!-- Toggler Button -->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
{topNavLeft}
<ul class="navbar-nav ml-auto">
{topNavRight}
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-lg-2 col-md-3 bg-dark text-white">
<div class="d-flex flex-column min-vh-100">
<!-- Main Content Area -->
<div class="d-flex flex-grow-1">
<!-- Side Navigation -->
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="/images/logo.png" class="bi me-2" width="40" height="32" role="img" aria-label="All The Bookmarks Logo">
<span class="fs-4">All The Bookmarks</span>
</a>
<hr>
{ADMIN}
<nav class="navbar navbar-expand-lg navbar-dark flex-column align-items-stretch">
<ul class="navbar-nav flex-column">
{ADMIN_LINKS}
</ul>
</nav>
{ADMIN_LINKS}
{/ADMIN}
<hr>
<div class="d-flex align-items-center">
{topNavRight}
</div>
</div>
<!-- Main Content -->
<div class="col-lg-10 col-md-9 pt-3 mt-5">
{ISSUES}
<div class="row mb-3">
<div class="col-12">
{ERROR}
{NOTICE}
{SUCCESS}
<!-- Center Element -->
<div class="flex-grow-1 d-flex flex-column">
<!-- Top Navigation Bar -->
<div class="p-3 text-bg-dark">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
{topNavLeft}
</div>
</div>
{/ISSUES}
{ADMIN_BREADCRUMBS}
{CONTENT}
<!-- Main Content -->
<div class="flex-grow-1 px-4 py-4">
{ISSUES}
<div class="row mb-3">
<div class="col-12">
{ERROR}
{NOTICE}
{SUCCESS}
</div>
</div>
{/ISSUES}
{ADMIN_BREADCRUMBS}
{CONTENT}
</div>
<!-- Footer -->
<footer class="bg-light border-top">
<div class="container py-3">
<div class="d-flex justify-content-between">
{COPY}
{SOCIAL}
</div>
</div>
</footer>
</div>
</div>
</div>
<div class="container border-top">
<footer class="pt-4">
<div class="d-flex flex-column flex-sm-row justify-content-between">
<p>© 2024 AllTheBookmarks, Powered by <a href="https://thetempusproject.com" class="text-decoration-none">The Tempus Project</a>.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}fb">
<span class="fa-brands fa-fw fa-facebook"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}twitter">
<span class="fa-brands fa-fw fa-twitter"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}in">
<span class="fa-brands fa-fw fa-linkedin"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}youtube">
<span class="fa-brands fa-fw fa-youtube"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}git">
<span class="fa-brands fa-fw fa-github"></span>
</a>
</li>
</ul>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript and jquery -->
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="{JQUERY_CDN}jquery.min.js"></script>
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>

7
app/templates/default/default.inc.php
View File

@ -21,12 +21,16 @@ use TheTempusProject\Bedrock\Functions\Input;
use TheTempusProject\TheTempusProject as App;
class DefaultLoader extends Loader {
private static $loaded = false;
const TEMPLATE_NAME = 'Default Tempus Project Template';
const JQUERY_CDN = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/';
const BOOTSTRAP_CDN = 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.6/dist/';
const FONT_AWESOME_URL = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/';
public function __construct() {
if ( self::$loaded ) {
return;
}
Components::set( 'TEMPLATE_URL', Template::parse( '{ROOT_URL}app/templates/default/' ) );
if ( VENDOR_AUTOLOADED === true ) {
Components::set( 'FONT_AWESOME_URL', '/vendor/fortawesome/font-awesome/css/' );
@ -40,7 +44,7 @@ class DefaultLoader extends Loader {
$this->addCss( '<link rel="stylesheet" href="{ROOT_URL}app/css/main.css">' );
$this->addCss( '<link rel="stylesheet" href="{ROOT_URL}app/css/main-dark.css" id="dark-mode-stylesheet" disabled>' );
$this->addJs( '<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="{ROOT_URL}app/js/main.js"></script>' );
Components::setIfNull( 'LOGO', Config::getValue( 'main/logo' ) );
Components::setIfNull( 'LOGO', Config::getValue( 'main/logo' ) ?? TP_DEFAULT_LOGO );
Components::setIfNull( 'COPY', Views::simpleView( 'footer.copy') );
Components::setIfNull( 'SOCIAL', Views::simpleView( 'footer.social') );
Components::prepend( 'FOOTER_LEFT', Views::simpleView( 'footer.left', Navigation::getMenuLinks( App::CONTACT_FOOTER_MENU_NAME ) ) );
@ -63,5 +67,6 @@ class DefaultLoader extends Loader {
Components::set( 'iconSelect', Views::simpleView( 'forms.iconSelect' ) );
Navigation::setCrumbComponent( 'BREADCRUMB', Input::get( 'url' ) );
$this->buildComponents();
self::$loaded = true;
}
}

26
app/templates/default/default.tpl
View File

@ -51,19 +51,21 @@
</div>
</div>
</header>
<div class="container-fluid">
{ISSUES}
<div class="container pt-4">
<div class="row">
{ERROR}
{NOTICE}
{SUCCESS}
{INFO}
<div class="d-flex flex-column min-vh-100">
<div class="flex-container flex-grow-1">
{ISSUES}
<div class="container pt-4">
<div class="row">
{ERROR}
{NOTICE}
{SUCCESS}
{INFO}
</div>
</div>
{/ISSUES}
<div class="pt-4">
{CONTENT}
</div>
</div>
{/ISSUES}
<div class="pt-4">
{CONTENT}
</div>
{FOOT}
</div>

2
app/views/footer/container.html
View File

@ -1,4 +1,4 @@
<div class="container border-top mt-4">
<div class="container border-top mt-auto">
<footer class="pt-4">
<div class="row">
{FOOTER_LEFT}

3
app/views/footer/left.html
View File

@ -4,5 +4,8 @@
{LOOP}
<li class="nav-item mb-2"><a href="{url}" class="nav-link p-0 text-muted">{text}</a></li>
{/LOOP}
{ALT}
<li class="nav-item mb-2"></li>
{/ALT}
</ul>
</div>

4
app/views/footer/right.html
View File

@ -1,7 +1,7 @@
<div class="col-6 col-md-2 mb-3">
<h5>Dark Mode</h5>
<div class="material-switch px-4">
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" />
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input">
<label for="dark-mode-toggle" class="label-default"></label>
</div>
</div>
</div>

10
app/views/footer/social.html
View File

@ -1,26 +1,26 @@
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}fb">
<a class="context-main" href="{ROOT_URL}fb">
<span class="fa-brands fa-fw fa-facebook"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}twitter">
<a class="context-main" href="{ROOT_URL}twitter">
<span class="fa-brands fa-fw fa-twitter"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}in">
<a class="context-main" href="{ROOT_URL}in">
<span class="fa-brands fa-fw fa-linkedin"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}youtube">
<a class="context-main" href="{ROOT_URL}youtube">
<span class="fa-brands fa-fw fa-youtube"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}git">
<a class="context-main" href="{ROOT_URL}git">
<span class="fa-brands fa-fw fa-github"></span>
</a>
</li>

68
app/views/install/adminUser.html
View File

@ -1,39 +1,35 @@
{installer-nav}
<br>
<br>
<form action="" method="post" class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="newUsername" class="col-lg-6 control-label">Username:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="newUsername" id="newUsername" value="">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 pt-4">
<form action="" method="post" class="form-horizontal">
<fieldset>
<div class="mb-3 col-md-4 offset-md-4">
<label for="newUsername" class="form-label">Username:</label>
<input class="form-control" type="text" name="newUsername" id="newUsername" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userEmail" class="form-label">Email:</label>
<input class="form-control" type="email" name="userEmail" id="userEmail" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userEmail2" class="form-label">Re-enter Email:</label>
<input class="form-control" type="email" name="userEmail2" id="userEmail2" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userPassword" class="form-label">Password:</label>
<input class="form-control" type="password" name="userPassword" id="userPassword">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userPassword2" class="form-label">Re-enter Password:</label>
<input class="form-control" type="password" name="userPassword2" id="userPassword2">
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Complete</button>
</div>
</form>
</div>
</div>
<div class="form-group">
<label for="userEmail" class="col-lg-6 control-label">Email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="userEmail" id="userEmail" value="">
</div>
</div>
<div class="form-group">
<label for="userEmail2" class="col-lg-6 control-label">Re-enter Email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="userEmail2" id="userEmail2" value="">
</div>
</div>
<div class="form-group">
<label for="userPassword" class="col-lg-6 control-label">Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="userPassword" id="userPassword">
</div>
</div>
<div class="form-group">
<label for="userPassword2" class="col-lg-6 control-label">Re-enter Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="userPassword2" id="userPassword2">
</div>
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button><br>
</form>
</div>

22
app/views/install/agreement.html
View File

@ -1,14 +1,16 @@
{installer-nav}
<br>
<br>
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<center>
<div class="install-terms">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="install-terms col-lg-8 mx-auto mt-4">
{TERMS}
</div>
</center>
<div class="text-center my-4">
<form method="post">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">I Agree</button><br>
</form>
</div>
</div>
</div>
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">I agree</button><br>
</form>
</div>

36
app/views/install/check.html
View File

@ -1,15 +1,23 @@
{installer-nav}
<h2>Requirements</h2>
<ul>
<li>PHP version greater than 5.6</li>
<li>Session storage must be enabled</li>
<li>PHP mail must be enabled.</li>
<li>Safe mode must be disabled.</li>
<li>Rewrite rule must be on</li>
<li>file uploads must be on</li>
<li>mysql_pdo must be enabled</li>
</ul>
<form action="" method="post" class="form-horizontal">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Check</button><br>
</form>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<h2 class="mt-4">Requirements</h2>
<ul>
<li>PHP version greater than 5.6</li>
<li>Session storage must be enabled</li>
<li>PHP mail must be enabled.</li>
<li>Safe mode must be disabled.</li>
<li>Rewrite rule must be on</li>
<li>file uploads must be on</li>
<li>mysql_pdo must be enabled</li>
</ul>
<div class="text-center">
<form action="" method="post" class="form-horizontal">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Check</button><br>
</form>
</div>
</div>
</div>
</div>

35
app/views/install/complete.html
View File

@ -1,3 +1,32 @@
<h1>Success</h1>
<h3>The Tempus Project has been successfully installed. You can now log in and manage your site or jump straight in to building your new features!</h3>
<p>here there should be some basic info readout.</p>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<!-- Success Icon -->
<div class="mb-4">
<i class="fa fa-check-circle text-success display-3"></i>
</div>
<!-- Title -->
<h1 class="display-5 fw-bold text-success">Success</h1>
<!-- Subtitle -->
<h3 class="mt-3">
The Tempus Project has been successfully installed.
</h3>
<p class="lead mt-3">
You can now log in and manage your site or jump straight into building your new features!
</p>
<!-- Info Readout Placeholder -->
<p class="mt-4 text-muted">
<em>Some plugins may need additional configuration and there are already some pre-made resources to get you started. (Both in the files and the Admin Panel)</em>
</p>
<!-- Call-to-Action Buttons -->
<div class="d-flex justify-content-center gap-3 mt-4">
<a href="/login" class="btn btn-success btn-lg">
<i class="fa fa-sign-in-alt me-2"></i> Log In
</a>
<a href="/dashboard" class="btn btn-outline-success btn-lg">
<i class="fa fa-cogs me-2"></i> Go to Dashboard
</a>
</div>
</div>
</div>
</div>

90
app/views/install/configure.html
View File

@ -1,50 +1,44 @@
{installer-nav}
<br>
<form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
<fieldset>
<div class="form-group">
<label for="siteName" class="col-lg-6 control-label">Site Name:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="siteName" id="siteName" value="">
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<legend class="my-3 text-center">Configure</legend>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<div class="mb-3 col-md-4 offset-md-4">
<label for="siteName" class="form-label">Site Name:</label>
<input class="form-control" type="text" name="siteName" id="siteName" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="logo" class="form-label">Logo (200 x 200px):</label>
<input class="form-control" type="file" name="logo" id="logo">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbPrefix" class="form-label">Database Table Prefix:</label>
<input class="form-control" type="text" name="dbPrefix" id="dbPrefix" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbHost" class="form-label">Database Host:</label>
<input class="form-control" type="text" name="dbHost" id="dbHost" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbName" class="form-label">Database Name:</label>
<input class="form-control" type="text" name="dbName" id="dbName" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbUsername" class="form-label">Database Username:</label>
<input class="form-control" type="text" name="dbUsername" id="dbUsername" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbPassword" class="form-label">Database Password:</label>
<input class="form-control" type="password" name="dbPassword" id="dbPassword">
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center mb-3">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Save</button><br>
</div>
</form>
</div>
<div class="form-group">
<label for="logo" class="col-lg-6 control-label">Logo (200 x 200px):</label>
<div class="col-lg-3">
<input class="form-control" type="file" name="logo" id="logo">
</div>
</div>
<div class="form-group">
<label for="dbPrefix" class="col-lg-6 control-label">Database Table Prefix:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbPrefix" id="dbPrefix" value="">
</div>
</div>
<div class="form-group">
<label for="dbHost" class="col-lg-6 control-label">Database Host:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbHost" id="dbHost" value="">
</div>
</div>
<div class="form-group">
<label for="dbName" class="col-lg-6 control-label">Database Name:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbName" id="dbName" value="">
</div>
</div>
<div class="form-group">
<label for="dbUsername" class="col-lg-6 control-label">Database Username:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbUsername" id="dbUsername" value="">
</div>
</div>
<div class="form-group">
<label for="dbPassword" class="col-lg-6 control-label">Database Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="dbPassword" id="dbPassword">
</div>
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Configure</button><br>
</form>
</div>
</div>

66
app/views/install/models.html
View File

@ -1,31 +1,37 @@
{installer-nav}
<br>
<p>All models are required for proper installation of The Tempus Project. In this step, we will add the database tables required for these models. In the next step, you'll be able to select which plugins you would like installed.</p>
<br>
<form action="" method="post" class="form-horizontal">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 70%">Model Name</th>
<th style="width: 20%">Version</th>
</tr>
</thead>
<tbody>
{LOOP}
<tr>
<td>{name}</td>
<td>{version}</td>
</tr>
{/LOOP}
{ALT}
<tr>
<td align="center" colspan="3">
No models to install.
</td>
</tr>
{/ALT}
</tbody>
</table>
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button><br>
</form>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<p class="my-4">All models are required for proper installation of The Tempus Project. In this step, we will add the database tables required for these models. In the next step, you'll be able to select which plugins you would like installed.</p>
<form action="" method="post" class="form-horizontal">
<table class="table table-striped">
<thead>
<tr>
<th class="px-5" style="width: 70%">Model Name</th>
<th class="text-center" style="width: 20%">Version</th>
</tr>
</thead>
<tbody>
{LOOP}
<tr>
<td class="px-5">{name}</td>
<td class="text-center">{version}</td>
</tr>
{/LOOP}
{ALT}
<tr>
<td class="text-center" colspan="3">
No models to install.
</td>
</tr>
{/ALT}
</tbody>
</table>
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button>
</div>
</form>
</div>
</div>
</div>

22
app/views/install/nav.html
View File

@ -1,12 +1,12 @@
<ul class="nav nav-tabs nav-justified" role="tablist" style="margin-top: 55px">
<li class="nav-link {menu-Welcome}"><a href="#">Welcome</a></li>
<li class="nav-link {menu-Terms}"><a href="#">Terms</a></li>
<li class="nav-link {menu-Verify}"><a href="#">Verify</a></li>
<li class="nav-link {menu-Configure}"><a href="#">Configure</a></li>
<li class="nav-link {menu-Routing}"><a href="#">Routing</a></li>
<li class="nav-link {menu-Models}"><a href="#">Models</a></li>
<li class="nav-link {menu-Plugins}"><a href="#">Plugins</a></li>
<li class="nav-link {menu-Resources}"><a href="#">Resources</a></li>
<li class="nav-link {menu-User}"><a href="#">User</a></li>
<li class="nav-link {menu-Complete}"><a href="#">Complete</a></li>
<ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-item {menu-Welcome}"><a href="#" class="nav-link">Welcome</a></li>
<li class="nav-item {menu-Terms}"><a href="#" class="nav-link">Terms</a></li>
<li class="nav-item {menu-Verify}"><a href="#" class="nav-link">Verify</a></li>
<li class="nav-item {menu-Configure}"><a href="#" class="nav-link">Configure</a></li>
<li class="nav-item {menu-Routing}"><a href="#" class="nav-link">Routing</a></li>
<li class="nav-item {menu-Models}"><a href="#" class="nav-link">Models</a></li>
<li class="nav-item {menu-Plugins}"><a href="#" class="nav-link">Plugins</a></li>
<li class="nav-item {menu-Resources}"><a href="#" class="nav-link">Resources</a></li>
<li class="nav-item {menu-User}"><a href="#" class="nav-link">User</a></li>
<li class="nav-item {menu-Complete}"><a href="#" class="nav-link">Complete</a></li>
</ul>

80
app/views/install/plugins.html
View File

@ -1,37 +1,45 @@
{installer-nav}
<br>
<p>The Tempus Project was built to utilize all of the plugins provided with the installer. You can choose not to enable any one of them, but it may negatively impact the operation of your site..</p>
<br>
<form action="" method="post" class="form-horizontal">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 70%">Plugin Name</th>
<th style="width: 20%">Version</th>
<th style="width: 10%">
<INPUT type="checkbox" onchange="checkAll(this)" name="check.m" value="P_[]" checked="checked"/>
</th>
</tr>
</thead>
<tbody>
{LOOP}
<tr>
<td>{name}</td>
<td>{version}</td>
<td>
<input type="checkbox" value="{name}" name="P_[]" checked="checked">
</td>
</tr>
{/LOOP}
{ALT}
<tr>
<td align="center" colspan="3">
No models to install.
</td>
</tr>
{/ALT}
</tbody>
</table>
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button><br>
</form>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<p class="my-4">
The Tempus Project was built to utilize all of the plugins provided with the installer. You can choose not to enable any one of them, but it may negatively impact the operation of your site.
</p>
<form action="" method="post" class="form-horizontal">
<table class="table table-striped">
<thead>
<tr>
<th class="px-5" style="width: 70%">Plugin Name</th>
<th class="text-center" style="width: 20%">Version</th>
<th class="text-center" style="width: 10%">
<INPUT type="checkbox" onchange="checkAll(this)" name="check.m" value="P_[]" checked="checked"/>
</th>
</tr>
</thead>
<tbody>
{LOOP}
<tr>
<td class="px-5">{name}</td>
<td class="text-center">{version}</td>
<td class="text-center">
<input type="checkbox" value="{name}" name="P_[]" checked="checked">
</td>
</tr>
{/LOOP}
{ALT}
<tr>
<td align="center" colspan="3">
No models to install.
</td>
</tr>
{/ALT}
</tbody>
</table>
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center mb-3">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button>
</div>
</form>
</div>
</div>
</div>

24
app/views/install/resources.html
View File

@ -1,10 +1,16 @@
{installer-nav}
<br>
<br>
<p>Some models such as groups will need additional database resources and configurations to function properly. In this step, we will install those features.</p>
<br>
<br>
<form action="" method="post" class="form-horizontal">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install Resources</button><br>
</form>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<p class="my-4">
Some models such as groups will need additional database resources and configurations to function properly. In this step, we will install those features.
</p>
<form action="" method="post" class="">
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center my-3">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install Resources</button>
</div>
</form>
</div>
</div>
</div>

30
app/views/install/routing.html
View File

@ -1,14 +1,18 @@
{installer-nav}
<br>
<br>
<p>The Tempus Project uses rewrites in htaccess files (Apache), or location directives (Nginx), to automatically route all incoming traffic through the app. In this step, we will help set-up and then test that the required configurations have been made.</p>
<h3>Apache Users</h3>
<p>In this step, we will attempt to generate the appropriate files for Apache servers.</p>
<h3>Nginx Users</h3>
<p>If you are using Nginx, you will need to update your server's configuration manually. Please see the documentation, for convenience, an example configuration has been provided with TheTempusProject and can be found in the app/resources directory.</p>
<br>
<br>
<form action="" method="post" class="form-horizontal">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Generate</button><br>
</form>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<p class="mt-4">The Tempus Project uses rewrites in htaccess files (Apache), or location directives (Nginx), to automatically route all incoming traffic through the app. In this step, we will help set-up and then test that the required configurations have been made.</p>
<h3>Apache Users</h3>
<p>In this step, we will attempt to generate the appropriate files for Apache servers.</p>
<h3>Nginx Users</h3>
<p>If you are using Nginx, you will need to update your server's configuration manually. Please see the documentation, for convenience, an example configuration has been provided with TheTempusProject and can be found in the app/resources directory.</p>
<form action="" method="post" class="form-horizontal">
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Generate</button><br>
</div>
</form>
</div>
</div>
</div>

24
app/views/install/start.html
View File

@ -1,11 +1,13 @@
{installer-nav}
<h1>Welcome to The Tempus Project Installer.</h1>
<p>This installer will guide you through the process of installing and configuring The Tempus Project. Do not forget to delete this file once you have completed installation.</p>
<br>
<br>
<br>
<br>
<form action="" method="post" class="form-horizontal">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Begin Installation</button><br>
</form>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 text-center">
{installer-nav}
<h1 class="mt-4">Welcome to The Tempus Project Installer.</h1>
<p>This installer will guide you through the process of installing and configuring The Tempus Project. Do not forget to delete this file once you have completed installation.</p>
<form method="post">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Begin Installation</button><br>
</form>
</div>
</div>
</div>

16
app/views/nav/admin.html
View File

@ -1,6 +1,10 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<ul class="navbar-nav navbar-dark bg-dark flex-column">
{ADMIN_LINKS}
</ul>
</nav>
<ul class="nav nav-pills flex-column mb-auto">
{LOOP}
<li class="nav-item">
<a href="{url}" class="text-white {linkClasses}" {linkAttributes}>
{text}
</a>
{duuuuuuuh}
</li>
{/LOOP}
</ul>

6
app/views/nav/adminSub.html Normal file
View File

@ -0,0 +1,6 @@
<ul class="collapse list-unstyled ms-3 text-small shadow" id="{dropdownName}Dropdown">
{LOOP}
<li class="nav-item"><a href="{url}" class="nav-link text-white">{text}</a></li>
{/LOOP}
</ul>

7
app/views/nav/statusLoggedIn.html
View File

@ -1,14 +1,15 @@
<!-- User Dropdown -->
<div class="dropdown nav-item mx-2">
<a
href="#"
class="d-block dropdown-toggle nav-link"
class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
id="userDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<span class="mr-3">{USERNAME}</span> <i class="fa fa-user"></i>
<img src="{ROOT_URL}{LOGO}" alt="" width="32" height="32" class="rounded-circle me-2"> <strong class="mr-3">{USERNAME}</strong>
</a>
<ul class="dropdown-menu text-small" aria-labelledby="userDropdown">
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="userDropdown">
<li><a href="{ROOT_URL}usercp" class="dropdown-item"><i class="fa fa-fw fa-user"></i> Profile</a></li>
{topNavRightDropdown}
<li><a href="{ROOT_URL}usercp/settings" class="dropdown-item"><i class="fa fa-fw fa-gear"></i> Settings</a></li>