Rejection-insights/interview.html at main · MA-Sohail/Rejection-insights · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rejection Insights - Interview</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="welcome-card analysis-card interview-card">
            <div class="card-header">
                <a href="resume-upload.html" class="back-button">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div class="logo">
                    <i class="fas fa-robot"></i>
                    <h1>Rejection Insights</h1>
                </div>
                <a href="main-menu.html" class="home-button" title="Return to Main Menu">
                    <i class="fas fa-home"></i>
                </a>
            </div>

            <div class="progress-tracker">
                <div class="progress-step completed">
                    <div class="step-number"><i class="fas fa-check"></i></div>
                    <div class="step-text">Job Description</div>
                </div>
                <div class="progress-line"></div>
                <div class="progress-step completed">
                    <div class="step-number"><i class="fas fa-check"></i></div>
                    <div class="step-text">Resume</div>
                </div>
                <div class="progress-line"></div>
                <div class="progress-step active">
                    <div class="step-number">3</div>
                    <div class="step-text">Interview</div>
                </div>
                <div class="progress-line"></div>
                <div class="progress-step">
                    <div class="step-number">4</div>
                    <div class="step-text">Analysis</div>
                </div>
            </div>

            <div class="section-content" id="interview-section">
                <div class="section-header">
                    <h2>Mock Interview</h2>
                    <p>Practice answering interview questions for the position. The AI interviewer will ask relevant questions based on the job description.</p>
                </div>

                <div class="interview-container">
                    <div class="chat-header">
                        <h3 id="interview-job-title">Interview</h3>
                        <div class="chat-actions">
                            <button id="restart-interview" class="icon-button" title="Restart Interview">
                                <i class="fas fa-redo"></i>
                            </button>
                            <button id="save-transcript" class="icon-button" title="Save Transcript">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>

                    <div class="chat-messages" id="chat-messages">
                        <!-- Messages will be added here dynamically -->
                    </div>

                    <div class="typing-indicator hidden">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>

                    <div class="chat-input">
                        <textarea id="user-input" placeholder="Type your response here..." rows="3"></textarea>
                        <button id="send-message" class="send-button">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>

                <div class="form-footer">
                    <button id="interview-back" class="secondary-button">
                        <i class="fas fa-arrow-left"></i> Back
                    </button>
                    <button id="interview-next" class="primary-button">
                        Continue to Analysis <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="interview.js"></script>
</body>
</html>