GDC-transcript/transcript.html at main · dklassic/GDC-transcript · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>

<head>
    <title>GDC-transcript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- stylesheet -->
    <!-- Using Tailwind CSS CDN isn't the best thing in the world but we're just a single static page so whatever -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
        crossorigin="anonymous" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .full-container {
            position: relative;
            /* height: 100vh; */
            width: 100vw;
            align-items: center;
            justify-content: center;
        }

        .transcript-container {
            max-width: 680px;
            margin: 60px auto 0 auto;
        }

        .transcript-info-container {
            width: 100%;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        p {
            margin: 10px;
        }

        .timecode-link {
            font-size: 0.75rem;
            font-family: monospace;
            color: #ec4899;
            text-decoration: none;
            margin-right: 4px;
            white-space: nowrap;
        }

        .timecode-link:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="full-container">
        <div class="transcript-info-container">
            <div id="transcript-not-exists" style="display:none;">
                <button
                    class="middle none center ml-3 mr-3 rounded-lg border border-red-500 py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all hover:opacity-75 focus:ring focus:ring-red-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                    Transcript not found.
                </button>
            </div>
            <div id="transcript-exists" style="display:none;">
                <div class="ml-3 mr-3 mt-3 mb-3">
                    <a href="/GDC-transcript/?v=" id="video-link" target="_blank">
                        <button
                            class="middle none center rounded-lg bg-blue-500 p-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-blue-500/20 transition-all hover:shadow-lg hover:shadow-blue-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
                            data-ripple-light="true">
                            <i class="fas fa-video"></i>
                        </button>
                    </a>
                </div>
                <div class="ml-3 mr-3 mt-3 mb-3">
                    <a href="https://github.com/dklassic/GDC-transcript/blob/main/static/src/transcript"
                        id="transcript-link" target="_blank">

                        <button
                            class="middle none center rounded-lg bg-green-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                            Raw Text File
                        </button>
                    </a>
                </div>
            </div>
        </div>
        <div class="transcript-container">
            <div id="transcript" style="display:none;"></div>
        </div>
    </div>
    <script src="static/vendor/subtitles-parser/subtitles.parser.min.js"></script>
    <script src="static/src/js/transcript.js"></script>
    <script type="module" src="https://unpkg.com/@material-tailwind/html@latest/scripts/popover.js"></script>
    <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>
    <script type="module" src="https://unpkg.com/@material-tailwind/html@latest/scripts/tooltip.js"></script>
    <footer
        class="flex w-full flex-row flex-wrap items-center justify-center gap-y-6 gap-x-12 border-t border-blue-gray-50 py-6 text-center md:justify-between">
    <p class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased">
        © 2023 <a href="https://twitter.com/PeDev_">PeDev</a>, <a href="https://twitter.com/RandomDevDK">DK Liao</a>
    </p>
    <ul class="flex flex-wrap items-center gap-y-2 gap-x-8">
        <li>
            <a href="https://github.com/dklassic/gdc-transcript"
                class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500">
                GDC-transcript repository
            </a>
        </li>
    </ul>
    <ul class="flex flex-wrap items-center gap-y-2 gap-x-8">
        <li>
            <a href="https://ko-fi.com/dkliao"
                class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500">
                Buy us a coffee
            </a>
        </li>
        </ul>
    </footer>
</body>

</html>