dmncjsph/roof-rust-system
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Roof Rust Classification - Analyzer</title>7 <link rel="stylesheet" href="/styles.css" />8</head>9<body>10 <header class="site-header">11 <div class="container nav-wrap">12 <div class="brand">Roof Rust Classification</div>13 <nav class="nav-links">14 <a href="/">Home</a>15 <a href="/analyzer" class="active">Analyzer</a>16 <a href="/about-team">About the Team</a>17 </nav>18 </div>19 </header>20 21 <main class="container analyzer-page">22 <section class="page-intro">23 <span class="section-tag">Analyzer</span>24 <h1>Upload and evaluate a roof image</h1>25 <p>Note: Upload a close-up image of a roof panel only. Images with wide backgrounds, far distances, tilted angles, or non-roof objects may result in inaccurate readings or may not be detected by the system.</p>26 </section>27 28 <section class="analyzer-layout">29 <div class="panel upload-panel">30 <h2>Upload Image</h2>31 <label for="fileInput" class="upload-box">32 <input type="file" id="fileInput" accept=".jpg,.jpeg,.png,.bmp,.webp" hidden />33 <div id="uploadPlaceholder">34 <p class="upload-main">Click to choose a roof image</p>35 <p class="upload-sub">Supported: JPG, JPEG, PNG, BMP, WEBP</p>36 </div>37 <img id="previewImage" class="preview-image hidden" alt="Preview" />38 </label>39 40 <div class="action-row">41 <button id="analyzeBtn" class="btn btn-primary" type="button">Analyze Image</button>42 <button id="clearBtn" class="btn btn-secondary" type="button">Clear</button>43 </div>44 45 <div id="statusMessage" class="status-message"></div>46 </div>47 48 <div class="panel result-panel">49 <h2>Result Overview</h2>50 51 <div id="resultEmpty" class="empty-state">52 <p>No analysis yet. Upload an image and click Analyze Image.</p>53 </div>54 55 <div id="resultContent" class="hidden">56 <div id="classificationBadge" class="result-badge"></div>57 <p id="confidenceText" class="confidence-text"></p>58 59 <div class="info-card">60 <h3>Roof Validation</h3>61 <p id="roofValidationText"></p>62 </div>63 64 <div class="info-card">65 <h3>ISO 8501-1 Basis</h3>66 <p id="isoText"></p>67 </div>68 69 <div class="info-card">70 <h3>Recommendation</h3>71 <ul id="recommendationList" class="recommendation-list"></ul>72 </div>73 74 <div class="info-card">75 <h3>Class Probabilities</h3>76 <div id="probabilityBars"></div>77 </div>78 </div>79 </div>80 </section>81 </main>82 83 <script src="/app.js"></script>84</body>85</html>