Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>ViewPort</title> | |
| <style> | |
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #text_display { | |
| text-align: center; | |
| white-space: pre-wrap; | |
| } | |
| </style> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="text_display">Loading...</div> | |
| <script> | |
| function countCharacters(line) { | |
| let fullWidthCount = 0; | |
| let halfWidthCount = 0; | |
| for (let i = 0; i < line.length; i++) { | |
| if (line.charCodeAt(i) > 255) { | |
| fullWidthCount++; | |
| } else { | |
| halfWidthCount++; | |
| } | |
| } | |
| return (fullWidthCount * 2) + halfWidthCount; | |
| } | |
| function calculateMaxLength(text) { | |
| const lines = text.split('\n'); | |
| let maxLength = 0; | |
| lines.forEach(line => { | |
| const length = countCharacters(line); | |
| if (length > maxLength) { | |
| maxLength = length; | |
| } | |
| }); | |
| return maxLength; | |
| } | |
| function fetchText() { | |
| $.getJSON('/get_text', function(data) { | |
| const text = data.text; | |
| const maxLength = calculateMaxLength(text); | |
| const textSize = 70 / maxLength + 'em'; | |
| $('#text_display').text(text).css('font-size', textSize); | |
| }); | |
| } | |
| setInterval(fetchText, 100); // 10Hz = 100ms | |
| fetchText(); // Initial call | |
| </script> | |
| </body> | |
| </html> | |