Recreated webstie in Dotnet

douwco_website.cpp/CMakeLists.txt

@@ -0,0 +1,30 @@
+# Specify the minimum required version of CMake
+cmake_minimum_required(VERSION 3.10)
+
+# Set the name of the project
+project(douwco_web)
+
+# Find required packages
+find_package(Crow)
+find_package(OpenSSL REQUIRED)
+find_package(ZLIB REQUIRED)
+
+# Set C++ standard to C++17
+set(CMAKE_CXX_STANDARD 17)
+
+# Add the executable
+add_executable(douwco_web
+    src/main.cpp
+    src/server.cpp
+)
+
+# Specify include directories
+target_include_directories(douwco_web PRIVATE
+    ${PROJECT_SOURCE_DIR}/include
+    ${OPENSSL_INCLUDE_DIR}
+)
+
+target_link_libraries(douwco_web PUBLIC 
+    Crow::Crow
+    ${OPENSSL_LIBRARIES} ${ZLIB_LIBRARIES}
+)

douwco_website.cpp/Dockerfile

@@ -0,0 +1,32 @@
+# Use an official Ubuntu as a parent image
+FROM ubuntu:latest
+
+# Set the working directory in the container to /app
+WORKDIR /server
+
+# Install necessary packages, including CMake, a C++ compiler, and wget
+RUN apt-get update && \
+    apt-get install -y cmake g++ make wget zlib1g-dev && \
+    apt-get clean;
+
+# Download Crow library
+RUN wget https://github.com/CrowCpp/Crow/releases/download/v1.2.1.2/Crow-1.2.1-Linux.deb && \
+    apt-get install -y ./Crow-1.2.1-Linux.deb
+
+# Copy the current directory contents into the container at /app
+COPY . /server
+
+# Make the build directory
+RUN mkdir -p build && cd build
+
+# Run CMake to configure the build
+RUN cmake .
+
+# Build the project
+RUN cmake --build .
+
+# Expose port 8888 for the web server
+EXPOSE 8888
+
+# Command to run the executable
+CMD ["./douwco_web"]

douwco_website.cpp/compose.yaml

@@ -0,0 +1,6 @@
+services:
+  frontend:
+    build: .
+    ports:
+      - "8888:8888"
+    restart: always

douwco_website.cpp/include/server.hpp

@@ -0,0 +1,24 @@
+#ifndef DOUWCO_SERVER_HPP
+#define DOUWCO_SERVER_HPP
+
+#include <crow.h>
+
+namespace Douwco {
+
+    class Server {
+
+    private:
+        static constexpr int port = 8888;
+        crow::SimpleApp crowApp;
+
+    public:
+        Server() = default;
+        ~Server() = default;
+
+        void setup();
+        void start();
+    };
+    
+}
+
+#endif // DOUWCO_SERVER_HPP

douwco_website.cpp/src/main.cpp

@@ -0,0 +1,8 @@
+#include "server.hpp"
+
+int main() {
+    Douwco::Server server;
+    server.setup();
+    server.start();
+    return 0;
+}

douwco_website.cpp/src/server.cpp

@@ -0,0 +1,25 @@
+#include <crow.h>
+
+#include "server.hpp"
+
+#define CREATE_ROUTE(route_path, html_path) \
+    CROW_ROUTE(this->crowApp, route_path) \
+    ([]() { \
+        std::string page = crow::mustache::load(html_path).render_string(); \
+        return page; \
+    });
+
+void Douwco::Server::setup() {
+    CREATE_ROUTE("/", "home.html");
+    CREATE_ROUTE("/about_me", "about_me.html");
+    CREATE_ROUTE("/about_douwco", "about_douwco.html");
+    CREATE_ROUTE("/games", "games.html");
+}
+
+void Douwco::Server::start() {
+    crowApp
+        .port(port)
+        .multithreaded()
+//        .ssl_file("dev_cert/certificate.pem","dev_cert/private.key")
+        .run();
+}

douwco_website.cpp/static/css/douwco_styling.css

@@ -0,0 +1,167 @@
+@font-face {
+    font-family: righteous;
+    src: url(../font/Righteous-Regular.ttf);
+}
+
+@font-face {
+    font-family: monsterrat_regular;
+    src: url(../font/Montserrat-Regular.ttf);
+}
+
+@font-face {
+    font-family: monsterrat_bold;
+    src: url(../font/Montserrat-Bold.ttf);
+}
+
+
+body {
+    font-family: monsterrat_regular;
+    font-size: 24px;
+    background-color: #283e3e;
+    color: white;
+}
+
+.root_div{
+    display: flex;
+    flex-direction: column;
+}
+.root_div > .side_panel_div{
+    width: 100%;
+}
+
+.title_div{
+    margin-left: 50px;
+    display: flex; 
+    align-items: center;
+    flex-direction: row; 
+    align-content: center;
+}
+.title_div > img {
+    width:150px; 
+    height: 150px;
+    margin-right: 50px;
+}
+.title_div > h1 {
+    font-family: righteous;
+    font-size: 120px;
+}
+
+.apps_title_div {
+    margin-top: 100px;
+}
+.apps_title_div > h2 {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    text-align: center;
+}
+.apps_title_div > hr {
+    height: 6px;
+    width:75%;
+    background-color: white;
+    border-width: 0px;
+    border-radius: 3px;
+    align-self: center;
+}
+
+.app_option_div { 
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin: 25px;
+    border-radius: 25px;
+    background-color: #304b4bFF;
+}
+.app_option_div > img {
+    height: 200px;
+    width: 200px;
+    margin: 25px;
+}
+.app_option_div > div > h3 {
+    font-family: monsterrat_bold;
+    font-size: 36px;
+}
+.app_option_div > div > p {
+    font-family: monsterrat_regular;
+    font-size: 24px;
+}
+.app_option_div > div > p > a {
+    color: #6dde99; 
+    font-family: monsterrat_bold;
+}
+.app_option_div > a {
+    position: absolute;
+    height: 50px;
+    width: 125px;
+    bottom: 25px;
+    right: 25px;
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    border: none;
+    background-color: #6dde99;
+}
+.app_option_div > a > p {
+    font-family: monsterrat_bold;
+    font-size: 18px;
+    width: 100%;
+    color: white;
+    text-align: center;
+}
+
+
+a {
+    font-family: monsterrat_regular;
+    color: white;
+    text-decoration:none;
+    cursor: pointer;
+}
+.menu_option_a {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+    
+    display: flex; 
+    align-items: center;
+
+    margin-left: 50px; 
+    padding-left: 50px;
+    padding-right: 50px;
+}
+.menu_option_a:hover{
+    background-color: #304b4bFF;;
+}
+.menu_option_a > img {
+    width:100px; 
+    height:75px;
+    margin-right: 50px;
+}
+.menu_option_a > p > span {
+    color: #88d4d4;
+}
+
+
+@media (min-width: 1300px) {
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+    }
+    
+    .root_div{
+        display: flex;
+        flex-direction: row;
+    }
+    .root_div > .side_panel_div{
+        width: 50%;
+    }
+
+    .apps_selection_div {
+        max-height: 75vh;
+        overflow-y: auto;   
+    }
+}

douwco_website.cpp/templates/about_douwco.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<head>
+  <link rel="stylesheet" href="../static/css/douwco_styling.css">
+</head>
+<html>
+
+<body>
+  <div class="title_div">
+    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+    <h1>douwco</h1>
+  </div>
+</body>
+
+</html>

douwco_website.cpp/templates/about_me.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<head>
+  <link rel="stylesheet" href="../static/css/douwco_styling.css">
+</head>
+<html>
+
+<body>
+  <div class="title_div">
+    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+    <h1>douwco</h1>
+  </div>
+</body>
+
+</html>

douwco_website.cpp/templates/games.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<head>
+  <link rel="stylesheet" href="../static/css/douwco_styling.css">
+</head>
+<html>
+
+<body>
+  <div class="title_div">
+    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+    <h1>douwco</h1>
+  </div>
+</body>
+
+</html>

douwco_website.cpp/templates/home.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+
+<head>
+  <link rel="stylesheet" href="../static/css/douwco_styling.css">
+</head>
+
+<html>
+<body>
+  <div class="root_div">
+    <div class="side_panel_div">
+      <div class="title_div">
+        <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+        <h1>douwco</h1>
+      </div>
+      <div>
+        <a class="menu_option_a" href="/games">
+          <img src="../static/img/device-gamepad.png" alt="gamepad icon">
+          <p>Play <span>My Games</span></p>
+        </a>
+        <a class="menu_option_a" href="/about_me">
+          <img src="../static/img/user.png" alt="user icon" style="
+            width:60px; 
+            margin-left: 20px;
+            margin-right:70px;">
+          <p>About <span>Douwe Ravers</span></p>
+        </a>
+        <a class="menu_option_a" href="/about_douwco">
+          <img src="../static/img/info-hexagon.png" alt="info icon" style="
+            width:75px; 
+            margin-left: 12px;
+            margin-right:62px;">
+          <p>About <span>Douwco</span></p>
+        </a>
+      </div>
+    </div>
+  </div>
+</body>
+</html>