| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Screenshot browser</title> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <link rel="stylesheet" href="./interactive.css"> |
| </head> |
| <body> |
| <header> |
| <div class="header-container"> |
| <h1>File: <span class="file">...</span></h1> |
| <h2>Percentage difference: <span class="percentage">...</span></h2> |
| </div> |
| </header> |
| <div class="shortcuts"> |
| <div class="shortcut-container"> |
| <h3>Shortcuts:</h3> |
| <ul> |
| <li class="shortcut shortcut-golden">Choose golden</li> |
| <li class="shortcut shortcut-generated">Choose test output</li> |
| <li class="shortcut shortcut-confirm">Confirm choice</li> |
| <li class="shortcut shortcut-skip">Skip test</li> |
| </ul> |
| </div> |
| </div> |
| <main> |
| <div class="main-container"> |
| <div class="golden"> |
| <h3>Golden</h3> |
| <div class="image-container"></div> |
| </div> |
| |
| <div class="generated"> |
| <h3>Test output</h3> |
| <div class="image-container"></div> |
| </div> |
| </div> |
| </main> |
| <footer> |
| <button class="test-skip" disabled>Skip</button> <button class="test-confirm" disabled>Confirm</button> |
| </footer> |
| <div class="diff"></div> |
| <div class="status"></div> |
| <script src="./interactive.js"></script> |
| </body> |
| </html> |