-
Notifications
You must be signed in to change notification settings - Fork 0
/
Random_Forest_1.html
168 lines (147 loc) · 6.57 KB
/
Random_Forest_1.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<style>
body {
font-size: 0.7rem; /* Base font size */
background-color: rgb(14, 17, 23);
zoom: 1.5; /* Scale up by 50% */
}
.container {
max-width: 1000px; /* Max-width for the container */
margin: auto; /* Center the container */
}
figure img {
width: 100%; /* Full width of its container */
max-width: 450px; /* Max width of the image */
height: auto; /* Maintain aspect ratio */
display: block; /* Block display to respect max-width */
margin: 0 auto; /* Center the image */
}
h2 {
font-size: 1.2rem; /* Heading size */
}
h3 {
font-size: 1rem; /* Subheading size */
}
p {
font-size: 0.7rem; /* Paragraph text size */
}
/* Ensure the main content is visible */
main {
padding: 1rem 0; /* Add padding around main content */
}
nav ul {
padding: 0.5rem 0; /* Padding for nav */
list-style-type: none; /* Remove list bullets */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
display: flex; /* Add this line */
flex-wrap: nowrap; /* Add this line to prevent wrapping */
}
nav ul li {
display: inline; /* Display nav items in a line */
margin-right: 10px; /* Right margin for spacing */
}
nav ul li a {
color: #007bff; /* Set link color */
text-decoration: none; /* Remove text underline */
font-size: 0.6rem; /* Smaller font size for nav links */
padding: 5px 10px; /* Add padding to give a button-like appearance */
border-radius: 50px; /* Rounded corners */
transition: background-color 0.3s, color 0.3s; /* Transition for smooth color change */
background-color: #007bff; /* Set background color */
color: #fff; /* Set text color */
}
/* Change color on hover */
nav ul li a:hover {
background-color: #0056b3; /* Change background color on hover */
color: #fff; /* Keep text color the same on hover */
text-decoration: underline; /* Add underline on hover */
}
li strong {
display: inline-block; /* Allow the boundary to wrap */
white-space: nowrap; /* Keep the text on a single line */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Show an ellipsis when the text overflows */
max-width: 100%; /* Limit the width to the parent's width */
}
nav ul {
display: flex; /* Use flexbox for layout */
flex-wrap: nowrap; /* Prevent wrapping to the next line */
justify-content: space-around; /* Distribute space evenly between items */
}
nav ul li a {
font-size: calc(0.4rem + 0.2vw); /* Dynamically adjust font size based on viewport width */
}
/* Responsive styles for mobile!*/
@media (max-width: 1000px) {
body {
zoom: 1; /* Reset zoom for small screens */
min-height: 1000px;
}
.container {
max-width: 100%; /* Allow the container to use the full width of the screen */
padding: 0 1rem; /* Add some horizontal padding */
}
figure img {
max-width: 100%; /* Allow the image to use the full width of its container */
}
nav ul li {
margin-bottom: 10px; /* Bottom margin for spacing */
margin-right: 0; /* Remove right margin */
}
li strong {
white-space: normal; /* Allow the text to wrap to the next line */
}
nav ul li a {
font-size: calc(0.4rem + 0.2vw); /* Reduce font size for small screens */
}
}
/* THIS IS VERY IMPORTANT. My Google Chrome is in Dark Mode so it makes the background color black. This overrides that and fills any blank spaces with my desired color, instead of black*/
@media (prefers-color-scheme: dark) {
:root {
--background-color: rgb(14, 17, 23) !important; /* Or any other light color you prefer */
/* Define other variables or CSS rules as needed */
}
}
@media (prefers-color-scheme: light) {
:root {
--background-color: rgb(14, 17, 23) !important; /* Or any other light color you prefer */
/* Define other variables or CSS rules as needed */
}
}
</style>
<title>Titanic Survival Project</title>
</head>
<body>
<nav class="container-fluid">
<ul>
<li><strong style="border: 2px solid #007bff; padding: 5px; border-radius: 10px;">Random Forest Model</strong></li> </ul>
<ul>
<li><a href="https://michael-ye-titanic-home.streamlit.app/" target="_blank">Home</a></li>
<li><a href="https://github.com/23yem/Final-Titanic-Machine-Learning" target="_blank">GitHub Repository</a></li>
<li><a href="https://michael-ye-titanic-neural-network.streamlit.app/" target="_blank">Neural Networks</a></li>
<li><a href="https://michael-ye-titanic-gradient-boosted.streamlit.app/" target="_blank">Gradient Boosted Trees</a></li>
<li><a href="https://michael-ye-titanic-random-forest.streamlit.app/" target="_blank">Random Forest</a></li>
</ul>
</nav>
<main class="container">
<div class="grid">
<section style="text-align: center;">
<hgroup>
<h1>Random Forest Model</h1>
<h3>From the TensorFlow Decision Forests (TFDF)</h3>
</hgroup>
<p>This page is used to describe my <a href="https://github.com/23yem/Final-Titanic-Machine-Learning/blob/main/CLEAN_titanic-RandomForest.ipynb" target="_blank">CLEAN_titanic-RandomForest.ipynb</a> notebook. Look below for a summary of my notebook and please feel free to look over my notebook</p>
<figure>
<img src="https://serokell.io/files/vz/vz1f8191.Ensemble-of-decision-trees.png" alt="Random Forest" style="width: 500px; height: 300px" />
</figure>
</section>
</div>
</main>
</body>
</html>