diff --git a/src/controllers/indexController.ts b/src/controllers/indexController.ts deleted file mode 100644 index 8c683239..00000000 --- a/src/controllers/indexController.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Request, Response } from 'express'; - -export default (req: Request, res: Response) => { - res.render('pages/index'); -}; diff --git a/src/css/custom.css b/src/css/custom.css index 0449a72e..b3e0c1fd 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,262 +1,208 @@ -html { - padding-top: 50px; +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -body, -h1, -h2, -h3, -h4, -h5, -h6, -p { - color: #263238; + +:root { + --primary-color: #d81921; + --primary-dark: #c62828; + --text-color: #263238; + --bg-dark: #21201e; + --bg-light: #f5f5f5; + --link-color: #1b95e0; + --spacing: 1rem; +} + +body { font-family: 'Helvetica', sans-serif; + color: var(--text-color); + line-height: 1.6; + padding-top: 3.5rem; } + +/* Typography */ h1, h2, h3, h4, h5, h6 { - margin-top: 0; -} -h1, -h2 { + margin: 0 0 var(--spacing) 0; font-weight: 900; } -h2 { - margin-bottom: 10px; -} + a { - color: #1b95e0; -} -p, -pre, -table, -ul { - margin-bottom: 30px; -} -pre { - position: relative; -} -hr { - border-color: #ccc; - border-width: 1px; - margin: 3px 0; -} -.center-block { - float: none; - margin: 0 auto; -} -.header { - background-color: #21201e; - color: #fff; - height: 200px; - text-align: center; - width: 100%; -} -.header h1, -.header h2, -.header h3, -.header h4, -.header h5 { - color: #fff; - margin: 0 10%; - text-align: center; -} -.footer { - padding: 30px; + color: var(--link-color); + text-decoration: none; } + +/* Navigation */ .navbar { - background: #d81921; - border-width: 0px; - box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); - webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); -} -.navbar-collapse { - padding: 0; + position: fixed; + top: 0; + left: 0; + right: 0; + background: var(--primary-color); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 1000; + height: 3.5rem; + overflow: hidden; +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing); } -.navbar-inverse .navbar-nav li a { - color: #fff; + +.nav-links { + display: flex; + justify-content: flex-end; + list-style: none; } -.navbar-inverse .navbar-nav .active a, -.navbar-inverse .navbar-nav .active a:hover, -.navbar-inverse .navbar-nav .active a:focus { - background-color: #c62828 !important; + +.nav-links li a { + display: block; + padding: 1rem; + color: white; + transition: background-color 0.3s; } -.navbar-brand { - width: 100px; + +.nav-links li.active a, +.nav-links li a:hover { + background-color: var(--primary-dark); } -.center { + +/* Header */ +.header { + background-color: var(--bg-dark); + padding: 4rem 1rem; text-align: center; } -.input-group-addon { - background-color: #f5f5f5; -} -.input-group-addon, -.btn, -.well, -pre { - border-radius: 0px; -} -.well p:last-child { - margin-bottom: 0px; -} -.pad_top { - padding-top: 15px; -} -.pad_bot { - padding-bottom: 15px; -} -.do_image { - width: 300px; -} -.twitter-tweet { - margin: 0 auto !important; - padding-bottom: 12px !important; - padding-top: 12px !important; -} -.twitter-share-button { - float: left !important; - width: 85px !important; -} -.fb-like { - float: left !important; + +.header h1 { + color: white; + margin: 0 auto; + max-width: 800px; + font-size: 3.5rem; + line-height: 1.2; +} + +.header h2 { + color: white; + margin: 0.5rem auto 0; + max-width: 800px; + font-weight: 300; + font-size: 1.5rem; + opacity: 0.9; } + +/* CTA Section */ .cta { - background-color: #f5f5f5; - font-size: 21px; - font-weight: 300; - margin-bottom: 30px; - padding: 30px 0 30px; + background-color: var(--bg-light); + padding: 3rem 1rem; text-align: center; -} -.cta p:last-child { - margin-bottom: 0; -} -#home .header { - padding-top: 45px; -} -#home .header h1 { - display: inline-block; - position: relative; -} -#home .header h2 { + font-size: 1.3rem; font-weight: 300; - margin-bottom: 20px; - margin-top: 15px; } -#home .header h4 { - font-weight: 300; -} -#home .header h4 .count { - font-weight: 900; -} -#home .btn-primary { - background-color: #1b95e0; - color: #fff; -} -#home pre { - margin-bottom: 30px; + +/* Interactive Section */ +.content { + max-width: 1200px; + margin: 0 auto; + padding: 2rem var(--spacing); } -#about .header { - padding-top: 65px; + +.interactive-section { + max-width: 800px; + margin: 0 auto; } -@media (min-width: 628px) { - #about .header { - padding-top: 80px; + +.api-input { + display: flex; + margin: 1rem 0; + border: 1px solid #ddd; + border-radius: 4px; + overflow: hidden; +} + +.api-prefix { + padding: 0.5rem 1rem; + background: var(--bg-light); + border-right: 1px solid #ddd; + white-space: nowrap; +} + +#interactive { + flex: 1; + padding: 0.5rem; + border: none; + outline: none; +} + +.api-input button { + padding: 0.5rem 1.5rem; + background: var(--link-color); + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s; +} + +.api-input button:hover { + background-color: #1576b3; +} + +.hints { + font-size: 0.9rem; + margin: 1rem 0; +} + +.output { + background: var(--bg-light); + padding: 1rem; + border-radius: 4px; + overflow: auto; + max-height: 400px; + white-space: pre-wrap; + word-break: break-word; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-links { + display: none; } -} -#docs .hide { - display: none; -} -#docs .header { - padding-top: 65px; -} -#docs .container { - margin-top: 20px; -} -@media (min-width: 516px) { - #docs .header { - padding-top: 80px; + + .menu-toggle { + display: block; + } + + .api-input { + flex-direction: column; + } + + .api-prefix { + border-right: none; + border-bottom: 1px solid #ddd; } } -#docs table { - width: 100%; -} -#docs table th:first-child, -#docs table tr:first-child { - width: 140px; -} -#docs table th:last-child, -#docs table tr:last-child { - width: 180px; -} -#docs table th, -#docs table td { - border: 1px solid #ccc; - padding: 8px; -} -#docs h1, -#docs h2, -#docs h3, -#docs h4, -#docs #resourcename { - margin-top: -65px; - padding-top: 65px; -} -#docs .docs-body h1 { - border-bottom: 1px solid #ccc; - margin-bottom: 30px; -} -#docs h3 { - font-weight: 300; -} -#docs h5 { - margin-top: 10px; - font-weight: 600; -} -#docs h6 { - display: none; -} -#docs .side-nav ul { - list-style: none; - margin: 0; - padding: 0; -} -#docs .side-nav ul li ul { - margin-left: 10px; -} -#docs .side-nav .doc-select li a { - box-sizing: border-box; - moz-box-sizing: border-box; - padding-left: 10px; - webkit-box-sizing: border-box; -} -#docs .side-nav .doc-select li.active > a { - border-left: 2px solid #1b95e0; - padding-left: 8px; -} -#docs .side-nav .doc-select li ul { + +.menu-toggle { display: none; + background: none; + border: none; + padding: 1rem; + cursor: pointer; } -#docs .side-nav .doc-select li.active ul { + +.menu-toggle span { display: block; -} -#docs .side-nav hr { - width: 50%; -} -#docs .nav-group { - position: relative; - z-index: 20; -} -#docs .nav-group.stick { - position: fixed; - top: 65px; - z-index: 20; -} -#docs pre { - max-height: 280px; - /*min-height: 40px;*/ - overflow: scroll; + width: 25px; + height: 3px; + background: white; + margin: 4px 0; + transition: 0.3s; } diff --git a/src/js/code.js b/src/js/code.js deleted file mode 100644 index 327ba2e2..00000000 --- a/src/js/code.js +++ /dev/null @@ -1,33 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-unused-vars -function update(call) { - $('#interactive').val(call); - interactive_call(); -} - -function interactive_call() { - var content = $('#interactive').val(); - - if (content == '') { - content = 'spells/acid-arrow/'; - } - - var call_url = 'api/' + content; - - $.ajax({ - dataType: 'json', - url: call_url, - context: document.body, - complete: (data) => { - if (data['status'] == 200) { - var d = $.parseJSON(data['responseText']); - $('#interactive_name').html(d['name'] + ':'); - if (d['name'] === undefined) { - $('#interactive_name').html('this request:'); - } - $('#interactive_output').text(JSON.stringify(d, null, '\t')); - } else if (data['status'] == 404) { - $('#interactive_output').text(data['status'] + ' ' + data['statusText']); - } - }, - }); -} diff --git a/src/public/index.html b/src/public/index.html new file mode 100644 index 00000000..24d8f47e --- /dev/null +++ b/src/public/index.html @@ -0,0 +1,151 @@ + + + + + + D&D 5th Edition API + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

D&D 5e API

+

The 5th Edition Dungeons and Dragons API

+
+ +
+

+ Just a simple api for things within the Official 5th Edition SRD
+ and easily accessible through a modern RESTful API. +

+

Enjoy the D&D 5th Edition API!

+
+ +
+
+

Try it now!

+
+ https://www.dnd5eapi.co/api/ + + +
+ +
+ Need a hint? try + classes/, + features/, + monsters/adult-black-dragon/ + or + spells/?name=Acid+Arrow +
+ +

Resource for Acid Arrow

+ 

+            

+        

+    

+
+    
+    
+
+    
+    
+
+
+
\ No newline at end of file
diff --git a/src/server.ts b/src/server.ts
index 430ab543..7189befa 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -7,7 +7,6 @@ import { createApolloMiddleware } from './middleware/apolloServer.js';
 import { expressMiddleware } from '@apollo/server/express4';
 import express from 'express';
 import { fileURLToPath } from 'url';
-import indexController from './controllers/indexController.js';
 import morgan from 'morgan';
 import docsController from './controllers/docsController.js';
 import path from 'path';
@@ -27,8 +26,6 @@ export default async () => {
   const app = express();
 
   // Middleware stuff
-  app.set('view engine', 'ejs');
-  app.set('views', __dirname + '/views');
   if (bugsnagMiddleware) {
     app.use(bugsnagMiddleware.requestHandler);
   }
@@ -56,7 +53,9 @@ export default async () => {
   );
 
   // Register routes
-  app.get('/', indexController);
+  app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'public/index.html'));
+  });
   app.get('/docs', docsController);
   app.use('/api', apiRoutes);