### Manual Setup: Create Configuration Files

Source: https://github.com/yusing/godoxy/blob/main/README.md

This snippet provides commands to manually set up the necessary configuration files for the Godoxy project, including `config.yml`, `.env`, and `compose.yml`, by downloading them from the GitHub repository.

```shell
mkdir -p config && wget https://raw.githubusercontent.com/yusing/godoxy/main/config.example.yml -O config/config.yml
wget https://raw.githubusercontent.com/yusing/godoxy/main/.env.example -O .env
wget https://raw.githubusercontent.com/yusing/godoxy/main/compose.example.yml -O compose.yml
```

--------------------------------

### Execute GoDoxy Setup Script

Source: https://github.com/yusing/godoxy/blob/main/README.md

This command downloads and executes the GoDoxy setup script from GitHub, automating the initial configuration and file preparation for Docker Compose. It should be run inside a new, empty directory designated for GoDoxy's configuration files.

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/yusing/godoxy/main/scripts/setup.sh)"
```

--------------------------------

### Start GoDoxy Docker Compose Service

Source: https://github.com/yusing/godoxy/blob/main/README.md

After the setup script generates the `compose.yml` file, this command starts the GoDoxy services in detached mode using Docker Compose. This brings up the reverse proxy and its associated components, making them run in the background.

```shell
docker compose up -d
```

--------------------------------

### Apply Subject to gperr.Error

Source: https://github.com/yusing/godoxy/blob/main/internal/gperr/README.md

Demonstrates how to use `gperr.Error.Subject` to prepend and highlight subjects to an error message. Subjects are applied in a stack-like manner, with the last applied subject becoming the main, highlighted one. For example, applying 'bar' then 'foo' results in 'foo > <span style="color: red;">bar</span>: error message'.

```go
err := gperr.New("error message")
err = err.Subject("bar")
err = err.Subject("foo")
```

--------------------------------

### Prepend Subject to gperr.Error using gperr.PrependSubject

Source: https://github.com/yusing/godoxy/blob/main/internal/gperr/README.md

Illustrates the use of `gperr.PrependSubject` to add subjects to an error message, similar to `gperr.Error.Subject`. Subjects are prepended in reverse order of application, meaning the last subject added becomes the primary, highlighted one. For example, applying 'foo' then 'bar' results in 'bar > <span style="color: red;">foo</span>: error message'.

```go
err := gperr.New("error message")
err = gperr.PrependSubject(err, "foo")
err = gperr.PrependSubject(err, "bar")
```

--------------------------------

### Build Godoxy Project from Source

Source: https://github.com/yusing/godoxy/blob/main/README.md

This snippet provides the sequence of commands required to clone the Godoxy repository, manage Go dependencies, and build the project binary using `make`.

```shell
git clone https://github.com/yusing/godoxy --depth=1
go clean -cache
make get
make build
```

--------------------------------

### Godoxy Project Folder Structure Overview

Source: https://github.com/yusing/godoxy/blob/main/README.md

This snippet illustrates the expected directory and file structure for the Godoxy project, including configuration files, certificates, data storage for metrics, and environment variables.

```shell
├── certs
│   ├── cert.crt
│   └── priv.key
├── compose.yml
├── config
│   ├── config.yml
│   ├── middlewares
│   │   ├── middleware1.yml
│   │   ├── middleware2.yml
│   ├── provider1.yml
│   └── provider2.yml
├── data
│   ├── metrics # metrics data
│   │   ├── uptime.json
│   │   └── system_info.json
└── .env
```

--------------------------------

### Define Global CSS Styles and Layout

Source: https://github.com/yusing/godoxy/blob/main/internal/idlewatcher/html/loading_page.html

This CSS defines global styles, a centered body layout, a styled container with blur effects, and animations for a loading spinner. It utilizes CSS variables for consistent sizing and provides basic typography and color schemes for a dark theme.

```css
/* size variables */ :root { --dot-size: 12px; --logo-size: 100px; }
/* Global Styles */ * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #f8f9fa; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; gap: 32px; background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%); }
/* Container */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; border-radius: 16px; background-color: rgba(30, 30, 30, 0.6); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); max-width: 90%; transition: all 0.3s ease; }
/* Spinner Styles */ .loading-dots { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 20px; padding-bottom: 6px; }
.dot { width: var(--dot-size); height: var(--dot-size); background-color: #66d9ef; border-radius: 50%; animation: bounce 1.3s infinite ease-in-out; }
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }
/* Message Styles */ .message { font-size: 20px; font-weight: 500; text-align: center; color: #f8f9fa; max-width: 500px; letter-spacing: 0.3px; white-space: nowrap; }
/* Logo */ .logo { width: var(--logo-size); height: var(--logo-size); }
```

--------------------------------

### gperr Core API Reference

Source: https://github.com/yusing/godoxy/blob/main/internal/gperr/README.md

Detailed reference for the `gperr` package's main interfaces and functions, including error creation, wrapping, subject manipulation, and error chaining. This section outlines the methods and their parameters for comprehensive understanding of the library's capabilities.

```APIDOC
gperr.Error:
  Description: The core error interface supporting nested structures and subjects.

gperr.New(message: string) -> gperr.Error:
  Description: Creates a new gperr.Error instance.
  Parameters:
    message: The initial error message.
  Returns: A new gperr.Error.
  Similar to: errors.New

gperr.Wrap(message: string, err: error) -> gperr.Error:
  Description: Wraps an existing error with a new message.
  Parameters:
    message: The wrapping message.
    err: The error to wrap.
  Returns: A new gperr.Error with the wrapped error.
  Similar to: fmt.Errorf("%s: %w", message, err)

gperr.Error.Subject(subject: string) -> gperr.Error:
  Description: Prepends a subject to the error message. The last applied subject is highlighted.
  Parameters:
    subject: The subject string to prepend.
  Returns: A new gperr.Error with the subject applied.

gperr.Error.Subjectf(format: string, args: ...any) -> gperr.Error:
  Description: Prepends a formatted subject to the error message using fmt.Sprintf.
  Parameters:
    format: The format string for the subject.
    args: Arguments for the format string.
  Returns: A new gperr.Error with the formatted subject applied.
  Similar to: gperr.Error.Subject

gperr.PrependSubject(err: gperr.Error, subject: string) -> gperr.Error:
  Description: A package-level function to prepend a subject to an error message, similar to gperr.Error.Subject.
  Parameters:
    err: The gperr.Error instance to modify.
    subject: The subject string to prepend.
  Returns: A new gperr.Error with the subject applied.

gperr.Error.With(innerErr: gperr.Error) -> gperr.Error:
  Description: Adds a new error to the current error's chain, creating a nested structure.
  Parameters:
    innerErr: The error to add to the chain.
  Returns: A new gperr.Error with the inner error chained.

gperr.Error.Withf(format: string, args: ...any) -> gperr.Error:
  Description: Adds a new formatted error to the current error's chain using fmt.Errorf.
  Parameters:
    format: The format string for the inner error.
    args: Arguments for the format string.
  Returns: A new gperr.Error with the formatted inner error chained.
  Similar to: gperr.Error.With

gperr.Error.Is(target: error) -> bool:
  Description: Checks if the error is equal to the given target error.
  Parameters:
    target: The error to compare against.
  Returns: True if the errors are equal, false otherwise.

gperr.Builder:
  Description: A utility for building complex gperr.Error instances with multiple nested errors.

gperr.Builder.Add(err: gperr.Error):
  Description: Adds an error to the builder.
  Parameters:
    err: The gperr.Error instance to add.

gperr.Builder.Addf(format: string, args: ...any):
  Description: Adds a formatted error message to the builder.
  Parameters:
    format: The format string for the error message.
    args: Arguments for the format string.

gperr.Builder.AddRange(errors: ...gperr.Error):
  Description: Adds multiple errors to the builder.
  Parameters:
    errors: A variadic list of gperr.Error instances to add.

gperr.Builder.Build() -> gperr.Error:
  Description: Constructs and returns a gperr.Error instance from the accumulated errors in the builder.
  Returns: A new gperr.Error instance.
```

--------------------------------

### Build gperr.Error with gperr.Builder

Source: https://github.com/yusing/godoxy/blob/main/internal/gperr/README.md

Shows how to use `gperr.Builder` to construct complex error messages by adding multiple individual errors or formatted messages. The builder aggregates errors into a single `gperr.Error` instance, presenting them as a list under a main builder message.

```go
builder := gperr.NewBuilder("foo")
builder.Add(gperr.New("error message"))
builder.Addf("error message: %s", "foo")
builder.AddRange(gperr.New("error message 1"), gperr.New("error message 2"))
```

--------------------------------

### Handle Page Redirect and Error Messages on Load

Source: https://github.com/yusing/godoxy/blob/main/internal/idlewatcher/html/loading_page.html

This JavaScript code executes asynchronously when the page finishes loading. It attempts to fetch the current URL with a custom header to check for a redirect. If the fetch is successful (HTTP 200 OK), the browser is redirected to the URL provided in the response. Otherwise, it displays an error message from the response body and removes the loading indicator.

```javascript
window.onload = async function () { let resp = await fetch(window.location.href, { headers: { "{{.CheckRedirectHeader}}": "1", }, }); if (resp.ok) { window.location.href = resp.url; } else { document.getElementById("message").innerText = await resp.text(); document.getElementById("loading-dots").remove(); } };
```

--------------------------------

### Apply Light Mode Styles with Media Query

Source: https://github.com/yusing/godoxy/blob/main/internal/net/gphttp/middleware/captcha/captcha.html

This CSS block applies specific styles for light mode using the `@media (prefers-color-scheme: light)` query. It sets background, text, container, heading, and button styles based on the defined light mode CSS variables.

```CSS
@media (prefers-color-scheme: light) {
  body {
    background: linear-gradient(135deg, var(--background-light), #f0f4f8);
    color: var(--text-light);
  }
  .container {
    background-color: var(--container-bg-light);
    box-shadow: 0 10px 25px var(--shadow-light);
    border: 1px solid rgba(0, 0, 0, 0.04);
  }
  h1 {
    color: var(--heading-light);
  }
  button {
    background: linear-gradient(
      to right, var(--button-bg-light), var(--accent-light)
    );
  }
  button:hover:not(:disabled) {
    background: linear-gradient(
      to right, var(--button-hover-light), var(--button-bg-light)
    );
  }
  button:disabled {
    background: var(--button-disabled-bg-light);
    color: var(--button-disabled-text-light);
  }
  .container::before {
    background: linear-gradient(
      135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.05)
    );
  }
}
```

--------------------------------

### Chain Multiple Errors with gperr.Error.With

Source: https://github.com/yusing/godoxy/blob/main/internal/gperr/README.md

Demonstrates how to chain multiple errors using `gperr.Error.With`, creating a nested error structure. This allows for detailed error reporting with sub-errors, presented hierarchically. The output shows the main error followed by bulleted inner errors, with further nesting indicated by indentation.

```go
err := gperr.New("error message")
err = err.With(gperr.New("inner error"))
err = err.With(gperr.New("inner error 2").With(gperr.New("inner inner error")))
```

--------------------------------

### Dynamically Update Theme based on System Preference

Source: https://github.com/yusing/godoxy/blob/main/internal/net/gphttp/middleware/captcha/captcha.html

This JavaScript function detects the user's preferred color scheme (dark or light) and applies the corresponding theme to a specific HTML element. It runs on page load and ensures the UI matches system settings.

```JavaScript
function updateTheme() {
  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  document
    .querySelector("#verification-form > :first-child")
    .setAttribute("data-theme", theme);
}
window.addEventListener("load", updateTheme);
```

--------------------------------

### Apply Dark Mode Styles with Media Query

Source: https://github.com/yusing/godoxy/blob/main/internal/net/gphttp/middleware/captcha/captcha.html

This CSS block applies specific styles for dark mode using the `@media (prefers-color-scheme: dark)` query. It sets background, text, container, heading, and button styles based on the defined dark mode CSS variables.

```CSS
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, var(--background-dark), #0f172a);
    color: var(--text-dark);
  }
  .container {
    background-color: var(--container-bg-dark);
    box-shadow: 0 10px 25px var(--shadow-dark);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  h1 {
    color: var(--heading-dark);
  }
  button {
    background: linear-gradient(
      to right, var(--button-bg-dark), var(--accent-dark)
    );
  }
  button:hover:not(:disabled) {
    background: linear-gradient(
      to right, var(--button-hover-dark), var(--button-bg-dark)
    );
  }
  button:disabled {
    background: var(--button-disabled-bg-dark);
    color: var(--button-disabled-text-dark);
  }
  .container::before {
    background: linear-gradient(
      135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.05)
    );
  }
}
```

--------------------------------

### General User Interface Styling for Verification Form

Source: https://github.com/yusing/godoxy/blob/main/internal/net/gphttp/middleware/captcha/captcha.html

This CSS block defines general styles for the verification page layout, including font family, centering, container appearance, button styles, and form arrangement. It also includes a `fadeIn` animation for the container.

```CSS
body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  transition: background-color 0.5s ease, color 0.3s ease;
  line-height: 1.6;
}
.container {
  position: relative;
  padding: 48px 42px;
  border-radius: 16px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  animation: fadeIn 0.5s ease-out;
}
.container::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  border-radius: 30%;
  opacity: 0.5;
  z-index: 0;
  transform: rotate(-8deg);
}
.content {
  position: relative;
  z-index: 1;
}
h1 {
  font-size: 1.75em;
  font-weight: 700;
  margin-bottom: 28px;
  transition: color 0.3s ease;
  letter-spacing: -0.02em;
}
button {
  color: white;
  border: none;
  padding: 13px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.25s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}
button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15);
}
button:disabled {
  cursor: not-allowed;
  box-shadow: none;
}
#verification-form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 1;
}
#verification-form > :first-child {
  margin-left: auto;
  margin-right: auto;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.description {
  color: var(--text-light);
  opacity: 0.85;
  font-size: 0.95rem;
  margin-bottom: 20px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
@media (prefers-color-scheme: dark) {
  .description {
    color: var(--text-dark);
    opacity: 0.75;
  }
}
```

--------------------------------

### Define CSS Variables for Light and Dark Themes

Source: https://github.com/yusing/godoxy/blob/main/internal/net/gphttp/middleware/captcha/captcha.html

This CSS block defines a comprehensive set of custom properties (CSS variables) for both light and dark mode. These variables control colors for background, text, containers, shadows, headings, and buttons, enabling easy theme switching.

```CSS
:root {
  /* Light mode colors */
  --background-light: #f8f9fa;
  --text-light: #2d3748;
  --container-bg-light: #ffffff;
  --shadow-light: rgba(0, 0, 0, 0.08);
  --heading-light: #3d4852;
  --button-bg-light: #4f46e5;
  --button-hover-light: #4338ca;
  --button-disabled-bg-light: #e9ecef;
  --button-disabled-text-light: #a0aec0;
  --accent-light: #6366f1;
  /* Dark mode colors */
  --background-dark: #111827;
  --text-dark: #e5e7eb;
  --container-bg-dark: #1f2937;
  --shadow-dark: rgba(0, 0, 0, 0.3);
  --heading-dark: #f3f4f6;
  --button-bg-dark: #6366f1;
  --button-hover-dark: #4f46e5;
  --button-disabled-bg-dark: #374151;
  --button-disabled-text-dark: #9ca3af;
  --accent-dark: #818cf8;
}
```

--------------------------------

### Submit Verification Form on Data Callback

Source: https://github.com/yusing/godoxy/blob/main/internal/net/gphttp/middleware/captcha/captcha.html

This JavaScript function is designed to be called when data is received, likely from a verification service. It triggers the submission of the HTML form with the ID 'verification-form'.

```JavaScript
function onDataCallback() {
  document.getElementById("verification-form").submit();
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.