Of course. Here is a perfect English translation of the entire README, including all the sections we've worked on, formatted for clarity and readability.

-----

### Text Marker Tool for Websites

This tool is a sleek, browser-integrated text marker that allows users to highlight text directly on your website. The highlights are saved locally in the user's browser and remain even after the page is closed. Since it requires no external libraries or server connections, it's very easy to implement and extremely powerful.

-----

### What the Tool Can Do

  * **Highlight Text**: Visitors can select text passages with their mouse and choose a color from a palette to highlight them permanently.
  * **Persistent Storage**: The highlights are stored in the browser's `localStorage`. They are page-specific and remain even after the browser is closed and the page is reopened.
  * **Color Selection**: A customizable color palette offers various options for the highlight color.
  * **Page-Specific Highlights**: Every highlight is unique to the page on which it was created. There are no mix-ups or incorrect placements between different subpages of your website.
  * **No External Dependencies**: The entire tool consists of pure **HTML**, **CSS**, and **JavaScript**. No external library like jQuery or a backend system is required.
  * **Easy Deletion**: Highlights can be removed with a simple click on the marked spot.

-----

### The Technology Behind It

The tool uses standard web technologies to achieve its functionality. It is divided into three main areas:

#### 1\. HTML (The User Interface)

The user interface consists of a hidden modal window (`#colorModal`) that appears when text is selected. It contains color swatches that represent the color palette, as well as buttons for deleting and closing. The actual text of the website is placed within a container (`.content_container`) so that the script knows exactly which area to search for highlights.

#### 2\. CSS (The Visuals)

The CSS is responsible for the visual design of the tool. It controls the position and appearance of the modal window and the color swatches. Most importantly, it formats the highlighted text sections.

```css
.highlight {
    padding: 5px;
    font-weight: 700;
}
```

The `.highlight` class is assigned to the marked `<span>` elements. The `padding` property creates a small space around the text, while `font-weight: 700` makes the text bold to improve readability. The background color is set dynamically via JavaScript.

#### 3\. JavaScript (The Logic)

The heart of the tool is a JavaScript script that controls all the functions.

  * **DOM Manipulation**: When a user selects text, `document.createRange()` and `range.surroundContents()` are used to wrap the selected text with a `<span>` element.
  * **Storage (`localStorage`)**: The script stores highlight data (start and end position, color, text content) in the browser's **`localStorage`**. The storage location (`STORAGE_KEY`) is dynamically adapted to the URL of the respective page. This ensures that highlights on one page are always separate from those on other pages, which fixes the problem of incorrect highlights.
  * **Functions**: Several custom functions control the process:
      * `getGlobalOffsets()`: Calculates the start and end position of the selected text based on the entire text content of the container.
      * `loadHighlights()` and `saveHighlights()`: Load and save the highlight data in `localStorage`.
      * `renderAllHighlights()`: Rebuilds the highlights when the page loads or after a change.

-----

### Installation and Usage

The installation of the text marker tool is very simple as the necessary files are already prepared for download. Choose the method that best suits your website.

#### The files to download:

  * `marker_tool.html` (contains the HTML for the modal window and the CSS)
  * `marker_tool.js` (contains all the JavaScript logic)

-----

#### Method 1: For PHP Websites (Recommended)

This is the fastest and cleanest method. You don't have to copy and paste any code.

1.  **Upload Files**: Upload both files (`marker_tool.html` and `marker_tool.js`) to the same directory where your PHP file is located.
2.  **Include Code**: Add the following line to each of your PHP files where the text marker should be available. Ideally, place it directly before the closing `</body>` tag. The `marker_tool.html` file will automatically load the JavaScript file.

<!-- end list -->

```html
...
<?php include('marker_tool.html'); ?>
</body>
</html>
```

*Important Note:* Ensure that all the text content you want to be able to highlight is enclosed in an element with the class `.content_container`, for example, `<main class="content_container">...</main>`.

-----

#### Method 2: For Pure HTML Websites

This method is for websites without PHP support. Here you have to manually copy and paste the code into each page.

1.  **Open Files**: Open the downloaded files (`marker_tool.html` and `marker_tool.js`) in a text editor.
2.  **Copy and Paste Code**: Copy the code from each file and add it to your HTML file as follows:
      * **HTML & CSS**: Copy all the content from `marker_tool.html` and paste it at the end of your `<body>` tag. The file contains both the HTML for the modal and the CSS inside a `<style>` tag.
      * **JavaScript**: Copy all the code from `marker_tool.js` and paste it into a `<script>` tag that is placed directly after the modal's HTML code.
3.  **Example Structure**: Your final HTML page should be structured like this:

<!-- end list -->

```html
<!DOCTYPE html>
<html>
<head>
    </head>
<body>
    <main class="content_container">
        <h1>My Page Title</h1>
        <p>Here is a paragraph of text.</p>
    </main>

    <div id="colorModal" ...>
        <style>
            /* CSS here */
        </style>
        ...
    </div>

    <script>
        // JS here
    </script>
</body>
</html>
```

*Important Note:* With this method as well, all the text content you want to be able to highlight must be enclosed in an element with the class `.content_container`.

-----

### Customizing the Content Container

The tool is set by default to the class `.content_container`. If you want to use a different selector (e.g., another class or an ID) for your content area, you only need to adjust a single line in the JavaScript code.

In the file **`marker_tool.js`**, find the following line:

```javascript
const content = document.querySelector('.content_container');
```

Change the selector **`.content_container`** inside the quotation marks.

  * If your container has the class **`my-text`**, change the line to:
    `const content = document.querySelector('.my-text');`
  * If your container has the ID **`my-content`**, change the line to:
    `const content = document.querySelector('#my-content');`

After changing this one line, the entire tool will automatically work with your new container.