upd: home

Add input-error style for validation feedback

.env

@@ -1,42 +0,0 @@
-# In all environments, the following files are loaded if they exist,
-# the latter taking precedence over the former:
-#
-#  * .env                contains default values for the environment variables needed by the app
-#  * .env.local          uncommitted file with local overrides
-#  * .env.$APP_ENV       committed environment-specific defaults
-#  * .env.$APP_ENV.local uncommitted environment-specific overrides
-#
-# Real environment variables win over .env files.
-#
-# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
-# https://symfony.com/doc/current/configuration/secrets.html
-#
-# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
-# https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
-
-###> symfony/framework-bundle ###
-APP_ENV=dev
-APP_SECRET=c9124e6a5434e81e428ab5236aa6259b
-APP_DEBUG=1
-###< symfony/framework-bundle ###
-
-###> doctrine/doctrine-bundle ###
-# Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
-# IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
-#
-DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
-# DATABASE_URL="mysql://root:password@192.168.1.3:3306/sermon_notes"
-# DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=10.11.2-MariaDB&charset=utf8mb4"
-# DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=16&charset=utf8"
-###< doctrine/doctrine-bundle ###
-
-###> symfony/messenger ###
-# Choose one of the transports below
-# MESSENGER_TRANSPORT_DSN=amqp://guest:guest@localhost:5672/%2f/messages
-# MESSENGER_TRANSPORT_DSN=redis://localhost:6379/messages
-MESSENGER_TRANSPORT_DSN=doctrine://default?auto_setup=0
-###< symfony/messenger ###
-
-###> symfony/mailer ###
-# MAILER_DSN=null://null
-###< symfony/mailer ###

.gitignore

@@ -1,5 +1,6 @@
 
 ###> symfony/framework-bundle ###
+/.env
 /.env.local
 /.env.local.php
 /.env.*.local

000-default.conf

@@ -0,0 +1,29 @@
+<VirtualHost *:80>
+	# The ServerName directive sets the request scheme, hostname and port that
+	# the server uses to identify itself. This is used when creating
+	# redirection URLs. In the context of virtual hosts, the ServerName
+	# specifies what hostname must appear in the request's Host: header to
+	# match this virtual host. For the default virtual host (this file) this
+	# value is not decisive as it is used as a last resort host regardless.
+	# However, you must set it for any further virtual host explicitly.
+	#ServerName www.example.com
+
+	ServerAdmin webmaster@localhost
+	DocumentRoot /var/www/html/public/index.php
+
+	# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
+	# error, crit, alert, emerg.
+	# It is also possible to configure the loglevel for particular
+	# modules, e.g.
+	#LogLevel info ssl:warn
+
+	ErrorLog ${APACHE_LOG_DIR}/error.log
+	CustomLog ${APACHE_LOG_DIR}/access.log combined
+
+	# For most configuration files from conf-available/, which are
+	# enabled or disabled at a global level, it is possible to
+	# include a line for only one particular virtual host. For example the
+	# following line enables the CGI configuration for this host only
+	# after it has been globally disabled with "a2disconf".
+	#Include conf-available/serve-cgi-bin.conf
+</VirtualHost>

Dockerfile

@@ -0,0 +1,57 @@
+FROM php:8.4-apache
+
+RUN apt update && \
+    apt upgrade -y && \
+    apt install -y \
+    libzip-dev \
+    unzip \
+    libonig-dev \
+    libxml2-dev \
+    libpng-dev \
+    libjpeg-dev \
+    libicu-dev \
+    sqlite3 \
+    curl \
+    git \
+    nano
+
+RUN docker-php-ext-configure gd --with-jpeg
+RUN docker-php-ext-configure zip
+
+RUN docker-php-ext-install \
+    zip \
+    mbstring \
+    exif \
+    pcntl \
+    bcmath \
+    xml \
+    intl
+
+RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" && \
+    php composer-setup.php --install-dir=/usr/local/bin --filename=composer && \
+    php -r "unlink('composer-setup.php');"
+
+RUN curl -sS https://get.symfony.com/cli/installer | bash && \
+    mv /root/.symfony5/bin/symfony /usr/local/bin/symfony
+
+COPY . /var/www/html/
+
+RUN mv 000-default.conf /etc/apache2/sites-available/
+RUN rm /var/www/html/.env*
+RUN rm -rf /var/www/html/var/*
+RUN rm -rf /var/www/html/vendor
+RUN rm -rf /var/www/html/tests
+RUN rm -rf /var/www/html/translations
+
+RUN COMPOSER_ALLOW_SUPERUSER=1 composer install --no-scripts --no-dev --optimize-autoloader
+RUN mkdir /data
+COPY data/data.db /data/data.db
+
+RUN mkdir /var/www/html/var/cache
+RUN mkdir /var/www/html/var/log
+RUN symfony console asset-map:compile
+
+RUN chown -R 33:33 /var/www/html /data
+RUN chmod -R 755 /var/www/html /data
+
+EXPOSE 80

README.md

@@ -1,3 +1,83 @@
 # Sermon Notes
 
-A program to take sermon notes
+A program to take notes during a sermon.  The web app was built with PHP and Symfony.
+
+## ATTN: !!!!BREAKING CHANGE!!!! v1.0 -> v1.1
+
+This was my first publicly available docker container so I did not realize what some decisions would do. If you are upgrading from v1 you first need to save your database OR you will lose all your current notes!! Follow the steps below to do that
+
+1. You need to make sure that you have a running SSH server on your host computer
+2. On your host computer, `docker exec -it sermon-notes bash`
+3. `cd var/`
+4. `scp data.db {user}@{host computer IP}:{path}`
+5. Authenticate with the password
+6. This will copy the file over SFTP to the host computer
+7. After this then you run the `docker run...` command in Step 1 of the `Installation` instructions below, once the container is running you need to copy the `data.db` file into the working directory of the docker container.
+    - For example, if you have `~/docker/sermon-notes` as the path for the container on the host computer, you'll copy the `data.db` to `~/docker/sermon-notes/data`
+
+## Installation
+
+1. Make a directory in your desired docker storage folder (e.g. `~/docker/sermon-notes`), then `cd` into it.
+2. Create a file called `.env` in that folder, no need to add anything to it right now.
+3. Run `docker run -d --name sermon-notes -p 80:80 -v $PWD/data:/data -v $PWD/.env:/var/www/html/.env ryanprather/sermon-notes:latest`, this will download and start the container and keep it running in the background.  If you already have something on port 80 change the first `80` to whatever open port you'd like.
+4. Run `docker exec -it sermon-notes bash install.sh`  This will run an install script to create an .env file specific to your install, populate with the beginning factors, and then run a `composer` command to download the necessary package dependancies.
+5. Once complete you have a running system that you can navigate to in your browser with `http://{ip}:{port}`|`http://{hostname}:{port}`.  Then you just need to register for an account.  The first account that is created is made an admin so that you can access the `Reference Editor` and update any reference material if necessary.
+
+## Operation
+
+This is the home page you're first presented with.
+
+![Home](/assets/images/Home.png)
+
+Create an account with "Register".
+
+![Register](/assets/images/Registration.png)
+
+Once you create an account you'll need to login
+
+![Login](/assets/images/Login.png)
+
+Once you get logged in you'll be presented with the main home page
+
+![HomePage](/assets/images/HomePage.png)
+
+If you are accessing on a regular iPad the menu should be collapsed, if not, you may need to do that.  I built this with a iPad 9th Gen in mind so visibility on another device may vary.
+
+![Header](/assets/images/Header.png)
+
+Across the top you will see a "plus" and "minus" buttons that will increase and decrease the size of font for the reference content.  The 3rd button is to open the Reference opener box.  On the right side you will see the "table" that will open the sermon details portion.  The next button is a preview button to preview the notes you have typed.  The final dropdown is to quickly apply a template for you to start taking notes.
+
+![SermonData](/assets/images/SermonData.png)
+
+These fields are meant to hide because you only need to fill them out once and they are the specifics of the sermon itself (e.g. title, date, speaker, series, and passage)
+
+![Template](/assets/images/Template.png)
+
+The notes you take are done in [Markdown](/docs/markdown-cheat-sheet.md).  In the above example, there is an introduction and 3 bullet points.  Each has a sub-bullet unordered list.  Review the Markdown link above for more tips on how to write Markdown.
+
+When you are done with your Notes it will look something like the following.
+
+![Example](/assets/images/MarkdownExample.png)
+
+The tool is built that it will auto-save every 10 seconds and have a 5 second timeout should you be in a place where you don't have good internet service.  When the tool starts to save you will see an orange checkmark appear next to the "Notes" header above where your typing.  When it is done saving it will turn green and fade away.
+
+I built this tool because I needed a way to take notes and have reference material open next to me.  So I built a reference opener to do just that
+
+![ReferenceOpener](/assets/images/ReferenceOpener.png)
+
+I have added many reference options (Bible, various creeds, Belgic Confession, Heidelberg Catechism, Canons of Dort, Westminster Confession of Faith, Westminster Larger Catechism, or Westminster Short Catechism).  I plan to add others in the future.  Simply select the type then filter to the book/chapter/week of the referenced work and hit "Search".  This will open the reference on the left side of the page.
+
+![References](/assets/images/References.png)
+
+You can switch between the references by clicking the button on the left side.  You can double-tap one of the buttons to remove that reference from the list.
+
+Once a note has been saved, it can be retrieved in two different ways.  You can open the open page (by clicking on the Menu (hamburger) then "Open Notes")
+
+![OpenNotes](/assets/images/OpenNotes.png)
+
+or if the note was recently made you will see the most recent 4 notes listed under the menu
+
+![RecentNotes](/assets/images/RecentNotes.png)
+
+By clicking either of the title links it will open the note and display it for you to edit or read.  I can add "Notes" as future reference content.
+

assets/app.js

@@ -6,5 +6,6 @@ import './bootstrap.js';
  * which should already be in your base.html.twig.
  */
 import './styles/app.css';
+const $ = require('jquery');
 
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
+// console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/css/jquery-ui.structure.css

@@ -0,0 +1,886 @@
+/*!
+ * jQuery UI CSS Framework 1.13.3
+ * https://jqueryui.com
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license.
+ * https://jquery.org/license
+ *
+ * https://api.jqueryui.com/category/theming/
+ */
+.ui-draggable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+	pointer-events: none;
+}
+
+
+/* Icons
+----------------------------------*/
+.ui-icon {
+	display: inline-block;
+	vertical-align: middle;
+	margin-top: -.25em;
+	position: relative;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+.ui-widget-icon-block {
+	left: 50%;
+	margin-left: -8px;
+	display: block;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-resizable {
+	position: relative;
+}
+.ui-resizable-handle {
+	position: absolute;
+	font-size: 0.1px;
+	display: block;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+	display: none;
+}
+.ui-resizable-n {
+	cursor: n-resize;
+	height: 7px;
+	width: 100%;
+	top: -5px;
+	left: 0;
+}
+.ui-resizable-s {
+	cursor: s-resize;
+	height: 7px;
+	width: 100%;
+	bottom: -5px;
+	left: 0;
+}
+.ui-resizable-e {
+	cursor: e-resize;
+	width: 7px;
+	right: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-w {
+	cursor: w-resize;
+	width: 7px;
+	left: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-se {
+	cursor: se-resize;
+	width: 12px;
+	height: 12px;
+	right: 1px;
+	bottom: 1px;
+}
+.ui-resizable-sw {
+	cursor: sw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	bottom: -5px;
+}
+.ui-resizable-nw {
+	cursor: nw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	top: -5px;
+}
+.ui-resizable-ne {
+	cursor: ne-resize;
+	width: 9px;
+	height: 9px;
+	right: -5px;
+	top: -5px;
+}
+.ui-selectable {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-selectable-helper {
+	position: absolute;
+	z-index: 100;
+	border: 1px dotted black;
+}
+.ui-sortable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-accordion .ui-accordion-header {
+	display: block;
+	cursor: pointer;
+	position: relative;
+	margin: 2px 0 0 0;
+	padding: .5em .5em .5em .7em;
+	font-size: 100%;
+}
+.ui-accordion .ui-accordion-content {
+	padding: 1em 2.2em;
+	border-top: 0;
+	overflow: auto;
+}
+.ui-autocomplete {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: default;
+}
+.ui-menu {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: block;
+	outline: 0;
+}
+.ui-menu .ui-menu {
+	position: absolute;
+}
+.ui-menu .ui-menu-item {
+	margin: 0;
+	cursor: pointer;
+	/* support: IE10, see #8844 */
+	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+}
+.ui-menu .ui-menu-item-wrapper {
+	position: relative;
+	padding: 3px 1em 3px .4em;
+}
+.ui-menu .ui-menu-divider {
+	margin: 5px 0;
+	height: 0;
+	font-size: 0;
+	line-height: 0;
+	border-width: 1px 0 0 0;
+}
+.ui-menu .ui-state-focus,
+.ui-menu .ui-state-active {
+	margin: -1px;
+}
+
+/* icon support */
+.ui-menu-icons {
+	position: relative;
+}
+.ui-menu-icons .ui-menu-item-wrapper {
+	padding-left: 2em;
+}
+
+/* left-aligned */
+.ui-menu .ui-icon {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: .2em;
+	margin: auto 0;
+}
+
+/* right-aligned */
+.ui-menu .ui-menu-icon {
+	left: auto;
+	right: 0;
+}
+.ui-button {
+	padding: .4em 1em;
+	display: inline-block;
+	position: relative;
+	line-height: normal;
+	margin-right: .1em;
+	cursor: pointer;
+	vertical-align: middle;
+	text-align: center;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	/* Support: IE <= 11 */
+	overflow: visible;
+}
+
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+	text-decoration: none;
+}
+
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+	width: 2em;
+	box-sizing: border-box;
+	text-indent: -9999px;
+	white-space: nowrap;
+}
+
+/* no icon support for input elements */
+input.ui-button.ui-button-icon-only {
+	text-indent: 0;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-top: -8px;
+	margin-left: -8px;
+}
+
+.ui-button.ui-icon-notext .ui-icon {
+	padding: 0;
+	width: 2.1em;
+	height: 2.1em;
+	text-indent: -9999px;
+	white-space: nowrap;
+
+}
+
+input.ui-button.ui-icon-notext .ui-icon {
+	width: auto;
+	height: auto;
+	text-indent: 0;
+	white-space: normal;
+	padding: .4em 1em;
+}
+
+/* workarounds */
+/* Support: Firefox 5 - 40 */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+.ui-controlgroup {
+	vertical-align: middle;
+	display: inline-block;
+}
+.ui-controlgroup > .ui-controlgroup-item {
+	float: left;
+	margin-left: 0;
+	margin-right: 0;
+}
+.ui-controlgroup > .ui-controlgroup-item:focus,
+.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
+	z-index: 9999;
+}
+.ui-controlgroup-vertical > .ui-controlgroup-item {
+	display: block;
+	float: none;
+	width: 100%;
+	margin-top: 0;
+	margin-bottom: 0;
+	text-align: left;
+}
+.ui-controlgroup-vertical .ui-controlgroup-item {
+	box-sizing: border-box;
+}
+.ui-controlgroup .ui-controlgroup-label {
+	padding: .4em 1em;
+}
+.ui-controlgroup .ui-controlgroup-label span {
+	font-size: 80%;
+}
+.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
+	border-left: none;
+}
+.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
+	border-top: none;
+}
+.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
+	border-right: none;
+}
+.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
+	border-bottom: none;
+}
+
+/* Spinner specific style fixes */
+.ui-controlgroup-vertical .ui-spinner-input {
+
+	/* Support: IE8 only, Android < 4.4 only */
+	width: 75%;
+	width: calc( 100% - 2.4em );
+}
+.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
+	border-top-style: solid;
+}
+
+.ui-checkboxradio-label .ui-icon-background {
+	box-shadow: inset 1px 1px 1px #ccc;
+	border-radius: .12em;
+	border: none;
+}
+.ui-checkboxradio-radio-label .ui-icon-background {
+	width: 16px;
+	height: 16px;
+	border-radius: 1em;
+	overflow: visible;
+	border: none;
+}
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
+	background-image: none;
+	width: 8px;
+	height: 8px;
+	border-width: 4px;
+	border-style: solid;
+}
+.ui-checkboxradio-disabled {
+	pointer-events: none;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 45%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+
+/* Icons */
+.ui-datepicker .ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+	left: .5em;
+	top: .3em;
+}
+.ui-dialog {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: .2em;
+	outline: 0;
+}
+.ui-dialog .ui-dialog-titlebar {
+	padding: .4em 1em;
+	position: relative;
+}
+.ui-dialog .ui-dialog-title {
+	float: left;
+	margin: .1em 0;
+	white-space: nowrap;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+	position: absolute;
+	right: .3em;
+	top: 50%;
+	width: 20px;
+	margin: -10px 0 0 0;
+	padding: 1px;
+	height: 20px;
+}
+.ui-dialog .ui-dialog-content {
+	position: relative;
+	border: 0;
+	padding: .5em 1em;
+	background: none;
+	overflow: auto;
+}
+.ui-dialog .ui-dialog-buttonpane {
+	text-align: left;
+	border-width: 1px 0 0 0;
+	background-image: none;
+	margin-top: .5em;
+	padding: .3em 1em .5em .4em;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+	float: right;
+}
+.ui-dialog .ui-dialog-buttonpane button {
+	margin: .5em .4em .5em 0;
+	cursor: pointer;
+}
+.ui-dialog .ui-resizable-n {
+	height: 2px;
+	top: 0;
+}
+.ui-dialog .ui-resizable-e {
+	width: 2px;
+	right: 0;
+}
+.ui-dialog .ui-resizable-s {
+	height: 2px;
+	bottom: 0;
+}
+.ui-dialog .ui-resizable-w {
+	width: 2px;
+	left: 0;
+}
+.ui-dialog .ui-resizable-se,
+.ui-dialog .ui-resizable-sw,
+.ui-dialog .ui-resizable-ne,
+.ui-dialog .ui-resizable-nw {
+	width: 7px;
+	height: 7px;
+}
+.ui-dialog .ui-resizable-se {
+	right: 0;
+	bottom: 0;
+}
+.ui-dialog .ui-resizable-sw {
+	left: 0;
+	bottom: 0;
+}
+.ui-dialog .ui-resizable-ne {
+	right: 0;
+	top: 0;
+}
+.ui-dialog .ui-resizable-nw {
+	left: 0;
+	top: 0;
+}
+.ui-draggable .ui-dialog-titlebar {
+	cursor: move;
+}
+.ui-progressbar {
+	height: 2em;
+	text-align: left;
+	overflow: hidden;
+}
+.ui-progressbar .ui-progressbar-value {
+	margin: -1px;
+	height: 100%;
+}
+.ui-progressbar .ui-progressbar-overlay {
+	background: url("data:image/gif;base64,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");
+	height: 100%;
+	-ms-filter: "alpha(opacity=25)"; /* support: IE8 */
+	opacity: 0.25;
+}
+.ui-progressbar-indeterminate .ui-progressbar-value {
+	background-image: none;
+}
+.ui-selectmenu-menu {
+	padding: 0;
+	margin: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+.ui-selectmenu-menu .ui-menu {
+	overflow: auto;
+	overflow-x: hidden;
+	padding-bottom: 1px;
+}
+.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
+	font-size: 1em;
+	font-weight: bold;
+	line-height: 1.5;
+	padding: 2px 0.4em;
+	margin: 0.5em 0 0 0;
+	height: auto;
+	border: 0;
+}
+.ui-selectmenu-open {
+	display: block;
+}
+.ui-selectmenu-text {
+	display: block;
+	margin-right: 20px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.ui-selectmenu-button.ui-button {
+	text-align: left;
+	white-space: nowrap;
+	width: 14em;
+}
+.ui-selectmenu-icon.ui-icon {
+	float: right;
+	margin-top: 0;
+}
+.ui-slider {
+	position: relative;
+	text-align: left;
+}
+.ui-slider .ui-slider-handle {
+	position: absolute;
+	z-index: 2;
+	width: 1.2em;
+	height: 1.2em;
+	cursor: pointer;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-slider .ui-slider-range {
+	position: absolute;
+	z-index: 1;
+	font-size: .7em;
+	display: block;
+	border: 0;
+	background-position: 0 0;
+}
+
+/* support: IE8 - See #6727 */
+.ui-slider.ui-state-disabled .ui-slider-handle,
+.ui-slider.ui-state-disabled .ui-slider-range {
+	filter: inherit;
+}
+
+.ui-slider-horizontal {
+	height: .8em;
+}
+.ui-slider-horizontal .ui-slider-handle {
+	top: -.3em;
+	margin-left: -.6em;
+}
+.ui-slider-horizontal .ui-slider-range {
+	top: 0;
+	height: 100%;
+}
+.ui-slider-horizontal .ui-slider-range-min {
+	left: 0;
+}
+.ui-slider-horizontal .ui-slider-range-max {
+	right: 0;
+}
+
+.ui-slider-vertical {
+	width: .8em;
+	height: 100px;
+}
+.ui-slider-vertical .ui-slider-handle {
+	left: -.3em;
+	margin-left: 0;
+	margin-bottom: -.6em;
+}
+.ui-slider-vertical .ui-slider-range {
+	left: 0;
+	width: 100%;
+}
+.ui-slider-vertical .ui-slider-range-min {
+	bottom: 0;
+}
+.ui-slider-vertical .ui-slider-range-max {
+	top: 0;
+}
+.ui-spinner {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	padding: 0;
+	vertical-align: middle;
+}
+.ui-spinner-input {
+	border: none;
+	background: none;
+	color: inherit;
+	padding: .222em 0;
+	margin: .2em 0;
+	vertical-align: middle;
+	margin-left: .4em;
+	margin-right: 2em;
+}
+.ui-spinner-button {
+	width: 1.6em;
+	height: 50%;
+	font-size: .5em;
+	padding: 0;
+	margin: 0;
+	text-align: center;
+	position: absolute;
+	cursor: default;
+	display: block;
+	overflow: hidden;
+	right: 0;
+}
+/* more specificity required here to override default borders */
+.ui-spinner a.ui-spinner-button {
+	border-top-style: none;
+	border-bottom-style: none;
+	border-right-style: none;
+}
+.ui-spinner-up {
+	top: 0;
+}
+.ui-spinner-down {
+	bottom: 0;
+}
+.ui-tabs {
+	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+	padding: .2em;
+}
+.ui-tabs .ui-tabs-nav {
+	margin: 0;
+	padding: .2em .2em 0;
+}
+.ui-tabs .ui-tabs-nav li {
+	list-style: none;
+	float: left;
+	position: relative;
+	top: 0;
+	margin: 1px .2em 0 0;
+	border-bottom-width: 0;
+	padding: 0;
+	white-space: nowrap;
+}
+.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+	float: left;
+	padding: .5em 1em;
+	text-decoration: none;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+	margin-bottom: -1px;
+	padding-bottom: 1px;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
+	cursor: text;
+}
+.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
+	cursor: pointer;
+}
+.ui-tabs .ui-tabs-panel {
+	display: block;
+	border-width: 0;
+	padding: 1em 1.4em;
+	background: none;
+}
+.ui-tooltip {
+	padding: 8px;
+	position: absolute;
+	z-index: 9999;
+	max-width: 300px;
+}
+body .ui-tooltip {
+	border-width: 2px;
+}

assets/css/main.css

@@ -105,6 +105,8 @@ hgroup,
 menu,
 nav {
     display: block;
+    width: 250px;
+    margin-bottom: 1em;
 }
 
 body {
@@ -305,7 +307,7 @@ h6 a {
 }
 
 h1 {
-    font-size: 4em;
+    font-size: 2em;
     margin: 0 0 0.5em 0;
     line-height: 1.3;
 }
@@ -1890,10 +1892,11 @@ header p {
     text-transform: uppercase;
 }
 
-header.major> :last-child {
+header.major {
+    /*> :last-child {*/
     border-bottom: solid 3px #f56a6a;
     display: inline-block;
-    margin: 0 0 2em 0;
+    margin: 0 0 10px 0;
     padding: 0 0.75em 0.5em 0;
 }
 
@@ -1920,6 +1923,7 @@ input[type="email"],
 input[type="tel"],
 input[type="search"],
 input[type="url"],
+input[type="number"],
 select,
 textarea {
     -moz-appearance: none;
@@ -1966,7 +1970,7 @@ select {
     background-size: 1.25em;
     background-repeat: no-repeat;
     background-position: calc(100% - 1em) center;
-    height: 2.75em;
+    height: 2em;
     padding-right: 2.75em;
     text-overflow: ellipsis;
 }
@@ -1991,8 +1995,9 @@ input[type="tel"],
 input[type="search"],
 input[type="url"],
 input[type="date"],
+input[type="number"],
 select {
-    height: 2.75em;
+    height: 1.5em;
 }
 
 textarea {
@@ -2232,7 +2237,6 @@ a.image:hover img {
 ol {
     list-style: decimal;
     margin: 0 0 2em 0;
-    padding-left: 1.25em;
 }
 
 ol li {
@@ -2242,11 +2246,6 @@ ol li {
 ul {
     list-style: disc;
     margin: 0 0 2em 0;
-    padding-left: 1em;
-}
-
-ul li {
-    /*padding-left: 0.5em;*/
 }
 
 ul.alt {
@@ -2682,8 +2681,7 @@ button:disabled,
 /* Mini Posts */
 .mini-posts article {
     border-top: solid 1px rgba(210, 215, 217, 0.75);
-    margin-top: 2em;
+    padding-top: 1em;
-    padding-top: 2em;
 }
 
 .mini-posts article .image {
@@ -2698,7 +2696,7 @@ button:disabled,
 
 .mini-posts article:first-child {
     border-top: 0;
-    margin-top: 0;
+    margin-top: 1em;
     padding-top: 0;
 }
 
@@ -3091,13 +3089,13 @@ button:disabled,
 }
 
 #main>.inner {
-    padding: 0 0.5em 0.1em 0.5em;
+    padding: 0 0.25em 0.1em 0.25em;
     margin: 0 auto;
     max-width: 110em;
 }
 
 #main>.inner>section {
-    padding: 0.5em 0 0.5em 0;
+    padding: 0.25em 0 0.25em 0;
     border-top: solid 2px rgba(210, 215, 217, 0.75);
 }
 
@@ -3107,18 +3105,14 @@ button:disabled,
 
 @media screen and (max-width: 1680px) {
     #main>.inner {
-        padding: 0 0 0 2em;
+        padding: 0 0 0 0;
     }
-
-    #main>.inner>section {}
 }
 
 @media screen and (max-width: 1280px) {
     #main>.inner {
-        padding: 0 0 0 2em;
+        padding: 0 0 0 0;
     }
-
-    #main>.inner>section {}
 }
 
 @media screen and (max-width: 736px) {
@@ -3198,7 +3192,7 @@ button:disabled,
 }
 
 #sidebar>.inner {
-    padding: 2.22222em 2.22222em 2.44444em 2.22222em;
+    padding: 2.22em 2.22em 2.44em 2.22em;
     position: relative;
     width: 26em;
 }
@@ -3206,7 +3200,7 @@ button:disabled,
 #sidebar>.inner>* {
     border-bottom: solid 2px rgba(210, 215, 217, 0.75);
     margin: 0 0 3.5em 0;
-    padding: 0 0 3.5em 0;
+    /*padding: 0 0 3.5em 0;*/
 }
 
 #sidebar>.inner>*> :last-child {
@@ -3222,9 +3216,9 @@ button:disabled,
 #sidebar>.inner>.alt {
     background-color: #eff1f2;
     border-bottom: 0;
-    margin: -2.22222em 0 4.44444em -2.22222em;
+    margin: -2.22em -2.33em 1.0em -2.22em;
-    padding: 2.22222em;
+    padding: 2.22em;
-    width: calc(100% + 4.44444em);
+    width: calc(100% + 4.44em);
 }
 
 #sidebar .toggle {
@@ -3236,9 +3230,9 @@ button:disabled,
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     border: 0;
     display: block;
-    height: 7.5em;
+    height: 4.5em;
     left: 26em;
-    line-height: 7.5em;
+    line-height: 4.5em;
     outline: 0;
     overflow: hidden;
     position: absolute;
@@ -3290,17 +3284,19 @@ button:disabled,
     }
 
     #sidebar>.inner>.alt {
-        margin: -1.66667em 0 3.33333em -1.66667em;
+        margin: 0;
         padding: 1.66667em;
         width: calc(100% + 3.33333em);
     }
 
     #sidebar .toggle {
-        height: 6.25em;
+        height: 4.5em;
-        left: 24em;
+        left: 23em;
-        line-height: 6.25em;
+        line-height: 4.5em;
         text-indent: 5em;
         width: 5em;
+        background-color: #fff;
+        margin-left: 1em;
     }
 
     #sidebar .toggle:before {
@@ -3345,7 +3341,7 @@ button:disabled,
 
     #sidebar .toggle {
         text-indent: 6em;
-        width: 6em;
+        width: 4.5em;
     }
 
     #sidebar .toggle:before {
@@ -3415,12 +3411,21 @@ button:disabled,
 }
 
 @media screen and (max-width: 1680px) {
-    #header {}
+    #header .logo {
+        font-size: 1.25em;
+        margin: 0;
+    }
+
+    #header .icons {
+        height: 5em;
+        line-height: 5em;
+        position: absolute;
+        right: -0.5em;
+        top: 0;
+    }
 }
 
 @media screen and (max-width: 736px) {
-    #header {}
-
     #header .logo {
         font-size: 1.25em;
         margin: 0;

assets/js/main.js

@@ -0,0 +1,262 @@
+/*
+    Editorial by HTML5 UP
+    html5up.net | @ajlkn
+    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+(function ($) {
+
+    var $window = $(window),
+        $head = $('head'),
+        $body = $('body');
+
+    // Breakpoints.
+    breakpoints({
+        xlarge: ['1281px', '1680px'],
+        large: ['981px', '1280px'],
+        medium: ['737px', '980px'],
+        small: ['481px', '736px'],
+        xsmall: ['361px', '480px'],
+        xxsmall: [null, '360px'],
+        'xlarge-to-max': '(min-width: 1681px)',
+        'small-to-xlarge': '(min-width: 481px) and (max-width: 1680px)'
+    });
+
+    // Stops animations/transitions until the page has ...
+
+    // ... loaded.
+    $window.on('load', function () {
+        window.setTimeout(function () {
+            $body.removeClass('is-preload');
+        }, 100);
+    });
+
+    // ... stopped resizing.
+    var resizeTimeout;
+
+    $window.on('resize', function () {
+
+        // Mark as resizing.
+        $body.addClass('is-resizing');
+
+        // Unmark after delay.
+        clearTimeout(resizeTimeout);
+
+        resizeTimeout = setTimeout(function () {
+            $body.removeClass('is-resizing');
+        }, 100);
+
+    });
+
+    // Fixes.
+
+    // Object fit images.
+    if (!browser.canUse('object-fit')
+        || browser.name == 'safari')
+        $('.image.object').each(function () {
+
+            var $this = $(this),
+                $img = $this.children('img');
+
+            // Hide original image.
+            $img.css('opacity', '0');
+
+            // Set background.
+            $this
+                .css('background-image', 'url("' + $img.attr('src') + '")')
+                .css('background-size', $img.css('object-fit') ? $img.css('object-fit') : 'cover')
+                .css('background-position', $img.css('object-position') ? $img.css('object-position') : 'center');
+
+        });
+
+    // Sidebar.
+    var $sidebar = $('#sidebar'),
+        $sidebar_inner = $sidebar.children('.inner');
+
+    // Inactive by default on <= large.
+    breakpoints.on('<=large', function () {
+        $sidebar.addClass('inactive');
+    });
+
+    breakpoints.on('>large', function () {
+        $sidebar.removeClass('inactive');
+    });
+
+    // Hack: Workaround for Chrome/Android scrollbar position bug.
+    if (browser.os == 'android'
+        && browser.name == 'chrome')
+        $('<style>#sidebar .inner::-webkit-scrollbar { display: none; }</style>')
+            .appendTo($head);
+
+    // Toggle.
+    $('<a href="#sidebar" class="toggle">Toggle</a>')
+        .appendTo($sidebar)
+        .on('click', function (event) {
+
+            // Prevent default.
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Toggle.
+            $sidebar.toggleClass('inactive');
+
+        });
+
+    // Events.
+
+    // Link clicks.
+    $sidebar.on('click', 'a', function (event) {
+
+        // >large? Bail.
+        if (breakpoints.active('>large'))
+            return;
+
+        // Vars.
+        var $a = $(this),
+            href = $a.attr('href'),
+            target = $a.attr('target');
+
+        // Prevent default.
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Check URL.
+        if (!href || href == '#' || href == '')
+            return;
+
+        // Hide sidebar.
+        $sidebar.addClass('inactive');
+
+        // Redirect to href.
+        setTimeout(function () {
+
+            if (target == '_blank')
+                window.open(href);
+            else
+                window.location.href = href;
+
+        }, 500);
+
+    });
+
+    // Prevent certain events inside the panel from bubbling.
+    $sidebar.on('click touchend touchstart touchmove', function (event) {
+
+        // >large? Bail.
+        if (breakpoints.active('>large'))
+            return;
+
+        // Prevent propagation.
+        event.stopPropagation();
+
+    });
+
+    // Hide panel on body click/tap.
+    $body.on('click touchend', function (event) {
+
+        // >large? Bail.
+        if (breakpoints.active('>large'))
+            return;
+
+        // Deactivate.
+        $sidebar.addClass('inactive');
+
+    });
+
+    // Scroll lock.
+    // Note: If you do anything to change the height of the sidebar's content, be sure to
+    // trigger 'resize.sidebar-lock' on $window so stuff doesn't get out of sync.
+
+    $window.on('load.sidebar-lock', function () {
+
+        var sh, wh, st;
+
+        // Reset scroll position to 0 if it's 1.
+        if ($window.scrollTop() == 1)
+            $window.scrollTop(0);
+
+        $window
+            .on('scroll.sidebar-lock', function () {
+
+                var x, y;
+
+                // <=large? Bail.
+                if (breakpoints.active('<=large')) {
+
+                    $sidebar_inner
+                        .data('locked', 0)
+                        .css('position', '')
+                        .css('top', '');
+
+                    return;
+
+                }
+
+                // Calculate positions.
+                x = Math.max(sh - wh, 0);
+                y = Math.max(0, $window.scrollTop() - x);
+
+                // Lock/unlock.
+                if ($sidebar_inner.data('locked') == 1) {
+
+                    if (y <= 0)
+                        $sidebar_inner
+                            .data('locked', 0)
+                            .css('position', '')
+                            .css('top', '');
+                    else
+                        $sidebar_inner
+                            .css('top', -1 * x);
+
+                }
+                else {
+
+                    if (y > 0)
+                        $sidebar_inner
+                            .data('locked', 1)
+                            .css('position', 'fixed')
+                            .css('top', -1 * x);
+
+                }
+
+            })
+            .on('resize.sidebar-lock', function () {
+
+                // Calculate heights.
+                wh = $window.height();
+                sh = $sidebar_inner.outerHeight() + 30;
+
+                // Trigger scroll.
+                $window.trigger('scroll.sidebar-lock');
+
+            })
+            .trigger('resize.sidebar-lock');
+
+    });
+
+    // Menu.
+    var $menu = $('#menu'),
+        $menu_openers = $menu.children('ul').find('.opener');
+
+    // Openers.
+    $menu_openers.each(function () {
+
+        var $this = $(this);
+
+        $this.on('click', function (event) {
+
+            // Prevent default.
+            event.preventDefault();
+
+            // Toggle.
+            $menu_openers.not($this).removeClass('active');
+            $this.toggleClass('active');
+
+            // Trigger resize (sidebar lock).
+            $window.triggerHandler('resize.sidebar-lock');
+
+        });
+
+    });
+
+})(jQuery);

assets/js/reference.js

@@ -0,0 +1,85 @@
+/**
+ * Retrieves the reference type from the server and populates the reference series dropdown.
+ *
+ * @param {HTMLElement} el - The element that triggered the function.
+ * @return {Promise} A promise that resolves with the response from the server.
+ */
+export function retrieveReferenceType(el) {
+    fetch('/reference/' + el.value, {
+        method: 'GET',
+        header: {
+            'Content-Type': 'application/json'
+        }
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#referenceSeries').innerHTML = '';
+            var none = document.createElement('option');
+            none.value = '';
+            none.text = '-- Select --';
+            document.querySelector('#referenceSeries').appendChild(none);
+
+            for (var x in results) {
+                var newSeries = document.createElement('option');
+                newSeries.value = results[x].id;
+                newSeries.text = results[x].label;
+                document.querySelector('#referenceSeries').appendChild(newSeries);
+            }
+        });
+}
+
+/**
+ * Retrieves a reference based on the provided element value.
+ *
+ * @param {Element} el - The element triggering the reference retrieval
+ * @return {void} No return value
+ */
+export function retrieveReference(el) {
+    if (el.value == 'new') {
+        document.querySelector('#refName').style.display = 'inline-block';
+        return;
+    }
+    fetch('/get-reference', {
+        method: "POST",
+        header: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            id: el.value
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#reference').value = results.text;
+        });
+}
+
+/**
+ * Saves a reference by sending a POST request to the server with the selected type,
+ * file, and text values. Displays an alert with the response message, and clears
+ * the reference and file input fields.
+ *
+ * @return {Promise} A Promise that resolves with the response message from the server.
+ */
+export function saveReference() {
+    let ref = document.querySelector('#referenceSeries');
+    let cont = document.querySelector('#reference');
+    fetch('/save-reference', {
+        method: 'POST',
+        header: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            refId: ref.value,
+            text: cont.value
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            //alert(results.msg);
+
+            document.querySelector('#reference').value = '';
+            document.querySelector('#referenceType').value = '';
+            document.querySelector('#referenceSeries').value = '';
+        });
+}

assets/js/register.js

@@ -1,9 +1,8 @@
 // Get references to the form elements
-const nameInput = document.getElementById("name");
+const nameInput = document.getElementById("registration_form_name");
-const emailInput = document.getElementById("emailAddress");
+const emailInput = document.getElementById("registration_form_email");
-const passwordInput = document.getElementById("password");
+const passwordInput = document.getElementById("registration_form_plainPassword");
-const confirmPasswordInput = document.getElementById("confirmPassword");
+const csrfToken = document.getElementById("registration_form__token").value;
-const csrfToken = document.getElementById("csrfToken").value;
 
 // Add event listeners to the form
 const registerBtn = document.querySelector("#register-btn");
@@ -18,28 +17,21 @@ function handleSubmit(event) {
     const name = nameInput.value;
     const email = emailInput.value;
     const password = passwordInput.value;
-    const confirmPassword = confirmPasswordInput.value;
 
     if (name === "" || email === "" || password === "") {
         alert("Please fill in all fields.");
         return;
     }
 
-    if (password !== confirmPassword) {
-        alert("Passwords do not match.");
-        return;
-    }
-
     // Send data to server for processing
     const data = {
         "name": name,
         "email": email,
-        "password": password,
         "plainPassword": password,
-        "csrf_token": csrfToken
+        "_token": csrfToken
     };
 
-    fetch("/index.php/register", {
+    fetch("/register", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",

assets/js/site.js

@@ -0,0 +1,116 @@
+export function initHome() {
+    setHeight();
+    setBooks();
+    setEventListeners();
+    $('#note-table').DataTable({
+        paging: false,
+        ajax: {
+            url: '/get-notes',
+            type: 'POST'
+        },
+        columns: [
+            { data: 'link' },
+            { data: 'speaker.name' },
+            { data: 'passage' },
+            {
+                data: 'date.date',
+                render: DataTable.render.date("L")
+            },
+        ]
+    });
+    $('#shareBtn').on('click', openShareNote);
+    $('#modal-backdrop').on('click', closeShareNote);
+}
+
+/**
+ * Fetches data from '/js/data.json', assigns it to BOOKS, and handles errors.
+ *
+ * @return {void}
+ */
+export function setBooks() {
+    fetch('js/data.json')
+        .then((res) => {
+            if (!res.ok) {
+                throw new Error('HTTP Error: Status: ${res.status}');
+            }
+            return res.json();
+        })
+        .then((data) => {
+            BOOKS = data;
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+}
+
+/**
+ * Sets event listeners for keyup events on the document and the '#notes' element.
+ *
+ * @return {void}
+ */
+export function setEventListeners() {
+    document.addEventListener('keyup', function (event) {
+        if (event.key == "F3") {
+            openRef(false);
+        }
+    });
+
+    document.querySelector('#notes').addEventListener('keyup', function (event) {
+        let key = event.keyCode;
+
+        if (key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
+            textDirty = true;
+            document.querySelector('#note-header-left h2').classList.add('dirty');
+        }
+    });
+}
+
+/**
+ * Sets the height of various elements on the page based on the window's inner height.
+ * Also initializes a datepicker and event listener for the search input field.
+ *
+ * @return {void}
+ */
+export function setHeight() {
+    md = new markdownit({
+        html: true,
+        linkify: true,
+        breaks: true
+    });
+
+    var body = document.querySelector('body');
+    body.style.height = window.innerHeight + 'px';
+
+    var cont = document.querySelector('#main');
+    cont.style.height = (window.innerHeight) + 'px';
+
+    var tabs = document.querySelector('.ref-tab');
+    tabs.style.height = (window.innerHeight - 13) + 'px';
+
+    var ref = document.querySelector('.ref');
+    ref.style.height = (window.innerHeight - 60) + 'px';
+
+    var noteList = document.querySelector('#note-list');
+    noteList.style.height = (window.innerHeight - 60) + 'px';
+
+    var notes = document.querySelector('.notes');
+    notes.style.height = (window.innerHeight - 60) + 'px';
+
+    var notePreview = document.querySelector('#notePreview');
+    notePreview.style.height = (window.innerHeight - 50) + 'px';
+
+    if ($('#noteDate')) {
+        $('#noteDate').datepicker();
+    }
+
+    if ($('#query')) {
+        document.querySelector('#query').addEventListener('keyup', function (event) {
+            if (event.key == "Enter") {
+                search();
+            }
+        });
+    }
+    if (!to) {
+        to = setTimeout(saveNote, saveInterval);
+    }
+}

assets/js/template.js

@@ -0,0 +1,49 @@
+/**
+ * Retrieves a template from the server and sets it as the value of a specified destination element.
+ *
+ * @param {string} orig - The ID of the element containing the original template value.
+ * @param {string} dest - The ID of the destination element where the retrieved template will be set.
+ * @return {Promise} A Promise that resolves when the template is successfully retrieved and set as the value of the destination element.
+ */
+export function retrieveTemplate(orig, dest) {
+    const temp = document.querySelector('#' + orig);
+    if (temp.value == '0') {
+        document.querySelector('#' + dest).value = '';
+        return;
+    }
+    fetch('/retrieve-template', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'plain/text'
+        },
+        body: JSON.stringify({
+            'template': temp.value
+        })
+    })
+        .then(response => response.text())
+        .then(results => {
+            const div = document.querySelector('#' + dest);
+            div.value = results;
+        });
+}
+
+/**
+ * Saves the template by sending a POST request to the server with template data.
+ */
+export function saveTemplate() {
+    fetch('/save-template', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'plain/text'
+        },
+        body: JSON.stringify({
+            'template_id': document.querySelector('#template_id').value,
+            'template_name': document.querySelector('#template_name').value,
+            'template_value': document.querySelector('#template_value').value,
+        })
+    })
+        .then(response => response.text())
+        .then(results => {
+            alert(results);
+        });
+}

assets/styles/style.css

@@ -3,21 +3,7 @@ body {
   margin: 0;
 }
 
-.top-tab {
-  height: 50px;
-  width: 100%;
-}
-
 /* Style for hamburger menu */
-.fa-check {
-  color: green;
-}
-
-.fa-bars:before,
-.fa-navicon:before {
-  padding: 3px;
-}
-
 .inner {
   display: flex;
   flex-direction: row;
@@ -25,14 +11,24 @@ body {
   justify-content: space-evenly;
   align-items: stretch;
   align-content: flex-start;
-  max-width: 1020px;
+  max-width: 1060px;
   /* Adjust to your desired width */
   margin: 0 auto;
 }
 
 .ref-tab {
   width: 60px;
-  padding-top: 65px !important;
+  padding-top: 60px !important;
+}
+
+.ref-tab ul {
+  margin: 0;
+  padding: 0;
+}
+
+.ref-tab ul li {
+  list-style: none;
+  list-style-type: none;
 }
 
 .tab {
@@ -47,40 +43,18 @@ body {
   height: 80px;
   width: 100%;
   text-align: center;
-  background-color: #f56a6a;
-  color: #fff !important;
-  border: none;
-  border-radius: 3px;
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.8);
   font-size: 14px;
   margin-bottom: 3px;
 }
-.tab button:active {
-  background-color: #7a0016;
-}
-
-.activeRef {
-  background-color: #3e8e41 !important;
-}
-
-.ref-tab ul {
-  margin: 0;
-  padding: 0;
-}
-
-.ref-tab ul li {
-  list-style: none;
-  list-style-type: none;
-}
 
 .ref {
-  width: 35%;
+  width: 36%;
 }
 
 .ref > div#ref {
   vertical-align: top;
-  justify-content: start;
+  justify-content: flex-start;
-  align-content: start;
+  align-content: flex-start;
   overflow-y: scroll;
   width: 100%;
   height: 100%;
@@ -89,6 +63,10 @@ body {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }
 
+#ref {
+  padding: 3px 3px 3px 3px;
+}
+
 #passage {
   width: 100px;
 }
@@ -103,59 +81,16 @@ body {
   width: 110px;
 }
 
-#noteSearch {
-  display: none;
-}
-
 #fields-container {
   display: none;
 }
 
-.button {
-  top: 10px;
-  right: 20px;
-  font-size: 16px;
-  cursor: pointer;
-  background-color: #4CAF50;
-  /* green */
-  color: #fff;
-  /* white */
-  border: none;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
-  padding: 5px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  transition: all 0.3s ease-out;
-}
-.button:hover {
-  background-color: #3e8e41;
-  /* darker green */
-}
-.button::before {
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.button::before {
-  font-size: 16px;
-  cursor: pointer;
-  transition: transform 0.5s ease-in-out;
-}
-
-.button:hover::before {
-  transform: translateY(-10px);
-}
-
 #fields-container.show {
   display: block;
 }
 
 .notes {
-  width: 55%;
+  width: 57%;
 }
 
 textarea#notes {
@@ -167,6 +102,20 @@ textarea#notes {
 #notePreview {
   display: none;
   overflow-x: scroll;
+  padding-left: 10px;
+}
+
+#notePreview ul,
+#notePreview ol {
+  list-style-position: inside;
+}
+
+#previewBtn.active,
+#show-hide-btn.active,
+.tab button.active,
+#openRefBtn.active {
+  background-color: #f56a6a !important;
+  color: white !important;
 }
 
 #note-header-left {
@@ -187,6 +136,8 @@ textarea#notes {
 
 #note-list {
   display: none;
+  height: 100%;
+  overflow-y: scroll;
 }
 
 #note-list ul {
@@ -196,24 +147,16 @@ textarea#notes {
   list-style: none;
 }
 
-.noteListLinks {
-  cursor: pointer;
-  text-decoration: none;
-  color: purple;
-  font-weight: bold;
-  font-size: 16px;
-}
-
 div#refQuery {
   display: none;
   position: absolute;
   z-index: 100;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.8);
   width: 400px;
   height: 200px;
 }
 
-div#refQuery #search {
+div#refQuery #referenceSearch {
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
@@ -224,6 +167,7 @@ div#refQuery #search {
   width: 150px;
   height: 25px;
   cursor: pointer;
+  display: none;
 }
 
 #passage-popup {
@@ -245,11 +189,108 @@ div#refQuery #search {
   opacity: 0;
   text-align: right;
   font-size: 20pt;
-  margin-top: 15px;
+  margin-left: 15px;
+  color: green;
+}
+
+#save-check.saving {
+  color: orange;
+}
+
+#save-check.error {
+  color: red;
 }
 
 #fields-container input,
 #fields-container select {
-  width: 19.5%;
+  width: 32.5%;
   display: inline-block;
+}
+
+#old-notes article p:first-child {
+  margin-bottom: 0 !important;
+  font-size: 10pt;
+}
+
+#old-notes article a {
+  font-size: 12pt;
+}
+
+#old-notes article p:last-child {
+  font-size: 12pt;
+}
+
+.inner {
+  padding-left: 0;
+}
+
+.ref h2 {
+  display: inline-block;
+}
+
+#ref {
+  font-size: 12pt;
+}
+
+#ref ol,
+#ref ul {
+  list-style-position: inside;
+}
+
+#referenceBook {
+  display: none;
+}
+
+.recording-link {
+  font-size: 8pt;
+  color: blue;
+  text-decoration: none;
+}
+
+.fas-trash-alt {
+  color: red;
+  cursor: pointer;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 1000;
+}
+
+.modal-container {
+  position: absolute;
+  width: 300px;
+  /* adjust this to your desired modal width */
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  z-index: 1001;
+}
+
+.modal-header {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.modal-footer {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+}
+
+.btn-secondary {
+  color: #337ab7;
 }/*# sourceMappingURL=style.css.map */

assets/styles/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACAJ;;ADGA;EACI,WAAA;EACA,4BAAA;ACAJ;;ADGA;EACI,SAAA;EACA,UAAA;ACAJ;;ADGA;EACI,gBAAA;EACA,qBAAA;ACAJ;;ADGA;EACI,kBAAA;ACAJ;;ADGA,GAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;ACAJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,mBAAA;EACA,2BAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,wBAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,kBAAA;ACDJ;;ADIA;;EAEI,2BAAA;ACDJ;;ADIA;;;;EAII,oCAAA;EACA,uBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,mBAAA;EACA,UAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,2BAAA;EACA,UAAA;ACDJ;;ADIA;EACI,iBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;;EAEI,YAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,2BAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,qBAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;;EAEI,2BAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;EACA,WAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,YAAA;EACA,4CAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,sBAAA;EACA,uCAAA;EACA,aAAA;ACDJ;;ADIA;EACI,yBAAA;EACA,aAAA;EACA,6BAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,yBAAA;EACA,aAAA;EACA,0BAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ","file":"style.css"}

assets/styles/style.scss

@@ -3,22 +3,8 @@ body {
     margin: 0;
 }
 
-.top-tab {
-    height: 50px;
-    width: 100%;
-}
-
 /* Style for hamburger menu */
 
-.fa-check {
-    color: green;
-}
-
-.fa-bars:before,
-.fa-navicon:before {
-    padding: 3px;
-}
-
 .inner {
     display: flex;
     flex-direction: row;
@@ -26,14 +12,24 @@ body {
     justify-content: space-evenly;
     align-items: stretch;
     align-content: flex-start;
-    max-width: 1020px;
+    max-width: 1060px;
     /* Adjust to your desired width */
     margin: 0 auto;
 }
 
 .ref-tab {
     width: 60px;
-    padding-top: 65px !important;
+    padding-top: 60px !important;
+}
+
+.ref-tab ul {
+    margin: 0;
+    padding: 0;
+}
+
+.ref-tab ul li {
+    list-style: none;
+    list-style-type: none;
 }
 
 .tab {
@@ -48,41 +44,19 @@ body {
     height: 80px;
     width: 100%;
     text-align: center;
-    background-color: #f56a6a;
-    color: #fff !important;
-    border: none;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.8);
     font-size: 14px;
     margin-bottom: 3px;
-
-    &:active {
-        background-color: #7a0016;
-    }
 }
 
-.activeRef {
-    background-color: #3e8e41 !important;
-}
-
-.ref-tab ul {
-    margin: 0;
-    padding: 0;
-}
-
-.ref-tab ul li {
-    list-style: none;
-    list-style-type: none;
-}
 
 .ref {
-    width: 35%;
+    width: 36%;
 }
 
 .ref>div#ref {
     vertical-align: top;
-    justify-content: start;
+    justify-content: flex-start;
-    align-content: start;
+    align-content: flex-start;
     overflow-y: scroll;
     width: 100%;
     height: 100%;
@@ -91,6 +65,10 @@ body {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }
 
+#ref {
+    padding: 3px 3px 3px 3px;
+}
+
 #passage {
     width: 100px;
 }
@@ -105,65 +83,16 @@ body {
     width: 110px;
 }
 
-#noteSearch {
-    display: none;
-}
-
 #fields-container {
     display: none;
 }
 
-#show-hide-btn {}
-
-.button {
-    top: 10px;
-    right: 20px;
-    font-size: 16px;
-    cursor: pointer;
-    background-color: #4CAF50;
-    /* green */
-    color: #fff;
-    /* white */
-    border: none;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
-    padding: 5px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 4px 2px;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
-
-    &:hover {
-        background-color: #3e8e41;
-        /* darker green */
-    }
-
-    &::before {
-        font-size: 16px;
-        cursor: pointer;
-    }
-}
-
-.button::before {
-    font-size: 16px;
-    cursor: pointer;
-    transition: transform 0.5s ease-in-out;
-}
-
-.button:hover::before {
-    transform: translateY(-10px);
-}
-
 #fields-container.show {
     display: block;
 }
 
 .notes {
-    width: 55%
+    width: 57%
 }
 
 textarea#notes {
@@ -175,6 +104,20 @@ textarea#notes {
 #notePreview {
     display: none;
     overflow-x: scroll;
+    padding-left: 10px;
+}
+
+#notePreview ul,
+#notePreview ol {
+    list-style-position: inside;
+}
+
+#previewBtn.active,
+#show-hide-btn.active,
+.tab button.active,
+#openRefBtn.active {
+    background-color: #f56a6a !important;
+    color: white !important;
 }
 
 #note-header-left {
@@ -195,6 +138,8 @@ textarea#notes {
 
 #note-list {
     display: none;
+    height: 100%;
+    overflow-y: scroll;
 }
 
 #note-list ul {
@@ -204,24 +149,16 @@ textarea#notes {
     list-style: none;
 }
 
-.noteListLinks {
-    cursor: pointer;
-    text-decoration: none;
-    color: purple;
-    font-weight: bold;
-    font-size: 16px;
-}
-
 div#refQuery {
     display: none;
     position: absolute;
     z-index: 100;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.8);
     width: 400px;
     height: 200px;
 }
 
-div#refQuery #search {
+div#refQuery #referenceSearch {
     border: none;
     border-radius: 5px;
     padding: 10px 20px;
@@ -232,6 +169,7 @@ div#refQuery #search {
     width: 150px;
     height: 25px;
     cursor: pointer;
+    display: none;
 }
 
 #passage-popup {
@@ -253,11 +191,108 @@ div#refQuery #search {
     opacity: 0;
     text-align: right;
     font-size: 20pt;
-    margin-top: 15px;
+    margin-left: 15px;
+    color: green;
+}
+
+#save-check.saving {
+    color: orange;
+}
+
+#save-check.error {
+    color: red;
 }
 
 #fields-container input,
 #fields-container select {
-    width: 19.5%;
+    width: 32.5%;
     display: inline-block;
+}
+
+#old-notes article p:first-child {
+    margin-bottom: 0 !important;
+    font-size: 10pt;
+}
+
+#old-notes article a {
+    font-size: 12pt;
+}
+
+#old-notes article p:last-child {
+    font-size: 12pt;
+}
+
+.inner {
+    padding-left: 0;
+}
+
+.ref h2 {
+    display: inline-block;
+}
+
+#ref {
+    font-size: 12pt;
+}
+
+#ref ol,
+#ref ul {
+    list-style-position: inside;
+}
+
+#referenceBook {
+    display: none;
+}
+
+.recording-link {
+    font-size: 8pt;
+    color: blue;
+    text-decoration: none;
+}
+
+.fas-trash-alt {
+    color: red;
+    cursor: pointer;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+    opacity: 0.5;
+    z-index: 1000;
+}
+
+.modal-container {
+    position: absolute;
+    width: 300px;
+    /* adjust this to your desired modal width */
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    z-index: 1001;
+}
+
+.modal-header {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+}
+
+.modal-body {
+    padding: 20px;
+}
+
+.modal-footer {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}
+
+.btn-secondary {
+    color: #337ab7;
 }