emails.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Email Generator | Disturbo's corner</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="assets/icons/icon.png">
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-P4P5HCX3GM"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-P4P5HCX3GM');
    </script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8952572710252215"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="scripts/FileSaver.js"></script>
    <script type="text/javascript" src="scripts/ModuleLoader.js"></script>
    <meta http-equiv="content-language" content="en">
    <meta property="og:image" content="assets/icons/icon.png">
    <meta name="description" content="Quick and easy to use tool to create emails like the ones in VALORANT, from those in Fracture to the ones in The Range.">
    <meta name="keywords" content="valorant, email, agent, generator, fracture">
    <meta name="theme-color" content="#56744b">
    <meta author="Disturbo">
</head>
<body onload="loaded()">
    <div style="font-family: DINNext-Light"></div>
    <div class="content main" style="font-family: DINNext-Regular">
        <div id="navbar"></div>
        <div id="page-content">
            <center>
                <div style="margin-bottom: 30px; background-color:#0f192390">
                    <h1 style="padding:30px 0px 30px 0px; margin:0px">VALORANT Email Generator</h1>
                </div>
                <div>
                    <div style="display: inline-block; vertical-align: middle">
                        <table>
                            <tr>
                                <td>Template</td>
                                <td>
                                    <select id="template-selector" onchange="processTemplate();buildEmail()">
                                        <option value="valorant">VALORANT</option>
                                        <option value="k-corp">Kingdom Corp.</option>
                                        <option value="k-ind">Kingdom Ind.</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>Portrait</td>
                                <td>
                                    <select id="portrait-selector" onchange="processPortrait();buildEmail()">
                                        <optgroup class="portrait-group" label="VALORANT">
                                            <option value="astra">Astra</option>
                                            <option value="breach">Breach</option>
                                            <option value="brimstone">Brimstone</option>
                                            <option value="chamber">Chamber</option>
                                            <option value="clove">Clove</option>
                                            <option value="cypher">Cypher</option>
                                            <option value="deadlock">Deadlock</option>
                                            <option value="fade">Fade</option>
                                            <option value="harbor">Harbor</option>
                                            <option value="jett">Jett</option>
                                            <option value="kayo">KAY/O</option>
                                            <option value="killjoy">Killjoy</option>
                                            <option value="neon">Neon</option>
                                            <option value="omen">Omen</option>
                                            <option value="phoenix">Phoenix *</option>
                                            <option value="raze">Raze</option>
                                            <option value="reyna">Reyna</option>
                                            <option value="sage">Sage</option>
                                            <option value="skye">Skye</option>
                                            <option value="sova">Sova</option>
                                            <option value="viper">Viper</option>
                                            <option value="yoru">Yoru</option>
                                            <option value="valorant_logo">VALORANT logo</option>
                                        </optgroup>
                                        <optgroup class="portrait-group" label="Fracture">
                                            <option value="om">Oran McEneff</option>
                                            <option value="rp">Rúben Pontes</option>
                                            <option value="ap">Aurora Pontes</option>
                                            <option value="drs">Dr. Santos</option>
                                            <option value="ks">K-SEC</option>
                                            <option value="sa">Admin</option>
                                        </optgroup>
                                        <optgroup class="portrait-group" label="Other">
                                            <option value="greaves">Cpt. Greaves</option>
                                            <option value="mystery">Mystery</option>
                                            <option value="empty">No portrait</option>
                                            <option value="custom">Custom</option>
                                        </optgroup>
                                    </select>
                                    <button id="custom-portrait-button" style="display: none" onclick="openCustomPortraitPicker()">Select a custom portrait...</button>
                                </td>
                            </tr>
                            <tr>
                                <td>Sender</td>
                                <td><input type="text" id="sender-input" maxlength="35" size="61" oninput="buildEmail()"></td>
                            </tr>
                            <tr>
                                <td>Receiver</td>
                                <td><input type="text" id="receiver-input" maxlength="35" size="61" oninput="buildEmail()"></td>
                            </tr>
                            <tr>
                                <td>Title</td>
                                <td><input type="text" id="title-input" maxlength="35" size="61" oninput="buildEmail()"></td>
                            </tr>
                            <tr>
                                <td>Date</td>
                                <td><input type="text" id="date-input" maxlength="8" size="12" oninput="buildEmail()"></td>
                            </tr>
                            <tr>
                                <td>Body</td>
                                <td><textarea id="body-input" style="resize: none;" cols="64" rows="8" oninput="buildEmail()"></textarea></td>
                            </tr>
                        </table>
                    </div>
                    <div style="display: inline-block; padding-right: 100px"></div>
                    <div style="display: inline-block; vertical-align: middle">
                        <div style="margin: 20px 10px">
                            <canvas hidden id="working-canvas" width="700" height="350"></canvas>
                            <canvas id="show-canvas" width="700" height="350"></canvas></div>
                        <div>
                            <a class="stylized-button" href="" onclick="downloadEmail(); return false;">Download email!</a>
                        </div>
                    </div>
                </div>
                <div style="margin: 0px 0px 40px 0px"></div>
            </center>
        </div>
    </div>
    <div id="footer"></div>
    <script type="text/javascript" src="scripts/ModuleLoader.js"></script>
    <script type="text/javascript" src="scripts/EmailGenerator.js"></script>
</body>
</html>