summaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2025-10-21 16:43:18 -0500
committerCraig Jennings <c@cjennings.net>2025-10-21 16:43:18 -0500
commit005bb9c38de0bf5128ebd6acb20105af81a488b6 (patch)
treef79fc4c6c0e58fd49ce8f12e770148f2ca7c5d55 /assets
parent20e71df7da9235fcfa05701955bc07f54cd55cf9 (diff)
removing test asset duplicate
Diffstat (limited to 'assets')
-rw-r--r--assets/test/test-html.html411
1 files changed, 0 insertions, 411 deletions
diff --git a/assets/test/test-html.html b/assets/test/test-html.html
deleted file mode 100644
index 4f0f500e..00000000
--- a/assets/test/test-html.html
+++ /dev/null
@@ -1,411 +0,0 @@
-<!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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-26 16:33:01 +0000