with email id as input for the page, and the firestore credentials given, the code has to build some cards which tells about each trip he have that are saved as documents in the collection named as the mail id. in each trip there are sub collections that

const firebaseConfig = {

apiKey: "AIzaSyBVNJzEZQyY0RCZlkfrqKrKdIggQrx62KU",

authDomain: "zorogram-e0eea.firebaseapp.com",

projectId: "zorogram-e0eea",

storageBucket: "zorogram-e0eea.appspot.com",

messagingSenderId: "3495535292",

appId: "1:3495535292:web:3c8c21807fbfd1d3d026b9",

measurementId: "G-7YFSQZZ72G"

};





the below code is present in another page





<div id="username" class="filter">

<input type="text" id="search-username" placeholder="Find by username" />

<button type="button" id="search-username-btn" onclick="searchByUsername()"></button>

</div>





<div id="username" class="filter">

<input type="text" id="search-username" placeholder="Find by username" />

<button type="button" id="search-username-btn" onclick="searchByUsername()"></button>

</div>






<!-- Inline JavaScript -->

<script>

function searchByUsername() {

const username = document.getElementById('search-username').value.trim();

if (username !== "") {

window.location.href = userTrips.html?email=${encodeURIComponent(username)};

}

}

</script>



with email id as input for the page, and the firestore credentials given, the code has to build some cards which tells about each trip he have that are saved as documents in the collection named as the mail id. in each trip there are sub collections that are days. after that to understand see the bellow data



now see this typed structure of the firestore database as reference:



Collection: user email



Document: trip name



Subcollections (one per day): Day 1, Day 2, etc.



Document: Food



Fields:



Breakfast: map with {item, itemPrice, location}



Lunch: same



Dinner: same



Snack: same



Document: Accommodation



Fields:



hotelName, hotelCost, address



Document: Travel



Fields:



mode, cost, from, to





give me a page code to get the data from the firestore and display all the details in cards by iterating through the data base

need it in 2 hours