-
Notifications
You must be signed in to change notification settings - Fork 0
/
choose_planet.html
114 lines (99 loc) · 5.13 KB
/
choose_planet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmo Cruise | Choose Planet</title>
<!-- bootstrap 5 cdn -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- icon pack -->
<!-- Option 1: Include in HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/index.css">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lekton&family=MedievalSharp&family=Poppins&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
</head>
<body class="spacejump_container">
<div class="container">
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");"
aria-label="breadcrumb">
<ol class="breadcrumb mt-5">
<li class="breadcrumb-item"><a href="index.html" class="hyperlinkblock text-white">Home</a></li>
<li class="breadcrumb-item text-white" aria-current="page">Travel Plan</li>
<li class="breadcrumb-item text-white" aria-current="page">Planetary Travel</li>
</ol>
</nav>
<div class="header">
<h1 class="text-center text-white my-5 popping_text">Choose a Planet to Explore</h1>
</div>
<!-- <div class="row py-4 mx-2 g-4">
<div class="col-md-12">
<h3 class="text-warning">Description</h3>
<p class="text-white">Embark on a journey through the giant solar system of ours roaming around Mars,
Jupiter , Saturn and get lost in the wonders .Planetary space tourism is the next frontier in human
exploration, offering intrepid adventurers the extraordinary opportunity to embark on awe-inspiring
voyages to destinations beyond Earth. This exciting and visionary form of travel opens the door to a
universe of experiences.
</p>
<h3 class="text-warning mt-3">Iternary Generator</h3>
<p class="text-white">
We with the help of Aritificial Intelligence and machine learning algorithm would pick the proper
itinary based on your choices and preference from the past and from the data available.
</p>
</div>
<div class="d-grid gap-2 col-md-2 mx-auto my-5">
<button class="btn btn-light" type="button" onclick="goto_booking()">Go To Choices</button>
</div>
</div> -->
<div class="container">
<div class="row" id="planetRow" data-bs-theme="dark">
<!-- Planet cards will be inserted here -->
</div>
</div>
</div>
</body>
<script>
function goto_booking() {
window.location.href = "iternary_generator.html";
}
</script>
<!-- Include Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="javascript/planetsdata.js"></script>
<script>
// Function to create a Bootstrap card for a planet
function createPlanetCard(planet) {
return `
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">${planet.pl_name}</h5>
<p class="card-text">
<strong>Host Star:</strong> ${planet.hostname}<br>
<strong>Discovery Method:</strong> ${planet.discoverymethod}<br>
<strong>Discovery Year:</strong> ${planet.disc_year}<br>
<strong>Discovery Facility:</strong> ${planet.disc_facility}<br>
<strong>Orbital Period (days):</strong> ${planet.pl_orbper}<br>
<strong>Distance (parsecs):</strong> ${planet.distance}
</p>
<button class="btn btn-dark border-success" type="button" onclick="goto_booking()">Select</button>
</div>
</div>
</div>
`;
}
// Loop through planetData and create cards
var planetRow = document.getElementById('planetRow');
planetData.forEach(function(planet) {
var cardHtml = createPlanetCard(planet);
planetRow.innerHTML += cardHtml;
});
</script>
</body>
</html>
</html>