### CSS for 404 Page Styling

Source: https://github.com/testsigmahq/testsigma/blob/dev/agent/src/main/resources/templates/404.html

Defines styles for the 404 page, including colors, layout, and loading animations. No specific setup is required beyond including this CSS.

```css
:root {
  --main-color: white;
  --stroke-color: #5d862e;
  --link-color: #29abe2;
}
body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
}
.align-center {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
}
.loading-dots {
  color: #6a737d;
  width: 40px;
  display: inline-block;
}
.loading-dots:after {
  content: "";
  animation: dotsLoadLTR 2s linear infinite;
}
@keyframes dotsLoadLTR {
  0% {
    content: ".";
  }
  20% {
    content: "..";
  }
  40% {
    content: "...";
  }
  60% {
    content: "....";
  }
  80% {
    content: ".....";
  }
  100% {
    content: "......";
  }
}
.icon {
  width: 200px;
  height: 200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-not-image, .loading-image {
  flex: 0 0 100%;
}
.msg-text {
  color: #6a737d;
  font-size: 27px;
  font-weight: 600;
}
.loading.completed, .result-not-found, .result-not-image, .loading-image.completed {
  display: none;
}
.result-not-found.completed, .result-not-image.completed {
  display: block;
}

#A {
  animation: dash 3s ease forwards infinite;
  transform-origin: center
}
@keyframes dash {
  to {
    stroke-dashoffset: 0
  }
}
```

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

### Get Test Plan Results by Run ID via API

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/app/components/plans/plugs.component.html

Use this cURL command to retrieve specific test plan results using a run ID from the Testsigma API. Replace `<API_KEY>` and `RUN-ID` with your actual credentials and the run identifier.

```bash
curl -X GET -H "Content-type: application/json" -H "Accept:application/json" -H "Authorization: Bearer <API_KEY>" https://your-testsigma-server.com/api/v1/test_plan_results/YOUR_RUN_ID
```

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

### Get Test Plan Results by Run ID

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/app/components/plans/plugs.component.html

This endpoint allows you to retrieve the results of a specific test plan run using its unique RUN-ID.

```APIDOC
## GET /api/v1/test_plan_results/{RUN-ID}

### Description
Retrieves the results of a specific test plan run.

### Method
GET

### Endpoint
/api/v1/test_plan_results/RUN-ID

### Parameters
#### Path Parameters
- **RUN-ID** (string) - Required - The unique identifier for the test plan run.

### Request Example
```bash
curl -X GET -H "Content-type: application/json" -H "Accept:application/json" -H "Authorization: Bearer <API_KEY>" {{this.authGuard.session.serverUrl}}/api/v1/test_plan_results/RUN-ID
```
```

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

### CSS for 500 Error Page Styling

Source: https://github.com/testsigmahq/testsigma/blob/dev/agent/src/main/resources/templates/500.html

Defines styles for the error page, including layout, loading animations, and message display. No specific setup is required beyond including it in the HTML.

```css
:root {
  --main-color: white;
  --stroke-color: #5d862e;
  --link-color: #29abe2;
}
body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
}
.align-center {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
}
.loading-dots {
  color: #6a737d;
  width: 40px;
  display: inline-block;
}
.loading-dots:after {
  content: "";
  animation: dotsLoadLTR 2s linear infinite;
}
@keyframes dotsLoadLTR {
  0% {
    content: ".";
  }
  20% {
    content: "..";
  }
  40% {
    content: "...";
  }
  60% {
    content: "....";
  }
  80% {
    content: ".....";
  }
  100% {
    content: "......";
  }
}
.icon {
  width: 200px;
  height: 200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-not-image, .loading-image {
  flex: 0 0 100%;
}
.msg-text {
  color: #6a737d;
  font-size: 27px;
  font-weight: 600;
}
.loading.completed, .result-not-found, .result-not-image, .loading-image.completed {
  display: none;
}
.result-not-found.completed, .result-not-image.completed {
  display: block;
}
```

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

### Post Test Plan Results via API

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/app/components/plans/plugs.component.html

Use this cURL command to post test plan results to the Testsigma API. Ensure you replace `<API_KEY>` with your actual API key and `testPlanId` with the relevant ID.

```bash
curl -X POST -H "Content-type: application/json"  -H "Accept:application/json" -H "Authorization: Bearer <API_KEY>" https://your-testsigma-server.com/api/v1/test_plan_results -d "{\"testPlanId\": \"your_test_plan_id\"}"
```

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

### JavaScript Configuration for Beamer

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/index.html

Configures the Beamer product feedback tool with a product ID and selector. This code is commented out and conditionally executed.

```javascript
//if (!window.location.href.startsWith('http://devos.testsigma.com')) {
//  var beamer_config = {
//    product_id: "gISeLlDx37997",
//    selector: "beamer-trigger"
//  };
//}
```

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

### JavaScript for Managing 404 Page States

Source: https://github.com/testsigmahq/testsigma/blob/dev/agent/src/main/resources/templates/404.html

This script handles the completion of loading and error states on the 404 page. It adds a 'completed' class to elements after a 7-second delay.

```javascript
document.addEventListener('DOMContentLoaded', function (event) {
  setTimeout( function () {
    document.getElementsByClassName('loading')[0].classList.add('completed');
    document.getElementsByClassName('result-not-found')[0].classList.add('completed');
    document.getElementsByClassName('loading-image')[0].classList.add('completed');
    document.getElementsByClassName('result-not-image')[0].classList.add('completed');
  }, 7000);
})
```

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

### Attribute and Value Comparison in HTML

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/app/agents/components/webcomponents/app-source-container.component.html

This snippet demonstrates a conditional rendering logic within an HTML template, likely for comparing an attribute's value against user input or a predefined value. It's useful for dynamic UI elements that respond to user interactions or data changes.

```html
< {{item.type}} {{searchInput.value}}   {{attribute.key}} {{searchInput.value}} = " {{attribute.value}} {{searchInput.value}} "   {{attribute}} {{searchInput.value}} = " {{item[attribute]}} {{searchInput.value}} " >
```

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

### CSS for Layout Containers

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/index.html

Defines styles for outer, middle, and inner layout containers to achieve vertical centering and flexible width.

```css
.outer { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
```

```css
.middle { display: table-cell; vertical-align: middle; }
```

```css
.inner { margin-left: auto; margin-right: auto; width: 54px; /*whatever width you want*/ }
```

```css
.banner { margin-left: auto; margin-right: auto; width: 500px; }
```

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

### Testsigma Primary Nav Bar CSS

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/index.html

Styles the primary navigation bar with fixed dimensions, positioning, and background color.

```css
.primary-nav-bar-app-shell { width: 60px; height: 100vh; position: relative; display: inline-flex; background-color: #2b5468; flex-direction: column; align-items: center; padding: 15px 0px; float: left; }
```

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

### JavaScript for Managing Loading and Visibility States

Source: https://github.com/testsigmahq/testsigma/blob/dev/agent/src/main/resources/templates/500.html

This script runs after the DOM is fully loaded. It sets a timeout to hide various loading and result elements after 3.5 seconds by adding a 'completed' class.

```javascript
document.addEventListener('DOMContentLoaded', function (event) {
  setTimeout( function () {
    document.getElementsByClassName('loading')[0].classList.add('completed');
    document.getElementsByClassName('result-not-found')[0].classList.add('completed');
    document.getElementsByClassName('loading-image')[0].classList.add('completed');
    document.getElementsByClassName('result-not-image')[0].classList.add('completed');
    document.getElementsByClassName('result-not-found')[1].classList.add('completed');
  }, 3500);
})
```

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

### CSS Animation for Rotation

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/index.html

Applies a 'dash' animation for a 2-second infinite rotation, with the transform origin set to the center.

```css
#Path-Copy-32 { animation: dash 2s ease forwards infinite; transform-origin: center; }
```

```css
@keyframes dash { to { transform: rotate(360deg); } }
```

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

### Post Test Plan Results

Source: https://github.com/testsigmahq/testsigma/blob/dev/ui/src/app/components/plans/plugs.component.html

This endpoint allows you to post the results of a test plan execution. You need to provide the test plan ID in the request body.

```APIDOC
## POST /api/v1/test_plan_results

### Description
Posts the results of a test plan execution.

### Method
POST

### Endpoint
/api/v1/test_plan_results

### Request Body
- **testPlanId** (string) - Required - The ID of the test plan whose results are being posted.

### Request Example
```bash
curl -X POST -H "Content-type: application/json"  -H "Accept:application/json" -H "Authorization: Bearer <API_KEY>" {{this.authGuard.session.serverUrl}}/api/v1/test_plan_results -d "{\"testPlanId\": \"<testPlanId>\"}"
```
```

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

### SVG Animation for Error Icon

Source: https://github.com/testsigmahq/testsigma/blob/dev/agent/src/main/resources/templates/500.html

Applies a 'dash' animation to an SVG element with the ID 'A'. The animation is set to run infinitely for 3 seconds, with a transform origin at the center.

```css
#A {
  animation: dash 3s ease forwards infinite;
  transform-origin: center
}
@keyframes dash {
  to {
    stroke-dashoffset: 0
  }
}
```

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