kaspect.github.io/turnip.html at master · Kaspect/kaspect.github.io · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Progress Tracker</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.3.0/luxon.min.js"></script>
    <style>
        body {
            font-family: "Titillium Web", sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }

        h1, h2, h3 {
            color: #333;
            font-family: "Titillium Web", sans-serif;
            font-weight: 700; /* Use bold for headings */
        }

        p, li {
            font-family: "Titillium Web", sans-serif;
            font-weight: 300; /* Use light font for paragraphs and list items */
        }

        .progress-container {
            background-color: #f0f0f0;
            border-radius: 8px;
            margin: 20px 0;
            height: 30px;
            position: relative;
        }

        .progress-bar {
            background-color: #4CAF50;
            height: 100%;
            border-radius: 8px;
            transition: width 0.5s ease-in-out;
        }

        .milestone {
            position: absolute;
            top: -20px;
            transform: translateX(-50%);
            font-size: 6px;
            text-align: center;
            white-space: nowrap;
            font-weight: 200; /* Extra light font for milestones */
        }

        .milestone::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 10px;
            background-color: #333;
        }

        #currentDate, #daysPassed {
            font-weight: 700; /* Bold font for highlighting key information */
        }

        #status {
            margin-top: 20px;
            font-style: italic;
            font-weight: 300; /* Light font for status */
        }
    </style>
</head>

<body>
    <h1>Project Progress Tracker</h1>
    <p>Start Date: October 8, 2024 (Day 0) - Payment 1/2 Issued</p>
    <p>Current Date: <span id="currentDate"></span></p>
    <p>Days Passed: <span id="daysPassed"></span></p>

    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
        <div class="milestone" style="left: 2.22%;">Day 2</div>
        <div class="milestone" style="left: 15.56%;">Day 14</div>
        <div class="milestone" style="left: 22.22%;">Day 20</div>
        <div class="milestone" style="left: 27.22%;">Day 24.5</div>
        <div class="milestone" style="left: 100%;">Day 90</div>
    </div>

    <h2>Milestones:</h2>
    <ol>
        <li>Day 2 (Oct 10, 2024): Initial Typeforms programmed and ready for review ✅
            <ul>
                <li>Blocker: Awaiting Spanish & Portuguese versions (auto translation used)</li>
                <li>Blocker: Awaiting Typeform feedback for English on Clinics A & B</li>
            </ul>
        </li>
        <li>Day 14 (Oct 22, 2024): Coordinator intake link generator with SMS available ✅
        </li>
        <li>Day 20 (Oct 28, 2024): Payment 2/2✅</li>
        <li>Day 24.5 (Nov 1, 2024): Technical development completed, intake collection and bug-fixing phase begins✅</li>
        <li>Day 90 (Jan 6, 2025): Monitoring and Intake Collection phase ends ✅
            <ul>
                <li>Provide ongoing support, bug fixes, and monitoring for up to 90 days or until 500 patient intakes are completed, whichever comes first.</li>
            </ul>
        </li>
    </ol>

    <h3>Project Resources</h3>
    <p><a href="https://drive.google.com/drive/u/0/folders/1muqb_Ur5V_15YFKlfzFsnCanjJfHtc7l">Shared Google Drive Link</a></p>
    <div id="status"></div>

    <script>
        const DateTime = luxon.DateTime;
        const startDate = DateTime.fromObject({ year: 2024, month: 10, day: 8 });
        const milestones = [
            { day: 2, description: "Initial Typeforms programmed and ready for review" },
            { day: 14, description: "Coordinator intake link generator with SMS available" },
            { day: 20, description: "Payment 2/2" },
            { day: 24.5, description: "Technical development completed, intake collection and bug-fixing phase begins" },
            { day: 90, description: "Monitoring and Intake Collection phase ends" }
        ];

        function updateProgress() {
            const now = DateTime.now();
            const daysPassed = now.diff(startDate, 'days').days;
            const progressPercentage = Math.min((daysPassed / 90) * 100, 100);

            document.getElementById('currentDate').textContent = now.toFormat('MMMM d, yyyy');
            document.getElementById('daysPassed').textContent = Math.floor(daysPassed);
            document.getElementById('progressBar').style.width = `${progressPercentage}%`;

            let status = "Current status: ";
            if (daysPassed < 2) {
                status += "Working on initial Typeforms";
            } else if (daysPassed < 14) {
                status += "Developing coordinator intake link generator";
            } else if (daysPassed < 24.5) {
                status += "Completing technical development";
            } else if (daysPassed < 90) {
                status += "Monitoring and Intake Collection phase";
            } else {
                status += "Project completed";
            }

            document.getElementById('status').textContent = status;
        }

        updateProgress();
        setInterval(updateProgress, 60000); // Update every minute
    </script>
</body>
</html>