zero-day/template.html at main · faz00li/zero-day · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remediate Now Submission</title>

    <!-- Base styles first -->
    <link rel="stylesheet" href="styles/base/variables.css">
    <link rel="stylesheet" href="styles/base/common.css">

    <!-- Component styles -->
    <link rel="stylesheet" href="styles/components/0_edit_icons.css">
    <link rel="stylesheet" href="styles/components/0_modals.css">

    <!-- Section styles -->
    <link rel="stylesheet" href="styles/sections/header.css">
    <link rel="stylesheet" href="styles/sections/status.css">
    <link rel="stylesheet" href="styles/sections/details.css">
    <link rel="stylesheet" href="styles/sections/sliders.css">
    <link rel="stylesheet" href="styles/sections/3_criteria.css">
    <link rel="stylesheet" href="styles/sections/4_assessment.css">
</head>
<body>

    <!-- Body of form -->
    <section id="header" class="header">

        <!-- Submission title and status display -->
        <header>
            <div class="header-container">
                <h1><span class="edit-icon header-edit-icon" title="Edit submission title">✎</span><span id="submission-title" class="placeholder">Remediate Now Submission</span></h1>
                <span id="submission-status-display" class="submission-status">Triage</span>
            </div>
        </header>

        <!-- Status update section -->
        <section id="status-tracking" class="status-section">

                <div class="status-bar">
                    <button class="status-button" data-status="triage">Triage</button>
                    <button class="status-button" data-status="monitor">Monitor</button>
                    <button class="status-button" data-status="remediate-now">Remediate Now</button>
                    <button class="status-button" data-status="de-escalated">De-Escalated</button>
                    <button class="status-button" data-status="remediated">Remediated</button>
                    <button class="status-button" data-status="de-escalated-critical">De-Escalated Critical</button>
                    <button class="status-button" data-status="closed">Closed</button>
                </div>

        </section>

        <!-- Timestamp section -->
        <div class="form-group timestamp-group">
            <!-- TODO: Implement database retreival if submission exists -->
            <span class="timestamp-label">Created:</span>
            <span id="created-date" class="timestamp"></span>

            <span class="edit-time-stamp" title="Edit Estimated Time">✎</span><span class="timestamp-label">Est. Time To Complete:</span>
            <span id="estimated-time" class="timestamp">
                <span class="placeholder"></span>
            </span>
        </div>

        <!-- Details section -->
        <div class="inline-fields-container">
            <div class="field-group">
                <span class="edit-icon" title="Edit CVSS">✎</span><span class="field-label">Highest CVSS:</span>
                <span id="cvss-value" class="field-value">
                    <span class="placeholder"></span>
                </span>
            </div>

            <div class="field-group">
                <!-- TODO: Implement Slack link navigation when clicked -->
                 <span class="edit-icon" title="Edit Slack Reference">✎</span><span class="field-label">Slack</span>
                <span id="slack-value" class="field-value">
                   <span class="placeholder"></span>
                </span>
            </div>

            <div class="field-group">
                <!-- TODO: Implement Jira ticket navigation when clicked -->
                <span class="edit-icon" title="Edit Jira Reference">✎</span><span class="field-label">Jira</span>
                <span id="jira-value" class="field-value">
                    <span class="placeholder"></span>
                </span>
            </div>

            <div class="field-group">
                <!-- TODO: Implement Security Incident Report navigation when clicked -->
                <span class="edit-icon" title="Edit SIR Reference">✎</span><span class="field-label">SIR</span>
                <span id="sir-value" class="field-value">
                    <span class="placeholder"></span>
                </span>
            </div>
        </div>

        <!-- Summary section -->
        <div class="form-group">
            <label for="cve-reference"><span class="edit-icon" title="Edit CVEs & Reference">✎</span>CVEs & Reference:</label>
            <textarea id="cve-reference" name="cve-reference" placeholder="Enter CVE IDs and references"></textarea>
        </div>

        <div class="form-group">
            <label for="summary"><span class="edit-icon" title="Edit Summary">✎</span>Summary:</label>
            <textarea id="summary" name="summary" placeholder="Provide a brief summary of the issue"></textarea>
        </div>


        <!-- Remediate Now Criteria Section -->
        <div class="criteria-section">
            <h3>Remediate Now Criteria</h3>
            <div class="form-group">
                <h4>Presence Indicators</h4>
                <label><input type="checkbox" name="criteria-under-attack"> Under Attack</label>
                <label><input type="checkbox" name="criteria-vulnerability-present"> Vulnerability Present</label>
            </div>

            <div class="form-group">
                <h4>Exploitability Indicators</h4>
                <label><input type="checkbox" name="criteria-public-exploit"> Public Exploit</label>
                <label><input type="checkbox" name="criteria-low-complexity"> Low Complexity</label>
                <label><input type="checkbox" name="criteria-widely-exploited"> Widely Exploited</label>
                <label><input type="checkbox" name="criteria-unauthenticated"> Unauthenticated</label>
                <label><input type="checkbox" name="criteria-remote-code-execution"> Remote Code Execution</label>
            </div>
        </div>
    </section>

    <!-- Placeholder for main assessment parts - to be added later -->
    <section id="main-assessment">
        <h2>Assessment Sections</h2>
        <!-- Parts A through F will be added here in subsequent updates -->
    </section>

    <script src="js/timestamps.js"></script>
    <script src="js/detail.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/header.js"></script>
    <script src="js/input.js"></script>
    <script src="js/status.js"></script>
</body>
</html>