This is what I want, is this happening yet? Mind you, I used a very old coding idea, ask chatgpt to help me write it in two minutes, and created a quick mock-up so I can show the real devs what I am thinking. I would like to somehow have it all in one place because I like switching between many clients and microapps all at once. Here is the two-minute website:
Page One (index.html):
name="viewport"
content="width=device-width, initial-scale=1.0" />
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.questionnaire {
max-width: 400px;
margin: auto;
}
.question {
margin-bottom: 20px;
}
.hidden {
display: none;
}
What do you want in spot 1?
Primal
Nostrudel
Nostrnet
What do you want in spot 2?
Fabien
Yondar
Alby
What do you want in spot 3?
Iris
Nostr Build
Coracle
function submitForm() {
// Collect answers
var answer1 =
document.getElementById("answer1").value;
var answer2 =
document.getElementById("answer2").value;
var answer3 =
document.getElementById("answer3").value;
// Store answers in local storage (for simplicity, you might want to use a server in a real scenario)
localStorage.setItem("answer1", answer1);
localStorage.setItem("answer2", answer2);
localStorage.setItem("answer3", answer3);
// Redirect to the second page
window.location.href = "secondpage.html";
}
Page Two (secondpage.html):
name="viewport"
content="width=device-width, initial-scale=1.0" />
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.websites {
display: flex;
flex-direction: column; /* Stack elements vertically on small screens */
align-items: center; /* Center items in the column */
}
.website {
margin-bottom: 10px; /* Less margin between each choice */
}
.website iframe {
width: 100%; /* Make the iframe fill the entire width of the container */
height: 250px; /* Adjust the height of the iframe */
max-width: 1000px; /* Limit the maximum width of the website box */
border: 1px solid #ddd; /* Add a border for better visibility */
}
@media (min-width: 768px) {
/* Apply styles for screens with a minimum width of 768px (desktop) */
.websites {
flex-direction: row; /* Display elements side by side on larger screens */
justify-content: space-around; /* Distribute space evenly between elements */
}
.website {
margin-bottom: 0; /* No margin between choices on larger screens */
}
}
Nostr 1
Nostr 2
Nostr 3
// Retrieve answers from local storage
var selected1 = localStorage.getItem("answer1");
var selected2 = localStorage.getItem("answer2");
var selected3 = localStorage.getItem("answer3");
// Display selected websites
document
.querySelectorAll(".website iframe")
.forEach(function (iframe, index) {
iframe.src = [
selected1,
selected2,
selected3,
][index];
});