afront 1.0.2

package/src/Style/Support.module.css

@@ -0,0 +1,185 @@
+/* Support.module.css */
+
+.supportContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5rem 2rem;
+    color: #333;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    min-height: 100vh;
+    background: #f7f9fc;
+}
+
+.supportTitle {
+    font-size: 3rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: #2c3e50;
+}
+
+.supportDescription {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+    color: #34495e;
+    /* Slightly lighter color */
+}
+
+.supportContent {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+.supportCard {
+    background: #ffffff;
+    /* White background for cards */
+    color: #2c3e50;
+    /* Dark text color */
+    border-radius: 8px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.supportCard::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300%;
+    height: 300%;
+    background: linear-gradient(45deg, rgba(0, 255, 238, 0.2), rgba(0, 49, 109, 0.2));
+    /* Lighter gradient */
+    transform: translate(-50%, -50%) rotate(0deg);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 0;
+}
+
+.supportCardTitle {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    position: relative;
+    z-index: 1;
+}
+
+.supportCardContent {
+    font-size: 1rem;
+    position: relative;
+    z-index: 1;
+}
+
+.supportCard:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.supportCard:hover::before {
+    opacity: 1;
+}
+
+.footerLink {
+    display: inline-block;
+    margin-top: 2rem;
+    padding: 0.5rem 1rem;
+    background: #3498db;
+    /* Light blue color */
+    color: #ffffff;
+    border-radius: 4px;
+    text-decoration: none;
+    transition: background 0.3s, transform 0.3s;
+    position: relative;
+    overflow: hidden;
+}
+
+.footerLink::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300%;
+    height: 300%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.3s;
+    z-index: 0;
+}
+
+.footerLink:hover {
+    background: #2980b9;
+    transform: scale(1.05);
+}
+
+.footerLink:hover::after {
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.supportContainer::before {
+    content: "AFront";
+    position: absolute;
+    top: 2%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 15rem;
+    color: rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* New Styles for FAQ */
+.supportFAQ {
+    max-width: 900px;
+    margin: 2rem auto;
+    padding: 1rem;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: left;
+}
+
+.faqList {
+    list-style-type: none;
+    padding: 0;
+    font-size: 1rem;
+    color: #2c3e50;
+}
+
+.faqList li {
+    margin-bottom: 1rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .supportTitle {
+        font-size: 2.5rem;
+    }
+
+    .supportDescription {
+        font-size: 1rem;
+    }
+
+    .supportCard {
+        padding: 1rem;
+    }
+
+    .supportCardTitle {
+        font-size: 1.25rem;
+    }
+
+    .supportCardContent {
+        font-size: 0.875rem;
+    }
+
+    .supportContainer::before {
+        font-size: 5rem;
+        bottom: 5%;
+    }
+}

package/src/index.js

@@ -0,0 +1,29 @@
+import React from "react";
+import ReactDOM, { hydrateRoot } from "react-dom/client";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+
+const container = document.getElementById("asggen");
+
+// Create a root for React
+const root = ReactDOM.createRoot(container);
+
+if (process.env.NODE_ENV === "production") {
+  // Use `hydrateRoot` for production
+  hydrateRoot(
+    container,
+    <React.StrictMode>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </React.StrictMode>
+  );
+} else {
+  root.render(
+    <React.StrictMode>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </React.StrictMode>
+  );
+}

package/webpack.build-prod.js

@@ -0,0 +1,110 @@
+const htmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const path = require("path");
+const crypto = require("crypto");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/Static/indexStatic.js",
+  output: {
+    filename: "static/js/[name]-[contenthash].js",
+    path: path.resolve(__dirname, "build-prod-static"),
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              configFile: path.resolve(__dirname, "./.babelrc"),
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]",
+              },
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[contenthash][ext]",
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[name][ext]",
+        },
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserWebpackPlugin({
+        terserOptions: {
+          format: {
+            comments: false, // Remove all comments
+          },
+        },
+        extractComments: false, // Do not extract comments to a separate file
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+  plugins: [
+    new htmlWebpackPlugin({
+      title: "AFront",
+      template: "./dev/index.html",
+      buildTag: `prod-[contenthash]`,
+      hash: true,
+      templateParameters: (compilation, options) => {
+        const hash = crypto.createHash("sha1");
+        hash.update(compilation.hash);
+        const sha1Hash = hash.digest("hex");
+        return {
+          htmlWebpackPlugin: {
+            options: {
+              title: "AFront",
+              buildTag: `prod-${sha1Hash}`,
+            },
+          },
+        };
+      },
+    }),
+    new MiniCssExtractPlugin({
+      filename: "static/css/[name]-[contenthash].css",
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: "dev/favicon.ico", to: "favicon.ico" }, // Copy favicon
+        { from: "dev/logo192.png", to: "logo192.png" }, // Copy logo192
+        { from: "dev/logo512.png", to: "logo512.png" }, // Copy logo512
+        { from: "dev/manifest.json", to: "manifest.json" }, // Copy manifest
+        { from: "dev/style.css", to: "style.css" },
+        { from: "dev/robots.txt", to: "robots.txt" },
+      ],
+    }),
+  ],
+};

package/webpack.dev.js

@@ -0,0 +1,87 @@
+const htmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.js",
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "dev"),
+    },
+    port: 9999,
+    open: true,
+    historyApiFallback: true,
+  },
+  output: {
+    filename: "[name].bundle.js",
+    path: `${__dirname}/dev`,
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              configFile: path.resolve(__dirname, "./.babelrc"),
+            },
+          },
+        ],
+      },
+      {
+        test: /\.module\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]",
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[name][ext]",
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[name][ext]",
+        },
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [new TerserWebpackPlugin(), new CssMinimizerPlugin()],
+  },
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "static/css/[name].bundle.css",
+    }),
+    new htmlWebpackPlugin({
+      title: "AFront",
+      template: `${__dirname}/dev/index.html`,
+    }),
+  ],
+};

package/webpack.prod.js

@@ -0,0 +1,120 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+const crypto = require("crypto");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/index.js",
+  output: {
+    filename: "static/js/[name]-[contenthash].js",
+    path: path.resolve(__dirname, "build-prod"),
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            configFile: path.resolve(__dirname, "./.babelrc"),
+          },
+        },
+      },
+      {
+        test: /\.module\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]",
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[contenthash][ext]",
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[name][ext]",
+        },
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserWebpackPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: "AFront",
+      template: "./dev/index.html",
+      buildTag: `prod-[contenthash]`,
+      hash: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+      },
+      templateParameters: (compilation) => {
+        const hash = crypto.createHash("sha1");
+        hash.update(compilation.hash);
+        const sha1Hash = hash.digest("hex");
+        return {
+          htmlWebpackPlugin: {
+            options: {
+              title: "AFront",
+              buildTag: `prod-${sha1Hash}`,
+            },
+          },
+        };
+      },
+    }),
+    new MiniCssExtractPlugin({
+      filename: "static/css/[name]-[contenthash].css",
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: "dev/favicon.ico", to: "favicon.ico" },
+        { from: "dev/logo192.png", to: "logo192.png" },
+        { from: "dev/logo512.png", to: "logo512.png" },
+        { from: "dev/manifest.json", to: "manifest.json" },
+        { from: "dev/style.css", to: "style.css" },
+        { from: "dev/robots.txt", to: "robots.txt" },
+      ],
+    }),
+  ],
+  performance: {
+    hints: "warning",
+    maxEntrypointSize: 400000,
+    maxAssetSize: 400000,
+  },
+};

package/webpack.ssr.prod.js

@@ -0,0 +1,86 @@
+const path = require("path");
+const nodeExternals = require("webpack-node-externals");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+
+module.exports = {
+  mode: "production",
+  entry: "./Asggen SSR/index.js",
+  output: {
+    path: path.resolve(__dirname, "build-prod-ssr"),
+    filename: "ssr.prod.js",
+    clean: true,
+    libraryTarget: "commonjs2",
+  },
+  target: "node",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env", "@babel/preset-react"],
+          },
+        },
+      },
+      {
+        test: /\.module\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]",
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[contenthash][ext]",
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[name][ext]",
+        },
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserWebpackPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "static/css/[name]-[contenthash].css",
+    }),
+  ],
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
+  },
+  externals: [nodeExternals()],
+};