Spaces:
Running
Running
I am lookig for qa dashboard project, below are the requirements.
Browse files1. User login
2. Upon succesfull login, need below dropdown
a. Testing Type
1. Functional
2. Performance
3. Accesbility
4 Chaos Engg
5. Security
6. API Testing
3. Once user select the Testing type, please display below feilds
a. Currently Executing tests
b. Reports
c. Tag based filters
d. Last Run
e. Trigger Test now
4. When user clicks on Trigger now,
Please have the feilds,
a. All available test suites in dropdown
b. Time to execute
c. TestOps
c. Waiting Queue Details
If functional,
1. Browsers to run
2. Profile to use
if performance,
1. Users
2. Rampup
3. Holdtime
after executing the tests, stop it
- README.md +8 -5
- components/auth-modal.js +116 -0
- components/navbar.js +100 -0
- index.html +221 -19
- script.js +93 -0
- style.css +35 -19
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: QA Nexus Commander 🚀
|
| 3 |
+
colorFrom: blue
|
| 4 |
+
colorTo: purple
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
components/auth-modal.js
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class AuthModal extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.modal {
|
| 7 |
+
position: fixed;
|
| 8 |
+
inset: 0;
|
| 9 |
+
background-color: rgba(0, 0, 0, 0.5);
|
| 10 |
+
display: flex;
|
| 11 |
+
align-items: center;
|
| 12 |
+
justify-content: center;
|
| 13 |
+
z-index: 100;
|
| 14 |
+
}
|
| 15 |
+
.modal-content {
|
| 16 |
+
background-color: white;
|
| 17 |
+
padding: 2rem;
|
| 18 |
+
border-radius: 0.5rem;
|
| 19 |
+
width: 100%;
|
| 20 |
+
max-width: 400px;
|
| 21 |
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
| 22 |
+
animation: modalFadeIn 0.3s ease-out forwards;
|
| 23 |
+
}
|
| 24 |
+
.tabs {
|
| 25 |
+
display: flex;
|
| 26 |
+
margin-bottom: 1.5rem;
|
| 27 |
+
border-bottom: 1px solid #e5e7eb;
|
| 28 |
+
}
|
| 29 |
+
.tab {
|
| 30 |
+
padding: 0.75rem 1rem;
|
| 31 |
+
cursor: pointer;
|
| 32 |
+
font-weight: 500;
|
| 33 |
+
color: #6b7280;
|
| 34 |
+
border-bottom: 2px solid transparent;
|
| 35 |
+
}
|
| 36 |
+
.tab.active {
|
| 37 |
+
color: #3b82f6;
|
| 38 |
+
border-bottom-color: #3b82f6;
|
| 39 |
+
}
|
| 40 |
+
.tab-content {
|
| 41 |
+
display: none;
|
| 42 |
+
}
|
| 43 |
+
.tab-content.active {
|
| 44 |
+
display: block;
|
| 45 |
+
}
|
| 46 |
+
.form-group {
|
| 47 |
+
margin-bottom: 1rem;
|
| 48 |
+
}
|
| 49 |
+
label {
|
| 50 |
+
display: block;
|
| 51 |
+
margin-bottom: 0.5rem;
|
| 52 |
+
font-weight: 500;
|
| 53 |
+
}
|
| 54 |
+
input {
|
| 55 |
+
width: 100%;
|
| 56 |
+
padding: 0.5rem 0.75rem;
|
| 57 |
+
border: 1px solid #d1d5db;
|
| 58 |
+
border-radius: 0.375rem;
|
| 59 |
+
}
|
| 60 |
+
button {
|
| 61 |
+
width: 100%;
|
| 62 |
+
padding: 0.75rem;
|
| 63 |
+
background-color: #3b82f6;
|
| 64 |
+
color: white;
|
| 65 |
+
border: none;
|
| 66 |
+
border-radius: 0.375rem;
|
| 67 |
+
font-weight: 500;
|
| 68 |
+
cursor: pointer;
|
| 69 |
+
}
|
| 70 |
+
button:hover {
|
| 71 |
+
background-color: #2563eb;
|
| 72 |
+
}
|
| 73 |
+
@keyframes modalFadeIn {
|
| 74 |
+
from {
|
| 75 |
+
opacity: 0;
|
| 76 |
+
transform: translateY(-20px);
|
| 77 |
+
}
|
| 78 |
+
to {
|
| 79 |
+
opacity: 1;
|
| 80 |
+
transform: translateY(0);
|
| 81 |
+
}
|
| 82 |
+
}
|
| 83 |
+
</style>
|
| 84 |
+
<div id="login-modal" class="modal">
|
| 85 |
+
<div class="modal-content">
|
| 86 |
+
<div class="tabs">
|
| 87 |
+
<div class="tab active">Login</div>
|
| 88 |
+
</div>
|
| 89 |
+
<form id="login-form" class="tab-content active">
|
| 90 |
+
<div class="form-group">
|
| 91 |
+
<label for="email">Email</label>
|
| 92 |
+
<input type="email" id="email" required>
|
| 93 |
+
</div>
|
| 94 |
+
<div class="form-group">
|
| 95 |
+
<label for="password">Password</label>
|
| 96 |
+
<input type="password" id="password" required>
|
| 97 |
+
</div>
|
| 98 |
+
<button type="submit">Sign In</button>
|
| 99 |
+
</form>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
`;
|
| 103 |
+
|
| 104 |
+
// Initialize Feather Icons in shadow DOM
|
| 105 |
+
const featherScript = document.createElement('script');
|
| 106 |
+
featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
|
| 107 |
+
this.shadowRoot.appendChild(featherScript);
|
| 108 |
+
featherScript.onload = () => {
|
| 109 |
+
if (window.feather) {
|
| 110 |
+
window.feather.replace();
|
| 111 |
+
}
|
| 112 |
+
};
|
| 113 |
+
}
|
| 114 |
+
}
|
| 115 |
+
|
| 116 |
+
customElements.define('auth-modal', AuthModal);
|
components/navbar.js
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.navbar {
|
| 7 |
+
background-color: #1e40af;
|
| 8 |
+
color: white;
|
| 9 |
+
padding: 1rem 2rem;
|
| 10 |
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
| 11 |
+
}
|
| 12 |
+
.navbar-container {
|
| 13 |
+
display: flex;
|
| 14 |
+
justify-content: space-between;
|
| 15 |
+
align-items: center;
|
| 16 |
+
max-width: 1200px;
|
| 17 |
+
margin: 0 auto;
|
| 18 |
+
}
|
| 19 |
+
.logo {
|
| 20 |
+
font-weight: bold;
|
| 21 |
+
font-size: 1.5rem;
|
| 22 |
+
display: flex;
|
| 23 |
+
align-items: center;
|
| 24 |
+
}
|
| 25 |
+
.logo i {
|
| 26 |
+
margin-right: 0.5rem;
|
| 27 |
+
}
|
| 28 |
+
.nav-links {
|
| 29 |
+
display: flex;
|
| 30 |
+
align-items: center;
|
| 31 |
+
}
|
| 32 |
+
.user-info {
|
| 33 |
+
display: flex;
|
| 34 |
+
align-items: center;
|
| 35 |
+
cursor: pointer;
|
| 36 |
+
}
|
| 37 |
+
.user-info img {
|
| 38 |
+
width: 32px;
|
| 39 |
+
height: 32px;
|
| 40 |
+
border-radius: 50%;
|
| 41 |
+
margin-right: 0.5rem;
|
| 42 |
+
}
|
| 43 |
+
.dropdown {
|
| 44 |
+
position: relative;
|
| 45 |
+
}
|
| 46 |
+
.dropdown-content {
|
| 47 |
+
display: none;
|
| 48 |
+
position: absolute;
|
| 49 |
+
right: 0;
|
| 50 |
+
background-color: white;
|
| 51 |
+
min-width: 160px;
|
| 52 |
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
| 53 |
+
border-radius: 0.5rem;
|
| 54 |
+
z-index: 1;
|
| 55 |
+
}
|
| 56 |
+
.dropdown-content a {
|
| 57 |
+
color: #333;
|
| 58 |
+
padding: 0.75rem 1rem;
|
| 59 |
+
text-decoration: none;
|
| 60 |
+
display: block;
|
| 61 |
+
}
|
| 62 |
+
.dropdown-content a:hover {
|
| 63 |
+
background-color: #f1f5f9;
|
| 64 |
+
}
|
| 65 |
+
.dropdown:hover .dropdown-content {
|
| 66 |
+
display: block;
|
| 67 |
+
}
|
| 68 |
+
</style>
|
| 69 |
+
<nav class="navbar">
|
| 70 |
+
<div class="navbar-container">
|
| 71 |
+
<a href="#" class="logo">
|
| 72 |
+
<i data-feather="command"></i>
|
| 73 |
+
QA Nexus
|
| 74 |
+
</a>
|
| 75 |
+
<div class="nav-links">
|
| 76 |
+
<div class="dropdown user-info">
|
| 77 |
+
<div class="flex items-center">
|
| 78 |
+
<img src="http://static.photos/technology/200x200/123" alt="User">
|
| 79 |
+
<span>John Doe</span>
|
| 80 |
+
<i data-feather="chevron-down" class="ml-1"></i>
|
| 81 |
+
</div>
|
| 82 |
+
<div class="dropdown-content">
|
| 83 |
+
<a href="#"><i data-feather="user" class="mr-2"></i> Profile</a>
|
| 84 |
+
<a href="#"><i data-feather="settings" class="mr-2"></i> Settings</a>
|
| 85 |
+
<a href="#" id="logout-btn"><i data-feather="log-out" class="mr-2"></i> Logout</a>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
</nav>
|
| 91 |
+
`;
|
| 92 |
+
|
| 93 |
+
// Handle logout
|
| 94 |
+
this.shadowRoot.querySelector('#logout-btn').addEventListener('click', () => {
|
| 95 |
+
window.location.reload();
|
| 96 |
+
});
|
| 97 |
+
}
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
customElements.define('custom-navbar', CustomNavbar);
|
index.html
CHANGED
|
@@ -1,19 +1,221 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>QA Nexus Commander</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="components/navbar.js"></script>
|
| 12 |
+
<script src="components/auth-modal.js"></script>
|
| 13 |
+
</head>
|
| 14 |
+
<body class="bg-gray-100">
|
| 15 |
+
<custom-navbar></custom-navbar>
|
| 16 |
+
<auth-modal></auth-modal>
|
| 17 |
+
|
| 18 |
+
<div id="dashboard" class="container mx-auto px-4 py-8 hidden">
|
| 19 |
+
<!-- Testing Type Selection -->
|
| 20 |
+
<div class="mb-8 bg-white rounded-lg shadow p-6">
|
| 21 |
+
<h2 class="text-2xl font-bold mb-4 text-gray-800">Select Testing Type</h2>
|
| 22 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 23 |
+
<div class="testing-type-card" data-type="functional">
|
| 24 |
+
<i data-feather="monitor" class="w-12 h-12 text-blue-500 mb-3"></i>
|
| 25 |
+
<h3 class="text-xl font-semibold mb-2">Functional</h3>
|
| 26 |
+
<p class="text-gray-600">Validate application functionality</p>
|
| 27 |
+
</div>
|
| 28 |
+
<div class="testing-type-card" data-type="performance">
|
| 29 |
+
<i data-feather="activity" class="w-12 h-12 text-purple-500 mb-3"></i>
|
| 30 |
+
<h3 class="text-xl font-semibold mb-2">Performance</h3>
|
| 31 |
+
<p class="text-gray-600">Test system under load</p>
|
| 32 |
+
</div>
|
| 33 |
+
<div class="testing-type-card" data-type="accessibility">
|
| 34 |
+
<i data-feather="eye" class="w-12 h-12 text-green-500 mb-3"></i>
|
| 35 |
+
<h3 class="text-xl font-semibold mb-2">Accessibility</h3>
|
| 36 |
+
<p class="text-gray-600">Ensure inclusive design</p>
|
| 37 |
+
</div>
|
| 38 |
+
<div class="testing-type-card" data-type="chaos">
|
| 39 |
+
<i data-feather="zap" class="w-12 h-12 text-red-500 mb-3"></i>
|
| 40 |
+
<h3 class="text-xl font-semibold mb-2">Chaos Engg</h3>
|
| 41 |
+
<p class="text-gray-600">Test system resilience</p>
|
| 42 |
+
</div>
|
| 43 |
+
<div class="testing-type-card" data-type="security">
|
| 44 |
+
<i data-feather="shield" class="w-12 h-12 text-yellow-500 mb-3"></i>
|
| 45 |
+
<h3 class="text-xl font-semibold mb-2">Security</h3>
|
| 46 |
+
<p class="text-gray-600">Identify vulnerabilities</p>
|
| 47 |
+
</div>
|
| 48 |
+
<div class="testing-type-card" data-type="api">
|
| 49 |
+
<i data-feather="code" class="w-12 h-12 text-indigo-500 mb-3"></i>
|
| 50 |
+
<h3 class="text-xl font-semibold mb-2">API Testing</h3>
|
| 51 |
+
<p class="text-gray-600">Validate API contracts</p>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
|
| 56 |
+
<!-- Testing Dashboard (will be shown after type selection) -->
|
| 57 |
+
<div id="testing-dashboard" class="hidden bg-white rounded-lg shadow p-6">
|
| 58 |
+
<div class="flex justify-between items-center mb-6">
|
| 59 |
+
<h2 id="testing-type-title" class="text-2xl font-bold text-gray-800"></h2>
|
| 60 |
+
<button id="trigger-modal-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center">
|
| 61 |
+
<i data-feather="play" class="mr-2"></i> Trigger Test Now
|
| 62 |
+
</button>
|
| 63 |
+
</div>
|
| 64 |
+
|
| 65 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 66 |
+
<div class="stats-card">
|
| 67 |
+
<div class="flex items-center">
|
| 68 |
+
<div class="p-3 rounded-full bg-blue-100 mr-4">
|
| 69 |
+
<i data-feather="clock" class="text-blue-500"></i>
|
| 70 |
+
</div>
|
| 71 |
+
<div>
|
| 72 |
+
<p class="text-gray-500">Currently Executing</p>
|
| 73 |
+
<h3 id="executing-tests" class="text-2xl font-bold">5</h3>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
|
| 78 |
+
<div class="stats-card">
|
| 79 |
+
<div class="flex items-center">
|
| 80 |
+
<div class="p-3 rounded-full bg-green-100 mr-4">
|
| 81 |
+
<i data-feather="file-text" class="text-green-500"></i>
|
| 82 |
+
</div>
|
| 83 |
+
<div>
|
| 84 |
+
<p class="text-gray-500">Reports</p>
|
| 85 |
+
<h3 id="total-reports" class="text-2xl font-bold">24</h3>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<div class="stats-card">
|
| 91 |
+
<div class="flex items-center">
|
| 92 |
+
<div class="p-3 rounded-full bg-purple-100 mr-4">
|
| 93 |
+
<i data-feather="calendar" class="text-purple-500"></i>
|
| 94 |
+
</div>
|
| 95 |
+
<div>
|
| 96 |
+
<p class="text-gray-500">Last Run</p>
|
| 97 |
+
<h3 id="last-run" class="text-2xl font-bold">2h ago</h3>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
|
| 103 |
+
<!-- Filters -->
|
| 104 |
+
<div class="mt-8">
|
| 105 |
+
<h3 class="text-lg font-semibold mb-3">Tag Based Filters</h3>
|
| 106 |
+
<div class="flex flex-wrap gap-2">
|
| 107 |
+
<span class="tag-filter">Regression</span>
|
| 108 |
+
<span class="tag-filter">Smoke</span>
|
| 109 |
+
<span class="tag-filter">Sanity</span>
|
| 110 |
+
<span class="tag-filter">Critical</span>
|
| 111 |
+
<span class="tag-filter">UI</span>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
|
| 117 |
+
<!-- Test Trigger Modal -->
|
| 118 |
+
<div id="trigger-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
|
| 119 |
+
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
| 120 |
+
<div class="p-6">
|
| 121 |
+
<div class="flex justify-between items-center mb-4">
|
| 122 |
+
<h3 id="modal-title" class="text-xl font-bold text-gray-800">Trigger New Test</h3>
|
| 123 |
+
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
|
| 124 |
+
<i data-feather="x"></i>
|
| 125 |
+
</button>
|
| 126 |
+
</div>
|
| 127 |
+
|
| 128 |
+
<form id="test-form">
|
| 129 |
+
<div class="mb-4">
|
| 130 |
+
<label class="block text-gray-700 mb-2">Test Suite</label>
|
| 131 |
+
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 132 |
+
<option>Select Test Suite</option>
|
| 133 |
+
<option>Full Regression Suite</option>
|
| 134 |
+
<option>Smoke Test Suite</option>
|
| 135 |
+
<option>Sanity Check Suite</option>
|
| 136 |
+
<option>Critical Path Suite</option>
|
| 137 |
+
</select>
|
| 138 |
+
</div>
|
| 139 |
+
|
| 140 |
+
<div class="mb-4">
|
| 141 |
+
<label class="block text-gray-700 mb-2">Time to Execute</label>
|
| 142 |
+
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Estimated execution time">
|
| 143 |
+
</div>
|
| 144 |
+
|
| 145 |
+
<div class="mb-4">
|
| 146 |
+
<label class="block text-gray-700 mb-2">TestOps</label>
|
| 147 |
+
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 148 |
+
<option>Select TestOps</option>
|
| 149 |
+
<option>Parallel Execution</option>
|
| 150 |
+
<option>Sequential Execution</option>
|
| 151 |
+
</select>
|
| 152 |
+
</div>
|
| 153 |
+
|
| 154 |
+
<div id="functional-fields" class="hidden">
|
| 155 |
+
<div class="mb-4">
|
| 156 |
+
<label class="block text-gray-700 mb-2">Browsers</label>
|
| 157 |
+
<div class="flex flex-wrap gap-3">
|
| 158 |
+
<label class="inline-flex items-center">
|
| 159 |
+
<input type="checkbox" class="form-checkbox text-blue-600">
|
| 160 |
+
<span class="ml-2">Chrome</span>
|
| 161 |
+
</label>
|
| 162 |
+
<label class="inline-flex items-center">
|
| 163 |
+
<input type="checkbox" class="form-checkbox text-blue-600">
|
| 164 |
+
<span class="ml-2">Firefox</span>
|
| 165 |
+
</label>
|
| 166 |
+
<label class="inline-flex items-center">
|
| 167 |
+
<input type="checkbox" class="form-checkbox text-blue-600">
|
| 168 |
+
<span class="ml-2">Safari</span>
|
| 169 |
+
</label>
|
| 170 |
+
<label class="inline-flex items-center">
|
| 171 |
+
<input type="checkbox" class="form-checkbox text-blue-600">
|
| 172 |
+
<span class="ml-2">Edge</span>
|
| 173 |
+
</label>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
|
| 177 |
+
<div class="mb-4">
|
| 178 |
+
<label class="block text-gray-700 mb-2">Profile</label>
|
| 179 |
+
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 180 |
+
<option>Default Profile</option>
|
| 181 |
+
<option>Mobile Profile</option>
|
| 182 |
+
<option>Tablet Profile</option>
|
| 183 |
+
<option>Desktop Profile</option>
|
| 184 |
+
</select>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
|
| 188 |
+
<div id="performance-fields" class="hidden">
|
| 189 |
+
<div class="mb-4">
|
| 190 |
+
<label class="block text-gray-700 mb-2">Users</label>
|
| 191 |
+
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Number of virtual users">
|
| 192 |
+
</div>
|
| 193 |
+
|
| 194 |
+
<div class="mb-4">
|
| 195 |
+
<label class="block text-gray-700 mb-2">Ramp-up (seconds)</label>
|
| 196 |
+
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Time to ramp up users">
|
| 197 |
+
</div>
|
| 198 |
+
|
| 199 |
+
<div class="mb-4">
|
| 200 |
+
<label class="block text-gray-700 mb-2">Hold Time (minutes)</label>
|
| 201 |
+
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Duration of test">
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
|
| 205 |
+
<div class="mt-6">
|
| 206 |
+
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center">
|
| 207 |
+
<i data-feather="play" class="mr-2"></i> Start Test Execution
|
| 208 |
+
</button>
|
| 209 |
+
</div>
|
| 210 |
+
</form>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
</div>
|
| 214 |
+
|
| 215 |
+
<script src="script.js"></script>
|
| 216 |
+
<script>
|
| 217 |
+
feather.replace();
|
| 218 |
+
</script>
|
| 219 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 220 |
+
</body>
|
| 221 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
// Simulate login (in a real app, this would be handled by a backend)
|
| 3 |
+
const loginForm = document.querySelector('#login-form');
|
| 4 |
+
const dashboard = document.querySelector('#dashboard');
|
| 5 |
+
|
| 6 |
+
if (loginForm) {
|
| 7 |
+
loginForm.addEventListener('submit', function(e) {
|
| 8 |
+
e.preventDefault();
|
| 9 |
+
dashboard.classList.remove('hidden');
|
| 10 |
+
document.querySelector('#login-modal').classList.add('hidden');
|
| 11 |
+
});
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
// Testing type selection
|
| 15 |
+
const testingTypeCards = document.querySelectorAll('.testing-type-card');
|
| 16 |
+
const testingDashboard = document.querySelector('#testing-dashboard');
|
| 17 |
+
const testingTypeTitle = document.querySelector('#testing-type-title');
|
| 18 |
+
|
| 19 |
+
testingTypeCards.forEach(card => {
|
| 20 |
+
card.addEventListener('click', function() {
|
| 21 |
+
const type = this.getAttribute('data-type');
|
| 22 |
+
testingDashboard.classList.remove('hidden');
|
| 23 |
+
testingTypeTitle.textContent = type.charAt(0).toUpperCase() + type.slice(1) + ' Testing';
|
| 24 |
+
|
| 25 |
+
// Scroll to dashboard
|
| 26 |
+
testingDashboard.scrollIntoView({ behavior: 'smooth' });
|
| 27 |
+
});
|
| 28 |
+
});
|
| 29 |
+
|
| 30 |
+
// Trigger modal
|
| 31 |
+
const triggerModalBtn = document.querySelector('#trigger-modal-btn');
|
| 32 |
+
const triggerModal = document.querySelector('#trigger-modal');
|
| 33 |
+
const closeModalBtn = document.querySelector('#close-modal');
|
| 34 |
+
|
| 35 |
+
if (triggerModalBtn) {
|
| 36 |
+
triggerModalBtn.addEventListener('click', function() {
|
| 37 |
+
triggerModal.classList.remove('hidden');
|
| 38 |
+
});
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
if (closeModalBtn) {
|
| 42 |
+
closeModalBtn.addEventListener('click', function() {
|
| 43 |
+
triggerModal.classList.add('hidden');
|
| 44 |
+
});
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
// Close modal when clicking outside
|
| 48 |
+
triggerModal.addEventListener('click', function(e) {
|
| 49 |
+
if (e.target === triggerModal) {
|
| 50 |
+
triggerModal.classList.add('hidden');
|
| 51 |
+
}
|
| 52 |
+
});
|
| 53 |
+
|
| 54 |
+
// Show/hide specific fields based on testing type
|
| 55 |
+
const testForm = document.querySelector('#test-form');
|
| 56 |
+
const functionalFields = document.querySelector('#functional-fields');
|
| 57 |
+
const performanceFields = document.querySelector('#performance-fields');
|
| 58 |
+
|
| 59 |
+
if (testForm) {
|
| 60 |
+
testForm.addEventListener('submit', function(e) {
|
| 61 |
+
e.preventDefault();
|
| 62 |
+
alert('Test execution started!');
|
| 63 |
+
triggerModal.classList.add('hidden');
|
| 64 |
+
});
|
| 65 |
+
}
|
| 66 |
+
|
| 67 |
+
// Dynamic fields based on testing type
|
| 68 |
+
testingTypeCards.forEach(card => {
|
| 69 |
+
card.addEventListener('click', function() {
|
| 70 |
+
const type = this.getAttribute('data-type');
|
| 71 |
+
|
| 72 |
+
// Hide all specific fields first
|
| 73 |
+
functionalFields.classList.add('hidden');
|
| 74 |
+
performanceFields.classList.add('hidden');
|
| 75 |
+
|
| 76 |
+
// Show relevant fields
|
| 77 |
+
if (type === 'functional') {
|
| 78 |
+
functionalFields.classList.remove('hidden');
|
| 79 |
+
} else if (type === 'performance') {
|
| 80 |
+
performanceFields.classList.remove('hidden');
|
| 81 |
+
}
|
| 82 |
+
});
|
| 83 |
+
});
|
| 84 |
+
|
| 85 |
+
// Sample data updates
|
| 86 |
+
setInterval(() => {
|
| 87 |
+
const executingTests = document.querySelector('#executing-tests');
|
| 88 |
+
if (executingTests) {
|
| 89 |
+
const current = parseInt(executingTests.textContent);
|
| 90 |
+
executingTests.textContent = Math.max(0, current + (Math.random() > 0.5 ? -1 : 1));
|
| 91 |
+
}
|
| 92 |
+
}, 5000);
|
| 93 |
+
});
|
style.css
CHANGED
|
@@ -1,28 +1,44 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
margin-top: 0;
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.
|
| 19 |
-
|
| 20 |
-
margin: 0 auto;
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
.testing-type-card {
|
| 2 |
+
@apply bg-white p-6 rounded-lg shadow-md cursor-pointer transition-all duration-300 hover:shadow-lg hover:translate-y-[-2px] text-center flex flex-col items-center;
|
|
|
|
| 3 |
}
|
| 4 |
|
| 5 |
+
.stats-card {
|
| 6 |
+
@apply bg-white p-4 rounded-lg shadow border-l-4 border-blue-500;
|
|
|
|
| 7 |
}
|
| 8 |
|
| 9 |
+
.tag-filter {
|
| 10 |
+
@apply bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm flex items-center;
|
| 11 |
+
transition: all 0.2s ease;
|
|
|
|
|
|
|
| 12 |
}
|
| 13 |
|
| 14 |
+
.tag-filter:hover {
|
| 15 |
+
@apply bg-blue-100 text-blue-800;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
}
|
| 17 |
|
| 18 |
+
.auth-form {
|
| 19 |
+
@apply space-y-4;
|
| 20 |
}
|
| 21 |
+
|
| 22 |
+
.auth-form input {
|
| 23 |
+
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.auth-form button {
|
| 27 |
+
@apply w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
/* Animation for modal */
|
| 31 |
+
@keyframes modalFadeIn {
|
| 32 |
+
from {
|
| 33 |
+
opacity: 0;
|
| 34 |
+
transform: translateY(-20px);
|
| 35 |
+
}
|
| 36 |
+
to {
|
| 37 |
+
opacity: 1;
|
| 38 |
+
transform: translateY(0);
|
| 39 |
+
}
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
#trigger-modal > div {
|
| 43 |
+
animation: modalFadeIn 0.3s ease-out forwards;
|
| 44 |
+
}
|