From ceadf824e78e49a53c290693c90e63721eb7a7b3 Mon Sep 17 00:00:00 2001 From: Damianko135 <139293484+Damianko135@users.noreply.github.com> Date: Sun, 6 Oct 2024 16:14:49 +0200 Subject: [PATCH] Prettier update --- .github/workflows/update-docker-image.yml | 47 ++++ Dockerfile | 28 +++ Partials/Styles/Phone.css | 289 +++++++++++----------- Partials/Styles/Styles.css | 286 +++++++++++---------- Scripts/Connection.php | 9 +- Scripts/Light-Dark.js | 10 +- Scripts/LinkUpdate.js | 57 +++-- compose.yml | 47 ++++ 8 files changed, 446 insertions(+), 327 deletions(-) create mode 100644 .github/workflows/update-docker-image.yml create mode 100644 Dockerfile create mode 100644 compose.yml diff --git a/.github/workflows/update-docker-image.yml b/.github/workflows/update-docker-image.yml new file mode 100644 index 0000000..4921ee9 --- /dev/null +++ b/.github/workflows/update-docker-image.yml @@ -0,0 +1,47 @@ +name: Build and Push Docker Image + +on: + push: + workflow_dispatch: + +jobs: + docker: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: docker/setup-buildx-action@v3 + - uses: docker/login-action@v3 + with: + username: ${{ vars.DOCKER_USER }} + password: ${{ secrets.DOCKER_TOKEN }} + + - name: Lowercase the repo name + run: echo "REPO_LC=${GITHUB_REPOSITORY,,}" >>${GITHUB_ENV} + + - name: Generate semantic version + id: semver + run: | + # Get the run number from the environment + RUN_NUMBER=${GITHUB_RUN_NUMBER} + + # Calculate major, minor, and patch based on the run number + MAJOR=$((RUN_NUMBER / 100)) # Every 100 runs increases major + MINOR=$(((RUN_NUMBER % 100) / 10)) # Every 10 runs increases minor + PATCH=$((RUN_NUMBER % 10)) # Remaining runs increase patch + + # Format the version + VERSION="$MAJOR.$MINOR.$PATCH" + + # Output the version for use in later steps and logging + echo "VERSION=$VERSION" >> $GITHUB_ENV + echo "version=$VERSION" >> $GITHUB_OUTPUT + echo "Calculated version: $VERSION (from run #$RUN_NUMBER)" + + - uses: docker/build-push-action@v6 + with: + context: . + push: true + tags: | + ${{ env.REPO_LC }}:latest + ${{ env.REPO_LC }}:${{ env.VERSION }} + ${{ env.REPO_LC }}:${{ env.VERSION }}-${{ github.sha }} diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..1962ac0 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,28 @@ +# Use a specific version of the PHP Apache image for reproducibility +FROM php:8.3.0-apache + +# Install necessary packages for PHP extensions and enable Apache modules +RUN apt-get update && apt-get install -y \ + libpq-dev \ + && docker-php-ext-install pdo_mysql \ + && a2enmod rewrite \ + && apt-get clean \ + && rm -rf /var/lib/apt/lists/* + +# Set the working directory +WORKDIR /var/www/html + +# Copy only the necessary files (excluding unnecessary ones) +COPY . . + +# Set proper permissions for Apache to access the files +RUN chown -R www-data:www-data /var/www/html + +# Expose the port the app runs on +EXPOSE 80 + +# Use a non-privileged user for better security +USER www-data + +# Start the Apache server +CMD ["apache2-foreground"] \ No newline at end of file diff --git a/Partials/Styles/Phone.css b/Partials/Styles/Phone.css index 6c2c359..f57e6d7 100644 --- a/Partials/Styles/Phone.css +++ b/Partials/Styles/Phone.css @@ -1,148 +1,145 @@ @media screen and (max-width: 999px) { - /* Theme Styles */ - [data-theme="dark"] { - --color-bg: #000000; - --color-fg: #ffffff; - } - - [data-theme="light"] { - filter: invert(100%); - } - - [data-theme="light"] :not(img, input, footer) { - filter: invert(100%); - } - - [data-theme="light"] .img { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); - display: block; - left: -3px; - position: absolute; - top: -3px; - height: 35px; - width: 35px; - background: inherit; - background-clip: text; - -webkit-background-clip: text; - color: transparent; - filter: invert(1) grayscale(1); - -webkit-filter: invert(1) grayscale(1); - } - - - /* Body Styles */ - body { - background-color: #000000; - color: #ffffff; - display: inline-block; - min-height: 10px; - place-items: left; - font-family: Arial, Helvetica, sans-serif; - user-select: none; - -webkit-user-select: none; - -webkit-user-drag: none; - } - - button { - color: transparent; - background-color: transparent; - width: 35px; - height: 35px; - } - - /* Image Styles */ - .img { - display: block; - left: 23px; - position: absolute; - top: 23px; - height: 35px; - width: 35px; - background: inherit; - background-clip: text; - -webkit-background-clip: text; - color: transparent; - filter: invert(1) grayscale(1); - -webkit-filter: invert(1) grayscale(1); - } - - /* Header Styles */ - .header { - text-align: left; - } - - .header h1 { - font-size: 20px; - } - - .header a { - color: deeppink; - } - - /* Intro Styles */ - .intro { - padding-left: 15px; - text-align: left; - font-size: 15px; - } - - /* Main Container Styles */ - .main-void-container { - display: inline-flex; - align-items: flex-start; - padding: 15px; - align-content: center; - max-width: 100%; - max-height: 100%; - - } - - /* Main Section Styles */ - .main { - text-align: left; - max-width: 100%; - max-height: 100%; - } - - - /* Void Section Styles */ - .void { - padding-left: 15px; - padding-right: 10%; - max-width: 100%; - } - - /* Paragraph Link Styles */ - p a { - text-decoration: none; - color: magenta; - } - - p a:hover { - color: red; - } - - /* GIF Styles */ - .gif { - max-width: 100%; - max-height: 100%; - } - - /* Redirect Styles */ - .Redirect { - position: absolute; - text-align: center; - text-decoration: dashed; - margin: auto; - } - - footer { - text-align: center; - color: gray; - background-color: transparent; - } + /* Theme Styles */ + [data-theme="dark"] { + --color-bg: #000000; + --color-fg: #ffffff; + } + + [data-theme="light"] { + filter: invert(100%); + } + + [data-theme="light"] :not(img, input, footer) { + filter: invert(100%); + } + + [data-theme="light"] .img { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); + display: block; + left: -3px; + position: absolute; + top: -3px; + height: 35px; + width: 35px; + background: inherit; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + filter: invert(1) grayscale(1); + -webkit-filter: invert(1) grayscale(1); + } + + /* Body Styles */ + body { + background-color: #000000; + color: #ffffff; + display: inline-block; + min-height: 10px; + place-items: left; + font-family: Arial, Helvetica, sans-serif; + user-select: none; + -webkit-user-select: none; + -webkit-user-drag: none; + } + + button { + color: transparent; + background-color: transparent; + width: 35px; + height: 35px; + } + + /* Image Styles */ + .img { + display: block; + left: 23px; + position: absolute; + top: 23px; + height: 35px; + width: 35px; + background: inherit; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + filter: invert(1) grayscale(1); + -webkit-filter: invert(1) grayscale(1); + } + + /* Header Styles */ + .header { + text-align: left; + } + + .header h1 { + font-size: 20px; + } + + .header a { + color: deeppink; + } + + /* Intro Styles */ + .intro { + padding-left: 15px; + text-align: left; + font-size: 15px; + } + + /* Main Container Styles */ + .main-void-container { + display: inline-flex; + align-items: flex-start; + padding: 15px; + align-content: center; + max-width: 100%; + max-height: 100%; + } + + /* Main Section Styles */ + .main { + text-align: left; + max-width: 100%; + max-height: 100%; + } + + /* Void Section Styles */ + .void { + padding-left: 15px; + padding-right: 10%; + max-width: 100%; + } + + /* Paragraph Link Styles */ + p a { + text-decoration: none; + color: magenta; + } + + p a:hover { + color: red; + } + + /* GIF Styles */ + .gif { + max-width: 100%; + max-height: 100%; + } + + /* Redirect Styles */ + .Redirect { + position: absolute; + text-align: center; + text-decoration: dashed; + margin: auto; + } + + footer { + text-align: center; + color: gray; + background-color: transparent; + } } diff --git a/Partials/Styles/Styles.css b/Partials/Styles/Styles.css index 4e048dd..b2872e6 100644 --- a/Partials/Styles/Styles.css +++ b/Partials/Styles/Styles.css @@ -1,148 +1,142 @@ @media screen and (min-width: 1000px) { -/* Dark Theme Styles */ -[data-theme="dark"] { - --color-bg: #000000; - --color-fg: #ffffff; + /* Dark Theme Styles */ + [data-theme="dark"] { + --color-bg: #000000; + --color-fg: #ffffff; + } + + /* Light Theme Styles */ + [data-theme="light"] { + filter: invert(100%); + } + + [data-theme="light"] .Agreed { + filter: invert(100%); + } + + [data-theme="light"] :not(img, input, footer) { + filter: invert(100%); + } + + [data-theme="light"] .img { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); + display: block; + left: -3px; + position: absolute; + top: -3px; + height: 35px; + width: 35px; + background: inherit; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + filter: invert(1) grayscale(1); + -webkit-filter: invert(1) grayscale(1); + } + + /* Body Styles */ + body { + background-color: #000000; + color: #ffffff; + display: inline-block; + min-height: 10px; + place-items: left; + font-family: Arial, Helvetica, sans-serif; + user-select: none; + -webkit-user-drag: none; + } + + /* Button Styles */ + button { + color: transparent; + background-color: transparent; + width: 35px; + height: 35px; + } + + /* Image Styles */ + .img { + display: block; + left: 28px; + position: absolute; + top: 28px; + height: 35px; + width: 35px; + background: inherit; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + filter: invert(1) grayscale(1); + -webkit-filter: invert(1) grayscale(1); + } + + /* Header Styles */ + .header { + text-align: left; + } + + .header h1 { + font-size: 25px; + } + + /* Intro Styles */ + .intro { + padding-left: 20px; + text-align: left; + font-size: 20px; + } + + /* Main Container Styles */ + .main-void-container { + display: flex; + align-items: flex-start; + padding: 20px; + } + + /* Main Section Styles */ + .main { + text-align: left; + max-width: 50%; + } + + /* Void Section Styles */ + .void { + padding-left: 20px; + padding-right: 10%; + max-width: 50%; + } + + /* Paragraph Link Styles */ + p a { + text-decoration: none; + color: blue; + } + + p a:hover { + color: red; + } + + /* GIF Styles */ + .gif { + max-width: 100%; + max-height: 100%; + } + + /* Redirect Styles */ + .Redirect { + position: absolute; + text-align: center; + text-decoration: dashed; + margin: auto; + } + + footer { + text-align: center; + color: gray; + background-color: transparent; + } } - -/* Light Theme Styles */ -[data-theme="light"] { - filter: invert(100%); -} - -[data-theme="light"] .Agreed{ - filter: invert(100%); -} - -[data-theme="light"] :not(img, input, footer) { - filter: invert(100%); -} - -[data-theme="light"] .img { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); - display: block; - left: -3px; - position: absolute; - top: -3px; - height: 35px; - width: 35px; - background: inherit; - background-clip: text; - -webkit-background-clip: text; - color: transparent; - filter: invert(1) grayscale(1); - -webkit-filter: invert(1) grayscale(1); -} - - - -/* Body Styles */ -body { - background-color: #000000; - color: #ffffff; - display: inline-block; - min-height: 10px; - place-items: left; - font-family: Arial, Helvetica, sans-serif; - user-select: none; - -webkit-user-drag: none; -} - -/* Button Styles */ -button { - color: transparent; - background-color: transparent; - width: 35px; - height: 35px; -} - -/* Image Styles */ -.img { - display: block; - left: 28px; - position: absolute; - top: 28px; - height: 35px; - width: 35px; - background: inherit; - background-clip: text; - -webkit-background-clip: text; - color: transparent; - filter: invert(1) grayscale(1); - -webkit-filter: invert(1) grayscale(1); -} - -/* Header Styles */ -.header { - - text-align: left; -} - -.header h1 { - font-size: 25px; -} - -/* Intro Styles */ -.intro { - padding-left: 20px; - text-align: left; - font-size: 20px; -} - -/* Main Container Styles */ -.main-void-container { - display: flex; - align-items: flex-start; - padding: 20px; -} - -/* Main Section Styles */ -.main { - text-align: left; - max-width: 50%; -} - -/* Void Section Styles */ -.void { - padding-left: 20px; - padding-right: 10%; - max-width: 50%; -} - -/* Paragraph Link Styles */ -p a { - text-decoration: none; - color: blue; -} - -p a:hover { - color: red; -} - -/* GIF Styles */ -.gif { - max-width: 100%; - max-height: 100%; -} - -/* Redirect Styles */ -.Redirect { - position: absolute; - text-align: center; - text-decoration: dashed; - margin: auto; - - -} - -footer { - text-align: center; - color: gray; - background-color: transparent; - -} -} \ No newline at end of file diff --git a/Scripts/Connection.php b/Scripts/Connection.php index 1b91a83..c5986a4 100644 --- a/Scripts/Connection.php +++ b/Scripts/Connection.php @@ -1,11 +1,11 @@ " . $e->getMessage(); } } +?> diff --git a/Scripts/Light-Dark.js b/Scripts/Light-Dark.js index 3dd059d..3021abd 100644 --- a/Scripts/Light-Dark.js +++ b/Scripts/Light-Dark.js @@ -1,5 +1,8 @@ // Calculate the current theme setting based on localStorage and system settings -function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { +function calculateSettingAsThemeString({ + localStorageTheme, + systemSettingDark, +}) { return localStorageTheme || (systemSettingDark.matches ? "dark" : "light"); } @@ -7,7 +10,10 @@ function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) function updateButton({ buttonEl, isDark }) { const newCta = `url("Partials/Favicon/Light-Dark-Change.png")`; buttonEl.style.backgroundImage = newCta; - buttonEl.setAttribute("aria-label", `Switch to ${isDark ? "Light" : "Dark"} Mode`); + buttonEl.setAttribute( + "aria-label", + `Switch to ${isDark ? "Light" : "Dark"} Mode`, + ); } // Update the theme setting on the HTML tag diff --git a/Scripts/LinkUpdate.js b/Scripts/LinkUpdate.js index 4e3213e..3711d93 100644 --- a/Scripts/LinkUpdate.js +++ b/Scripts/LinkUpdate.js @@ -1,39 +1,38 @@ function delayRedirect() { - - const text = document.getElementById("textField"); - text.style.display = "block"; - text.style.display = "center"; + const text = document.getElementById("textField"); + text.style.display = "block"; + text.style.display = "center"; - const Foot = document.getElementById("footer"); - Foot.style.display = "none"; + const Foot = document.getElementById("footer"); + Foot.style.display = "none"; + const Bod = document.getElementById("BODY"); + Bod.style.display = "none"; - const Bod = document.getElementById("BODY"); - Bod.style.display = "none"; + const clickedLink = document.getElementById("linkToPage"); - const clickedLink = document.getElementById("linkToPage"); - - - // Delay for 5 seconds before redirecting - setTimeout(() => { - const link = clickedLink.dataset.link; - if (link) { - window.location.href = link; // Redirect only if the data-link attribute is defined - } else { - console.error("data-link attribute is missing."); - } - }, 5000); + // Delay for 5 seconds before redirecting + setTimeout(() => { + const link = clickedLink.dataset.link; + if (link) { + window.location.href = link; // Redirect only if the data-link attribute is defined + } else { + console.error("data-link attribute is missing."); + } + }, 5000); } function handleFormSubmission(e) { - if (!document.getElementById('agree_terms').checked) { - e.preventDefault(); // Prevent form submission - document.getElementById('agreementBlock').style.display = 'block'; // Show the agreement block - } else { - // Agreement checkbox is checked, proceed with form submission - document.getElementById('agreementBlock').style.display = 'none'; // Hide the agreement block - } + if (!document.getElementById("agree_terms").checked) { + e.preventDefault(); // Prevent form submission + document.getElementById("agreementBlock").style.display = "block"; // Show the agreement block + } else { + // Agreement checkbox is checked, proceed with form submission + document.getElementById("agreementBlock").style.display = "none"; // Hide the agreement block } +} - // Attach the function to the form's submit event - document.getElementById('myForm').addEventListener('submit', handleFormSubmission); +// Attach the function to the form's submit event +document + .getElementById("myForm") + .addEventListener("submit", handleFormSubmission); diff --git a/compose.yml b/compose.yml new file mode 100644 index 0000000..cac532d --- /dev/null +++ b/compose.yml @@ -0,0 +1,47 @@ +# Comments are provided throughout this file to help you get started. +# If you need more help, visit the Docker compose reference guide at +# https://docs.docker.com/go/compose-spec-reference/ + +# Here the instructions define your application as a service called "server". +# This service is built from the Dockerfile in the current directory. +# You can add other services your application may depend on here, such as a +# database or a cache. For examples, see the Awesome Compose repository: +# https://github.com/docker/awesome-compose +services: + server: + build: + context: . + ports: + - 80:80 +# The commented out section below is an example of how to define a PostgreSQL +# database that your application can use. `depends_on` tells Docker Compose to +# start the database before your application. The `db-data` volume persists the +# database data between container restarts. The `db-password` secret is used +# to set the database password. You must create `db/password.txt` and add +# a password of your choosing to it before running `docker-compose up`. +# depends_on: +# db: +# condition: service_healthy +# db: +# image: postgres +# restart: always +# user: postgres +# secrets: +# - db-password +# volumes: +# - db-data:/var/lib/postgresql/data +# environment: +# - POSTGRES_DB=example +# - POSTGRES_PASSWORD_FILE=/run/secrets/db-password +# expose: +# - 5432 +# healthcheck: +# test: [ "CMD", "pg_isready" ] +# interval: 10s +# timeout: 5s +# retries: 5 +# volumes: +# db-data: +# secrets: +# db-password: +# file: db/password.txt