62 lines
3.4 KiB
HTML
62 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Function</title>
|
|
<link rel="icon" type="image/svg+xml"
|
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z' /%3E%3C/svg%3E%0A" />
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
|
|
<script src="/static/js/tailwindcss@3.2.4.js"></script>
|
|
<script src="/static/js/htmx.min.js"></script>
|
|
<script src="/static/js/hyperscript.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/ace.min.js"
|
|
integrity="sha512-7QPOFYWq4euLbAVbG/o5YVgkotUdMiwFuFrVQc6lbqZuAcWnLp0sQ6JX2AIWqbm3wWrPuEfu9FqckItCgQzBWw=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/mode-javascript.min.js"
|
|
integrity="sha512-1OTGICMOnGWxRYfDZRUdv7qut0O8+9s7JPi6JNxlz1pdpHgDwPo1L0dzYKwftuIb0ossdBzWtkAlnyyYpIEp2A=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/theme-monokai.min.js"
|
|
integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
</head>
|
|
|
|
<body class="bg-gray-100 font-roboto">
|
|
<div class="container mx-auto p-4">
|
|
|
|
{% block content %}
|
|
|
|
{% endblock %}
|
|
</div>
|
|
|
|
<div id="alert-container" class="fixed top-10 right-10 z-50"></div>
|
|
|
|
<script>
|
|
function showAlert(message, type = 'success', duration = 1500) {
|
|
const alertContainer = document.getElementById('alert-container');
|
|
const alertDiv = document.createElement('div');
|
|
|
|
const icon = type === 'success'
|
|
? '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' // SVG for success icon
|
|
: '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01"></path></svg>'; // SVG for error icon
|
|
|
|
const baseClasses = "flex items-center p-4 mb-4 text-sm text-white rounded-lg shadow-md transition-opacity duration-300";
|
|
alertDiv.className = `${baseClasses} ${type === 'success' ? 'bg-green-400' : 'bg-red-400'}`;
|
|
alertDiv.innerHTML = `${icon}<span class="ml-3">${message}</span>`;
|
|
|
|
|
|
|
|
// Append alert div to the container
|
|
alertContainer.appendChild(alertDiv);
|
|
|
|
// Remove the alert after 'duration' milliseconds
|
|
setTimeout(() => {
|
|
alertDiv.style.opacity = '0';
|
|
setTimeout(() => alertContainer.removeChild(alertDiv), 300);
|
|
}, duration);
|
|
}
|
|
</script>
|
|
</body> |