feat: add animated components for enhanced UI/UX
- Introduced DrawLine component for drawing animations. - Added LazyRevealImage component for lazy loading images with reveal animations. - Implemented TextDiffuseReveal for animated text reveals with staggered effects. - Created TopProgressBar for a dynamic loading indicator. - Added PointCloud mock for testing animations. - Developed useReducedMotion hook to handle user preferences for reduced motion. - Centralized animation configurations in config.ts for easier management. - Defined animation variants in variants.ts for consistent animation effects. - Established AnimationProvider to supply global animation settings. - Created tests for AnimationProvider and useReducedMotion hook. - Added SVG assets for branding and UI elements. - Documented frontend review plan and hero circuit board animation plan.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
0ab6930f92
commit
08dd046887
76 files changed
+21682
-1197
No files matched your search
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Body Overflow Verification - Task 1.4</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.verification-box {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.status.pass {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.status.fail {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
.code {
|
||||
background: #f8f9fa;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
margin: 12px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h2 {
|
||||
color: #555;
|
||||
font-size: 18px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.timestamp {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.check-item {
|
||||
margin: 16px 0;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #28a745;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="verification-box">
|
||||
<h1>Task 1.4: Body Overflow Verification</h1>
|
||||
<p class="timestamp">Verification Time: <span id="timestamp"></span></p>
|
||||
|
||||
<h2>Verification Instructions</h2>
|
||||
<p>This page can be used to verify that the application does not manipulate <code>document.body.style.overflow</code> during initialization.</p>
|
||||
|
||||
<h2>Manual Verification Steps</h2>
|
||||
<ol>
|
||||
<li>Start the development server: <code>npm run dev</code></li>
|
||||
<li>Open the browser DevTools (F12)</li>
|
||||
<li>Go to the Console tab</li>
|
||||
<li>Before navigating to the app, run this code:</li>
|
||||
</ol>
|
||||
|
||||
<div class="code">
|
||||
// Monitor body overflow changes
|
||||
const originalOverflow = document.body.style.overflow;
|
||||
console.log('Initial body overflow:', originalOverflow || '(not set)');
|
||||
|
||||
// Set up a MutationObserver to watch for style changes
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
||||
const currentOverflow = document.body.style.overflow;
|
||||
if (currentOverflow !== originalOverflow) {
|
||||
console.error('❌ FAIL: Body overflow was changed to:', currentOverflow);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['style']
|
||||
});
|
||||
|
||||
console.log('✅ Monitoring body overflow changes...');
|
||||
</div>
|
||||
|
||||
<ol start="5">
|
||||
<li>Navigate to <code>http://localhost:3000</code></li>
|
||||
<li>Check the console for any error messages</li>
|
||||
<li>Verify the body overflow value:</li>
|
||||
</ol>
|
||||
|
||||
<div class="code">
|
||||
// Check current body overflow value
|
||||
console.log('Current body overflow:', document.body.style.overflow || '(not set)');
|
||||
|
||||
// Expected result: '' (empty string) or '(not set)'
|
||||
// Should NOT be 'hidden'
|
||||
</div>
|
||||
|
||||
<h2>Automated Verification Results</h2>
|
||||
<div id="results"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Display timestamp
|
||||
document.getElementById('timestamp').textContent = new Date().toLocaleString();
|
||||
|
||||
// Automated verification
|
||||
const resultsDiv = document.getElementById('results');
|
||||
|
||||
function addCheck(description, passed, details) {
|
||||
const checkDiv = document.createElement('div');
|
||||
checkDiv.className = 'check-item';
|
||||
checkDiv.style.borderLeftColor = passed ? '#28a745' : '#dc3545';
|
||||
|
||||
const status = document.createElement('span');
|
||||
status.className = `status ${passed ? 'pass' : 'fail'}`;
|
||||
status.textContent = passed ? '✅ PASS' : '❌ FAIL';
|
||||
|
||||
const desc = document.createElement('strong');
|
||||
desc.textContent = ' ' + description;
|
||||
|
||||
checkDiv.appendChild(status);
|
||||
checkDiv.appendChild(desc);
|
||||
|
||||
if (details) {
|
||||
const detailsP = document.createElement('p');
|
||||
detailsP.textContent = details;
|
||||
detailsP.style.marginTop = '8px';
|
||||
detailsP.style.marginBottom = '0';
|
||||
detailsP.style.fontSize = '13px';
|
||||
detailsP.style.color = '#666';
|
||||
checkDiv.appendChild(detailsP);
|
||||
}
|
||||
|
||||
resultsDiv.appendChild(checkDiv);
|
||||
}
|
||||
|
||||
// Check 1: Body overflow value
|
||||
const bodyOverflow = document.body.style.overflow;
|
||||
const isNotHidden = bodyOverflow !== 'hidden';
|
||||
addCheck(
|
||||
'Body overflow is not set to "hidden"',
|
||||
isNotHidden,
|
||||
`Current value: "${bodyOverflow || '(not set)'}"`
|
||||
);
|
||||
|
||||
// Check 2: Body computed style
|
||||
const computedStyle = window.getComputedStyle(document.body);
|
||||
const computedOverflow = computedStyle.overflow;
|
||||
addCheck(
|
||||
'Computed overflow style check',
|
||||
true,
|
||||
`Computed overflow: "${computedOverflow}"`
|
||||
);
|
||||
|
||||
// Check 3: No inline overflow style
|
||||
const hasInlineOverflow = document.body.style.overflow !== '';
|
||||
addCheck(
|
||||
'No inline overflow style applied',
|
||||
!hasInlineOverflow,
|
||||
hasInlineOverflow ? 'Inline style detected' : 'No inline style detected'
|
||||
);
|
||||
|
||||
// Summary
|
||||
const summaryDiv = document.createElement('div');
|
||||
summaryDiv.style.marginTop = '24px';
|
||||
summaryDiv.style.padding = '16px';
|
||||
summaryDiv.style.background = isNotHidden ? '#d4edda' : '#f8d7da';
|
||||
summaryDiv.style.borderRadius = '4px';
|
||||
summaryDiv.style.fontWeight = '600';
|
||||
summaryDiv.style.color = isNotHidden ? '#155724' : '#721c24';
|
||||
summaryDiv.textContent = isNotHidden
|
||||
? '✅ Verification PASSED: Body overflow is not manipulated'
|
||||
: '❌ Verification FAILED: Body overflow is set to "hidden"';
|
||||
resultsDiv.appendChild(summaryDiv);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user