diff --git a/data/database.js b/data/database.js
new file mode 100644
index 0000000..4570ff2
--- /dev/null
+++ b/data/database.js
@@ -0,0 +1,22 @@
+const mongodb = require('mongodb');
+
+const MongoClient = mongodb.MongoClient;
+
+let database;
+
+async function connectToDatabase() {
+ const client = await MongoClient.connect('mongodb://127.0.0.1:27017')
+ database = client.db('BDS');
+}
+
+function getDb() {
+ if (!database) {
+ throw { message: 'You must connect first!' };
+ }
+ return database;
+}
+
+module.exports = {
+ connectToDatabase: connectToDatabase,
+ getDb: getDb,
+};
diff --git a/doc/TOC.md b/doc/TOC.md
new file mode 100644
index 0000000..72ced7c
--- /dev/null
+++ b/doc/TOC.md
@@ -0,0 +1,37 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com/)
+
+## Getting started
+
+* [Usage](usage.md) — Overview of the project contents.
+* [FAQ](faq.md) — Frequently asked questions along with their answers.
+
+## HTML5 Boilerplate core
+
+* [HTML](html.md) — Guide to the default HTML.
+* [CSS](css.md) — Guide to the default CSS.
+* [JavaScript](js.md) — Guide to the default JavaScript.
+* [Everything else](misc.md).
+
+## Development
+
+* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further with
+ the boilerplate.
+
+## Related projects
+
+The [H5BP organization](https://github.com/h5bp) maintains several projects that
+complement HTML5 Boilerplate, projects that can help you improve different
+aspects of your website/web app (e.g.: the performance, security, etc.).
+
+* [Server Configs](https://github.com/h5bp/server-configs) — Fast and smart
+ configurations for web servers such as Apache and Nginx.
+ * [Apache](https://github.com/h5bp/server-configs-apache)
+ * [Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae)
+ * [Internet Information Services
+ (IIS)](https://github.com/h5bp/server-configs-iis)
+ * [lighttpd](https://github.com/h5bp/server-configs-lighttpd)
+ * [Nginx](https://github.com/h5bp/server-configs-nginx)
+ * [Node.js](https://github.com/h5bp/server-configs-node)
+* [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
+* [create-html5-boilerplate](https://github.com/h5bp/create-html5-boilerplate) — Quick start HTML5 Boilerplate development
+* [main.css](https://github.com/h5bp/main.css) — the main.css file included with HTML5 Boilerplate
diff --git a/doc/css.md b/doc/css.md
new file mode 100644
index 0000000..7297834
--- /dev/null
+++ b/doc/css.md
@@ -0,0 +1,44 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
+table of contents](TOC.md)
+
+# The CSS
+
+HTML5 Boilerplate's CSS includes:
+
+* [Normalize.css](#normalizecss)
+* [main.css](#maincss)
+
+## Normalize.css
+
+In order to make browsers render all elements more consistently and in line with
+modern standards, we include Normalize.css — a modern, HTML5-ready alternative
+to CSS resets.
+
+As opposed to CSS resets, Normalize.css:
+
+* targets only the styles that need normalizing
+* preserves useful browser defaults rather than erasing them
+* corrects bugs and common browser inconsistencies
+* improves usability with subtle improvements
+* doesn't clutter the debugging tools
+* has better documentation
+
+For more information about Normalize.css, please refer to its [project
+page](https://necolas.github.io/normalize.css/).
+
+## main.css
+
+Several base styles are included that build upon `Normalize.css`. These styles:
+
+* provide basic typography settings that improve text readability
+* protect against unwanted `text-shadow` during text highlighting
+* tweak the default alignment of some elements (e.g.: `img`, `video`,
+ `fieldset`, `textarea`)
+* style the prompt that is displayed to users using an outdated browser
+* and more...
+
+These styles are included in
+[main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css).
+See the [main.css](https://github.com/h5bp/main.css) project
+[documentation](https://github.com/h5bp/main.css/blob/master/README.md#features)
+for a full discussion of these styles.
diff --git a/doc/extend.md b/doc/extend.md
new file mode 100644
index 0000000..4dc0040
--- /dev/null
+++ b/doc/extend.md
@@ -0,0 +1,605 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
+table of contents](TOC.md)
+
+# Extend and customise HTML5 Boilerplate
+
+Here is some useful advice for how you can make your project with HTML5
+Boilerplate even better. We don't want to include it all by default, as not
+everything fits with everyone's needs.
+
+* [App Stores](#app-stores)
+* [DNS prefetching](#dns-prefetching)
+* [Google Universal Analytics](#google-universal-analytics)
+* [Internet Explorer](#internet-explorer)
+* [Miscellaneous](#miscellaneous)
+* [News Feeds](#news-feeds)
+* [Search](#search)
+* [Social Networks](#social-networks)
+* [URLs](#urls)
+* [Web Apps](#web-apps)
+* [security.txt](#security.txt)
+
+## App Stores
+
+### Smart App Banners in iOS 6+ Safari
+
+Stop bothering everyone with gross modals advertising your entry in the App
+Store. Including the following [meta
+tag](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)
+will unobtrusively give the user the option to download your iOS app, or open it
+with some data about the user's current state on the website.
+
+```html
+
+```
+
+## DNS prefetching
+
+In short, DNS Prefetching is a method of informing the browser of domain names
+referenced on a site so that the client can resolve the DNS for those hosts,
+cache them, and when it comes time to use them, have a faster turn around on the
+request.
+
+### Implicit prefetches
+
+There is a lot of prefetching done for you automatically by the browser. When
+the browser encounters an anchor in your html that does not share the same
+domain name as the current location the browser requests, from the client OS,
+the IP address for this new domain. The client first checks its cache and then,
+lacking a cached copy, makes a request from a DNS server. These requests happen
+in the background and are not meant to block the rendering of the page.
+
+The goal of this is that when the foreign IP address is finally needed it will
+already be in the client cache and will not block the loading of the foreign
+content. Fewer requests result in faster page load times. The perception of this
+is increased on a mobile platform where DNS latency can be greater.
+
+### Explicit prefetches
+
+Typically the browser only scans the HTML for foreign domains. If you have
+resources that are outside of your HTML (a javascript request to a remote server
+or a CDN that hosts content that may not be present on every page of your site,
+for example) then you can queue up a domain name to be prefetched.
+
+```html
+
+
+```
+
+You can use as many of these as you need, but it's best if they are all
+immediately after the [Meta
+Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
+element (which should go right at the top of the `head`), so the browser can act
+on them ASAP.
+
+#### Common Prefetch Links
+
+Amazon S3:
+
+```html
+
+```
+
+Google APIs:
+
+```html
+
+```
+
+Microsoft Ajax Content Delivery Network:
+
+```html
+
+
+```
+
+### Further reading about DNS prefetching
+
+* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
+* https://dev.chromium.org/developers/design-documents/dns-prefetching
+* https://docs.microsoft.com/en-us/archive/blogs/ie/internet-explorer-9-network-performance-improvements
+
+## Google Universal Analytics
+
+### More tracking settings
+
+The [optimized Google Universal Analytics
+snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
+included with HTML5 Boilerplate includes something like this:
+
+```js
+ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
+```
+
+To customize further, see Google's [Advanced
+Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/),
+[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages),
+and
+[Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events)
+Docs.
+
+### Track jQuery AJAX requests in Google Analytics
+
+An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
+Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
+
+Add this to `plugins.js`:
+
+```js
+/*
+ * Log all jQuery AJAX requests to Google Analytics
+ * See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
+ */
+if (typeof ga !== "undefined" && ga !== null) {
+ $(document).ajaxSend(function(event, xhr, settings){
+ ga('send', 'pageview', settings.url);
+ });
+}
+```
+
+### Track JavaScript errors in Google Analytics
+
+Add this function after `ga` is defined:
+
+```js
+(function(window){
+ var undefined,
+ link = function (href) {
+ var a = window.document.createElement('a');
+ a.href = href;
+ return a;
+ };
+ window.onerror = function (message, file, line, column) {
+ var host = link(file).hostname;
+ ga('send', {
+ 'hitType': 'event',
+ 'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
+ 'eventAction': message,
+ 'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
+ 'nonInteraction': 1
+ });
+ };
+}(window));
+```
+
+### Track page scroll
+
+Add this function after `ga` is defined. Note, the following snippet requires jQuery.
+
+```js
+$(function(){
+ var isDuplicateScrollEvent,
+ scrollTimeStart = new Date,
+ $window = $(window),
+ $document = $(document),
+ scrollPercent;
+
+ $window.scroll(function() {
+ scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
+ if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
+ isDuplicateScrollEvent = 1;
+ ga('send', 'event', 'scroll',
+ 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
+ );
+ }
+ });
+});
+```
+
+## Internet Explorer
+
+### IE Pinned Sites
+
+Enabling your application for pinning will allow IE users to add it to their
+Windows Taskbar and Start Menu. This comes with a range of new tools that you
+can easily configure with the elements below. See more [documentation on IE
+Pinned
+Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg491731(v%3dvs.85)).
+
+### Name the Pinned Site for Windows
+
+Without this rule, Windows will use the page title as the name for your
+application.
+
+```html
+
+```
+
+### Give your Pinned Site a tooltip
+
+You know — a tooltip. A little textbox that appears when the user holds their
+mouse over your Pinned Site's icon.
+
+```html
+
+```
+
+### Set a default page for your Pinned Site
+
+If the site should go to a specific URL when it is pinned (such as the
+homepage), enter it here. One idea is to send it to a special URL so you can
+track the number of pinned users, like so:
+`https://www.example.com/index.html?pinned=true`
+
+```html
+
+```
+
+### Recolor IE's controls manually for a Pinned Site
+
+IE will automatically use the overall color of your Pinned Site's favicon to
+shade its browser buttons. UNLESS you give it another color here. Only use named
+colors (`red`) or hex colors (`#ff0000`).
+
+```html
+
+```
+
+### Manually set the window size of a Pinned Site
+
+If the site should open at a certain window size once pinned, you can specify
+the dimensions here. It only supports static pixel dimensions. 800x600 minimum.
+
+```html
+
+```
+
+### Jump List "Tasks" for Pinned Sites
+
+Add Jump List Tasks that will appear when the Pinned Site's icon gets a
+right-click. Each Task goes to the specified URL, and gets its own mini icon
+(essentially a favicon, a 16x16 .ICO). You can add as many of these as you need.
+
+```html
+
+
+```
+
+### (Windows 8) High quality visuals for Pinned Sites
+
+Windows 8 adds the ability for you to provide a PNG tile image and specify the
+tile's background color. [Full details on the IE
+blog](https://docs.microsoft.com/en-us/archive/blogs/ie/high-quality-visuals-for-pinned-sites-in-windows-8).
+
+* Create a 144x144 image of your site icon, filling all of the canvas, and using
+ a transparent background.
+* Save this image as a 32-bit PNG and optimize it without reducing colour-depth.
+ It can be named whatever you want (e.g. `metro-tile.png`).
+* To reference the tile and its color, add the HTML `meta` elements described in
+ the IE Blog post.
+
+### (Windows 8) Badges for Pinned Sites
+
+IE will poll an XML document for badge information to display on your app's tile
+in the Start screen. The user will be able to receive these badge updates even
+when your app isn't actively running. The badge's value can be a number, or one
+of a predefined list of glyphs.
+
+* [Tutorial on IEBlog with link to badge XML
+schema](https://docs.microsoft.com/en-us/archive/blogs/ie/pinned-sites-in-windows-8)
+* [Available badge
+ values](https://docs.microsoft.com/en-us/uwp/schemas/tiles/badgeschema/element-badge)
+
+```html
+
+```
+
+## Search
+
+### Direct search spiders to your sitemap
+
+After creating a [sitemap](https://www.sitemaps.org/protocol.html)
+
+Submit it to search engine tool:
+* [Google](https://www.google.com/webmasters/tools/sitemap-list)
+* [Bing](https://www.bing.com/toolbox/webmaster)
+* [Yandex](https://webmaster.yandex.com/)
+* [Baidu](https://zhanzhang.baidu.com/) OR Insert the following line anywhere in
+ your robots.txt file, specifying the path to your sitemap:
+```
+Sitemap: https://example.com/sitemap_location.xml
+```
+
+### Hide pages from search engines
+
+According to Heather Champ, former community manager at Flickr, you should not
+allow search engines to index your "Contact Us" or "Complaints" page if you
+value your sanity. This is an HTML-centric way of achieving that.
+
+```html
+
+```
+
+**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
+
+### Firefox and IE Search Plugins
+
+Sites with in-site search functionality should be strongly considered for a
+browser search plugin. A "search plugin" is an XML file which defines how your
+plugin behaves in the browser. [How to make a browser search
+plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
+
+```html
+
+```
+
+
+## Miscellaneous
+
+* Use
+ [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
+
+* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
+ [microdata](http://microformats.org/wiki/microdata)) for optimum search
+ results
+ [visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html).
+
+* If you want to disable the translation prompt in Chrome or block Google
+ Translate from translating your web page, use [``](https://support.google.com/webmasters/answer/79812).
+ To disable translation for a particular section of the web page, add
+ [`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276).
+
+* If you want to disable the automatic detection and formatting of possible
+ phone numbers in Safari on iOS, use [``](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html).
+
+* Avoid development/stage websites "leaking" into SERPs (search engine results
+ page) by [implementing X-Robots-tag
+ headers](https://github.com/h5bp/html5-boilerplate/issues/804).
+
+
+## News Feeds
+
+### RSS
+
+Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
+scratch](https://www.rssboard.org/rss-specification)?
+
+```html
+
+```
+
+### Atom
+
+Atom is similar to RSS, and you might prefer to use it instead of or in addition
+to it. [See what Atom's all
+about](https://en.wikipedia.org/wiki/Atom_(Web_standard)).
+
+```html
+
+```
+
+### Pingbacks
+
+Your server may be notified when another site links to yours. The href attribute
+should contain the location of your pingback service.
+
+```html
+
+```
+
+* High-level explanation:
+ https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
+* Step-by-step example case:
+ https://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
+* PHP pingback service:
+ https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
+
+
+
+## Social Networks
+
+### Facebook Open Graph data
+
+You can control the information that Facebook and others display when users
+share your site. Below are just the most basic data points you might need. For
+specific content types (including "website"), see [Facebook's built-in Open
+Graph content
+templates](https://developers.facebook.com/docs/sharing/opengraph/using-objects).
+Take full advantage of Facebook's support for complex data and activity by
+following the [Open Graph
+tutorial](https://developers.facebook.com/docs/sharing/webmasters/getting-started).
+
+For a reference of Open Graph's markup and properties, you may check [Facebook's
+Open Graph Protocol reference](https://ogp.me). Finally, you can validate your
+markup with the [Facebook Object
+Debugger](https://developers.facebook.com/tools/debug/) (needs registration to
+Facebook).
+
+```html
+
+
+
+
+
+
+
+
+```
+
+### Twitter Cards
+
+Twitter provides a snippet specification that serves a similar purpose to Open
+Graph. In fact, Twitter will use Open Graph when Cards is not available. You can
+read more about the various snippet formats in the
+[official Twitter Cards
+documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards),
+and you can validate your markup with the [Card
+validator](https://cards-dev.twitter.com/validator) (needs registration to
+Twitter).
+
+```html
+
+
+
+
+
+
+
+```
+
+### Schema.org
+
+Google also provides a snippet specification that serves a similar purpose to
+Facebook's Open Graph or Twitter Cards. This metadata is a subset of
+[schema.org's microdata vocabulary](https://schema.org/), which covers many
+other schemas that can describe the content of your pages to search engines. For
+this reason, this metadata is more generic for SEO, notably for Google's
+search-engine, although this vocabulary is also used by Microsoft, Pinterest and
+Yandex.
+
+You can validate your markup with the [Structured Data Testing
+Tool](https://search.google.com/structured-data/testing-tool). Also, please
+note that this markup requires to add attributes to your top `html` tag.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## URLs
+
+### Canonical URL
+
+Signal to search engines and others "Use this URL for this page!" Useful when
+parameters after a `#` or `?` is used to control the display state of a page.
+`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
+the cleaner, more accurate `https://www.example.com/cart.html`.
+
+```html
+
+```
+
+### Separate mobile URLs
+
+If you use separate URLs for desktop and mobile users, you should consider
+helping search engine algorithms better understand the configuration on your web
+site.
+
+This can be done by adding the following annotations in your HTML pages:
+
+* on the desktop page, add the `link rel="alternate"` tag pointing to the
+ corresponding mobile URL, e.g.:
+
+ ``
+
+* on the mobile page, add the `link rel="canonical"` tag pointing to the
+ corresponding desktop URL, e.g.:
+
+ ``
+
+For more information please see:
+
+* https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls
+
+
+## Web Apps
+
+There are a couple of meta tags that provide information about a web app when
+added to the Home Screen on iOS:
+
+* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
+ provide the default iOS app view. You can control the color scheme of the
+ default view by adding `apple-mobile-web-app-status-bar-style`.
+
+```html
+
+
+```
+
+* You can use `apple-mobile-web-app-title` to add a specific sites name for the
+ Home Screen icon.
+
+```html
+
+```
+
+For further information please read the [official
+documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
+on Apple's site.
+
+
+### Apple Touch Icons
+
+Apple touch icons are used as icons when a user adds your webapp to the home
+screen of an iOS devices.
+
+Though the dimensions of the icon can vary between iOS devices and versions one
+`180×180px` touch icon named `icon.png` and including the following in the
+`` of the page is enough:
+
+```html
+
+```
+
+For a more comprehensive overview, please refer to Mathias' [article on Touch
+Icons](https://mathiasbynens.be/notes/touch-icons).
+
+
+### Apple Touch Startup Image
+
+Apart from that it is possible to add start-up screens for web apps on iOS. This
+basically works by defining `apple-touch-startup-image` with an according link
+to the image. Since iOS devices have different screen resolutions it maybe
+necessary to add media queries to detect which image to load. Here is an example
+for an iPhone:
+
+```html
+
+```
+
+
+### Chrome Mobile web apps
+
+Chrome Mobile has a specific meta tag for making apps [installable to the
+homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen)
+which tries to be a more generic replacement to Apple's proprietary meta tag:
+
+```html
+
+```
+
+Same applies to the touch icons:
+
+```html
+
+```
+
+### Theme Color
+
+You can add the [`theme-color` meta
+extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color)
+in the `` of your pages to suggest the color that browsers and OSes should
+use if they customize the display of individual pages in their UIs with varying
+colors.
+
+```html
+
+```
+
+The `content` attribute extension can take any valid CSS color.
+
+Currently, the `theme-color` meta extension is supported by [Chrome 39+ for
+Android
+Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
+
+
+## security.txt
+
+When security risks in web services are discovered by users they often lack the
+channels to disclose them properly. As a result, security issues may be left
+unreported.
+
+Security.txt defines a standard to help organizations define the process for
+users to disclose security vulnerabilities securely. Include a text file on your
+server at `.well-known/security.txt` with the relevant contact details.
+
+Check [https://securitytxt.org/](https://securitytxt.org/) for more details.
diff --git a/doc/faq.md b/doc/faq.md
new file mode 100644
index 0000000..5a85e7d
--- /dev/null
+++ b/doc/faq.md
@@ -0,0 +1,42 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
+table of contents](TOC.md)
+
+# Frequently asked questions
+
+* [Why is the Google Analytics code at the bottom? Google recommends it be
+ placed in the
+ ``.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head)
+* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is
+ released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released)
+* [Where can I get help with support
+ questions?](#where-can-i-get-help-with-support-questions)
+
+---
+
+## Why is the Google Analytics code at the bottom? Google recommends it be placed in the ``.
+
+The main advantage of placing it in the `` is that you will track the
+user's `pageview` even if they leave the page before it has been fully loaded.
+
+Here's a handy quote from [Mathias
+Bynens](https://mathiasbynens.be/notes/async-analytics-snippet#comment-50) about
+our placement choice.
+>I should point out that it’s Google — not me — recommending to place this
+script before all other scripts in the document. The only real advantage is to
+catch a pageView call if your page fails to load completely (for example, if the
+user aborts loading, or quickly closes the page, etc.). Personally, I wouldn’t
+count that as a page view, so I actually prefer to place this script at the
+bottom, after all other scripts. This keeps all the scripts together and
+reinforces that scripts at the bottom are the right move. (Usually I concatenate
+and minify all my scripts into one .js file — the GA snippet being the suffix.)
+
+## Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released?
+
+No, just as you don't normally replace the foundation of a house once it was
+built. However, there is nothing stopping you from trying to work in the latest
+changes, but you'll have to assess the costs/benefits of doing so.
+
+## Where can I get help with support questions?
+
+Please ask for help on
+[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate).
diff --git a/doc/html.md b/doc/html.md
new file mode 100644
index 0000000..7c9158d
--- /dev/null
+++ b/doc/html.md
@@ -0,0 +1,253 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
+table of contents](TOC.md)
+
+# The HTML
+
+By default, HTML5 Boilerplate provides two `html` pages:
+
+* [`index.html`](#indexhtml) - a default HTML skeleton that should form the
+ basis of all pages on your website
+* `404.html` - a placeholder 404 error page
+
+## `index.html`
+
+### The `no-js` Class
+
+The `no-js` class is provided in order to allow you to more easily and
+explicitly add custom styles based on whether JavaScript is disabled (`.no-js`)
+or enabled (`.js`). Using this technique also helps [avoid the
+FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/).
+
+### Language Attribute
+
+Please consider specifying the language of your content by adding a
+[value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
+to the `lang` attribute in the `` as in this example:
+
+```html
+
+```
+
+### The order of the `` and `<meta>` tags
+
+The charset declaration (`<meta charset="utf-8">`) must be included completely
+within the [first 1024 bytes of the
+document](https://html.spec.whatwg.org/multipage/semantics.html#charset)
+and should be specified as early as possible (before any content that could be
+controlled by an attacker, such as a `<title>` element) in order to avoid a
+potential [encoding-related security
+issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki)
+in Internet Explorer
+
+### Meta Description
+
+The `description` meta tag provides a short description of the page. In some
+situations this description is used as a part of the snippet shown in the search
+results.
+
+```html
+<meta name="description" content="This is a description">
+```
+
+Google's [Create good meta
+descriptions](https://support.google.com/webmasters/answer/35624?hl=en#meta-descriptions)
+documentation has useful tips on creating an effective description.
+
+### Mobile Viewport
+
+There are a few different options that you can use with the [`viewport` meta
+tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
+Media Queries - The Complete Idiot's Guide"). You can find out more in [the MDN
+Web
+Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
+HTML5 Boilerplate comes with a simple setup that strikes a good balance for
+general use cases.
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+
+If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you
+can do so with additional viewport parameters. [Check the WebKit
+blog](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) for
+details.
+
+### Open Graph Metadata
+
+The [Open Graph Protocol](https://ogp.me/) allows you to define the way your
+site is presented when referenced on third party sites and applications
+(Facebook, Twitter, LinkedIn). The protocol provides a series of meta elements
+that define the details of your site. The required attributes define the title,
+preview image, URL, and [type](https://ogp.me/#types) (e.g., video, music,
+website, article).
+
+``` html
+<meta property="og:title" content="">
+<meta property="og:type" content="">
+<meta property="og:url" content="">
+<meta property="og:image" content="">
+```
+
+In addition to these four attributes there are many more attributes you can use
+to add more richness to the description of your site. This just represents the
+most basic implementation.
+
+To see a working example, the following is the open graph metadata for the HTML5
+Boilerplate site. In addition to the required fields we add `og:description` to
+describe the site in more detail.
+
+``` html
+<meta name="og:url" content="https://html5boilerplate.com/">
+<meta name="og:title" content="HTML5 ★ BOILERPLATE">
+<meta name="og:type" content="website">
+<meta name="og:description" content="The web’s most popular front-end template which helps you build fast, robust, and adaptable web apps or sites.">
+<meta name="og:image" content="https://html5boilerplate.com/icon.png">
+```
+
+### Web App Manifest
+
+HTML5 Boilerplate includes a simple web app manifest file.
+
+The web app manifest is a simple JSON file that allows you to control how your
+app appears on a device's home screen, what it looks like when it launches in
+that context and what happens when it is launched. This allows for much greater`
+control over the UI of a saved site or web app on a mobile device.
+
+It's linked to from the HTML as follows:
+
+```html
+<link rel="manifest" href="site.webmanifest">
+```
+
+Our
+[site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest)
+contains a very skeletal "app" definition, just to show the basic usage. You
+should fill this file out with [more information about your site or
+application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
+
+### Favicons and Touch Icon
+
+The shortcut icons should be put in the root directory of your site.
+`favicon.ico` is automatically picked up by browsers if it's placed in the root.
+HTML5 Boilerplate comes with a default set of icons (include favicon and one
+Apple Touch Icon) that you can use as a baseline to create your own.
+
+Please refer to the more detailed description in the [Extend section](extend.md)
+of these docs.
+
+### The Content Area
+
+The central part of the boilerplate template is pretty much empty. This is
+intentional, in order to make the boilerplate suitable for both web page and web
+app development.
+
+### Modernizr
+
+HTML5 Boilerplate uses a custom build of Modernizr.
+
+[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes
+to the `html` element based on the results of feature test and which ensures
+that all browsers can make use of HTML5 elements (as it includes the HTML5
+Shiv). This allows you to target parts of your CSS and JavaScript based on the
+features supported by a browser.
+
+Starting with version 3 Modernizr can be customized using the
+[modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json)
+and the [Modernizr command line
+utility](https://www.npmjs.com/package/modernizr-cli).
+
+### What About Polyfills?
+
+If you need to include
+[polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill) in your
+project, you must make sure those load before any other JavaScript. If you're
+using a polyfill CDN service, like [polyfill.io](https://polyfill.io/v3/), just put
+it before the other scripts in the bottom of the page:
+
+```html
+ <script src="js/vendor/modernizr-3.10.0.min.js"></script>
+ <script src="https://polyfill.io/v3/polyfill.min.js"></script>
+ <script src="js/plugins.js"></script>
+ <script src="js/main.js"></script>
+</body>
+```
+
+If you like to just include the polyfills yourself, you could include them in
+`js/plugins.js`. When you have a bunch of polyfills to load in, you could also
+create a `polyfills.js` file in the `js/vendor` directory or include the files
+individually and combine them using a build tool. Always ensure that the
+polyfills are all loaded before any other JavaScript.
+
+There are some misconceptions about Modernizr and polyfills. It's important to
+understand that Modernizr just handles feature checking, not polyfilling itself.
+The only thing Modernizr does regarding polyfills is that the team maintains [a
+huge list of cross Browser
+polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills).
+
+### jQuery
+
+As of v8.0.0 we no longer include jQuery by default. Web development has
+changed a lot since we started this project and while many millions of sites
+still use jQuery there are many sites and applications that don't. 10 years ago
+jQuery _was_ JavaScript for most developers. That's not the case any more so
+we've made the decision to remove jQuery from the project.
+
+If you're interested in including it, you can easily install jQuery using the
+following command:
+
+```
+npm install jQuery
+```
+
+You can then copy the minified file into the `vendor` folder and add jQuery
+to the `index.html` manually.
+
+To load jQuery from a CDN with a local fallback you can use the following:
+
+``` html
+<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.5.1.min.js"><\/script>')</script>
+```
+
+### Google Universal Analytics Tracking Code
+
+Finally, an optimized version of the Google Universal Analytics tracking code is
+included.
+
+We use `analytics.js` rather than the newer `gtag.js` as [it's faster and
+supports tasks and
+plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
+
+Starting with version 8.0.0 we, by default, [anonymize IP
+addresses](https://support.google.com/analytics/answer/2763052). By
+default Google Analytics records the full IP address of a user visiting the
+site, but that full IP address is never available to the Google Analytics
+property admin. By anonymizing the IP address you can make your site more
+GDPR-compliant as a full IP address can be defined as PII (personally
+identifiable information.)
+
+The beacon transport mechanism is used to send all hits [which saves HTTP
+requests and improves
+performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
+
+Google recommends that this script be placed at the top of the page. Factors to
+consider: if you place this script at the top of the page, you’ll be able to
+count users who don’t fully load the page, and you’ll incur the max number of
+simultaneous connections of the browser.
+
+Please be aware that while Google [states that it is fully GDPR compliant](https://privacy.google.com/businesses/compliance/),
+it is still possible to use analytics to violate GDPR.
+
+Further information:
+
+* [Introduction to
+ Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
+* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
+* [Privacy Controls in Google Analytics](https://support.google.com/analytics/answer/9019185)
+
+**N.B.** The Google Analytics snippet is included by default mainly because
+Google Analytics is [currently one of the most popular tracking
+solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
+However, its usage isn't set in stone, and you SHOULD consider exploring the
+[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software) and
+use whatever suits your needs best.
diff --git a/doc/js.md b/doc/js.md
new file mode 100644
index 0000000..4d3e553
--- /dev/null
+++ b/doc/js.md
@@ -0,0 +1,35 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
+table of contents](TOC.md)
+
+# The JavaScript
+
+Information about the default JavaScript included in the project.
+
+## main.js
+
+This file can be used to contain or reference your site/app JavaScript code. If
+you're working on something more advanced you might replace this file entirely.
+That's cool.
+
+## plugins.js
+
+This file can be used to contain all your plugins, such as jQuery plugins and
+other 3rd party scripts for a simple site.
+
+One approach is to put jQuery plugins inside of a `(function($){ ...})(jQuery);`
+closure to make sure they're in the jQuery namespace safety blanket. Read more
+about [jQuery plugin authoring](https://learn.jquery.com/plugins/).
+
+By default the `plugins.js` file contains a small script to avoid `console`
+errors in browsers that lack a `console`. The script will make sure that, if a
+console method isn't available, that method will have the value of empty
+function, thus, preventing the browser from throwing an error.
+
+## vendor
+
+This directory can be used to contain all 3rd party library code.
+
+Our custom build of the Modernizr library is included by
+default. You may wish to create your own [custom Modernizr build with the online
+builder](https://modernizr.com/download/) or [command line
+tool](https://modernizr.com/docs#command-line-config).
diff --git a/doc/misc.md b/doc/misc.md
new file mode 100644
index 0000000..00c98ba
--- /dev/null
+++ b/doc/misc.md
@@ -0,0 +1,203 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
+table of contents](TOC.md)
+
+# Miscellaneous
+
+* [.gitignore](#gitignore)
+* [.editorconfig](#editorconfig)
+* [Server Configuration](#server-configuration)
+* [robots.txt](#robotstxt)
+* [humans.txt](#humanstxt)
+* [browserconfig.xml](#browserconfigxml)
+* [package.json](#packagejson)
+
+--
+
+## .gitignore
+
+HTML5 Boilerplate includes a basic project-level `.gitignore`. This should
+primarily be used to avoid certain project-level files and directories from
+being kept under source control. Different development-environments will
+benefit from different collections of ignores.
+
+OS-specific and editor-specific files should be ignored using a "global
+ignore" that applies to all repositories on your system.
+
+For example, add the following to your `~/.gitconfig`, where the `.gitignore`
+in your HOME directory contains the files and directories you'd like to
+globally ignore:
+
+```gitignore
+[core]
+ excludesfile = ~/.gitignore
+```
+
+* More on global ignores: [https://help.github.com/articles/ignoring-files/](https://help.github.com/en/github/using-git/ignoring-files)
+* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
+
+## .editorconfig
+
+The `.editorconfig` file is provided in order to encourage and help you and
+your team define and maintain consistent coding styles between different
+editors and IDEs.
+
+By default, `.editorconfig` includes some basic
+[properties](https://editorconfig.org/#supported-properties) that reflect the
+coding styles from the files provided by default, but you can easily change
+them to better suit your needs.
+
+In order for your editor/IDE to apply the
+[properties](https://editorconfig.org/#supported-properties) from the
+`.editorconfig` file, you may need to [install a
+plugin]( https://editorconfig.org/#download).
+
+__N.B.__ If you aren't using the server configurations provided by HTML5
+Boilerplate, we highly encourage you to configure your server to block
+access to `.editorconfig` files, as they can disclose sensitive information!
+
+For more details, please refer to the [EditorConfig
+project](https://editorconfig.org/).
+
+## Server Configuration
+
+H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP
+server](https://httpd.apache.org/docs/). If you are not using Apache
+as your web server, then you are encouraged to download a
+[server configuration](https://github.com/h5bp/server-configs) that
+corresponds to your web server and environment.
+
+A `.htaccess` (hypertext access) file is an [Apache HTTP server
+configuration file](https://github.com/h5bp/server-configs-apache).
+The `.htaccess` file is mostly used for:
+
+* Rewriting URLs
+* Controlling cache
+* Authentication
+* Server-side includes
+* Redirects
+* Gzipping
+
+If you have access to the main server configuration file (usually called
+`httpd.conf`), you should add the logic from the `.htaccess` file in, for
+example, a `<Directory>` section in the main configuration file. This is usually
+the recommended way, as using .htaccess files slows down Apache!
+
+To enable Apache modules locally, please see [the Apache modules documentation](https://github.com/h5bp/server-configs-apache#enable-apache-httpd-modules)
+
+In the repo the `.htaccess` is used for:
+
+* Allowing cross-origin access to web fonts
+* CORS header for images when browsers request it
+* Enable `404.html` as 404 error document
+* Making the website experience better for IE users better
+* Media UTF-8 as character encoding for `text/html` and `text/plain`
+* Enabling the rewrite URLs engine
+* Forcing or removing the `www.` at the begin of a URL
+* It blocks access to directories without a default document
+* It blocks access to files that can expose sensitive information.
+* It reduces MIME type security risks
+* It forces compressing (gzipping)
+* It tells the browser whether they should request a specific file from the
+ server or whether they should grab it from the browser's cache
+
+When using `.htaccess` we recommend reading all inline comments (the rules after
+a `#`) in the file once. There is a bunch of optional stuff in it.
+
+If you want to know more about the `.htaccess` file check out the
+[Apache HTTP server docs](https://httpd.apache.org/docs/) or more
+specifically the [htaccess
+section](https://httpd.apache.org/docs/current/howto/htaccess.html).
+
+Notice that the original repo for the `.htaccess` file is [this
+one](https://github.com/h5bp/server-configs-apache).
+
+## robots.txt
+
+The `robots.txt` file is used to give instructions to web robots on what can
+be crawled from the website.
+
+By default, the file provided by this project includes the next two lines:
+
+* `User-agent: *` - the following rules apply to all web robots
+* `Disallow:` - everything on the website is allowed to be crawled
+
+If you want to disallow certain pages you will need to specify the path in a
+`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow
+crawling of all content, use `Disallow: /`.
+
+The `/robots.txt` file is not intended for access control, so don't try to
+use it as such. Think of it as a "No Entry" sign, rather than a locked door.
+URLs disallowed by the `robots.txt` file might still be indexed without being
+crawled, and the content from within the `robots.txt` file can be viewed by
+anyone, potentially disclosing the location of your private content! So, if
+you want to block access to private content, use proper authentication instead.
+
+For more information about `robots.txt`, please see:
+
+* [robotstxt.org](https://www.robotstxt.org/)
+* [How Google handles the `robots.txt` file](https://developers.google.com/search/reference/robots_txt)
+
+## humans.txt
+
+The `humans.txt` file is used to provide information about people involved with
+the website.
+
+The provided file contains three sections:
+
+* `TEAM` - this is intended to list the group of people responsible for the website
+* `THANKS` - this is intended to list the group of people that have contributed
+ to the website
+* `TECHNOLOGY COLOPHON` - the section lists technologies used to make the website
+
+For more information about `humans.txt`, please see: http://humanstxt.org/
+
+## browserconfig.xml
+
+The `browserconfig.xml` file is used to customize the tile displayed when users
+pin your site to the Windows 8.1 start screen. In there you can define custom
+tile colors, custom images or even [live tiles](https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn455106(v=vs.85)).
+
+By default, the file points to 2 placeholder tile images:
+
+* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles.
+ This image resizes automatically when necessary.
+* `tile-wide.png` (558x270px): user for `Wide` tiles.
+
+Notice that IE11 uses the same images when adding a site to the `favorites`.
+
+For more in-depth information about the `browserconfig.xml` file, please
+see [MSDN](https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
+
+## package.json
+
+`package.json` is used to define attributes of your site or application for
+use in modern JavaScript development. [The full documentation is available](https://docs.npmjs.com/files/package.json)
+if you're interested. The fields we provide are as follows:
+
+* `title` - the title of your project. If you expect to publish your application
+ to npm, then the name needs to follow [certain guidelines](https://docs.npmjs.com/files/package.json#name)
+ and be unique.
+* `version` - indicates the version of your site application using semantic
+ versioning ([semver](https://docs.npmjs.com/misc/semver))
+* `description` - describes your site.
+* `scripts` - is a JavaScript object containing commands that can be run in a
+ node environment. There are many [built-in keys](https://docs.npmjs.com/misc/scripts)
+ related to the package lifecycle that node understands automatically. You can
+ also define custom scripts for use with your application development. We
+ provide three custom scripts that work with Parcel to get you up and running
+ quickly with a bundler for your assets and a simple development server.
+
+ * `start` builds your site and starts a server
+ * `build` builds your `index.html` using Parcel
+ * `dev` serves your `index.html` with a simple development server
+
+* `keywords` - an array of keywords used to discover your app in the npm
+ registry
+* `author` - defines the author of a package. There is also an alternative
+ [contributors](https://docs.npmjs.com/files/package.json#people-fields-author-contributors)
+ field if there's more than one author.
+* `license` - the license for your application. Must conform to
+ [specific rules](https://docs.npmjs.com/files/package.json#license)
+* `devDependencies` - development dependencies for your package. In our case
+ it's a single dependency, Parcel, which we use to bundle files and run a
+ simple web server.
diff --git a/doc/usage.md b/doc/usage.md
new file mode 100644
index 0000000..1469a93
--- /dev/null
+++ b/doc/usage.md
@@ -0,0 +1,136 @@
+[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
+table of contents](TOC.md)
+
+# Usage
+
+The most basic usage of HTML5 Boilerplate is to create a static site or simple
+app. Once you've downloaded or cloned the project, that process looks something
+like this:
+
+1. Set up the basic structure of the site.
+2. Add some content, style, and functionality.
+3. Run your site locally to see how it looks.
+4. Deploy your site.
+
+Cool, right? _It is_. That said, the smart defaults, baseline elements, default
+attribute values and various other utilities that HTML5 Boilerplate offers can
+serve as the foundation for whatever you're interested in building.
+
+Even the basic use-case of a simple static site can be enhanced by manipulating
+the code through an automated build process. Moving up in complexity HTML5
+Boilerplate can be integrated with whatever front-end framework, CMS or
+e-commerce platform you're working with. Mix-and-match to your heart's content.
+Use what you need (toss it in a blender if you need to) and discard the rest.
+HTML5 Boilerplate is a starting point, not a destination.
+
+## Basic structure
+
+A basic HTML5 Boilerplate site initially looks something like this:
+
+```
+.
+├── css
+│ ├── main.css
+│ └── normalize.css
+├── doc
+├── img
+├── js
+│ ├── main.js
+│ ├── plugins.js
+│ └── vendor
+│ └── modernizr.min.js
+├── .editorconfig
+├── .htaccess
+├── 404.html
+├── browserconfig.xml
+├── favicon.ico
+├── humans.txt
+├── icon.png
+├── index.html
+├── package.json
+├── robots.txt
+├── site.webmanifest
+├── tile.png
+└── tile-wide.png
+```
+
+What follows is a general overview of each major part and how to use them.
+
+### css
+
+This directory should contain all your project's CSS files. It includes some
+initial CSS to help get you started from a solid foundation. [About the
+CSS](css.md).
+
+### doc
+
+This directory contains all the HTML5 Boilerplate documentation. You can use it
+as the location and basis for your own project's documentation.
+
+### js
+
+This directory should contain all your project's JS files. Libraries, plugins,
+and custom code can all be included here. It includes some initial JS to help
+get you started. [About the JavaScript](js.md).
+
+### .htaccess
+
+The default web server configs are for Apache. For more information, please
+refer to the [Apache Server Configs
+repository](https://github.com/h5bp/server-configs-apache).
+
+Host your site on a server other than Apache? You're likely to find the
+corresponding server configs project listed in our [Server
+Configs](https://github.com/h5bp/server-configs/blob/master/README.md)
+repository.
+
+### 404.html
+
+A helpful custom 404 to get you started.
+
+### browserconfig.xml
+
+This file contains all settings regarding custom tiles for IE11 and Edge.
+
+For more info on this topic, please refer to [Microsoft's
+Docs](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
+
+### .editorconfig
+
+The `.editorconfig` file is provided in order to encourage and help you and your
+team to maintain consistent coding styles between different editors and IDEs.
+[Read more about the `.editorconfig` file](misc.md#editorconfig).
+
+### index.html
+
+This is the default HTML skeleton that should form the basis of all pages on
+your site. If you are using a server-side templating framework, then you will
+need to integrate this starting HTML with your setup.
+
+Make sure that you update the URLs for the referenced CSS and JavaScript if you
+modify the directory structure at all.
+
+If you are using Google Universal Analytics, make sure that you edit the
+corresponding snippet at the bottom to include your analytics ID.
+
+### humans.txt
+
+Edit this file to include the team that worked on your site/app, and the
+technology powering it.
+
+### package.json
+
+Edit this file to describe your application, add dependencies, scripts and
+other properties related to node based development and the npm registry
+
+### robots.txt
+
+Edit this file to include any pages you need hidden from search engines.
+
+### Icons
+
+Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple Touch
+Icon with your own.
+
+If you want to use different Apple Touch Icons for different resolutions please
+refer to the [according documentation](extend.md#apple-touch-icons).
diff --git a/middlewares/auth-middleware.js b/middlewares/auth-middleware.js
new file mode 100644
index 0000000..c6af7c8
--- /dev/null
+++ b/middlewares/auth-middleware.js
@@ -0,0 +1,23 @@
+const db = require("../data/database");
+
+
+
+async function auth (req, res, next) {
+ const user = req.session.user;
+ const isAuth = req.session.isAuthenticated;
+
+ if (!user || !isAuth) {
+ return next();
+ }
+
+ const userDoc = await db.getDb().collection('users').findOne({_id: user.id})
+ const isAdmin = userDoc.isAdmin;
+
+ res.locals.user = userDoc;
+ res.locals.isAuth = isAuth;
+ res.locals.isAdmin = isAdmin;
+
+ next();
+}
+
+module.exports = auth
\ No newline at end of file
diff --git a/models/post.js b/models/post.js
new file mode 100644
index 0000000..ee5fc25
--- /dev/null
+++ b/models/post.js
@@ -0,0 +1,30 @@
+const db = require('../data/database')
+const mongodb = require('mongodb')
+
+class Post {
+ constructor(title, content, id) {
+ this.title = title;
+ this.content = content;
+ if (id) {
+ this.id = new objectId
+ }
+ }
+ async insert() {
+ let result
+ if (this.id) {
+ result = await db.getDb().collection('posts').updateOne(
+ {_id: this.id},
+ {$set: {title: this.title, content: this.content}}
+ )
+ } else {
+ result = await db.getDb().collection('posts').insertOne({
+ title: this.title,
+ content: this.content,
+ });
+ }
+
+ return result
+ }
+}
+
+module.exports = Post;
\ No newline at end of file
diff --git a/public/css/401.css b/public/css/401.css
new file mode 100644
index 0000000..a706e91
--- /dev/null
+++ b/public/css/401.css
@@ -0,0 +1,26 @@
+body {
+ background-image: url("/img/logo_dos.png");
+ width: 100%;
+ flex-direction: column;
+ background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */
+ background-repeat: no-repeat; /* Empêche la répétition de l'image */
+ background-attachment: fixed; /* Fixe l'image en position de fond */
+ position: absolute;
+}
+
+#first_div {
+ margin: 10rem 3rem 12rem 3rem;
+ padding: 2rem 2rem 15rem 2rem;
+ background-color: white;
+ opacity: 80%;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+}
+
+#first_div h1 {
+ text-align: center;
+
+}
\ No newline at end of file
diff --git a/public/css/Sports.css b/public/css/Sports.css
new file mode 100644
index 0000000..a12b5c3
--- /dev/null
+++ b/public/css/Sports.css
@@ -0,0 +1,114 @@
+body {
+ font-feature: Arial;
+ margin: 0;
+ padding: 0;
+ background-color: rgba(34,30,32,255);
+ background-image: url("/img/logo_dos.png");
+ width: 100%;
+ flex-direction: column;
+ background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */
+ background-repeat: no-repeat; /* Empêche la répétition de l'image */
+ background-attachment: fixed; /* Fixe l'image en position de fond */
+ position: fixed;
+}
+
+#redhead {
+ background: linear-gradient(45deg, rgb(243, 62, 62), rgb(133, 20, 20));
+ display: flex;
+ justify-content: space-between;
+ height: 4rem;
+ position: fixed;
+ width: 100%;
+}
+
+#redhead ul {
+ list-style: none;
+ display: flex;
+}
+#redhead ul li a {
+ text-decoration: none;
+ color: black;
+ background: linear-gradient(315deg, rgb(243, 62, 62), rgb(133, 20, 20));
+ padding: 0.5rem;
+ border-radius: 10px;
+}
+#redhead ul li {
+ margin: 0.4rem 2rem 1rem 0;
+}
+
+
+#redhead ul li a:hover {
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;
+}
+
+
+#logo_noir_blanc {
+ margin: 0.5rem 0 0.5rem 1rem;
+ width: 5rem;
+ height: 3rem;
+ border-radius: 15px;
+ box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.5);
+}
+
+#logo_noir_blanc:hover {
+ box-shadow: none;
+}
+
+.custom-cursor {
+ cursor: url('cursor/GTA5.cur'), auto;
+}
+
+
+#logo_noir_rouge {
+ width: 100%;
+ object-fit: cover;
+ margin-top: 4rem;
+}
+
+
+main ul {
+ margin-top: 10rem;
+ list-style: none;
+ display: grid;
+ gap: 1rem 1rem;
+ grid-template-columns: 1fr 1fr;
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
+main ul li {
+ background: linear-gradient(90deg, rgb(243, 62, 62), rgb(133, 20, 20));
+ border: 0.05rem solid rgba(230,173,26,255);
+ padding: 0.8rem;
+ border-radius: 20px;
+}
+
+main ul li:nth-of-type(3) {
+ grid-column: 1/3;
+}
+
+main ul li:nth-of-type(8) {
+ grid-column: 1/3;
+}
+
+footer {
+ background: linear-gradient(45deg, #341717, rgba(34,30,32,255));
+ display: flex;
+ justify-content: space-between;
+}
+
+footer a img {
+ margin-top: 2rem;
+ margin-left: 10rem;
+ height: 4rem;
+ width: 4rem;
+}
+
+footer div h1 {
+ color: white;
+}
+
+footer div p {
+ color: white;
+}
+
diff --git a/public/css/adminPage.css b/public/css/adminPage.css
new file mode 100644
index 0000000..79a03e5
--- /dev/null
+++ b/public/css/adminPage.css
@@ -0,0 +1,30 @@
+body {
+ position: absolute;
+}
+
+#first_div {
+ margin: 10rem 3rem 12rem 3rem;
+ padding: 2rem 2rem 15rem 2rem;
+ background-color: white;
+ opacity: 80%;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+}
+
+#first_div h1 {
+ text-align: center;
+
+}
+
+#divPostComment {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+#commentairePost {
+ width: 30rem;
+ height: 10rem;
+}
\ No newline at end of file
diff --git a/public/css/base.css b/public/css/base.css
new file mode 100644
index 0000000..c931ef7
--- /dev/null
+++ b/public/css/base.css
@@ -0,0 +1,187 @@
+body {
+ font-feature: Arial;
+ margin: 0;
+ padding: 0;
+ background-color: #0f056b;
+}
+
+#background-video {
+ height: 100vh;
+ width: 100vw;
+ object-fit: cover;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ position: fixed;
+ z-index: 0;
+}
+
+
+#redhead {
+ background: linear-gradient(45deg, #0f056b, rgb(133, 20, 20));
+ display: flex;
+ justify-content: space-between;
+ height: 4rem;
+ position: fixed;
+ width: 100%;
+ z-index: 2;
+}
+
+#redhead ul {
+ list-style: none;
+ display: flex;
+}
+
+#redhead ul li {
+ margin: 0.4rem 2rem 1rem 0;
+}
+
+#redhead ul li a {
+ color: white;
+}
+
+
+#logo_noir_blanc {
+ margin: 0.5rem 0 0.5rem 1rem;
+ width: 3rem;
+ height: 3rem;
+ border-radius: 15px;
+ box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.5);
+}
+
+#logo_noir_blanc:hover {
+ box-shadow: none;
+}
+
+.custom-cursor {
+ cursor: pointer;
+ text-decoration: none;
+
+}
+
+footer {
+ background: linear-gradient(315deg, #0f056b, rgb(133, 20, 20));
+ display: flex;
+ justify-content: center;
+ position: absolute;
+ bottom: 0;
+ z-index: 4;
+ height: 5rem;
+}
+
+
+footer a img {
+ margin-top: 2rem;
+ margin-left: 10rem;
+ height: 4rem;
+ width: 4rem;
+}
+#nav_id {
+ padding: 0;
+ width: 100%;
+ position: fixed;
+ z-index: 2;
+}
+
+
+#nav_id ul {
+ right: 0;
+ list-style: none;
+ display: grid;
+ justify-content: end;
+ justify-items: end;
+ margin-top: 5rem;
+ position: fixed;
+}
+
+#nav_id ul li a {
+ text-decoration: none;
+ color: white;
+ padding: 0.5rem;
+ border-radius: 10px;
+
+}
+
+#nav_id ul li {
+ margin-top: 0.4rem;
+ margin-bottom: 1rem;
+ margin-right: -20rem;
+ transition: margin-right 0.5s ease-in-out;
+}
+/* CSS */
+
+footer div h1 {
+ color: white;
+}
+
+footer div p {
+ color: white;
+}
+
+.button-85 {
+ padding: 0.6em 2em;
+ border: none;
+ outline: none;
+ color: rgb(255, 255, 255);
+ background: #111;
+ cursor: pointer;
+ position: relative;
+ z-index: 0;
+ border-radius: 10px;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+}
+
+.button-85:before {
+ content: "";
+ background: linear-gradient(
+ 45deg,
+ #ff0000,
+ #ff7300,
+ #fffb00,
+ #48ff00,
+ #00ffd5,
+ #002bff,
+ #7a00ff,
+ #ff00c8,
+ #ff0000
+ );
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ background-size: 400%;
+ z-index: -1;
+ filter: blur(5px);
+ -webkit-filter: blur(5px);
+ width: calc(100% + 4px);
+ height: calc(100% + 4px);
+ animation: glowing-button-85 20s linear infinite;
+ transition: opacity 0.3s ease-in-out;
+ border-radius: 10px;
+}
+
+@keyframes glowing-button-85 {
+ 0% {
+ background-position: 0 0;
+ }
+ 50% {
+ background-position: 400% 0;
+ }
+ 100% {
+ background-position: 0 0;
+ }
+}
+
+.button-85:after {
+ z-index: -1;
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #222;
+ left: 0;
+ top: 0;
+ border-radius: 10px;
+}
\ No newline at end of file
diff --git a/public/css/connexion.css b/public/css/connexion.css
new file mode 100644
index 0000000..442d0db
--- /dev/null
+++ b/public/css/connexion.css
@@ -0,0 +1,62 @@
+body {
+
+ width: 100%;
+ flex-direction: column;
+ background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */
+ background-repeat: no-repeat; /* Empêche la répétition de l'image */
+ background-attachment: fixed; /* Fixe l'image en position de fond */
+ position: absolute;
+}
+
+#first_div {
+ margin: 10rem 3rem 12rem 3rem;
+ padding: 2rem 2rem 15rem 2rem;
+ background-color: white;
+ opacity: 80%;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+}
+
+#first_div h1 {
+ text-align: center;
+
+}
+
+#first_div a {
+ text-decoration: none;
+ font-size: 1.5rem;
+ color: black;
+ margin: 2rem 0 0 4rem;
+}
+
+#input_connexion {
+ margin: 5rem 4rem 0 4rem;
+ padding: 1rem;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ display: grid;
+}
+
+#input_connexion input {
+ width: 20rem;
+ margin-bottom: 1rem;
+
+}
+
+#logo_noir_rouge {
+ width: 100%;
+ object-fit: cover;
+ margin-top: 4rem;
+}
+
+#input-error {
+ text-align: center;
+ margin: 0 5rem 0 5rem;
+ color: #ffffff;
+ background-color: #d58879;
+ border: 0.2rem solid #c23333;
+}
+
diff --git a/public/css/creer-compte.css b/public/css/creer-compte.css
new file mode 100644
index 0000000..0c206db
--- /dev/null
+++ b/public/css/creer-compte.css
@@ -0,0 +1,63 @@
+body {
+ background-image: url("/site-bds-metz/site/public/img/logo_dos.png");
+ width: 100%;
+ flex-direction: column;
+ background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */
+ background-repeat: no-repeat; /* Empêche la répétition de l'image */
+ background-attachment: fixed; /* Fixe l'image en position de fond */
+ position: fixed;
+}
+
+main div {
+ margin: 10rem 3rem 12rem 3rem;
+ padding: 2rem 2rem 15rem 2rem;
+ background-color: white;
+ opacity: 60%;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ align-items: center;
+
+}
+
+main div h1 {
+ text-align: center;
+
+}
+
+main div a {
+ text-decoration: none;
+ font-size: 1.5rem;
+ color: black;
+ margin: 2rem 0 0 4rem;
+
+
+}
+
+#input-error {
+ margin: 1rem;
+ border: 0.2rem solid #d57778;
+ background-color: #d53636;
+ color: white;
+ border-radius: 10px;
+ text-align: center;
+
+}
+
+#input_connexion {
+ margin: 5rem 4rem 0 4rem;
+ padding: 1rem;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ display: grid;
+}
+
+#input_connexion input {
+ margin-bottom: 1rem;
+
+}
+
+#logo_noir_rouge {
+ width: 100%;
+ object-fit: cover;
+ margin-top: 4rem;
+}
diff --git a/public/css/cursor/GTA5.cur b/public/css/cursor/GTA5.cur
new file mode 100644
index 0000000..e69de29
diff --git a/public/css/cursor/cursor.cur b/public/css/cursor/cursor.cur
new file mode 100644
index 0000000..e69de29
diff --git a/public/css/hotLine.css b/public/css/hotLine.css
new file mode 100644
index 0000000..6d06b75
--- /dev/null
+++ b/public/css/hotLine.css
@@ -0,0 +1,20 @@
+body {
+ position: absolute;
+}
+
+#first_div {
+ margin: 10rem 3rem 12rem 3rem;
+ padding: 2rem 2rem 15rem 2rem;
+ background-color: white;
+ opacity: 80%;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+}
+
+#first_div h1 {
+ text-align: center;
+
+}
\ No newline at end of file
diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..416a37e
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,263 @@
+/*! 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
+ ========================================================================== */
+
+/* ==========================================================================
+ 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;
+ }
+}
+
diff --git a/public/css/normalize.css b/public/css/normalize.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/public/css/normalize.css
@@ -0,0 +1,349 @@
+/*! 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;
+}
diff --git a/public/css/page-daccueil.css b/public/css/page-daccueil.css
new file mode 100644
index 0000000..0df3078
--- /dev/null
+++ b/public/css/page-daccueil.css
@@ -0,0 +1,111 @@
+
+main {
+ background: linear-gradient(45deg, #0f056b, rgb(133, 20, 20));
+}
+
+
+.divLogoPerm {
+ display: flex;
+ justify-content: center;
+}
+
+#logoPermBDE {
+ padding: 1rem;
+ background-color: white;
+ width: 10rem;
+ height: 10rem;
+ border-radius: 20px;
+ opacity: 80%;
+ position: relative;
+ z-index: 1;
+ margin: 0 1rem 3rem 0;
+ align-items: center;
+}
+
+#logoliste {
+ padding: 1rem;
+ background-color: #000000;
+ width: 10rem;
+ height: 10rem;
+ border-radius: 20px;
+ opacity: 90%;
+ position: relative;
+ z-index: 1;
+ margin: 0 0 3rem 1rem;
+ align-items: center;
+}
+
+#logoMetzPloreur {
+ padding: 1rem;
+ background-color: rgba(75,40,108,255);
+ width: 10rem;
+ height: 10rem;
+ border-radius: 20px;
+ opacity: 80%;
+ position: relative;
+ z-index: 1;
+ margin: 6rem 0 0 0;
+ align-items: center;
+}
+
+#secondDiv {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ margin: 3rem 0 3rem 0;
+}
+
+.button-64 {
+ align-items: center;
+ background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
+ border: 0;
+ border-radius: 8px;
+ box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
+ box-sizing: border-box;
+ color: #FFFFFF;
+ display: flex;
+ font-family: Phantomsans, sans-serif;
+ font-size: 20px;
+ justify-content: center;
+ line-height: 1em;
+ max-width: 100%;
+ min-width: 140px;
+ padding: 3px;
+ text-decoration: none;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ white-space: nowrap;
+ cursor: pointer;
+ position: relative;
+ z-index: 2;
+ opacity: 80%;
+}
+
+.button-64:active,
+.button-64:hover {
+ outline: 0;
+}
+
+.button-64 a {
+ background-color: rgb(5, 6, 45);
+ color: white;
+ padding: 16px 24px;
+ border-radius: 6px;
+ width: 100%;
+ height: 100%;
+ transition: 300ms;
+}
+
+.button-64:hover a {
+ background: none;
+}
+
+@media (min-width: 768px) {
+ .button-64 {
+ font-size: 24px;
+ min-width: 196px;
+ }
+}
\ No newline at end of file
diff --git a/public/css/profile.css b/public/css/profile.css
new file mode 100644
index 0000000..7a5963e
--- /dev/null
+++ b/public/css/profile.css
@@ -0,0 +1,30 @@
+body {
+ background-image: url("/img/logo_dos.png");
+ width: 100%;
+ flex-direction: column;
+ background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */
+ background-repeat: no-repeat; /* Empêche la répétition de l'image */
+ background-attachment: fixed; /* Fixe l'image en position de fond */
+ position: absolute;
+}
+
+#first_div {
+ margin: 10rem 3rem 12rem 3rem;
+ padding: 2rem 2rem 15rem 2rem;
+ background-color: white;
+ opacity: 80%;
+ border: 0.2rem solid rgba(230,173,26,255);
+ border-radius: 10px;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+}
+
+#first_div h1 {
+ text-align: center;
+
+}
+
+#first_div ul {
+ list-style: none;
+}
\ No newline at end of file
diff --git a/public/favicon_io/android-chrome-192x192.png b/public/favicon_io/android-chrome-192x192.png
new file mode 100644
index 0000000..e69de29
diff --git a/public/favicon_io/android-chrome-512x512.png b/public/favicon_io/android-chrome-512x512.png
new file mode 100644
index 0000000..e69de29
diff --git a/public/favicon_io/apple-touch-icon.png b/public/favicon_io/apple-touch-icon.png
new file mode 100644
index 0000000..e69de29
diff --git a/public/favicon_io/favicon-16x16.png b/public/favicon_io/favicon-16x16.png
new file mode 100644
index 0000000..e69de29
diff --git a/public/favicon_io/favicon-32x32.png b/public/favicon_io/favicon-32x32.png
new file mode 100644
index 0000000..e69de29
diff --git a/public/favicon_io/favicon.ico b/public/favicon_io/favicon.ico
new file mode 100644
index 0000000..e69de29
diff --git a/public/favicon_io/site.webmanifest b/public/favicon_io/site.webmanifest
new file mode 100644
index 0000000..e69de29
diff --git a/public/img/.gitignore b/public/img/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/public/img/IMG_6768.JPG b/public/img/IMG_6768.JPG
new file mode 100644
index 0000000..e76581c
Binary files /dev/null and b/public/img/IMG_6768.JPG differ
diff --git a/public/img/Search-Button-PNG-HD-Quality.png b/public/img/Search-Button-PNG-HD-Quality.png
new file mode 100644
index 0000000..e69de29
diff --git a/public/img/logoMetzPloreur.JPG b/public/img/logoMetzPloreur.JPG
new file mode 100644
index 0000000..8da3274
Binary files /dev/null and b/public/img/logoMetzPloreur.JPG differ
diff --git a/public/img/logoPermantEpaule.JPG b/public/img/logoPermantEpaule.JPG
new file mode 100644
index 0000000..e7b2fc7
Binary files /dev/null and b/public/img/logoPermantEpaule.JPG differ
diff --git a/public/img/new-Instagram-logo-white-glyph.png b/public/img/new-Instagram-logo-white-glyph.png
new file mode 100644
index 0000000..e69de29
diff --git a/public/js/Titre_Accueil.js b/public/js/Titre_Accueil.js
new file mode 100644
index 0000000..e37a5be
--- /dev/null
+++ b/public/js/Titre_Accueil.js
@@ -0,0 +1,20 @@
+let button_element = document.querySelector("#menu_button");
+let navElement = document.querySelector("#nav_id");
+let listElements = document.querySelectorAll("#nav_id ul li");
+
+let isNavVisible = false;
+
+function toggleNav() {
+ isNavVisible = !isNavVisible;
+ if (isNavVisible) {
+ for (let i = 0; i < listElements.length; i++) {
+ listElements[i].style.marginRight = "2rem";
+ }
+ } else {
+ for (let i = 0; i < listElements.length; i++) {
+ listElements[i].style.marginRight = "-20rem";
+ }
+ }
+}
+
+button_element.addEventListener('click', toggleNav);
diff --git a/public/js/plugins.js b/public/js/plugins.js
new file mode 100644
index 0000000..feb7d19
--- /dev/null
+++ b/public/js/plugins.js
@@ -0,0 +1,24 @@
+// Avoid `console` errors in browsers that lack a console.
+(function() {
+ var method;
+ var noop = function () {};
+ var methods = [
+ 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
+ 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
+ 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
+ 'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
+ ];
+ var length = methods.length;
+ var console = (window.console = window.console || {});
+
+ while (length--) {
+ method = methods[length];
+
+ // Only stub undefined methods.
+ if (!console[method]) {
+ console[method] = noop;
+ }
+ }
+}());
+
+// Place any jQuery/helper plugins in here.
diff --git a/public/video/videoMilkyWay1.mp4 b/public/video/videoMilkyWay1.mp4
new file mode 100644
index 0000000..e69de29