cde
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="192x192" href="./img/icon.png" />
<link rel="icon" type="image/png" href="./img/icon.png" />
<link rel="manifest" href="./manifest.json" />
<title>CDEncrypt</title>

<link rel="stylesheet" type="text/css" href="./lib/pell/pell.css">
<link rel="stylesheet" href="./lib/bulma.min.css">
<script defer src="./lib/fontawesome.js"></script>

<script src="./lib/msgpack.min.js" defer></script>
<script src="./lib/base64js.min.js" defer></script>
<style>
/* https://github.com/jgthms/bulma/issues/2259#issuecomment-516137922 */
.navbar>.container {
    align-items: stretch;
    display: flex;
    min-height: 3.25rem;
    width: 100%;
}
.navbar-burger {
    display: none;
}
.navbar-menu {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    justify-content: flex-end;
    flex-grow: 1;
    flex-shrink: 0;
}
.navbar, .navbar-end, .navbar-menu, .navbar-start {
    display: flex;
    align-items: stretch;
}
.navbar-item {
    display: flex;
    align-items: center;
}
</style>
</head>
<body>Loading...</body>

<script type="module">
import { L } from './src/lang/lang.js'
let index_template = () => `
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a href="${location.pathname}" class="navbar-item">
            <img src="img/icon.png"> &nbsp; <strong>CDEncrypt</strong>
        </a>
    </div>
    <div class="navbar-menu">
        <div class="navbar-end">
            <div class="navbar-item">
                <div class="buttons">
                    <button class="button is-small is-primary" onclick="modal_open('modal_passwd_list')">
                        <i class="fas fa-key"></i> &nbsp; ${L('Passwords')}
                    </button>

                    <div class="dropdown is-right is-hoverable">
                        <div class="dropdown-trigger">
                            <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3">
                                <i class="fas fa-bars"></i>
                            </button>
                        </div>
                        <div class="dropdown-menu" id="dropdown-menu3" role="menu">
                            <div class="dropdown-content">
                                <a class="dropdown-item">
                                    <input class="file-input" type="file" id="in_add_file">
                                    <i class="fas fa-upload"></i> &nbsp; ${L('Open File')}
                                </a>
                                <a class="dropdown-item" id="in_add_text">
                                    <i class="far fa-comment-alt"></i> &nbsp; ${L('Input Text')}
                                </a>
                                <a class="dropdown-item" onclick="location.reload()">
                                    <i class="fas fa-sync"></i> &nbsp; ${L('Reload Page')}
                                </a>
                                <a class="dropdown-item is-danger" id="clean_all">
                                    <i class="fas fa-sign-out-alt"></i> &nbsp; ${L('Clean All')}
                                </a>
                                <hr class="dropdown-divider">
                                <a href="https://github.com/dukelec/cde" class="dropdown-item">
                                    <i class="fab fa-github"></i> &nbsp; GitHub
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>


<section class="section">
    <div class="container">
        <h1 class="title">${L('Plaintext')}</h1>
        <p>${L('Use password')}: <span id="in_cur_pw">--</span></p>
    </div>

    <br>
    <div class="container">
        <h3 class="title is-size-4">${L('Content')}</h3>
        <div class="box" id="in_plaintext"></div>
    </div>

    <br>
    <div class="container">
        <h3 class="title is-size-4">${L('Files')}</h3>
        <div id="in_files"></div>
    </div>

    <br>
    <div class="container">
        <button class="button is-small" id="re_edit">
            <i class="fas fa-arrow-down"></i> &nbsp; ${L('Edit')}
        </button>
        <button class="button is-small" id="preview">
            <i class="fas fa-arrow-up"></i> &nbsp; ${L('Preview')}
        </button>
    </div>
</section>

<section class="section">
    <div class="container">
        <h1 class="title">${L('Edit')} | ${L('Reply')}</h1>
        <div id="editor" class="pell"></div>

        <section class="modal-card-body" id="out_files">
        </section>

        <div class="button is-small">
            <input class="file-input" type="file" id="out_add_file" multiple>
            <i class="fas fa-upload"></i> &nbsp; ${L('Add File')}
        </div>

        <br><br>
        <div class="columns">
            <div class="column">
                <button class="button is-small" onclick="modal_open('modal_passwd_sel')">
                    <i class="fas fa-key"></i> &nbsp; ${L('Password')} &nbsp; <span id="out_pw">--</span>
                </button>
            </div>
            <div class="column">
                <input class="input" type="text" id="out_fname" placeholder="${L('File name, use date if empty')}">
            </div>
        </div>
        <div class="columns">
            <div class="column">
                <button class="button is-small" id="share_url">
                    <i class="fas fa-share-alt"></i> &nbsp; ${L('Share URL')}
                </button>
                <button class="button is-small" id="show_url">
                    <i class="far fa-clipboard"></i> &nbsp; ${L('Show URL')}
                </button>
            </div>
            <div class="column">
                <button class="button is-small" id="share_file">
                    <i class="fas fa-share-alt"></i> &nbsp; ${L('Share File')}
                </button>
                <button class="button is-small" id="download_file">
                    <i class="fas fa-file-download"></i> &nbsp; ${L('Download File')}
                </button>
            </div>
        </div>

        <p id="show_out_url" style="word-wrap: break-word;"></p>

    </div>
</section>

<div class="modal" id="modal_passwd_list">
    <div class="modal-background" onclick="modal_close('modal_passwd_list')"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">${L('Password List')}</p>
            <button class="delete" aria-label="close" onclick="modal_close('modal_passwd_list')"></button>
        </header>
        <section class="modal-card-body" id="passwd_list">
            <!--p>#1: xxx <button class="btn btn-sm float-right">Remove</button></p-->
        </section>
        <footer class="modal-card-foot">
            <button class="button is-small is-success" onclick="add_passwd()">${L('Add')}</button>
            <button class="button is-small" onclick="modal_close('modal_passwd_list')">${L('Cancel')}</button>
        </footer>
    </div>
</div>

<div class="modal" id="modal_passwd_sel">
    <div class="modal-background" onclick="modal_close('modal_passwd_sel')"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">${L('Password Select')}</p>
            <button class="delete" aria-label="close" onclick="modal_close('modal_passwd_sel')"></button>
        </header>
        <section class="modal-card-body" id="passwd_sel">
            <!--p>#1: xxx <button class="btn btn-sm float-right">Select</button></p-->
        </section>
        <footer class="modal-card-foot">
            <button class="button is-small is-success" onclick="add_passwd()">${L('Add')}</button>
            <button class="button is-small" onclick="modal_close('modal_passwd_sel')">${L('Cancel')}</button>
        </footer>
    </div>
</div>`;
document.getElementsByTagName("body")[0].innerHTML = index_template();
</script>
<script type="module" src="./src/app.js"></script>
</html>