test endpoint (work in progress)

app/routes/interview.py

@@ -0,0 +1,9 @@
+from flask import Blueprint, render_template
+
+routes_interview = Blueprint('routes_interview', __name__)
+
+@routes_interview.route('/interview', methods=['GET'])
+def interview_page():
+    return render_template(
+        'interview.html'
+    ), 200

app/static/css/interview.css

@@ -0,0 +1,102 @@
+.interview-container {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 50px;
+}
+
+.placeholder-photo {
+    width: 250px;
+    height: 250px;
+    background-color: black;
+    margin: 0 auto;
+    border-radius: 10px;
+}
+
+.mic-icon {
+    font-size: 2.5rem;
+    color: #007bff;
+}
+
+.mic-circle-wrapper {
+    width: 60px;
+    height: 60px;
+    background-color: #007bff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 15px auto 0 auto;
+    cursor: pointer;
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.mic-circle-wrapper:hover {
+    background-color: #0056b3;
+    transform: scale(1.1);
+}
+
+.mic-circle-wrapper i {
+    color: white;
+    font-size: 1.5rem;
+}
+
+#start-btn {
+    display: block;
+    margin: 15px auto 0 auto;
+    padding: 15px 40px;
+    font-size: 1.3rem;
+    border-radius: 12px;
+    background-color: #363773;
+    border: none;
+    color: white;
+    font-weight: bold;
+    transition: background-color 0.2s;
+}
+#start-btn:hover {
+    background-color: #218838;
+}
+
+.stop-btn {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    padding: 15px 30px;
+    font-size: 1.2rem;
+    border-radius: 12px;
+    background-color: #9F0F0F;
+    border: none;
+    color: white;
+    font-weight: bold;
+    transition: background-color 0.2s;
+}
+.stop-btn:hover {
+    background-color: #c82333;
+}
+
+.timer-section {
+    position: absolute;
+    top: 50px;
+    right: 50px;
+    text-align: left;
+    max-width: 350px;
+    font-family: Arial, sans-serif;
+}
+
+#timer {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #343a40;
+}
+
+#question-number {
+    font-size: 2.2rem;
+    font-weight: bold;
+}
+
+#question-text {
+    font-size: 2.2rem;
+    margin-top: 5px;
+}

app/static/js/interview.js

@@ -0,0 +1,30 @@
+let timerElement = document.getElementById("timer");
+let startBtn = document.getElementById("start-btn");
+let stopBtn = document.getElementById("stop-btn");
+
+let seconds = 0;
+let timer = null;
+
+function updateTimer() {
+    let mins = Math.floor(seconds / 60);
+    let secs = seconds % 60;
+    timerElement.textContent =
+        `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+
+startBtn?.addEventListener("click", () => {
+    if (timer) return;
+    timer = setInterval(() => {
+        seconds++;
+        updateTimer();
+    }, 1000);
+});
+
+stopBtn?.addEventListener("click", () => {
+    if (confirm("Вы уверены, что хотите прервать сессию?")) {
+        clearInterval(timer);
+        timer = null;
+        seconds = 0;
+        updateTimer();
+    }
+});

app/templates/interview.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% block header %}
+<link rel="stylesheet" href="/static/css/interview.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+{% endblock %}
+{% block content %}
+<div class="interview-container">
+
+    <div class="top-center text-center">
+        <div class="placeholder-photo"></div>
+        <div class="mt-3">
+            <button id="start-btn" class="btn btn-success px-4 py-2">Начать</button>
+        </div>
+        <div class="mic-circle-wrapper">
+             <i class="bi bi-mic-fill"></i>
+        </div>
+    </div>
+
+    <div class="timer-section">
+        <h3 id="timer">00:00</h3>
+        <h3 class="mt-3">Вопрос № <span id="question-number">1</span></h3>
+        <p id="question-text" class="mt-2">
+            Расскажите о своем опыте работы с Python.
+        </p>
+    </div>
+
+    <button id="stop-btn" class="btn btn-danger stop-btn">Прервать сессию</button>
+    <script src="{{ url_for('static', filename='js/interview.js') }}"></script>
+</div>
+{% endblock %}

app/web_speech_trainer.py

@@ -32,6 +32,7 @@
 from app.routes.task_attempts import routes_task_attempts
 from app.routes.version import routes_version
 from app.routes.capacity import routes_capacity
+from app.routes.interview import routes_interview
 from app.status import PassBackStatus, TrainingStatus
 from app.training_manager import TrainingManager
 from app.utils import ALLOWED_EXTENSIONS, DEFAULT_EXTENSION
@@ -57,6 +58,7 @@
 app.register_blueprint(routes_task_attempts)
 app.register_blueprint(routes_version)
 app.register_blueprint(routes_capacity)
+app.register_blueprint(routes_interview)
 
 logger = get_root_logger(service_name='web')