LazarusChat/index.html at main · Infroid-Coder/LazarusChat · 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
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="color-scheme" content="dark">
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="lazarus, chat, lazuruschat, lazarus-chat, whatsapp, chat export, export, messages, zip">
    <meta name="description" content="A free and open-source (MIT) WhatsApp chat export reader developed by Infroid Coder">
    <meta property="og:image" content="/imgs/favicon.png">
    <meta property="og:description" content="A free and open-source (MIT) WhatsApp chat export reader developed by Infroid Coder">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="./imgs/favicon.png">
    <script src="./jszip.js"></script>
    <title>Lazarus Chat</title>
</head>
<body>
    <input type="file" id="upload" hidden>

    <nav id="navbar">
        <div id="nav-title-div">
            <img src="./imgs/favicon.png" alt="Logo" id="nav-logo">
            <h1 id="nav-title">Lazarus Chat</h1>
        </div>
        <div class="nav-item">
            <div class="nav-link-div">
                <a href="#" class="nav-item-a">Home</a>
                <div class="nav-item-underline"></div>
            </div>
        </div>
        <div class="nav-item">
            <div class="nav-link-div">
                <a href="#about" class="nav-item-a">About</a>
                <div class="nav-item-underline"></div>
            </div>
        </div>
        <div class="nav-item">
            <div class="nav-link-div">
                <a href="#reviver" class="nav-item-a">Revive</a>
                <div class="nav-item-underline"></div>
            </div>
        </div>
    </nav>

    <main>
        <section id="hero">
            <div id="hero-content">
                <h2 id="hero-slogan">
                    Relive Every Conversation
                </h2>
                <p id="hero-desc">
                    Your WhatsApp chat exports deserve better than raw text files. LazarusChat transforms them into the chat experience you remember and love. Complete with documents, photos, videos, stickers, and that familiar feel. Everything happens locally in your browser. Your conversations stay yours, always private, beautifully preserved. And the best part, it's open source and free. Try it Now!
                </p>
                <a href="#reviver" id="cta-btn-a">
                    <button id="cta-btn">
                        <span id="cta-btn-text">
                            Revive a Chat
                        </span>
                        <img src="./imgs/right-arrow.png" alt="Down Arrow" id="cta-btn-icon">
                    </button>
                </a>
            </div>
        </section>
        <section id="about">
            <div class="sec-title-div">
                <h2 class="sec-title">About LazarusChat</h2>
                <div class="sec-title-underline"></div>
            </div>
            <p class="about-sec-p">
                WhatsApp lets you export your conversations, but what you get is a messy text file buried in a ZIP archive, stripped of context and nearly impossible to read. Photos and videos become cryptic filenames. Multi-line messages break apart. The flow of conversation which is the thing that made those chats meaningful is lost. LazarusChat is built as a solution to this exact problem. Just drop in your export file and watch as raw text and media files turn into the familiar chat interface that you remember.
            </p>
            <p class="about-sec-p">
                These aren't just "chat logs". They're memories. Conversations with people you love, moments you want to preserve, stories worth revisiting. Whether you're archiving old chats, reviewing important conversations, or simply taking a trip down memory lane, LazarusChat treats your data with the care it deserves. All processing happens directly in the browser. Everything is client-side. So your chats do not leave your device. Not even once. And best of all, the entire project is open source (MIT Licensed). You can always confirm what the website does and does not do.
            </p>
            <p class="about-sec-p">
                I built this because I needed it myself, and I'm sharing it because everyone deserves better than wrestling with text files. It will always be free, with no premium tiers, no subscriptions, and no compromises.
            </p>
        </section>
        <section id="reviver">
            <div class="sec-title-div">
                <h2 class="sec-title">Revive a Chat</h2>
                <div class="sec-title-underline"></div>
            </div>
            <div id="chat-window-backdrop">
                <div id="chat-window">
                    <div id="chat-msg-div">

                    </div>
                    <div id="chat-window-placeholder-div">
                        <img src="./imgs/large-add-icon.png" alt="Add Chat" id="chat-window-placeholder-icon">
                        <p id="chat-window-placeholder-p">No Chat Loaded Yet. Add Chat</p>
                    </div>
                </div>
            </div>

            <div id="toolbar">
                <button id="add-chat-btn" class="toolbar-btn">
                    <img src="./imgs/add-icon.png" alt="Add Chat" class="toolbar-btn-icon">
                </button>
                <button id="fs-chat-btn" class="toolbar-btn">
                    <img src="./imgs/fullscreen.png" alt="Enter Fullscreen" class="toolbar-btn-icon">
                    <img src="./imgs/exit-fullscreen.png" alt="Exit Fullscreen" class="toolbar-btn-icon fs">
                </button>
            </div>
        </section>
    </main>
    <footer id="footer">
        <p id="cr-statement">
            &copy; 2025 Infroid Coder. MIT License
        </p>
    </footer>

    <div id="popup-wrapper">
        <div id="select-user-popup">
            <h2 id="select-user-popup-title">Select User:</h2>
            <select name="select-user" id="select-user-input">

            </select>
            <button id="select-user-submit">Select</button>
        </div>
        <iframe src="" frameborder="0" id="pdf-viewer"></iframe>
        <img src="" alt="Image View" id="img-viewer">
        <div id="popup-close-btn">
            <img src="./imgs/add-icon.png" alt="Close Popup" id="popup-close-btn-icon">
        </div>
    </div>


    <script src="./script.js"></script>
</body>
</html>