mirror of
https://github.com/KnugiHK/WhatsApp-Chat-Exporter.git
synced 2026-01-28 21:30:43 +00:00
120 lines
4.2 KiB
HTML
120 lines
4.2 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 }}{% 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;">{{ name }}</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 }}{% 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> |