mirror of
https://github.com/KnugiHK/WhatsApp-Chat-Exporter.git
synced 2026-07-11 16:32:11 +02:00
KnugiHK
c937ee4379
1. Support some metadata 2. Show the sender of messages from group 3. Support GPS (android only) 4. Support vCards
125 lines
4.4 KiB
HTML
125 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Whatsapp - {{ name }}</title>
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@300;400&display=swap');
|
|
html {
|
|
font-family: 'Noto Sans HK', sans-serif;
|
|
font-size: 12px;
|
|
}
|
|
header {
|
|
position: fixed;
|
|
z-index: 20;
|
|
border-bottom: 2px solid #e3e6e7;
|
|
font-size: 2em;
|
|
font-weight: bolder;
|
|
background-color: white;
|
|
padding: 20px 0 20px 0;
|
|
}
|
|
footer {
|
|
border-top: 2px solid #e3e6e7;
|
|
font-size: 2em;
|
|
padding: 20px 0 20px 0;
|
|
}
|
|
article {
|
|
width:500px;
|
|
margin:100px auto;
|
|
z-index:10;
|
|
}
|
|
img, video {
|
|
max-width:100%;
|
|
width: 70%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="w3-center w3-top">Chat history with {{ name }}</header>
|
|
<article class="w3-container">
|
|
<div class="table" style="width:100%">
|
|
{% set last = {'last': 946688461.001} %}
|
|
{% for msg in msgs -%}
|
|
<div class="w3-row" style="padding-bottom: 10px">
|
|
{% if determine_day(last.last, msg.timestamp) is not none %}
|
|
<div class="w3-center" style="color:#70777c;padding: 10px 0 10px 0;">{{ determine_day(last.last, msg.timestamp) }}</div>
|
|
{% if last.update({'last': msg.timestamp}) %}{% endif %}
|
|
{% endif %}
|
|
{% if msg.from_me == true %}
|
|
<div class="w3-row">
|
|
<div style="float: left; color:#70777c;">{{ msg.time }}</div>
|
|
<div style="padding-left: 10px; text-align: right; color: #3892da;">You</div>
|
|
</div>
|
|
<div class="w3-row">
|
|
<div class="w3-col m10 l10">
|
|
<div style="text-align: right;">
|
|
{% if msg.media == false %}
|
|
{% filter escape %}{{ msg.data or "{This message is not supported yet}" }}{% endfilter %}
|
|
{% else %}
|
|
{% if "image/" in msg.mime %}
|
|
<img src="{{ msg.data }}" />
|
|
{% elif "audio/" in msg.mime %}
|
|
<audio controls="controls" autobuffer="autobuffer">
|
|
<source src="{% filter escape %}{{ msg.data }}{% endfilter %}" />
|
|
</audio>
|
|
{% elif "video/" in msg.mime %}
|
|
<video controls="controls" autobuffer="autobuffer">
|
|
<source src="{% filter escape %}{{ msg.data }}{% endfilter %}" />
|
|
</video>
|
|
{% elif "/" in msg.mime %}
|
|
{The file cannot be displayed here, however it should be located at {% filter escape %}{{ msg.data }}{% endfilter %}}
|
|
{% else %}
|
|
{% filter escape %}{{ msg.data }}{% endfilter %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="w3-col m2 l2" style="padding-left: 10px"><img src="{{ my_avatar }}"></div>
|
|
</div>
|
|
{% else %}
|
|
<div class="w3-row">
|
|
<div style="padding-right: 10px; float: left; color: #3892da;">
|
|
{% if msg.sender is not none %}
|
|
{{ msg.sender }}
|
|
{% else %}
|
|
{{ name }}
|
|
{% endif %}
|
|
</div>
|
|
<div style="text-align: right; color:#70777c;">{{ msg.time }}</div>
|
|
</div>
|
|
<div class="w3-row">
|
|
<div class="w3-col m2 l2"><img src="{{ their_avatar }}"></div>
|
|
<div class="w3-col m10 l10">
|
|
<div style="text-align: left;">
|
|
{% if msg.media == false %}
|
|
{% filter escape %}{{ msg.data or "{This message is not supported yet}" }}{% endfilter %}
|
|
{% else %}
|
|
{% if "image/" in msg.mime %}
|
|
<img src="{% filter escape %}{{ msg.data }}{% endfilter %}" />
|
|
{% elif "audio/" in msg.mime %}
|
|
<audio controls="controls" autobuffer="autobuffer">
|
|
<source src="{% filter escape %}{{ msg.data }}{% endfilter %}" />
|
|
</audio>
|
|
{% elif "video/" in msg.mime %}
|
|
<video controls="controls" autobuffer="autobuffer">
|
|
<source src="{% filter escape %}{{ msg.data }}{% endfilter %}" />
|
|
</video>
|
|
{% elif "/" in msg.mime %}
|
|
{The file cannot be displayed here, however it should be located at {% filter escape %}{{ msg.data }}{% endfilter %}}
|
|
{% else %}
|
|
{% filter escape %}{{ msg.data }}{% endfilter %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</article>
|
|
<footer class="w3-center">
|
|
End of history
|
|
</footer>
|
|
</body>
|
|
</html> |