diff options
Diffstat (limited to 'assets/test/test-html.html')
| -rw-r--r-- | assets/test/test-html.html | 411 |
1 files changed, 411 insertions, 0 deletions
diff --git a/assets/test/test-html.html b/assets/test/test-html.html new file mode 100644 index 00000000..4f0f500e --- /dev/null +++ b/assets/test/test-html.html @@ -0,0 +1,411 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Browser Test Page</title> + <style> + * { margin: 0; padding: 0; box-sizing: border-box; } + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: #333; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + padding: 20px; + } + .container { + max-width: 1200px; + margin: 0 auto; + background: white; + border-radius: 10px; + padding: 30px; + box-shadow: 0 20px 60px rgba(0,0,0,0.3); + } + h1 { color: #764ba2; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } + h2 { color: #667eea; margin: 30px 0 15px; border-bottom: 2px solid #eee; padding-bottom: 5px; } + + /* Grid Layout */ + .grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + margin: 20px 0; + } + .grid-item { + background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); + padding: 20px; + border-radius: 8px; + color: white; + text-align: center; + transition: transform 0.3s; + } + .grid-item:hover { transform: scale(1.05); } + + /* Flexbox Layout */ + .flex-container { + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + background: #f0f0f0; + padding: 20px; + border-radius: 8px; + margin: 20px 0; + } + .flex-item { + flex: 1 1 200px; + margin: 10px; + padding: 15px; + background: #4facfe; + color: white; + text-align: center; + border-radius: 5px; + } + + /* Forms */ + form { + background: #f9f9f9; + padding: 20px; + border-radius: 8px; + margin: 20px 0; + } + input, select, textarea { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 2px solid #ddd; + border-radius: 4px; + transition: border-color 0.3s; + } + input:focus, select:focus, textarea:focus { + outline: none; + border-color: #667eea; + } + button { + background: #667eea; + color: white; + padding: 12px 30px; + border: none; + border-radius: 25px; + cursor: pointer; + transition: background 0.3s; + } + button:hover { background: #764ba2; } + + /* Table */ + table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; + } + th, td { + padding: 12px; + text-align: left; + border-bottom: 1px solid #ddd; + } + th { + background: #667eea; + color: white; + } + tr:hover { background: #f5f5f5; } + + /* Media */ + .media-container { + display: flex; + gap: 20px; + flex-wrap: wrap; + margin: 20px 0; + } + video, audio, canvas { + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + } + + /* Animations */ + @keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } + } + .animated { animation: pulse 2s infinite; } + + /* Pseudo-elements */ + .quote { + position: relative; + padding: 20px; + background: #f0f0f0; + border-radius: 8px; + margin: 20px 0; + } + .quote::before { + content: '"'; + font-size: 60px; + color: #667eea; + position: absolute; + top: -10px; + left: 10px; + } + + /* CSS Columns */ + .columns { + column-count: 3; + column-gap: 20px; + column-rule: 1px solid #ddd; + margin: 20px 0; + } + + /* Position sticky */ + .sticky { + position: sticky; + top: 20px; + background: #ffd93d; + padding: 10px; + border-radius: 5px; + margin: 20px 0; + } + + /* CSS Filters */ + .filter-demo img { + width: 100px; + margin: 10px; + border-radius: 8px; + } + .blur { filter: blur(2px); } + .grayscale { filter: grayscale(100%); } + .sepia { filter: sepia(100%); } + + /* Details/Summary */ + details { + background: #f9f9f9; + padding: 10px; + border-radius: 5px; + margin: 10px 0; + } + summary { + cursor: pointer; + font-weight: bold; + color: #667eea; + } + + /* Progress and Meter */ + progress, meter { + width: 100%; + height: 30px; + margin: 10px 0; + } + + /* Dialog */ + dialog { + border-radius: 10px; + border: none; + padding: 20px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + } + + /* Transform and Transition */ + .card { + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + transition: all 0.3s; + margin: 10px; + } + .card:hover { + transform: translateY(-5px) rotate(1deg); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); + } + </style> +</head> +<body> + <div class="container"> + <header> + <h1>🧪 Browser Test Page</h1> + <p>Testing HTML5 tags, CSS3 features, and modern layouts</p> + </header> + + <nav class="sticky"> + <strong>Navigation:</strong> + <a href="#grid">Grid</a> | + <a href="#flex">Flexbox</a> | + <a href="#forms">Forms</a> | + <a href="#media">Media</a> | + <a href="#table">Table</a> + </nav> + + <section id="grid"> + <h2>CSS Grid Layout</h2> + <div class="grid-container"> + <div class="grid-item">Grid Item 1</div> + <div class="grid-item">Grid Item 2</div> + <div class="grid-item">Grid Item 3</div> + <div class="grid-item">Grid Item 4</div> + </div> + </section> + + <section id="flex"> + <h2>Flexbox Layout</h2> + <div class="flex-container"> + <div class="flex-item">Flex 1</div> + <div class="flex-item">Flex 2</div> + <div class="flex-item">Flex 3</div> + </div> + </section> + + <section id="forms"> + <h2>Form Elements</h2> + <form> + <input type="text" placeholder="Text input" required> + <input type="email" placeholder="Email"> + <input type="number" placeholder="Number" min="0" max="100"> + <input type="date"> + <input type="color" value="#667eea"> + <input type="range" min="0" max="100"> + <select> + <option>Option 1</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + <textarea rows="4" placeholder="Textarea"></textarea> + <label> + <input type="checkbox"> Checkbox + </label> + <label> + <input type="radio" name="radio"> Radio 1 + </label> + <label> + <input type="radio" name="radio"> Radio 2 + </label> + <button type="submit">Submit Button</button> + </form> + </section> + + <section id="media"> + <h2>Media Elements</h2> + <div class="media-container"> + <video width="300" height="200" controls> + <source src="movie.mp4" type="video/mp4"> + Your browser does not support video. + </video> + <audio controls> + <source src="audio.mp3" type="audio/mpeg"> + Your browser does not support audio. + </audio> + <canvas id="canvas" width="300" height="200" style="border: 1px solid #ddd;"></canvas> + </div> + </section> + + <section id="table"> + <h2>Table</h2> + <table> + <thead> + <tr> + <th>Header 1</th> + <th>Header 2</th> + <th>Header 3</th> + </tr> + </thead> + <tbody> + <tr> + <td>Data 1</td> + <td>Data 2</td> + <td>Data 3</td> + </tr> + <tr> + <td>Data 4</td> + <td>Data 5</td> + <td>Data 6</td> + </tr> + </tbody> + </table> + </section> + + <section> + <h2>Semantic Elements</h2> + <article class="card"> + <header> + <h3>Article Title</h3> + <time datetime="2024-01-01">January 1, 2024</time> + </header> + <p>Article content with <strong>strong</strong>, <em>emphasis</em>, <mark>marked text</mark>, + <del>deleted</del>, <ins>inserted</ins>, <sub>subscript</sub>, <sup>superscript</sup>, + <code>inline code</code>, and <kbd>Ctrl+C</kbd> keyboard input.</p> + <footer>Article footer</footer> + </article> + </section> + + <section> + <h2>Lists</h2> + <ul> + <li>Unordered item 1</li> + <li>Unordered item 2 + <ul> + <li>Nested item</li> + </ul> + </li> + </ul> + <ol> + <li>Ordered item 1</li> + <li>Ordered item 2</li> + </ol> + <dl> + <dt>Definition Term</dt> + <dd>Definition Description</dd> + </dl> + </section> + + <section> + <h2>Advanced Features</h2> + <details> + <summary>Click to expand</summary> + <p>Hidden content revealed!</p> + </details> + + <div class="quote"> + <blockquote> + This is a blockquote with custom styling using pseudo-elements + </blockquote> + </div> + + <div class="filter-demo"> + <h3>CSS Filters</h3> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23667eea'/%3E%3C/svg%3E" alt="Demo" class="blur"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23764ba2'/%3E%3C/svg%3E" alt="Demo" class="grayscale"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23f093fb'/%3E%3C/svg%3E" alt="Demo" class="sepia"> + </div> + + <h3>Progress Elements</h3> + <progress value="70" max="100"></progress> + <meter value="6" min="0" max="10"></meter> + </section> + + <section> + <h2>CSS Columns</h2> + <div class="columns"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + </div> + </section> + + <div class="animated" style="width: 100px; height: 100px; background: #667eea; border-radius: 50%; margin: 20px auto;"></div> + + <dialog id="dialog"> + <h3>Dialog Box</h3> + <p>This is a native HTML5 dialog</p> + <button onclick="this.closest('dialog').close()">Close</button> + </dialog> + <button onclick="document.getElementById('dialog').showModal()">Open Dialog</button> + </div> + + <script> + // Canvas drawing + const canvas = document.getElementById('canvas'); + const ctx = canvas.getContext('2d'); + ctx.fillStyle = '#667eea'; + ctx.fillRect(50, 50, 200, 100); + ctx.strokeStyle = '#764ba2'; + ctx.lineWidth = 3; + ctx.strokeRect(50, 50, 200, 100); + </script> +</body> +</html> |