WhisperMaPhone/main/templates/whispermaphone/post.html

51 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Post</title>
{% load static %}
<link href="{% static 'main/main.css' %}" rel="stylesheet">
<link href="{% static 'main/post.css' %}" rel="stylesheet">
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
</head>
<body>
<header><a href="/" class="text" style="border: none">Thoughts</a> <span class="text">Post</span></header>
<section class=".main-wrap">
<form action="{% url 'post'%}" method="post">
{% csrf_token %}
<textarea name="text" id="text" class="thought" rows="3"></textarea>
<hr class="thought-end">
<textarea name="extended_text" id="extended_text" class="thought" rows="4"></textarea>
<hr class="thought-end">
<input type="hidden" name="timezone_offset" id="timezone_offset">
<input type="submit" id="post-button" value="Submit">
</form>
</section>
<script>
const textEl = document.getElementById("text");
const textExtEl = document.getElementById("extended_text");
textEl.addEventListener("keydown", evt => {
// If the length is more than 120
const value = textEl.value;
if (value.length > 140) {
const splitAt = value.lastIndexOf(" ", 140) + 1; // Plus 1 keeps the space in the original text instead of moving it
const toMove = value.substring(splitAt);
textExtEl.value = toMove + textExtEl.value;
textEl.value = value.substring(0, splitAt);
}
});
const timezoneOffsetEl = document.getElementById("timezone_offset");
timezoneOffsetEl.value = (new Date()).getTimezoneOffset();
</script>
</body>
</html>