Echo/index.html at main · codebysreyas/Echo · 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echo</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2300a884' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/></svg>">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.umd.min.js"></script>
</head>
<body>

<button class="theme-toggle" id="theme-toggle" title="Toggle theme">🌙</button>

<div id="app">

    <div id="screen-welcome">
        <div class="welcome-logo">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
            </svg>
        </div>
        <h1>Echo</h1>
        <p>Decentralized messaging. No servers. No surveillance. Just you and the people you trust.</p>
        <button class="btn-primary" id="btn-generate">Create New Identity</button>
        <button class="btn-secondary" id="btn-restore">Restore Existing Identity</button>
    </div>

    <div id="screen-passphrase" style="display:none;">
        <h2>Your Secret Passphrase</h2>
        <p>These 12 words are your identity. Write them down somewhere safe — this is the only way to access your account.</p>
        <div id="passphrase-display"></div>
        <div class="warning-box">Never share these words with anyone. Echo cannot recover them if lost.</div>
        <button class="btn-primary" id="btn-copy">Copy Passphrase</button>
        <button class="btn-secondary" id="btn-continue" style="margin-top:8px;">I have saved it, Continue</button>
    </div>

    <div id="screen-restore" style="display:none;">
        <h2>Restore Your Identity</h2>
        <p>Enter your 12 word passphrase exactly as it was given to you, with spaces between each word.</p>
        <textarea id="restore-input" placeholder="word1 word2 word3 ... word12"></textarea>
        <p id="restore-error" style="display:none;"></p>
        <button class="btn-primary" id="btn-restore-submit">Restore Identity</button>
    </div>

    <div id="screen-profile" style="display:none;">
        <h2>Set Up Your Profile</h2>
        <div id="avatar-wrapper">
            <img id="avatar-preview" src="https://ui-avatars.com/api/?name=E&background=00a884&color=fff" alt="Profile Picture">
            <label for="avatar-input">Change Photo</label>
            <input type="file" id="avatar-input" accept="image/*" style="display:none;">
        </div>
        <input type="text" class="input-field" id="input-username" placeholder="Username (required)" maxlength="20">
        <p id="username-error" style="display:none;"></p>
        <input type="text" class="input-field" id="input-displayname" placeholder="Display Name (optional)" maxlength="30">
        <button class="btn-primary" id="btn-save-profile">Continue to Echo</button>
    </div>

    <div id="screen-home" style="display:none;">
        <div id="sidebar">
            <div id="sidebar-header">
                <img id="sidebar-avatar" src="" alt="Avatar">
                <span id="sidebar-name"></span>
                <div class="sidebar-actions">
                    <button class="icon-btn" id="theme-toggle-chat" title="Toggle theme">🌙</button>
                </div>
            </div>

            <div id="search-box">
                <input type="text" id="search-input" placeholder="Search or start new chat">
            </div>

            <div id="new-chat-bar">
                <input type="text" id="input-find-user" placeholder="Enter username">
                <button id="btn-find-user">Start Chat</button>
            </div>

            <p id="find-user-error" style="display:none;">User not found. Check the username and try again.</p>

            <div id="chat-list"></div>
        </div>

        <div id="chat-main">
            <div id="chat-empty">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" fill="currentColor"/>
                </svg>
                <p>Select a chat to start messaging</p>
            </div>

            <div id="chat-section" style="display:none;">
                <div id="chat-header">
                    <button class="back-btn" id="btn-back">←</button>
                    <img id="chat-header-avatar" src="" alt="Avatar">
                    <div id="chat-header-info">
                        <div id="chat-with"></div>
                        <div id="chat-status"></div>
                    </div>
                </div>
                <div id="chat-messages"></div>
                <div id="chat-input-area">
                    <label for="file-input" class="icon-btn" title="Attach file" style="cursor:pointer;">
                        <svg viewBox="0 0 24 24" width="22" height="22" fill="var(--text-secondary)">
                            <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/>
                        </svg>
                    </label>
                    <input type="file" id="file-input" style="display:none;" accept="image/*,video/*,.pdf,.doc,.docx,.txt,.zip">
                    <input type="text" id="chat-input" placeholder="Type a message">
                    <button id="btn-send">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="module" src="js/app.js"></script>
</body>
</html>