kairoscope-website-2021/themes/kairoscope-theme/layout/contact.ejs

<main role="main" class="bg-dark2" >
    <%- partial('_partial/logo', { created_by : false }) %>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2 class="group-header">Contact</h2>
            </div>
        </div>
        <ul class="nav nav-pills justify-content-center" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button type="button" role="tab" class="nav-link active" id="message-tab" data-bs-toggle="pill" data-bs-target="#message">Message</button>
            </li>
            <li class="nav-item" role="presentation">
                <button type="button" role="tab" class="nav-link" id="feedback-tab" data-bs-toggle="pill" data-bs-target="#feedback">Feedback</button>
            </li>
            <li class="nav-item" role="presentation">
                <button type="button" role="tab" class="nav-link" id="report-tab" data-bs-toggle="pill" data-bs-target="#report">Bug Report</button>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane fade show active" id="message" role="tabpanel" aria-labelledby="message-tab" style="min-height: 450px;">
                <div class="row">
                    <div class="col-md-12 gy-5">
                        <p class="lead ">Write a direct message to our team. We'll do our best to respond all messages.</p>
                    </div>
                </div>
                <div class="row" v-show="contact.message.send_status != ''">
                    <div class="col-12" v-show="contact.message.send_status == 'sending'">
                        <div class="alert alert-secondary fade show" role="alert">
                            <i class="fas fa-spinner fa-pulse" style="margin-right: 10px; font-size: 1.3em;">
                            </i> Sending message...
                        </div>
                    </div>
                    <div class="col-12" v-show="contact.message.send_status == 'success'">
                        <div class="alert alert-success fade show" role="alert">
                            <i class="fas fa-check-circle" style="margin-right: 10px; font-size: 1.3em;">
                            </i> Your message was sent successfully.
                        </div>
                    </div>
                    <div class="col-12" v-show="contact.message.send_status == 'error'">
                        <div class="alert alert-danger fade show" role="alert">
                            <i class="fas fa-exclamation-circle" style="margin-right: 10px; font-size: 1.3em;">
                            </i> There was an error sending your message. Please try again.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;"></button>
                        </div>
                    </div>
                </div>
                <form @submit.prevent="send_contact_message" class="dark-form" v-show="contact.message.send_status == ''">
                    <div class="row">
                        <div class="col-md-6 gy-3">
                            <label for="inputName1" class="form-label">Name</label>
                            <input type="text" v-model="contact.message.name" class="form-control" id="inputName1">
                        </div>
                        <div class="col-md-6 gy-3">
                                <label for="inputEmail1" class="form-label">Email</label>
                                <input type="email" v-model="contact.message.email" class="form-control" id="inputEmail1">
                        </div>
                        <div class="col-12 gy-3">
                            <label for="inputAddress" class="form-label">Subject</label>
                            <input type="text" v-model="contact.message.subject" class="form-control" id="inputAddress" placeholder="Message title">
                        </div>
                        <div class="col-12 gy-3">
                            <label for="inputAddress2" class="form-label">Message</label>
                            <textarea class="form-control" v-model="contact.message.message" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                            
                        <div class="col-12 gy-3">
                            <button type="submit" class="btn btn-secondary">
                                Send Message
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- Tab 2 -->
            <div class="tab-pane fade" id="feedback" role="tabpanel" aria-labelledby="feedback-tab" style="min-height: 550px;">
                <div class="row g-3">
                    <div class="col-md-12 gy-5">
                        <p class="lead ">Give your feedback or suggest features for one of our games or services.</p>
                    </div>
                </div>
                <div class="row" v-show="contact.feedback.send_status != ''">
                    <div class="col-12" v-show="contact.feedback.send_status == 'sending'">
                        <div class="alert alert-secondary fade show" role="alert">
                            <i class="fas fa-spinner fa-pulse" style="margin-right: 10px; font-size: 1.3em;">
                            </i> Sending message...
                        </div>
                    </div>
                    <div class="col-12" v-show="contact.feedback.send_status == 'success'">
                        <div class="alert alert-success fade show" role="alert">
                            <i class="fas fa-check-circle" style="margin-right: 10px; font-size: 1.3em;">
                            </i> Your message was sent successfully.
                        </div>
                    </div>
                    <div class="col-12" v-show="contact.feedback.send_status == 'error'">
                        <div class="alert alert-danger fade show" role="alert">
                            <i class="fas fa-exclamation-circle" style="margin-right: 10px; font-size: 1.3em;">
                            </i> There was an error sending your message. Please try again.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;"></button>
                        </div>
                    </div>
                </div>
                <form @submit.prevent="send_feedback_message" class="dark-form" v-show="contact.feedback.send_status == ''">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="inputState" class="form-label">Topic</label>
                            <select id="inputState" v-model="contact.feedback.topic" class="form-select">
                            <option>General</option>
                            <option>Games</option>
                            <option>Website</option>
                            </select>
                        </div>
                        <div class="col-md-6" v-show="contact.feedback.topic == 'Games'">
                            <label for="inputState" class="form-label">Game</label>
                            <select id="inputState" v-model="contact.feedback.game" class="form-select">
                                <option>Grid Miner</option>
                                <option>Max Raider</option>
                            </select>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6 gy-5">
                            <label for="inputName2" class="form-label">Name</label>
                            <input type="text" v-model="contact.feedback.name" class="form-control" id="inputName2">
                        </div>
                        <div class="col-md-6 gy-5">
                            <label for="inputEmail2" class="form-label">Email</label>
                            <input type="email" v-model="contact.feedback.email" class="form-control" id="inputEmail2">
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-12 gy-5">
                            <label for="inputSubject" class="form-label">Subject</label>
                            <input type="text" v-model="contact.feedback.subject" class="form-control" id="inputSubject" placeholder="Message title">
                        </div>
                        <div class="col-12">
                            <label for="inputMessage2" class="form-label">Message</label>
                            <textarea class="form-control" v-model="contact.feedback.message" id="inputMessage2" rows="6"></textarea>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-secondary">
                                Send Message
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- Tab 3 -->
            <div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab" style="min-height: 700px;">
                <div class="row g-3">
                    <div class="col-md-12 gy-5">
                        <p class="lead ">Send a bug report about one of our games or services. Reports can also be sent directly from a game's main menu (in development).</p>
                    </div>
                </div>
                <div class="row" v-show="contact.report.send_status != ''">
                    <div class="col-12" v-show="contact.report.send_status == 'sending'">
                        <div class="alert alert-secondary fade show" role="alert">
                            <i class="fas fa-spinner fa-pulse" style="margin-right: 10px; font-size: 1.3em;">
                            </i> Sending message...
                        </div>
                    </div>
                    <div class="col-12" v-show="contact.report.send_status == 'success'">
                        <div class="alert alert-success fade show" role="alert">
                            <i class="fas fa-check-circle" style="margin-right: 10px; font-size: 1.3em;">
                            </i> Your message was sent successfully.
                        </div>
                    </div>
                    <div class="col-12" v-show="contact.report.send_status == 'error'">
                        <div class="alert alert-danger fade show" role="alert">
                            <i class="fas fa-exclamation-circle" style="margin-right: 10px; font-size: 1.3em;">
                            </i> There was an error sending your message. Please try again.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;"></button>
                        </div>
                    </div>
                </div>
                <form @submit.prevent="send_report_message" class="dark-form" v-show="contact.report.send_status == ''">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="inputState" class="form-label">Topic</label>
                            <select v-model="contact.report.topic" id="inputState" class="form-select">
                            <option>General</option>
                            <option>Games</option>
                            <option>Website</option>
                            </select>
                        </div>
                        <div class="col-md-6" v-show="contact.report.topic == 'Games'">
                            <label for="inputState" class="form-label">Game</label>
                            <select v-model="contact.report.game" id="inputState" class="form-select">
                                <option>Grid Miner</option>
                                <option>Max Raider</option>
                            </select>
                        </div>
                    </div>
                    <div class="row" v-show="contact.report.topic == 'Games'">
                        <div class="col-md-3 gy-3">
                            <label for="inputState" class="form-label">Platform</label>
                            <select v-model="contact.report.platform" id="inputState" class="form-select">
                            <option>Windows</option>
                            <option>Mac</option>
                            <option>Linux</option>
                            </select>
                        </div>
                        <!-- <div class="col-md-6 gy-3">
                            <label for="inputName" class="form-label">Operating System</label>
                            <input type="email" class="form-control" id="inputName" placeholder="ex: Windows 10">
                        </div> -->
                        <div class="col-md-3 gy-3">
                            <label for="inputName" class="form-label">Game Version</label>
                            <input v-model="contact.report.game_version" type="text" class="form-control" id="inputName" placeholder="ex: 1.0">
                        </div>
                        
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6 gy-5">
                        <label for="inputName3" class="form-label">Name</label>
                        <input type="name" v-model="contact.report.name"  class="form-control" id="inputName3">
                        </div>
                        <div class="col-md-6 gy-5">
                            <label for="inputEmail3" class="form-label">Email</label>
                            <input type="email" v-model="contact.report.email" class="form-control" id="inputEmail3">
                        </div>
                        <div class="col-12 gy-5">
                        <label for="inputSubject" class="form-label">Subject</label>
                        <input type="text" v-model="contact.report.subject" class="form-control" id="inputSubject" placeholder="Message title">
                        </div>
                        <div class="col-12">
                        <label for="inputMessage3" class="form-label">Message</label>
                        <textarea class="form-control" v-model="contact.report.message" id="inputMessage3" rows="6"></textarea>
                        </div>
                        
                        <div class="col-12">
                        <button type="submit" class="btn btn-secondary">
                            Send Report
                        </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <%- partial('_partial/links') %>
</main>