outbreak-detective-HAS/app.py at main · DarylOkeke/outbreak-detective-HAS · GitHub

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
import streamlit as st

# ---------------------------------------------------
# PAGE CONFIG + THEME
# ---------------------------------------------------
st.set_page_config(
    page_title="Outbreak Detective",
    page_icon="🧠",
    layout="wide",
)

st.markdown(
    """
    <style>
      .stApp {
        background-color: #0b1220;
        color: #DDE6F1;
      }
      .hero-title {
        font-size: 2.6rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #FF4B4B;
        text-align: center;
      }
      .hero-subtitle {
        font-size: 1.15rem;
        color: #A7B4C3;
        text-align: center;
        max-width: 780px;
        margin: 0 auto 10px auto;
      }
      .pill {
        display:inline-block;
        padding:4px 10px;
        border-radius:999px;
        background:#182544;
        color:#A7B4C3;
        font-size:0.8rem;
        margin-bottom:6px;
      }
      .phase-card {
        background:#0f1a30;
        border-radius:14px;
        border:1px solid #182544;
        padding:14px 14px 12px 14px;
        height:100%;
      }
      .phase-card h3 {
        font-size:1.05rem;
        margin-bottom:4px;
        color:#DDE6F1;
      }
      .phase-tag {
        font-size:0.8rem;
        color:#A7B4C3;
        margin-bottom:6px;
      }
      .phase-body {
        font-size:0.9rem;
        color:#A7B4C3;
      }
      .game-box {
        background:#0f1a30;
        border-radius:14px;
        border:1px solid #182544;
        padding:16px;
        margin-top:12px;
      }
      .game-box h3 {
        font-size:1.05rem;
        margin-bottom:8px;
        color:#DDE6F1;
      }
      .game-box ul {
        padding-left:1.1rem;
        margin-bottom:0;
      }
      .game-box li {
        font-size:0.9rem;
        color:#A7B4C3;
        margin-bottom:4px;
      }
    </style>
    """,
    unsafe_allow_html=True,
)

# ---------------------------------------------------
# HERO / TOP SECTION
# ---------------------------------------------------
st.markdown("<div class='hero-title'>OUTBREAK ALERT!!</div>", unsafe_allow_html=True)
st.markdown(
    """
    <p class='hero-subtitle'>
    Campus surveillance has detected early signs of an outbreak.
    As the public health analyst team, your mission is to identify where it started and choose the most effective interventions to slow the spread and limit the impact.
    </p>
    """,
    unsafe_allow_html=True,
)

st.markdown("")
st.markdown("---")

# ---------------------------------------------------------------------
# HOW THE GAME WORKS
# ---------------------------------------------------------------------
st.markdown("""
## How the Game Works

### **Phase 1 — Detection**
🧬 Three independent datasets
You’ll examine three different exhibits, each showing a different signal from around campus.
Your team’s goal is simple: **figure out which zone the outbreak most likely began in** based on the evidence.

---

### **Phase 2 — Forecast**
📈 What happens if we do nothing?
Once your team has chosen a starting zone, you’ll zoom in on that area and look at its **trendline over time**.
This shows what the outbreak is projected to do **if no one intervenes**.

---

### **Phase 3 — Response**
🛠️ Choose your interventions
You’ll get a list of possible interventions
Your mission is to build a plan that **slows the outbreak and limits its impact**, all within a fixed budget.

---

### **What Happens After Your Plan**
🏆 Wrap-up discussion
We reveal what the true starting zone was and walk through how different intervention choices changed the trajectory.

---

### **🎯 How to Play**
1. Go to the **Detection Phase** page and study all three exhibits.
2. As a team, decide which zone is the most likely origin.
3. Move to the **Forecast** tab to see what happens if no action is taken.
4. Go to the **Response** tab to build your intervention plan.
5. In the wrap-up, we’ll break down which clues were strongest and why certain interventions worked better.)
""")