feat: better page layout, contact page (#2)
Move the message box and such around, fix the contact page
This commit is contained in:
parent
a5d56c0bd2
commit
be53e9a52e
5 changed files with 450 additions and 222 deletions
|
|
@ -313,7 +313,21 @@ fn build() {
|
||||||
let pubkey_file = "target/public_keys.json";
|
let pubkey_file = "target/public_keys.json";
|
||||||
|
|
||||||
if !std::path::Path::new(pubkey_file).exists() {
|
if !std::path::Path::new(pubkey_file).exists() {
|
||||||
panic!("No public key file. Please generate keys first.");
|
println!("No public keys found at {pubkey_file}. Generating keys automatically...");
|
||||||
|
|
||||||
|
let sk_out = ".local/secrets.json";
|
||||||
|
let num_keys = 100;
|
||||||
|
|
||||||
|
println!("Creating .local directory...");
|
||||||
|
std::fs::create_dir_all(".local").expect("failed to create .local directory");
|
||||||
|
|
||||||
|
println!("Generating {num_keys} keypairs...");
|
||||||
|
println!(" Public keys -> {pubkey_file}");
|
||||||
|
println!(" Secret keys -> {sk_out}");
|
||||||
|
message_tools::gen_keys::generate_keys_to_file(pubkey_file, sk_out, num_keys)
|
||||||
|
.expect("failed to generate keys");
|
||||||
|
|
||||||
|
println!("Key generation complete.");
|
||||||
}
|
}
|
||||||
|
|
||||||
let status = Command::new("mkdir")
|
let status = Command::new("mkdir")
|
||||||
|
|
|
||||||
|
|
@ -65,11 +65,13 @@ async fn main() -> Result<()> {
|
||||||
.route("/who", get(serve_path("./routes/who/index.html")?))
|
.route("/who", get(serve_path("./routes/who/index.html")?))
|
||||||
.route("/api/pubkey", get(async || select_key(&PUBLIC_KEYS)))
|
.route("/api/pubkey", get(async || select_key(&PUBLIC_KEYS)))
|
||||||
.route("/contact", get(serve_path("./routes/contact/index.html")?))
|
.route("/contact", get(serve_path("./routes/contact/index.html")?))
|
||||||
|
.route("/contact/message", get(serve_path("./routes/contact/message/index.html")?))
|
||||||
.route("/api/publish", post(publish_message))
|
.route("/api/publish", post(publish_message))
|
||||||
.nest_service("/routes", ServeDir::new("./routes"));
|
.nest_service("/routes", ServeDir::new("./routes"));
|
||||||
|
|
||||||
// run our app with hyper, listening globally on port 3000
|
let addr = "0.0.0.0:3000";
|
||||||
let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
|
let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
|
||||||
|
println!("Server running at http://{addr}");
|
||||||
axum::serve(listener, app).await.unwrap();
|
axum::serve(listener, app).await.unwrap();
|
||||||
|
|
||||||
Ok(())
|
Ok(())
|
||||||
|
|
|
||||||
|
|
@ -3,247 +3,147 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Input Form</title>
|
<title>Contact</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
display: flex;
|
font-family: system-ui, sans-serif;
|
||||||
flex-direction: column; /* Ensure vertical stacking */
|
|
||||||
align-items: center; /* Center horizontally */
|
|
||||||
padding-top: 50px;
|
|
||||||
min-height: 120vh;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: Arial, sans-serif;
|
padding: 0;
|
||||||
background-color: Cornsilk;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-container {
|
#fractal-canvas {
|
||||||
background-color: white;
|
position: fixed;
|
||||||
padding: 30px;
|
top: 0;
|
||||||
border-radius: 8px;
|
left: 0;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
width: 100%;
|
||||||
width: 90%;
|
height: 100%;
|
||||||
max-width: 800px;
|
z-index: 0;
|
||||||
min-height: 400px;
|
|
||||||
max-height: 1000px;
|
|
||||||
margin-bottom: 20px; /* Add space below the form container */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.directory {
|
.content-overlay {
|
||||||
width: 90%;
|
position: relative;
|
||||||
max-width: 800px;
|
z-index: 1;
|
||||||
margin: 0 auto; /* Center horizontally */
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-box {
|
||||||
|
background: rgba(0, 0, 0, 0.65);
|
||||||
|
padding: 2.5rem 3rem;
|
||||||
|
border-radius: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
min-width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.directory dt a {
|
.contact-box h2 {
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 0 1.5rem 0;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: "Gill Sans", sans-serif;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list li {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #333;
|
color: #fff;
|
||||||
|
padding: 0.6rem 1.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
transition: background 0.2s;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list li a:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.back-link {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.back-link a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto; /* Prevent stretching */
|
background: rgba(0, 0, 0, 0.3);
|
||||||
}
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-sizing: border-box;
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
nav.back-link a:hover {
|
||||||
width: 100%;
|
background: rgba(0, 0, 0, 0.5);
|
||||||
height: 120px;
|
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
resize: vertical;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expandable-section {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.expandable-header {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.expandable-content {
|
|
||||||
display: none;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="./routes/contact/pkg/message_tools.js"></script>
|
|
||||||
<script>
|
|
||||||
const { make_salt, make_key_bytes, box_message } = wasm_bindgen;
|
|
||||||
var serverPublicKey;
|
|
||||||
|
|
||||||
async function run() {
|
|
||||||
await wasm_bindgen();
|
|
||||||
await fetchPublicKey();
|
|
||||||
|
|
||||||
console.log(`Server pk: ${serverPublicKey}`);
|
|
||||||
|
|
||||||
const form = document.getElementById("message-form");
|
|
||||||
form.addEventListener("submit", (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
submit();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
async function fetchPublicKey() {
|
|
||||||
try {
|
|
||||||
const response = await fetch("./api/pubkey");
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const pubkeyJSON = await response.text();
|
|
||||||
serverPublicKey = JSON.parse(pubkeyJSON);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching public key:", error);
|
|
||||||
document.getElementById("status").textContent =
|
|
||||||
"Failed to load public key.";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submit() {
|
|
||||||
console.log("begin");
|
|
||||||
const user = document.getElementById("name").value;
|
|
||||||
const password = document.getElementById("password").value;
|
|
||||||
const message = document.getElementById("message").value;
|
|
||||||
|
|
||||||
const salt = make_salt();
|
|
||||||
|
|
||||||
const makeKeyBytesArgs = {
|
|
||||||
name: String(user),
|
|
||||||
password: String(password),
|
|
||||||
salt: [...salt],
|
|
||||||
};
|
|
||||||
|
|
||||||
const keyBytes = make_key_bytes(JSON.stringify(makeKeyBytesArgs));
|
|
||||||
console.log(keyBytes);
|
|
||||||
|
|
||||||
const boxMessageArgs = {
|
|
||||||
user: String(user),
|
|
||||||
salt: [...salt],
|
|
||||||
user_sk: [...keyBytes],
|
|
||||||
remote_pk: [...serverPublicKey],
|
|
||||||
plaintext: String(message),
|
|
||||||
};
|
|
||||||
console.log("Boxed preflight: ", JSON.stringify(boxMessageArgs));
|
|
||||||
const boxed = box_message(JSON.stringify(boxMessageArgs));
|
|
||||||
const boxedObj = JSON.parse(boxed); // Parse the boxed string into a JavaScript object
|
|
||||||
console.log(boxedObj);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/publish", {
|
|
||||||
method: "POST", // Specify the method as POST
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json", // Set the Content-Type header for JSON payload
|
|
||||||
},
|
|
||||||
body: JSON.stringify(boxedObj), // Send the boxed object as a JSON string in the body
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
// Handle HTTP errors (status codes outside the 2xx range)
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await response.json(); // Parse the response body as JSON
|
|
||||||
console.log("Success:", result);
|
|
||||||
alert("Sent!");
|
|
||||||
location.reload();
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error:", error);
|
|
||||||
alert("Failed to send message: " + error.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("End");
|
|
||||||
}
|
|
||||||
|
|
||||||
run();
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
function toggleSection() {
|
|
||||||
const content = document.getElementById("expandableContent");
|
|
||||||
const header = document.querySelector(".expandable-header");
|
|
||||||
if (content.style.display === "block") {
|
|
||||||
content.style.display = "none";
|
|
||||||
header.innerHTML = "How to use ▼";
|
|
||||||
} else {
|
|
||||||
content.style.display = "block";
|
|
||||||
header.innerHTML = "How to use ▲";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="form-container">
|
<canvas id="fractal-canvas"></canvas>
|
||||||
<form id="message-form">
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="name">Name</label>
|
|
||||||
<input type="text" id="name" name="name" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
<div class="content-overlay">
|
||||||
<label for="password">Password (optional)</label>
|
<div class="contact-box">
|
||||||
<input type="password" id="password" name="password" />
|
<h2>Contact</h2>
|
||||||
</div>
|
<ul class="contact-list">
|
||||||
|
<li><a href="mailto:">Email me</a></li>
|
||||||
<div class="input-group">
|
<li><a href="/contact/message">Direct message</a></li>
|
||||||
<label for="message">Message</label>
|
</ul>
|
||||||
<textarea id="message" name="message"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #dbdbdb;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="expandable-section">
|
|
||||||
<div class="expandable-header" onclick="toggleSection()">
|
|
||||||
How to use ▼
|
|
||||||
</div>
|
|
||||||
<div class="expandable-content" id="expandableContent">
|
|
||||||
<p>
|
|
||||||
Tell me who you are, and add an optional password. If I do not
|
|
||||||
otherwise have your contact information, please tell me the best way
|
|
||||||
to reach you back.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<nav class="back-link">
|
||||||
|
<a href="/">back to home</a>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="directory">
|
<script src="/routes/root/pkg/fractal_engine.js"></script>
|
||||||
<dt><a href="/">back to home</a></dt>
|
<script>
|
||||||
</nav>
|
(async function() {
|
||||||
|
await wasm_bindgen('/routes/root/pkg/fractal_engine_bg.wasm');
|
||||||
|
|
||||||
|
const canvas = document.getElementById('fractal-canvas');
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeCanvas();
|
||||||
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
|
||||||
|
let startTime = performance.now();
|
||||||
|
const animationSpeed = 0.0001;
|
||||||
|
const scale = 4;
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
const elapsed = performance.now() - startTime;
|
||||||
|
const time = elapsed * animationSpeed;
|
||||||
|
|
||||||
|
try {
|
||||||
|
wasm_bindgen.render_fractal_animated('fractal-canvas', time, scale);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Fractal render error:', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
animate();
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
312
routes/contact/message/index.html
Normal file
312
routes/contact/message/index.html
Normal file
|
|
@ -0,0 +1,312 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Direct Message</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 50px;
|
||||||
|
min-height: 120vh;
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fractal-canvas {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: #fff;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
width: 90%;
|
||||||
|
max-width: 800px;
|
||||||
|
min-height: 400px;
|
||||||
|
max-height: 1000px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.directory {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.directory dt a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.directory dt a:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 4px;
|
||||||
|
resize: vertical;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expandable-section {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.expandable-header {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.expandable-content {
|
||||||
|
display: none;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="/routes/contact/pkg/message_tools.js"></script>
|
||||||
|
<script>
|
||||||
|
const { make_salt, make_key_bytes, box_message } = wasm_bindgen;
|
||||||
|
var serverPublicKey;
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
await wasm_bindgen();
|
||||||
|
await fetchPublicKey();
|
||||||
|
|
||||||
|
console.log(`Server pk: ${serverPublicKey}`);
|
||||||
|
|
||||||
|
const form = document.getElementById("message-form");
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
submit();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function fetchPublicKey() {
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/pubkey");
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pubkeyJSON = await response.text();
|
||||||
|
serverPublicKey = JSON.parse(pubkeyJSON);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching public key:", error);
|
||||||
|
document.getElementById("status").textContent =
|
||||||
|
"Failed to load public key.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
console.log("begin");
|
||||||
|
const user = document.getElementById("name").value;
|
||||||
|
const password = document.getElementById("password").value;
|
||||||
|
const message = document.getElementById("message").value;
|
||||||
|
|
||||||
|
const salt = make_salt();
|
||||||
|
|
||||||
|
const makeKeyBytesArgs = {
|
||||||
|
name: String(user),
|
||||||
|
password: String(password),
|
||||||
|
salt: [...salt],
|
||||||
|
};
|
||||||
|
|
||||||
|
const keyBytes = make_key_bytes(JSON.stringify(makeKeyBytesArgs));
|
||||||
|
console.log(keyBytes);
|
||||||
|
|
||||||
|
const boxMessageArgs = {
|
||||||
|
user: String(user),
|
||||||
|
salt: [...salt],
|
||||||
|
user_sk: [...keyBytes],
|
||||||
|
remote_pk: [...serverPublicKey],
|
||||||
|
plaintext: String(message),
|
||||||
|
};
|
||||||
|
console.log("Boxed preflight: ", JSON.stringify(boxMessageArgs));
|
||||||
|
const boxed = box_message(JSON.stringify(boxMessageArgs));
|
||||||
|
const boxedObj = JSON.parse(boxed);
|
||||||
|
console.log(boxedObj);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/publish", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(boxedObj),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
console.log("Success:", result);
|
||||||
|
alert("Sent!");
|
||||||
|
location.reload();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error:", error);
|
||||||
|
alert("Failed to send message: " + error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("End");
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
function toggleSection() {
|
||||||
|
const content = document.getElementById("expandableContent");
|
||||||
|
const header = document.querySelector(".expandable-header");
|
||||||
|
if (content.style.display === "block") {
|
||||||
|
content.style.display = "none";
|
||||||
|
header.innerHTML = "How to use ▼";
|
||||||
|
} else {
|
||||||
|
content.style.display = "block";
|
||||||
|
header.innerHTML = "How to use ▲";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id="fractal-canvas"></canvas>
|
||||||
|
|
||||||
|
<div class="form-container">
|
||||||
|
<form id="message-form">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="name">Name</label>
|
||||||
|
<input type="text" id="name" name="name" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="password">Password (optional)</label>
|
||||||
|
<input type="password" id="password" name="password" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="message">Message</label>
|
||||||
|
<textarea id="message" name="message"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="expandable-section">
|
||||||
|
<div class="expandable-header" onclick="toggleSection()">
|
||||||
|
How to use ▼
|
||||||
|
</div>
|
||||||
|
<div class="expandable-content" id="expandableContent">
|
||||||
|
<p>
|
||||||
|
Tell me who you are, and add an optional password. If I do not
|
||||||
|
otherwise have your contact information, please tell me the best way
|
||||||
|
to reach you back.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="directory">
|
||||||
|
<dt><a href="/contact">back to contact</a></dt>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<script src="/routes/root/pkg/fractal_engine.js"></script>
|
||||||
|
<script>
|
||||||
|
(async function() {
|
||||||
|
await wasm_bindgen('/routes/root/pkg/fractal_engine_bg.wasm');
|
||||||
|
|
||||||
|
const canvas = document.getElementById('fractal-canvas');
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeCanvas();
|
||||||
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
|
||||||
|
let startTime = performance.now();
|
||||||
|
const animationSpeed = 0.0001;
|
||||||
|
const scale = 4;
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
const elapsed = performance.now() - startTime;
|
||||||
|
const time = elapsed * animationSpeed;
|
||||||
|
|
||||||
|
try {
|
||||||
|
wasm_bindgen.render_fractal_animated('fractal-canvas', time, scale);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Fractal render error:', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
animate();
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
<nav>
|
<nav>
|
||||||
<dl>
|
<dl>
|
||||||
<dt><a href="./who">Who</a></dt>
|
<dt><a href="./who">Who</a></dt>
|
||||||
<dt><a href="./contact">Send me a message</a></dt>
|
<dt><a href="./contact">Contact</a></dt>
|
||||||
</dl>
|
</dl>
|
||||||
</nav>
|
</nav>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue