sapphire
/
sapphire-frontend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
							<!--

 Sapphire

 Copyright (C) 2018 Florrie Haero
 Copyright (C) 2018 Alyssa Rosenzweig
 Copyright (C) 2018 eq

 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02111-1301  USA

-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Sapphire</title>
        <link rel="manifest" href="manifest.json"></link>
        <link rel="stylesheet" href="style/palette.css"></link>
        <link rel="stylesheet" href="style/style.css"></link>
        <link rel="stylesheet" id="emoji-stylesheet" href="style/emoji-none.css"></link>
    </head>
    <body>
        <div id="app" class="show-buddy-list show-chat-user-list">
            <div id="buddy-list-pane" class="pane">
                <div class="pane-scroller">
                    <div id="buddy-list">
                    </div>
                    <div id="chat-list">
                    </div>
                </div>
                <div id="left-pane-footer" class="pane-footer">
                    <svg id="add-buddy" class="icon">
                        <title>Add a buddy</title>
                        <use href="icons/add.svg#add"></use>
                    </svg>
                    <!-- TODO: make this an actual settings modal -->
                    <svg id="change-avatar" class="icon">
                        <title>Change avatar</title>
                        <use href="icons/gear.svg#gear"></use>
                    </svg>
                    <!--
                    <div id="whoami">
                        <div id="whoami-status">
                            <span class="buddy-avatar"></span>
                            <span class="buddy-name">Florrie</span>
                            <span class="buddy-status status-online">●</span>
                        </div>
                    </div>
                    -->
                </div>
            </div>
            <div id="chat-pane" class="pane">
                <div id="room-info">
                    <a id="room-back" href="#" class="room-button">
                        <svg class="icon"><use href="icons/menu.svg#menu"></use></svg>
                    </a>
                    <div id="room-info-content">
                        <div id="room-name"></div>
                        <div id="room-topic"></div>
                    </div>
                    <!-- TODO: "Toggle chat list" icon -->
                    <a id="toggle-chat-user-list" class="room-button" href="#">@</a>
                </div>

                <div id="message-list-container" tabindex="0">
                    <div id="message-list">
                    </div>
                </div>
                <div id="chat-input-area">
                    <form id="chat-form">
                        <!-- Don't set an id/name, such that autocompletion doesn't try to do history but you still get generic complete on phones -->
                        <textarea data-id="input" type="text" placeholder="Message" rows="1"></textarea>
                        <input type="submit" value="Send!">
                    </form>
                    <div id="typing-indicator">
                        <b id="typing-indicator-name"></b>
                        <span id="typing-indicator-status"></span>
                    </div>
                </div>
            </div>
            <div id="chat-user-list-pane" class="pane">
                <div class="pane-scroller">
                    <div id="chat-user-list"></div>
                </div>
            </div>
        </div>

        <div id="modal-screen">
            <div id="modal-content">
            </div>
        </div>

        <div id="login-screen">
            <div id="login-content">
                <h1>Sapphire</h1>
                <p id="login-status"></p>
                <form id="login-form">
                    <label><span>Username:</span> <input id="username" type="text" required></label>
                    <label><span>Password:</span> <input id="password" type="password" required></label>
                    <input type="submit" value="Login">
                </form>
            </div>
        </div>

        <script>window.BASE_HOST = window.location.protocol === "file:" ? "localhost" : window.location.hostname;</script>
        <script src="vendor/hogan-3.0.1.js"></script>
        <script src="vendor/emoji.js"></script>
        <script src="vendor/countries-rev.js"></script>

        <script src="vendor/otr/bigint.js"></script>
        <script src="vendor/otr/crypto.js"></script>
        <script src="vendor/otr/eventemitter.js"></script>
        <script src="vendor/otr/otr.js"></script>

        <script src="src/emoji-emoticon-to-unicode.js"></script>
        <script src="src/emojify.js"></script>
        <script src="src/emoji-font.js"></script>
        <script src="src/templates.js"></script>
        <script src="src/password.js"></script>
        <script src="src/backend.js"></script>
        <script src="src/avatar.js"></script>
        <script src="src/sanitize.js"></script>
        <script src="src/main.js"></script>
    </body>
</html>