Add navbar.
This commit is contained in:
parent
a2047bdffe
commit
88721378b2
GPG key ID:
3AB4E2E04CEF656F
37 changed files with 305 additions and 2232 deletions
62
404.html
62
404.html
|
|
@ -1,62 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
* {
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color: #888;
|
||||
display: table;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #555;
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 280px) {
|
||||
|
||||
body,
|
||||
p {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 0.3em;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->
|
||||
19
LICENSE.txt
19
LICENSE.txt
|
|
@ -1,19 +0,0 @@
|
|||
Copyright (c) HTML5 Boilerplate
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
|
|
@ -1,12 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="icons/tile.png"/>
|
||||
<square150x150logo src="icons/tile.png"/>
|
||||
<wide310x150logo src="icons/tile-wide.png"/>
|
||||
<square310x310logo src="icons/tile.png"/>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
433
css/main.css
433
css/main.css
|
|
@ -1,433 +0,0 @@
|
|||
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
|
||||
|
||||
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
|
||||
/*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight:
|
||||
* https://twitter.com/miketaylr/status/12228805301
|
||||
*
|
||||
* Vendor-prefixed and regular ::selection selectors cannot be combined:
|
||||
* https://stackoverflow.com/a/16982510/7133471
|
||||
*
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
#header {
|
||||
background-color: #171a21;
|
||||
color: #c6d4df;
|
||||
}
|
||||
|
||||
#form {
|
||||
background-image: linear-gradient(180deg, #171a21, #1b2838);
|
||||
min-height: 750px;
|
||||
color: #c6d4df;
|
||||
}
|
||||
|
||||
#footer {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background-color: #171a21;
|
||||
color: lightsteelblue;
|
||||
}
|
||||
|
||||
hr{
|
||||
border-top: 3px solid #cccccc;
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0px;
|
||||
background-color: #171a21;
|
||||
transition: all 0.4s ease 0s;
|
||||
color: #d3dade;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border-radius: 3px;
|
||||
background-color: #316282;
|
||||
color: #d3dade;
|
||||
border: 1px solid #22445b;
|
||||
}
|
||||
|
||||
#submitButton {
|
||||
border-radius: 5px;
|
||||
border:0;
|
||||
min-width: 150px;
|
||||
min-height: 50px;
|
||||
background-image: linear-gradient(#5c7e10, #4c6b22);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#submitButton:hover {
|
||||
background-image: linear-gradient(#92c91a, #84b83b);
|
||||
box-shadow: #000000 3px 3px 5px;
|
||||
}
|
||||
|
||||
#backButton {
|
||||
border-radius: 5px;
|
||||
border:0;
|
||||
min-width: 150px;
|
||||
min-height: 50px;
|
||||
background-image: linear-gradient(#316282, #22445b);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#backButton:hover {
|
||||
background-image: linear-gradient(#b3d4fc, #a1c1ec);
|
||||
box-shadow: #000000 3px 3px 5px;
|
||||
}
|
||||
|
||||
#deleteButton {
|
||||
border-radius: 5px;
|
||||
border:0;
|
||||
min-width: 150px;
|
||||
min-height: 50px;
|
||||
background-image: linear-gradient(#c51210, #5c1210);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#deleteButton:hover {
|
||||
background-image: linear-gradient(#e53333, #d51210);
|
||||
box-shadow: #000000 3px 3px 5px;
|
||||
}
|
||||
|
||||
#successMessage {
|
||||
background-color: #4c6b22;
|
||||
color: #b3d4fc;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
#errorMessage {
|
||||
background-color: darkred;
|
||||
color: #b3d4fc;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: darkred;
|
||||
color: #b3d4fc;
|
||||
min-height: 30px;
|
||||
font-weight: bolder;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tableCoverArt {
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
table{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th{
|
||||
background-color: #5c7e10;
|
||||
border: 1px solid #4c6b22;
|
||||
color: #ffffff;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
border-left: 1px solid #5c7e10;
|
||||
border-right: 1px solid #5c7e10;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #1b2838;
|
||||
color: #d3dade;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: #171a21;
|
||||
color: #d3dade;
|
||||
}
|
||||
|
||||
.overflow{
|
||||
overflow-x:auto;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: VT323;
|
||||
font-display: swap;
|
||||
src: url("../fonts/VT323-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Oswald, "DejaVu Sans";
|
||||
font-display: swap;
|
||||
src: url("../fonts/Oswald-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-display: swap;
|
||||
src: url("../fonts/IBMPlexMono-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-display: swap;
|
||||
src: url("../fonts/IBMPlexSans-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers
|
||||
*/
|
||||
|
||||
.hidden,
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .sr-only class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.sr-only.focusable:active,
|
||||
.sr-only.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
white-space: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EXAMPLE Media Queries for Responsive Design.
|
||||
These examples override the primary ('mobile first') styles.
|
||||
Modify as content requires.
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 35em) {
|
||||
/* Style adjustments for viewports that meet the condition */
|
||||
}
|
||||
|
||||
@media print,
|
||||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 1.25dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
/* Style adjustments for high resolution devices */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid the additional HTTP request:
|
||||
https://www.phpied.com/delay-loading-your-print-css/
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
/* Black prints faster */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
a[href^="#"]::after,
|
||||
a[href^="javascript:"]::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
* Printing Tables:
|
||||
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
349
css/normalize.css
vendored
349
css/normalize.css
vendored
|
|
@ -1,349 +0,0 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
310
delete.html
310
delete.html
|
|
@ -1,310 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Delete Game</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#488ea7">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header" class="container">
|
||||
<h1>Edit Game</h1>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="successMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="errorMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card warning">
|
||||
<p>Are you SURE you want to delete this game?</p>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div id="form">
|
||||
<div class="container">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Title</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="title" type="text"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>
|
||||
Developer
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select id="developer">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>
|
||||
Publisher
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select id="publisher">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Release Date</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="releaseDate" type="date"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Supported OSes</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span>Windows</span>
|
||||
<input id="win" type="checkbox"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span>MacOS</span>
|
||||
<input id="mac" type="checkbox"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span>Linux</span>
|
||||
<input id="linux" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Cover Art</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div id="currentArt"></div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Short Description</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="shortDescription" rows="5" cols="40" maxlength="300"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Long Description</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="longDescription" rows="15" cols="40"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-2 align-content-center">
|
||||
<button id="deleteButton" type="submit">Delete</button>
|
||||
</div>
|
||||
<div class="col-2 align-content-center">
|
||||
<button id="backButton">Back</button>
|
||||
</div>
|
||||
<div class="col-8"></div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
||||
<p>All example data used is originally from <a href="https://store.steampowered.com/">Steam</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous" defer></script>
|
||||
|
||||
<script>
|
||||
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
||||
|
||||
document.getElementById("successMessage").hidden = true;
|
||||
document.getElementById("errorMessage").hidden = true;
|
||||
|
||||
fetch("http://localhost:8787/developers", { method: 'GET' })
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
const developerSelect = document.getElementById('developer');
|
||||
for (dev of json.data) {
|
||||
let option = document.createElement("option");
|
||||
option.value = dev.id;
|
||||
option.text = dev.name;
|
||||
developerSelect.add(option);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
fetch("http://localhost:8787/publishers", { method: 'GET' })
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
const publisherSelect = document.getElementById('publisher');
|
||||
for (publisher of json.data) {
|
||||
let option = document.createElement("option");
|
||||
option.value = publisher.id;
|
||||
option.text = publisher.name;
|
||||
publisherSelect.add(option);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
let urlParams = new URLSearchParams(window.location.search)
|
||||
fetch("http://localhost:8787/games/" + urlParams.get("id"), {method: 'GET'})
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
let gameData = json.data[0];
|
||||
|
||||
if(gameData !== undefined) {
|
||||
document.getElementById("title").value = gameData.title;
|
||||
|
||||
let releaseDate = new Date(gameData.releaseDate);
|
||||
document.getElementById("releaseDate").value = releaseDate.toISOString().split("T", 1);
|
||||
|
||||
document.getElementById("win").checked = Boolean(gameData.win);
|
||||
document.getElementById("mac").checked = Boolean(gameData.mac);
|
||||
document.getElementById("linux").checked = Boolean(gameData.linux);
|
||||
|
||||
let coverImg = document.createElement('img');
|
||||
coverImg.src = "http://localhost:8787/images/" + gameData.coverArt;
|
||||
document.getElementById("currentArt").appendChild(coverImg);
|
||||
|
||||
document.getElementById("shortDescription").value = gameData.shortDescription;
|
||||
document.getElementById("longDescription").value = gameData.longDescription;
|
||||
} else {
|
||||
document.getElementById("errorMessage").innerHTML = "Invalid App ID!";
|
||||
document.getElementById("errorMessage").hidden = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
document.getElementById('deleteButton').addEventListener('click', (event) => {
|
||||
const parameters = {};
|
||||
|
||||
if(urlParams.get("id") !== undefined) {
|
||||
parameters.id = urlParams.get("id");
|
||||
}
|
||||
|
||||
|
||||
//Settings for FETCH API request
|
||||
let fetchSettings = {
|
||||
method: 'DELETE'
|
||||
};
|
||||
|
||||
//Send FETCH API request
|
||||
fetch("http://localhost:8787/games/" + urlParams.get("id") + (!isEmpty(parameters) ? '?' + new URLSearchParams(parameters) : ''), fetchSettings)
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({status, json}) => {
|
||||
if (status === 200) {
|
||||
let message = "Game deletion successful!"
|
||||
document.getElementById('successMessage').hidden = false;
|
||||
document.getElementById('successMessage').innerHTML = message;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
return;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
353
edit.html
353
edit.html
|
|
@ -1,353 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Edit Game</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#488ea7">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header" class="container">
|
||||
<h1>Edit Game</h1>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="successMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="errorMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div id="form">
|
||||
<div class="container">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Title</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="title" type="text"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>
|
||||
Developer
|
||||
<br/>
|
||||
(<a href="insertDeveloper.html">Add New Developer</a>)
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select id="developer">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>
|
||||
Publisher
|
||||
<br/>
|
||||
(<a href="insertPublisher.html">Add New Publisher</a>)
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select id="publisher">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Release Date</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="releaseDate" type="date"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Supported OSes</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span>Windows</span>
|
||||
<input id="win" type="checkbox"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span>MacOS</span>
|
||||
<input id="mac" type="checkbox"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span>Linux</span>
|
||||
<input id="linux" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Cover Art</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div id="currentArt"></div>
|
||||
<input id="coverArt" type="file"
|
||||
accept="image/jpeg, image/png"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Short Description</label>
|
||||
<p>(maximum 300 characters)</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="shortDescription" rows="5" cols="40" maxlength="300"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Long Description</label>
|
||||
<p>(supports <a href="https://www.markdownguide.org/">Markdown</a>) </p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="longDescription" rows="15" cols="40"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col align-content-center">
|
||||
<button id="submitButton" type="submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
||||
<p>All example data used is originally from <a href="https://store.steampowered.com/">Steam</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous" defer></script>
|
||||
|
||||
<script>
|
||||
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
||||
|
||||
document.getElementById("successMessage").hidden = true;
|
||||
document.getElementById("errorMessage").hidden = true;
|
||||
|
||||
fetch("http://localhost:8787/developers", { method: 'GET' })
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
const developerSelect = document.getElementById('developer');
|
||||
for (dev of json.data) {
|
||||
let option = document.createElement("option");
|
||||
option.value = dev.id;
|
||||
option.text = dev.name;
|
||||
developerSelect.add(option);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
fetch("http://localhost:8787/publishers", { method: 'GET' })
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
const publisherSelect = document.getElementById('publisher');
|
||||
for (publisher of json.data) {
|
||||
let option = document.createElement("option");
|
||||
option.value = publisher.id;
|
||||
option.text = publisher.name;
|
||||
publisherSelect.add(option);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
let urlParams = new URLSearchParams(window.location.search)
|
||||
fetch("http://localhost:8787/games/" + urlParams.get("id"), {method: 'GET'})
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
let gameData = json.data[0];
|
||||
|
||||
if(gameData !== undefined) {
|
||||
document.getElementById("title").value = gameData.title;
|
||||
|
||||
let releaseDate = new Date(gameData.releaseDate);
|
||||
document.getElementById("releaseDate").value = releaseDate.toISOString().split("T", 1);
|
||||
|
||||
document.getElementById("win").checked = Boolean(gameData.win);
|
||||
document.getElementById("mac").checked = Boolean(gameData.mac);
|
||||
document.getElementById("linux").checked = Boolean(gameData.linux);
|
||||
|
||||
let coverImg = document.createElement('img');
|
||||
coverImg.src = "http://localhost:8787/images/" + gameData.coverArt;
|
||||
document.getElementById("currentArt").appendChild(coverImg);
|
||||
|
||||
document.getElementById("shortDescription").value = gameData.shortDescription;
|
||||
document.getElementById("longDescription").value = gameData.longDescription;
|
||||
} else {
|
||||
document.getElementById("errorMessage").innerHTML = "Invalid App ID!";
|
||||
document.getElementById("errorMessage").hidden = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
document.getElementById('submitButton').addEventListener('click', (event) => {
|
||||
const parameters = {};
|
||||
|
||||
if(urlParams.get("id") !== undefined) {
|
||||
parameters.id = urlParams.get("id");
|
||||
}
|
||||
|
||||
if (document.getElementById('title').value.length !== 0) {
|
||||
//formData.append('title', document.getElementById('title').value);
|
||||
parameters.title = document.getElementById('title').value;
|
||||
}
|
||||
if (document.getElementById('developer').value.length !== 0) {
|
||||
//formData.append('developer', document.getElementById('developer').value);
|
||||
parameters.developerID = document.getElementById('developer').value;
|
||||
}
|
||||
if (document.getElementById('publisher').value.length !== 0) {
|
||||
//formData.append('publisher', document.getElementById('publisher').value);
|
||||
parameters.publisherID = document.getElementById('publisher').value;
|
||||
}
|
||||
if (document.getElementById('releaseDate').value.length !== 0) {
|
||||
//formData.append('releaseDate', document.getElementById('releaseDate').value);
|
||||
parameters.releaseDate = document.getElementById('releaseDate').value;
|
||||
}
|
||||
|
||||
if (document.getElementById('win').checked) {
|
||||
parameters.win = 1;
|
||||
}
|
||||
else {
|
||||
parameters.win = 0;
|
||||
}
|
||||
if (document.getElementById('mac').checked) {
|
||||
parameters.mac = 1;
|
||||
}
|
||||
else {
|
||||
parameters.mac = 0;
|
||||
}
|
||||
if (document.getElementById('linux').checked) {
|
||||
parameters.linux = 1;
|
||||
}
|
||||
else {
|
||||
parameters.linux = 0;
|
||||
}
|
||||
|
||||
if (document.getElementById('shortDescription').value.length !== 0) {
|
||||
parameters.shortDescription = document.getElementById('shortDescription').value;
|
||||
}
|
||||
if (document.getElementById('longDescription').value.length !== 0) {
|
||||
parameters.longDescription = document.getElementById('longDescription').value;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
const coverField = document.querySelector('input[type="file"]');
|
||||
formData.append("coverArt", coverField.files[0]);
|
||||
|
||||
|
||||
//Settings for FETCH API request
|
||||
let fetchSettings = {
|
||||
method: 'PUT',
|
||||
body: formData
|
||||
};
|
||||
|
||||
//Send FETCH API request
|
||||
fetch("http://localhost:8787/games/" + urlParams.get("id") + (!isEmpty(parameters) ? '?' + new URLSearchParams(parameters) : ''), fetchSettings)
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({status, json}) => {
|
||||
if (status === 200) {
|
||||
let message = "Game submission successful!"
|
||||
document.getElementById('outputMessage').hidden = false;
|
||||
document.getElementById('outputMessage').innerHTML = message;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
return;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 876 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
78
game.html
78
game.html
|
|
@ -1,78 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pressurized Gas -- Game Page</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#488ea7">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="gameTitle"></div>
|
||||
|
||||
<div id="longDescription"></div>
|
||||
|
||||
<div id="coverArt"></div>
|
||||
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous" defer></script>
|
||||
|
||||
<script>
|
||||
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
||||
const getParameters = {};
|
||||
|
||||
let gameID = new URL(document.location).searchParams.get("ID");
|
||||
if (gameID == null) {
|
||||
gameID = -1;
|
||||
}
|
||||
|
||||
//Settings for FETCH API request
|
||||
let fetchSettings = {
|
||||
method: 'GET'
|
||||
};
|
||||
|
||||
if (gameID !== -1) {
|
||||
fetch("http://localhost:8787/games/" + gameID, fetchSettings)
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({status, json}) => {
|
||||
if (status === 200) {
|
||||
document.title = "Pressurized Gas - " + json.data[0].title;
|
||||
document.getElementById("gameTitle").innerHTML = json.data[0].title;
|
||||
document.getElementById("longDescription").innerHTML = json.data[0].longDescription;
|
||||
let coverImg = document.createElement('img');
|
||||
coverImg.src = "http://localhost:8787/images/" + json.data[0].coverArt;
|
||||
document.getElementById("coverArt").appendChild(coverImg);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
} else {
|
||||
document.title = "Pressurized Gas - ERROR"
|
||||
document.getElementById("gameTitle").innerHTML = "Invalid game ID!"
|
||||
document.getElementById("gameTitle").style.color = "#FF0000";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
icon.png
BIN
icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
BIN
icons/tile.png
BIN
icons/tile.png
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
0
img/.gitignore
vendored
0
img/.gitignore
vendored
309
insert.html
309
insert.html
|
|
@ -1,309 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Kaj Forney -- GIMM 285 CRUD API Project</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#488ea7">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header" class="container">
|
||||
<h1>Add New Game</h1>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="successMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="errorMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div id="form">
|
||||
<div class="container">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Title</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="title" type="text"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>
|
||||
Developer
|
||||
<br/>
|
||||
(<a href="insertDeveloper.html">Add New Developer</a>)
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select id="developer">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>
|
||||
Publisher
|
||||
<br/>
|
||||
(<a href="insertPublisher.html">Add New Publisher</a>)
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select id="publisher">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Release Date</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="releaseDate" type="date"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Supported OSes</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span>Windows</span>
|
||||
<input id="win" type="checkbox"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span>MacOS</span>
|
||||
<input id="mac" type="checkbox"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span>Linux</span>
|
||||
<input id="linux" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Cover Art</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="coverArt" type="file"
|
||||
accept="image/jpeg, image/png"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Short Description</label>
|
||||
<p>(maximum 300 characters)</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="shortDescription" rows="5" cols="40" maxlength="300"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Long Description</label>
|
||||
<p>(supports <a href="https://www.markdownguide.org/">Markdown</a>) </p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="longDescription" rows="15" cols="40"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col align-content-center">
|
||||
<button id="submitButton" type="submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
||||
<p>All example data used is originally from <a href="https://store.steampowered.com/">Steam</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous" defer></script>
|
||||
|
||||
<script>
|
||||
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
||||
|
||||
document.getElementById("successMessage").hidden = true;
|
||||
document.getElementById("errorMessage").hidden = true;
|
||||
|
||||
fetch("http://localhost:8787/developers", { method: 'GET' })
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
const developerSelect = document.getElementById('developer');
|
||||
for (dev of json.data) {
|
||||
let option = document.createElement("option");
|
||||
option.value = dev.id;
|
||||
option.text = dev.name;
|
||||
developerSelect.add(option);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
fetch("http://localhost:8787/publishers", { method: 'GET' })
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({ status, json }) => {
|
||||
if (200 === status) {
|
||||
const publisherSelect = document.getElementById('publisher');
|
||||
for (publisher of json.data) {
|
||||
let option = document.createElement("option");
|
||||
option.value = publisher.id;
|
||||
option.text = publisher.name;
|
||||
publisherSelect.add(option);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
document.getElementById('submitButton').addEventListener('click', (event) => {
|
||||
//const formData = new FormData();
|
||||
const parameters = {};
|
||||
|
||||
if (document.getElementById('title').value.length !== 0) {
|
||||
//formData.append('title', document.getElementById('title').value);
|
||||
parameters.title = document.getElementById('title').value;
|
||||
}
|
||||
if (document.getElementById('developer').value.length !== 0) {
|
||||
//formData.append('developer', document.getElementById('developer').value);
|
||||
parameters.developerID = document.getElementById('developer').value;
|
||||
}
|
||||
if (document.getElementById('publisher').value.length !== 0) {
|
||||
//formData.append('publisher', document.getElementById('publisher').value);
|
||||
parameters.publisherID = document.getElementById('publisher').value;
|
||||
}
|
||||
if (document.getElementById('releaseDate').value.length !== 0) {
|
||||
//formData.append('releaseDate', document.getElementById('releaseDate').value);
|
||||
parameters.releaseDate = document.getElementById('releaseDate').value;
|
||||
}
|
||||
|
||||
if (document.getElementById('win').checked) {
|
||||
parameters.win = 1;
|
||||
}
|
||||
else {
|
||||
parameters.win = 0;
|
||||
}
|
||||
if (document.getElementById('mac').checked) {
|
||||
parameters.mac = 1;
|
||||
}
|
||||
else {
|
||||
parameters.mac = 0;
|
||||
}
|
||||
if (document.getElementById('linux').checked) {
|
||||
parameters.linux = 1;
|
||||
}
|
||||
else {
|
||||
parameters.linux = 0;
|
||||
}
|
||||
|
||||
if (document.getElementById('shortDescription').value.length !== 0) {
|
||||
parameters.shortDescription = document.getElementById('shortDescription').value;
|
||||
}
|
||||
if (document.getElementById('longDescription').value.length !== 0) {
|
||||
parameters.longDescription = document.getElementById('longDescription').value;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
const coverField = document.querySelector('input[type="file"]');
|
||||
formData.append("coverArt", coverField.files[0]);
|
||||
|
||||
|
||||
//Settings for FETCH API request
|
||||
let fetchSettings = {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
};
|
||||
|
||||
//Send FETCH API request
|
||||
fetch("http://localhost:8787/games" + (!isEmpty(parameters) ? '?' + new URLSearchParams(parameters) : ''), fetchSettings)
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({status, json}) => {
|
||||
if (status === 200) {
|
||||
let message = "Game submission successful!"
|
||||
document.getElementById('successMessage').hidden = false;
|
||||
document.getElementById('successMessage').innerHTML = message;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
return;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en-US">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Kaj Forney -- GIMM 285 CRUD API Project</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#488ea7">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header" class="container">
|
||||
<h1>Add New Developer</h1>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div id="form">
|
||||
<div class="container">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Name</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="name" type="text"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Description</label>
|
||||
<p>(maximum 250 characters)</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="description" rows="5" cols="40" maxlength="250"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Homepage</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="homepage" type="text"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-2 align-content-center">
|
||||
<button id="submitButton" type="submit">Submit</button>
|
||||
</div>
|
||||
<div class="col-2 align-content-center">
|
||||
<button id="backButton">Back</button>
|
||||
</div>
|
||||
<div class="col-8"></div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="outputMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
||||
<p>All example data used is originally from <a href="https://store.steampowered.com/">Steam</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous" defer></script>
|
||||
|
||||
<script>
|
||||
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
||||
|
||||
document.getElementById("outputMessage").hidden = true;
|
||||
|
||||
document.getElementById('backButton').addEventListener('click', (event) => {
|
||||
history.back();
|
||||
});
|
||||
|
||||
document.getElementById('submitButton').addEventListener('click', (event) => {
|
||||
//const formData = new FormData();
|
||||
const parameters = {};
|
||||
|
||||
if (document.getElementById('name').value.length !== 0) {
|
||||
parameters.name = document.getElementById('name').value;
|
||||
}
|
||||
if (document.getElementById('description').value.length !== 0) {
|
||||
parameters.description = document.getElementById('description').value;
|
||||
}
|
||||
if (document.getElementById('homepage').value.length !== 0) {
|
||||
parameters.homepage = document.getElementById('homepage').value;
|
||||
}
|
||||
|
||||
|
||||
//Settings for FETCH API request
|
||||
let fetchSettings = {
|
||||
method: 'POST',
|
||||
};
|
||||
|
||||
//Send FETCH API request
|
||||
fetch("http://localhost:8787/developers" + (!isEmpty(parameters) ? '?' + new URLSearchParams(parameters) : ''), fetchSettings)
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({status, json}) => {
|
||||
if (status === 200) {
|
||||
let message = "Submission successful!"
|
||||
document.getElementById('outputMessage').hidden = false;
|
||||
document.getElementById('outputMessage').innerHTML = message;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
return;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en-US">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Kaj Forney -- GIMM 285 CRUD API Project</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#488ea7">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header" class="container">
|
||||
<h1>Add New Publisher</h1>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div id="form">
|
||||
<div class="container">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Name</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="name" type="text"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Description</label>
|
||||
<p>(maximum 250 characters)</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea id="description" rows="5" cols="40" maxlength="250"></textarea>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label>Homepage</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input id="homepage" type="text"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-2 align-content-center">
|
||||
<button id="submitButton" type="submit">Submit</button>
|
||||
</div>
|
||||
<div class="col-2 align-content-center">
|
||||
<button id="backButton">Back</button>
|
||||
</div>
|
||||
<div class="col-8"></div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col"></div>
|
||||
<div class="col card" id="outputMessage"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
||||
<p>All example data used is originally from <a href="https://store.steampowered.com/">Steam</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous" defer></script>
|
||||
|
||||
<script>
|
||||
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
||||
|
||||
document.getElementById("outputMessage").hidden = true;
|
||||
|
||||
document.getElementById('backButton').addEventListener('click', (event) => {
|
||||
history.back();
|
||||
});
|
||||
|
||||
document.getElementById('submitButton').addEventListener('click', (event) => {
|
||||
//const formData = new FormData();
|
||||
const parameters = {};
|
||||
|
||||
if (document.getElementById('name').value.length !== 0) {
|
||||
parameters.name = document.getElementById('name').value;
|
||||
}
|
||||
if (document.getElementById('description').value.length !== 0) {
|
||||
parameters.description = document.getElementById('description').value;
|
||||
}
|
||||
if (document.getElementById('homepage').value.length !== 0) {
|
||||
parameters.homepage = document.getElementById('homepage').value;
|
||||
}
|
||||
|
||||
|
||||
//Settings for FETCH API request
|
||||
let fetchSettings = {
|
||||
method: 'POST',
|
||||
};
|
||||
|
||||
//Send FETCH API request
|
||||
fetch("http://localhost:8787/publishers" + (!isEmpty(parameters) ? '?' + new URLSearchParams(parameters) : ''), fetchSettings)
|
||||
.then((response) => {
|
||||
return new Promise((resolve) => response.json()
|
||||
.then((json) => resolve({
|
||||
status: response.status,
|
||||
json,
|
||||
})
|
||||
));
|
||||
})
|
||||
.then(({status, json}) => {
|
||||
if (status === 200) {
|
||||
let message = "Submission successful!"
|
||||
document.getElementById('outputMessage').hidden = false;
|
||||
document.getElementById('outputMessage').innerHTML = message;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
return;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3
js/vendor/modernizr-3.11.2.min.js
vendored
3
js/vendor/modernizr-3.11.2.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +0,0 @@
|
|||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -128,6 +128,19 @@ input, select, textarea {
|
|||
border: 1px solid #22445b;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: steelblue;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: #b3d4fc;
|
||||
}
|
||||
|
||||
.dropdown-item:hover{
|
||||
background-color: #316282;
|
||||
}
|
||||
|
||||
#submitButton {
|
||||
border-radius: 5px;
|
||||
border:0;
|
||||
|
|
|
|||
|
|
@ -19,8 +19,49 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="navbar-brand">ADMIN</li>
|
||||
<li class="nav-item m-2">
|
||||
<a href="viewGameData.html">View Games</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="insert.html">Add Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertDeveloper.html">Add Developer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertPublisher.html">Add Publisher</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item m-2 align-content-end">
|
||||
<a href="index.html">Exit Admin View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="header" class="container">
|
||||
<h1>Edit Game</h1>
|
||||
<h1>Delete Game</h1>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,47 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="navbar-brand">ADMIN</li>
|
||||
<li class="nav-item m-2">
|
||||
<a href="viewGameData.html">View Games</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="insert.html">Add Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertDeveloper.html">Add Developer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertPublisher.html">Add Publisher</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item m-2 align-content-end">
|
||||
<a href="index.html">Exit Admin View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="header" class="container">
|
||||
<h1>Edit Game</h1>
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,48 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="navbar-brand">ADMIN</li>
|
||||
<li class="nav-item m-2">
|
||||
<a href="viewGameData.html">View Games</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="insert.html">Add Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertDeveloper.html">Add Developer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertPublisher.html">Add Publisher</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item m-2 align-content-end">
|
||||
<a href="index.html">Exit Admin View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="header" class="container">
|
||||
<h1>View Game Data</h1>
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,47 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="navbar-brand">ADMIN</li>
|
||||
<li class="nav-item m-2">
|
||||
<a href="viewGameData.html">View Games</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="insert.html">Add Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertDeveloper.html">Add Developer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertPublisher.html">Add Publisher</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item m-2 align-content-end">
|
||||
<a href="index.html">Exit Admin View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="header" class="container">
|
||||
<h1>Add New Game</h1>
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,47 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="navbar-brand">ADMIN</li>
|
||||
<li class="nav-item m-2">
|
||||
<a href="viewGameData.html">View Games</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="insert.html">Add Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertDeveloper.html">Add Developer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertPublisher.html">Add Publisher</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item m-2 align-content-end">
|
||||
<a href="index.html">Exit Admin View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="header" class="container">
|
||||
<h1>Add New Developer</h1>
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,47 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="navbar-brand">ADMIN</li>
|
||||
<li class="nav-item m-2">
|
||||
<a href="viewGameData.html">View Games</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="insert.html">Add Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertDeveloper.html">Add Developer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertPublisher.html">Add Publisher</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item m-2 align-content-end">
|
||||
<a href="index.html">Exit Admin View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="header" class="container">
|
||||
<h1>Add New Publisher</h1>
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,48 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="navbar-brand">ADMIN</li>
|
||||
<li class="nav-item m-2">
|
||||
<a href="viewGameData.html">View Games</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item" href="insert.html">Add Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertDeveloper.html">Add Developer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="insertPublisher.html">Add Publisher</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item m-2 align-content-end">
|
||||
<a href="index.html">Exit Admin View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="header" class="container">
|
||||
<h1>View Game Data</h1>
|
||||
<hr/>
|
||||
|
|
@ -139,6 +181,7 @@
|
|||
|
||||
<footer id="footer">
|
||||
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
||||
<p>All example data used is originally from <a href="https://store.steampowered.com/">Steam</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
|
|
@ -249,7 +292,7 @@
|
|||
for (row of json.data) {
|
||||
displayTable += '<tr>' +
|
||||
'<td> <a href="edit.html?id=' + row.appID.toString() + '">Edit</a></td>' +
|
||||
'<td> <a href="delete.html?id=' + row.appID.toString() + '">Edit</a></td>' +
|
||||
'<td> <a href="delete.html?id=' + row.appID.toString() + '">Delete</a></td>' +
|
||||
'<td>' + row.appID + '</td>' +
|
||||
'<td>' + row.title + '</td>' +
|
||||
'<td>' + row.developer + '</td>' +
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"name":"","short_name":"","icons":[{"src":"/icons/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/icons/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
Loading…
Reference in a new issue