<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>

        <!--initial terms and service popup-->
        <div id ="terms-modal" class="modal">
            <div id="modal-content" class="modal-content">
                <div class="header">
                    <h2><i>Before you begin...</i></h2>
                </div>
                <div class="body">
                    <div id="segment-1">
                        <p style="line-height: 2em">
                            This community aims to allow <i>IB students and alumni</i> to share their opinions on topics of interests, discuss mental health, or provide advice anonymously. We hope to promote goodwill and enhance involvement between members of our community. To meet these goals, it’s important for students to feel comfortable sharing things that are personally important.
                        </p>
    
    
                        <p style="font-weight: bold;">As such, we request that you read and adhere to these guidelines:</p>
                        
                    
                        <ul class="list">
                            <li>Treat others online as you would treat them in real life.</li>
                            <li>Be tolerant towards other’s viewpoints; respectfully disagree when opinions do not align.</li>
                            <li>Respect the privacy and personal information of other students or alumni.</li>
                        </ul>
                    </div>
                
                    <div id="segment-2" style="display: none;">
                        <br>
                        <p style="font-weight: bold; color: red;">Please do not:</p>
                        <ul class="list">
                            <li>Make personal attacks on other students, alumni, or staff, including other schools.</li>
                            <li>Use defamatory remarks or make false statements against others.</li>
                            <li>Post prejudiced comments or profanity.</li>
                            <li>Do not share your personal details or details of others.</li>
                            <li>Do not spam.</li>
                        </ul>
                    </div>
                
                    <div class="quirky-button" id="modal-close" style="width: 94%; position: absolute; bottom: 0; margin-left: 0;">
                        PROCEED
                    </div>
                </div>
            </div>            
        </div>
    </main>
    <script src="modal_handler.js"></script>
  </body>
</html>
