squawk/index.html at main · roie/squawk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>✈️ squawk - airline ops translator</title>
    <meta name="description" content="Translate airline ops messages into plain English.">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://squawk-roie.vercel.app/">
    <meta property="og:title" content="squawk - airline ops translator">
    <meta property="og:description" content="Translate airline ops messages into plain English.">
    <meta property="og:image" content="https://squawk-roie.vercel.app/og-image.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://squawk-roie.vercel.app/">
    <meta name="twitter:title" content="squawk - airline ops translator">
    <meta name="twitter:description" content="Translate airline ops messages into plain English.">
    <meta name="twitter:image" content="https://squawk-roie.vercel.app/og-image.png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>✈️ squawk</h1>
            <p class="tagline">translate airline ops messages into plain english</p>
        </header>

        <main>
            <section class="input-section">
                <div class="input-header">
                    <a href="#" id="try-example" class="link-subtle" title="Load a sample airline ops message to see how it works">💡 try an example</a>
                </div>
                <textarea
                    id="input-text"
                    placeholder="paste your ops message here..."
                    aria-label="Airline operations message input"></textarea>
                <div class="button-group">
                    <button id="translate-btn" class="btn btn-primary" title="Translate the message into plain English (Ctrl+Enter)">✨ translate</button>
                    <a href="#" id="clear-btn" class="link-subtle" title="Clear input and results">🗑️ clear</a>
                </div>
            </section>

            <section class="output-section" id="output-section" style="display: none;" aria-live="polite" aria-atomic="true">
                <div class="card" id="output-card" role="region" aria-label="Translated Flight Information">
                    <div class="card-header">
                        <div class="window-controls" aria-hidden="true">
                            <span class="dot red"></span>
                            <span class="dot yellow"></span>
                            <span class="dot green"></span>
                        </div>
                        <span class="card-title">✈️ squawk</span>
                    </div>
                    <div class="card-body" id="card-body">
                        <!-- Parsed flight info will be inserted here -->
                    </div>
                    <div class="watermark">built by roie</div>
                </div>

                <div class="action-buttons">
                    <button id="copy-btn" class="btn btn-action" disabled title="Copy translation as text to clipboard">
                        <span class="btn-icon" aria-hidden="true">📋</span>
                        <span class="btn-label">Copy Text</span>
                    </button>
                    <button id="copy-image-btn" class="btn btn-action" disabled title="Copy flight card as an image to clipboard">
                        <span class="btn-icon" aria-hidden="true">🖼️</span>
                        <span class="btn-label">Copy Image</span>
                    </button>
                    <button id="save-btn" class="btn btn-action" disabled title="Download flight card as a PNG image">
                        <span class="btn-icon" aria-hidden="true">💾</span>
                        <span class="btn-label">Save PNG</span>
                    </button>
                </div>
            </section>
        </main>
    </div>

    <script>
        window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
    </script>
    <script defer src="/_vercel/insights/script.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
    <script type="module" src="app.js"></script>
</body>
</html>