diff --git a/links/templates/links/mini_apps/tts.html b/links/templates/links/mini_apps/tts.html index b9dac46..6eaae86 100644 --- a/links/templates/links/mini_apps/tts.html +++ b/links/templates/links/mini_apps/tts.html @@ -331,6 +331,52 @@ border-color: #9ca3af; } + /* Loading overlay styles */ + .loading-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(4px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 9999; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + } + + .loading-overlay.show { + opacity: 1; + visibility: visible; + } + + .loading-spinner { + width: 60px; + height: 60px; + border: 4px solid #e5e7eb; + border-top: 4px solid #8e44ad; + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 1rem; + } + + .loading-text { + color: #374151; + font-size: 1.125rem; + font-weight: 600; + text-align: center; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + @media (max-width: 768px) { .tts-container { padding: 1rem; @@ -354,6 +400,15 @@ {% endblock %} {% block content %} + +
+