diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 43 |
1 files changed, 41 insertions, 2 deletions
@@ -156,6 +156,12 @@ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } + .input-field input:disabled { + opacity: 0.5; + cursor: not-allowed; + background: var(--surface); + } + .input-field input:hover { border-color: rgba(255, 255, 255, 0.12); } @@ -376,6 +382,7 @@ justify-content: center; margin-top: var(--spacing-xl); padding: 0 var(--spacing-md); + position: relative; } #canvas { @@ -385,6 +392,34 @@ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); background: var(--surface-elevated); display: block; + transition: opacity 0.3s ease; + } + + .canvas-loading-overlay { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 600px; + min-height: 400px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--spacing-lg); + z-index: 10; + } + + .canvas-container.loading .canvas-loading-overlay { + display: flex; + } + + .canvas-container.loading #canvas { + opacity: 0; } /* Sections */ @@ -522,7 +557,7 @@ <div class="app"> <div id="loading" class="loading-container" style="display: none"> <div class="spinner"> - <span class="visually-hidden">Loading...</span> + <span class="visually-hidden">Loading ...</span> </div> </div> @@ -776,7 +811,11 @@ <div id="analyzing-status" class="loading-text"></div> </div> - <div class="canvas-container" id="render"> + <div class="canvas-container d-none" id="render"> + <div class="canvas-loading-overlay" id="canvas-loading"> + <div class="spinner"></div> + <div class="loading-text">Analysing image ...</div> + </div> <canvas id="canvas"></canvas> </div> </main> |