presentation/layout.py

import streamlit as st
from settings import TECHNOLOGIES_LIST
class Layout:
    @staticmethod
    def render_header():
        """
        Renders the header of the application with a logo and title.
        """
        st.markdown(
            """
            <style>
                .header {
                    text-align: center;
                    font-size: 28px; /* Reduced size */
                    font-weight: 600; /* Slightly lighter font weight */
                    color: #034732; /* Darker green for a more professional look */
                    margin-top: 15px;
                    margin-bottom: 5px;
                }
                .sub-header {
                    text-align: center;
                    font-size: 14px; /* Subtle and smaller font */
                    color: #5E6472; /* Muted grayish-blue for contrast */
                    margin-bottom: 20px;
                }
                .logo {
                    display: block;
                    margin: 0 auto;
                    max-width: 60px; /* Smaller logo size */
                    height: auto;
                    margin-bottom: 10px;
                    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); /* Added subtle shadow */
                }
                .divider {
                    height: 1px;
                    margin: 20px 0;
                    background-color: #D0D0D0; /* Light gray for a clean divider */
                    border: none;
                }
            </style>
            <div>
                <img src="https://framerusercontent.com/images/QNgS2NOAyBozR6eFdgzSFhJRbY.png?scale-down-to=512" class="logo" />
                <div class="header">NonStop Assessments</div>
                <div class="sub-header">Empowering talent, one question at a time.</div>
                <hr class="divider">
            </div>
            """,
            unsafe_allow_html=True
        )


    @staticmethod
    def render_signup_form():
        """
        Renders the signup form for candidate details.

        :return: Tuple containing name, email, experience, and selected technology.
        """
        with st.form("signup_form"):
            st.header("Sign Up")

            name = st.text_input("Full Name", help="Please enter your full name")
            email = st.text_input("Email", help="Please enter your email")
            experience = st.slider("Total Years of Experience", 0, 20, 0, help="Select your years of experience")
            technology = st.selectbox("Technology", TECHNOLOGIES_LIST, help="Select your primary technology")
            submit = st.form_submit_button("Start Test")

            if submit:
                if not name or not email:
                    st.error("Name and Email are required! Please fill both fields.")
                    return None, None, None, None, None
                return name, email, experience, technology, submit

        return None, None, None, None, None

    @staticmethod
    def render_instructions():
        """
        Renders test instructions for the candidates.
        """
        st.header("Instructions")
        st.info(
            """
            1. Each question is multiple-choice.
            """
        )

    @staticmethod
    def render_progress_bar(current, total):
        """
        Renders a progress bar for the test.

        :param current: Current progress (integer).
        :param total: Total progress (integer).
        """
        st.progress(current / total)

    @staticmethod
    def render_test_question(question, idx):
        """
        Renders a single test question with multiple-choice options.

        :param question: Dictionary containing question details.
        :param idx: Index of the question for unique Streamlit keys.
        :return: Selected option from the user.
        """
        st.markdown(f"""
            <div class="question-card">
                <b>Question {idx + 1}:</b> {question['question']}
            </div>
            """,
            unsafe_allow_html=True,
        )
        selected_option = st.radio(
            "",
            [question['option1'], question['option2'], question['option3'], question['option4']],
            key=f"q{idx}",
            label_visibility="collapsed",
            help="Choose the correct answer",
            index=None
        )
        st.markdown("---")
        return selected_option

    @staticmethod
    def render_completion_message(score, total):
        """
        Displays a completion message after the test is submitted.

        :param score: Total score obtained by the candidate.
        :param total: Total questions in the test.
        """
        st.success("Test completed successfully! Great job on completing it. Thank you for your effort and dedication.")