added html email and made site deployment ready | security fixes still needed

app/static/timeline.css

@@ -0,0 +1,81 @@
+.timeline-container {
+  position: relative;
+  padding: 0 20px;
+}
+
+/* The actual horizontal line */
+.line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: #dfe6e9;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+.items-wrapper {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 2;
+}
+
+.item {
+  width: 120px;
+  text-align: center;
+  position: relative;
+  /* This height ensures the time is above and label is below the line */
+  height: 120px; 
+}
+
+/* The Dot - centered perfectly on the line */
+.dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Centers the dot exactly */
+  width: 16px;
+  height: 16px;
+  background: #00ff00;
+  border: 2px solid #1a1a1a;
+  border-radius: 50%;
+  box-shadow: 0 0 8px #00ff00;
+}
+
+/* Time - positioned above the dot */
+.time {
+  position: absolute;
+  bottom: 65%; /* Push above the center line */
+  left: 0;
+  right: 0;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+/* Label - positioned below the dot */
+.label {
+  position: absolute;
+  top: 65%; /* Push below the center line */
+  left: 0;
+  right: 0;
+  font-size: 0.9rem;
+  color: #ffffff;
+}
+
+.label span {
+  display: block;
+  font-size: 0.75rem;
+  color: #dddddd;
+  margin-top: 4px;
+}
+
+/* Mobile: Stack vertically */
+@media (max-width: 700px) {
+  .line { display: none; }
+  .items-wrapper { flex-direction: column; gap: 10px; align-items: flex-start; }
+  .item { height: auto; text-align: center; width: 100%; }
+  .dot { display: none;}
+  .time, .label { position: static; }
+}