Last 10 Commits for outsource-metrics1.scroll.pub

commit 628e5ca4b6c94fe7efcae205e7ee97a417fe3702 Author: root <root@hub.scroll.pub> Date: 2024-12-28 02:03:59 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..dce30da --- /dev/null +++ b/body.html @@ -0,0 +1,95 @@ +<header> + <h1>DevOps Performance Dashboard</h1> + <nav> + <ul> + <li><a href="#metrics">Metrics</a></li> + <li><a href="#rankings">Rankings</a></li> + <li><a href="#evaluation">Evaluation</a></li> + </ul> + </nav> +</header> + +<main> + <section id="metrics" class="dashboard-section"> + <h2>Performance Metrics</h2> + <div class="metrics-grid"> + <div class="role-filter"> + <label for="role-select">Role:</label> + <select id="role-select"> + <option value="all">All Roles</option> + <option value="product-manager">Product Manager</option> + <option value="java-dev">Java Developer</option> + <option value="frontend-dev">Frontend Developer</option> + <option value="qa">QA Engineer</option> + </select> + </div> + + <div class="metrics-cards" id="metrics-container"> +  + </div> + </div> + </section> + + <section id="rankings" class="dashboard-section"> + <h2>Performance Rankings</h2> + <div class="rankings-table-container"> + <table id="rankings-table"> + <thead> + <tr> + <th>Rank</th> + <th>Name</th> + <th>Role</th> + <th>Overall Score</th> + <th>Details</th> + </tr> + </thead> + <tbody id="rankings-body"> +  + </tbody> + </table> + </div> + </section> + + <section id="evaluation" class="dashboard-section"> + <h2>Subjective Evaluation</h2> + <form id="evaluation-form"> + <div class="form-group"> + <label for="employee-select">Select Employee:</label> + <select id="employee-select" required> +  + </select> + </div> + + <div class="evaluation-criteria"> + <div class="criteria-item"> + <label for="communication">Communication Skills (1-5):</label> + <input type="range" id="communication" min="1" max="5" step="1"> + <span class="range-value"></span> + </div> + + <div class="criteria-item"> + <label for="teamwork">Teamwork (1-5):</label> + <input type="range" id="teamwork" min="1" max="5" step="1"> + <span class="range-value"></span> + </div> + + <div class="criteria-item"> + <label for="initiative">Initiative (1-5):</label> + <input type="range" id="initiative" min="1" max="5" step="1"> + <span class="range-value"></span> + </div> + + <div class="criteria-item"> + <label for="comments">Additional Comments:</label> + <textarea id="comments" rows="4"></textarea> + </div> + </div> + + <button type="submit" class="submit-btn">Submit Evaluation</button> + </form> + </section> +</main> + +<footer> + <p>DevOps Performance Metrics Dashboard</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..851cdf8 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://outsource-metrics.scroll.pub +metaTags +editButton /dashboard.html +title DevOps Performance Metrics Dashboard +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..ae0af44 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01PqxEc5FUo288mJBeScWx2c", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a performance evaluation dashboard for outsourced personnel.\n\n---domain---\noutsource-metrics.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://outsource-metrics.scroll.pub\nmetaTags\neditButton /dashboard.html\ntitle DevOps Performance Metrics Dashboard\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>DevOps Performance Dashboard</h1>\n <nav>\n <ul>\n <li><a href=\"#metrics\">Metrics</a></li>\n <li><a href=\"#rankings\">Rankings</a></li>\n <li><a href=\"#evaluation\">Evaluation</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"metrics\" class=\"dashboard-section\">\n <h2>Performance Metrics</h2>\n <div class=\"metrics-grid\">\n <div class=\"role-filter\">\n <label for=\"role-select\">Role:</label>\n <select id=\"role-select\">\n <option value=\"all\">All Roles</option>\n <option value=\"product-manager\">Product Manager</option>\n <option value=\"java-dev\">Java Developer</option>\n <option value=\"frontend-dev\">Frontend Developer</option>\n <option value=\"qa\">QA Engineer</option>\n </select>\n </div>\n \n <div class=\"metrics-cards\" id=\"metrics-container\">\n \n </div>\n </div>\n </section>\n\n <section id=\"rankings\" class=\"dashboard-section\">\n <h2>Performance Rankings</h2>\n <div class=\"rankings-table-container\">\n <table id=\"rankings-table\">\n <thead>\n <tr>\n <th>Rank</th>\n <th>Name</th>\n <th>Role</th>\n <th>Overall Score</th>\n <th>Details</th>\n </tr>\n </thead>\n <tbody id=\"rankings-body\">\n \n </tbody>\n </table>\n </div>\n </section>\n\n <section id=\"evaluation\" class=\"dashboard-section\">\n <h2>Subjective Evaluation</h2>\n <form id=\"evaluation-form\">\n <div class=\"form-group\">\n <label for=\"employee-select\">Select Employee:</label>\n <select id=\"employee-select\" required>\n \n </select>\n </div>\n\n <div class=\"evaluation-criteria\">\n <div class=\"criteria-item\">\n <label for=\"communication\">Communication Skills (1-5):</label>\n <input type=\"range\" id=\"communication\" min=\"1\" max=\"5\" step=\"1\">\n <span class=\"range-value\"></span>\n </div>\n\n <div class=\"criteria-item\">\n <label for=\"teamwork\">Teamwork (1-5):</label>\n <input type=\"range\" id=\"teamwork\" min=\"1\" max=\"5\" step=\"1\">\n <span class=\"range-value\"></span>\n </div>\n\n <div class=\"criteria-item\">\n <label for=\"initiative\">Initiative (1-5):</label>\n <input type=\"range\" id=\"initiative\" min=\"1\" max=\"5\" step=\"1\">\n <span class=\"range-value\"></span>\n </div>\n\n <div class=\"criteria-item\">\n <label for=\"comments\">Additional Comments:</label>\n <textarea id=\"comments\" rows=\"4\"></textarea>\n </div>\n </div>\n\n <button type=\"submit\" class=\"submit-btn\">Submit Evaluation</button>\n </form>\n </section>\n</main>\n\n<footer>\n <p>DevOps Performance Metrics Dashboard</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #f5f6fa;\n --card-background: #ffffff;\n --text-color: #2c3e50;\n --border-radius: 8px;\n --spacing: 1rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 1rem 2rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nheader h1 {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n}\n\nnav ul {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\nnav a:hover {\n color: var(--secondary-color);\n}\n\n.dashboard-section {\n padding: 2rem;\n margin: 2rem auto;\n max-width: 1200px;\n}\n\n.metrics-grid {\n display: grid;\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.role-filter {\n margin-bottom: 1rem;\n}\n\n.metrics-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n}\n\n.metric-card {\n background: var(--card-background);\n padding: 1.5rem;\n border-radius: var(--border-radius);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.metric-card:hover {\n transform: translateY(-4px);\n}\n\n.metric-title {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n cursor: help;\n}\n\n.metric-value {\n font-size: 2rem;\n font-weight: 700;\n color: var(--secondary-color);\n}\n\n.rankings-table-container {\n overflow-x: auto;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: var(--card-background);\n border-radius: var(--border-radius);\n overflow: hidden;\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #eee;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n}\n\ntr:hover {\n background-color: #f8f9fa;\n}\n\n.evaluation-criteria {\n display: grid;\n gap: 1.5rem;\n margin: 2rem 0;\n}\n\n.criteria-item {\n display: grid;\n gap: 0.5rem;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n max-width: 400px;\n}\n\ntextarea {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n}\n\n.submit-btn {\n background-color: var(--secondary-color);\n color: white;\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.submit-btn:hover {\n background-color: #2980b9;\n}\n\n@media (max-width: 768px) {\n .dashboard-section {\n padding: 1rem;\n }\n \n nav ul {\n flex-direction: column;\n gap: 1rem;\n }\n \n .metric-card {\n min-width: 100%;\n }\n}\n\n---script.js---\n// Mock data structure\nconst mockData = {\n metrics: {\n 'product-manager': [\n { title: 'Requirements Clarity Score', value: '92%', hint: 'Measures the clarity and completeness of requirements documentation based on peer reviews' },\n { title: 'Sprint Planning Accuracy', value: '87%', hint: 'Percentage of planned stories completed within sprint timeframe' },\n { title: 'Stakeholder Satisfaction', value: '4.5/5', hint: 'Average satisfaction score from stakeholder feedback surveys' }\n ],\n 'java-dev': [\n { title: 'Code Coverage', value: '85%', hint: 'Percentage of code covered by automated tests' },\n { title: 'Build Success Rate', value: '98%', hint: 'Percentage of successful builds in CI/CD pipeline' },\n { title: 'Code Review Response Time', value: '4h', hint: 'Average time to first response on pull requests' }\n ],\n 'frontend-dev': [\n { title: 'UI Test Coverage', value: '78%', hint: 'Percentage of UI components covered by automated tests' },\n { title: 'Page Load Performance', value: '96%', hint: 'Average Lighthouse performance score' },\n { title: 'Bug Resolution Rate', value: '94%', hint: 'Percentage of bugs resolved within SLA' }\n ],\n 'qa': [\n { title: 'Test Case Creation Rate', value: '45/sprint', hint: 'Number of new test cases created per sprint' },\n { title: 'Defect Detection Rate', value: '89%', hint: 'Percentage of defects found before production' },\n { title: 'Automation Coverage', value: '76%', hint: 'Percentage of test cases automated' }\n ]\n }\n};\n\n// Initialize the dashboard\ndocument.addEventListener('DOMContentLoaded', () => {\n initializeMetrics();\n initializeRankings();\n initializeEvaluationForm();\n setupEventListeners();\n});\n\nfunction initializeMetrics() {\n const container = document.getElementById('metrics-container');\n const roleSelect = document.getElementById('role-select');\n \n function updateMetrics(role) {\n container.innerHTML = '';\n const metrics = role === 'all' ? \n Object.values(mockData.metrics).flat() :\n mockData.metrics[role];\n \n metrics.forEach(metric => {\n const card = document.createElement('div');\n card.className = 'metric-card';\n card.innerHTML = `\n <h3 class=\"metric-title\" title=\"${metric.hint}\">${metric.title}</h3>\n <div class=\"metric-value\">${metric.value}</div>\n `;\n container.appendChild(card);\n });\n }\n \n roleSelect.addEventListener('change', (e) => updateMetrics(e.target.value));\n updateMetrics('all');\n}\n\nfunction initializeRankings() {\n const rankingsBody = document.getElementById('rankings-body');\n const mockRankings = [\n { rank: 1, name: 'John Doe', role: 'Java Developer', score: 95 },\n { rank: 2, name: 'Jane Smith', role: 'Frontend Developer', score: 92 },\n { rank: 3, name: 'Mike Johnson', role: 'QA Engineer', score: 90 }\n ];\n \n mockRankings.forEach(ranking => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${ranking.rank}</td>\n <td>${ranking.name}</td>\n <td>${ranking.role}</td>\n <td>${ranking.score}</td>\n <td><button onclick=\"showDetails('${ranking.name}')\">View</button></td>\n `;\n rankingsBody.appendChild(row);\n });\n}\n\nfunction initializeEvaluationForm() {\n const employeeSelect = document.getElementById('employee-select');\n const mockEmployees = [\n 'John Doe',\n 'Jane Smith',\n 'Mike Johnson'\n ];\n \n mockEmployees.forEach(employee => {\n const option = document.createElement('option');\n option.value = employee;\n option.textContent = employee;\n employeeSelect.appendChild(option);\n });\n \n // Initialize range input displays\n document.querySelectorAll('input[type=\"range\"]').forEach(input => {\n const display = input.nextElementSibling;\n display.textContent = input.value;\n input.addEventListener('input', (e) => {\n display.textContent = e.target.value;\n });\n });\n}\n\nfunction setupEventListeners() {\n const form = document.getElementById('evaluation-form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n // Here you would normally save to SQLite\n alert('Evaluation submitted successfully!');\n form.reset();\n });\n}\n\nfunction showDetails(name) {\n alert(`Detailed metrics for ${name}`);\n}\n\n---end---\n\nThis implementation creates a comprehensive dashboard for evaluating outsourced personnel performance. Key features include:\n\n1. Performance metrics dashboard with role-based filtering\n2. Interactive metrics cards with tooltips explaining calculation methods\n3. Rankings table showing overall performance\n4. Subjective evaluation form with slider inputs\n5. Mobile-responsive design\n6. Clean, professional UI with smooth animations\n7. Mock data structure ready to be replaced with real DevOps metrics\n\nThe metrics are divided by role type and include both objective (from DevOps platforms) and subjective measurements. Each metric card shows a tooltip on hover explaining the calculation methodology.\n\nTo implement with real data, you would need to:\n1. Replace the mockData object with real API calls to your DevOps platform\n2. Implement the SQLite storage for subjective evaluations\n3. Add authentication/authorization\n4. Expand the metrics based on your specific DevOps platform's available data points" + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 699, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3605 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..3fff6ca --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# outsource-metrics1.scroll.pub +Website generated by Claude from prompt: 我想要创建一个网站用于评估外包人员的效能指标，并用于排名，外包人员包含不同的岗位，譬如产品经理、Java 开发，前端开发，测试人员等，我希望能涵盖尽量多的外包成员，外包的客观数据我们可以从 DevOps 平台抽取，外包人员的需求、测试、开发、部署都在这个平台，现在我希望你能从多个客观维度，去生成外包人员的效能看板，并且能够进行客观排名，注意，由于没有还没有对接外部数据源，你可以生成合适的 mock 数据，以方便展示。考虑到外包人员管理还有一部分内容来自于外包管理人的主观评价，因此，需要保留合适的输入框用于外包管理人输入主观指标，主观指标请根据你的理解进行生成。输入指标后，当用户提交后，相应的指标可以保存到 sqlite，你可以生成合适的表结构。注意，对于效能指标，我希望你能提供合适的可以从一般的 DevOps 网站直接抽取或者加工获得的指标，每个指标你可以加一个 hint, 当我鼠标移动上去时，可以提示相应指标的计算口径与逻辑，以及其反应了外包人员哪一块的能力 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..011ed69 --- /dev/null +++ b/script.js @@ -0,0 +1,118 @@ +// Mock data structure +const mockData = { + metrics: { + 'product-manager': [ + { title: 'Requirements Clarity Score', value: '92%', hint: 'Measures the clarity and completeness of requirements documentation based on peer reviews' }, + { title: 'Sprint Planning Accuracy', value: '87%', hint: 'Percentage of planned stories completed within sprint timeframe' }, + { title: 'Stakeholder Satisfaction', value: '4.5/5', hint: 'Average satisfaction score from stakeholder feedback surveys' } + ], + 'java-dev': [ + { title: 'Code Coverage', value: '85%', hint: 'Percentage of code covered by automated tests' }, + { title: 'Build Success Rate', value: '98%', hint: 'Percentage of successful builds in CI/CD pipeline' }, + { title: 'Code Review Response Time', value: '4h', hint: 'Average time to first response on pull requests' } + ], + 'frontend-dev': [ + { title: 'UI Test Coverage', value: '78%', hint: 'Percentage of UI components covered by automated tests' }, + { title: 'Page Load Performance', value: '96%', hint: 'Average Lighthouse performance score' }, + { title: 'Bug Resolution Rate', value: '94%', hint: 'Percentage of bugs resolved within SLA' } + ], + 'qa': [ + { title: 'Test Case Creation Rate', value: '45/sprint', hint: 'Number of new test cases created per sprint' }, + { title: 'Defect Detection Rate', value: '89%', hint: 'Percentage of defects found before production' }, + { title: 'Automation Coverage', value: '76%', hint: 'Percentage of test cases automated' } + ] + } +}; + +// Initialize the dashboard +document.addEventListener('DOMContentLoaded', () => { + initializeMetrics(); + initializeRankings(); + initializeEvaluationForm(); + setupEventListeners(); +}); + +function initializeMetrics() { + const container = document.getElementById('metrics-container'); + const roleSelect = document.getElementById('role-select'); + + function updateMetrics(role) { + container.innerHTML = ''; + const metrics = role === 'all' ? + Object.values(mockData.metrics).flat() : + mockData.metrics[role]; + + metrics.forEach(metric => { + const card = document.createElement('div'); + card.className = 'metric-card'; + card.innerHTML = ` + <h3 class="metric-title" title="${metric.hint}">${metric.title}</h3> + <div class="metric-value">${metric.value}</div> + `; + container.appendChild(card); + }); + } + + roleSelect.addEventListener('change', (e) => updateMetrics(e.target.value)); + updateMetrics('all'); +} + +function initializeRankings() { + const rankingsBody = document.getElementById('rankings-body'); + const mockRankings = [ + { rank: 1, name: 'John Doe', role: 'Java Developer', score: 95 }, + { rank: 2, name: 'Jane Smith', role: 'Frontend Developer', score: 92 }, + { rank: 3, name: 'Mike Johnson', role: 'QA Engineer', score: 90 } + ]; + + mockRankings.forEach(ranking => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${ranking.rank}</td> + <td>${ranking.name}</td> + <td>${ranking.role}</td> + <td>${ranking.score}</td> + <td><button onclick="showDetails('${ranking.name}')">View</button></td> + `; + rankingsBody.appendChild(row); + }); +} + +function initializeEvaluationForm() { + const employeeSelect = document.getElementById('employee-select'); + const mockEmployees = [ + 'John Doe', + 'Jane Smith', + 'Mike Johnson' + ]; + + mockEmployees.forEach(employee => { + const option = document.createElement('option'); + option.value = employee; + option.textContent = employee; + employeeSelect.appendChild(option); + }); + + // Initialize range input displays + document.querySelectorAll('input[type="range"]').forEach(input => { + const display = input.nextElementSibling; + display.textContent = input.value; + input.addEventListener('input', (e) => { + display.textContent = e.target.value; + }); + }); +} + +function setupEventListeners() { + const form = document.getElementById('evaluation-form'); + form.addEventListener('submit', (e) => { + e.preventDefault(); + // Here you would normally save to SQLite + alert('Evaluation submitted successfully!'); + form.reset(); + }); +} + +function showDetails(name) { + alert(`Detailed metrics for ${name}`); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..32bbce1 --- /dev/null +++ b/style.css @@ -0,0 +1,177 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --background-color: #f5f6fa; + --card-background: #ffffff; + --text-color: #2c3e50; + --border-radius: 8px; + --spacing: 1rem; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); +} + +header { + background-color: var(--primary-color); + color: white; + padding: 1rem 2rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +header h1 { + font-size: 1.8rem; + margin-bottom: 1rem; +} + +nav ul { + display: flex; + gap: 2rem; + list-style: none; +} + +nav a { + color: white; + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease; +} + +nav a:hover { + color: var(--secondary-color); +} + +.dashboard-section { + padding: 2rem; + margin: 2rem auto; + max-width: 1200px; +} + +.metrics-grid { + display: grid; + gap: 2rem; + margin-top: 2rem; +} + +.role-filter { + margin-bottom: 1rem; +} + +.metrics-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; +} + +.metric-card { + background: var(--card-background); + padding: 1.5rem; + border-radius: var(--border-radius); + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.metric-card:hover { + transform: translateY(-4px); +} + +.metric-title { + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.5rem; + cursor: help; +} + +.metric-value { + font-size: 2rem; + font-weight: 700; + color: var(--secondary-color); +} + +.rankings-table-container { + overflow-x: auto; +} + +table { + width: 100%; + border-collapse: collapse; + background: var(--card-background); + border-radius: var(--border-radius); + overflow: hidden; +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #eee; +} + +th { + background-color: var(--primary-color); + color: white; +} + +tr:hover { + background-color: #f8f9fa; +} + +.evaluation-criteria { + display: grid; + gap: 1.5rem; + margin: 2rem 0; +} + +.criteria-item { + display: grid; + gap: 0.5rem; +} + +input[type="range"] { + width: 100%; + max-width: 400px; +} + +textarea { + width: 100%; + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: var(--border-radius); +} + +.submit-btn { + background-color: var(--secondary-color); + color: white; + padding: 0.8rem 1.5rem; + border: none; + border-radius: var(--border-radius); + cursor: pointer; + transition: background-color 0.3s ease; +} + +.submit-btn:hover { + background-color: #2980b9; +} + +@media (max-width: 768px) { + .dashboard-section { + padding: 1rem; + } + + nav ul { + flex-direction: column; + gap: 1rem; + } + + .metric-card { + min-width: 100%; + } +}