templates/kontak_kami/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base_pdam.html.twig' %}
  3. {% block title %} Halaman utama tender{% endblock %}
  5. {% block body %}
  6.     <style>
  8. .input {
  9.     border-radius: 5px;
  10.     border: 1px solid #ccc;
  11.     display: block;
  12.     box-sizing: border-box;
  13.     padding: 15px 10px;
  14.     outline: none;
  15.     font-size: 18px;
  16.     font-weight: normal;
  17.     font-family: 'Open Sans', sans-serif;
  18.     width: 343px;
  19. }
  21. .captcha-wrap {
  22.     position: relative;
  23. }
  25. #CaptchaImageCode {
  26.     text-align: center;
  27.     margin-top: 15px;
  28.     padding: 0px 0;
  29.     width: 300px;
  30.     overflow: hidden;
  31. }
  33. .capcode {
  34.     font-size: 46px;
  35.     display: block;
  36.     -moz-user-select: none;
  37.     -webkit-user-select: none;
  38.     user-select: none;
  39.     cursor: default;
  40.     letter-spacing: 1px;
  41.     font-family: 'Roboto Slab', serif;
  42.     font-weight: 100;
  43.     font-style: italic;
  44. }
  46. .ReloadBtn {
  47.     background: url('images/refresh.png') left top no-repeat;
  48.     background-size: 100%;
  49.     width: 32px;
  50.     height: 32px;
  51.     border: 0px;
  52.     outline: none;
  53.     position: absolute;
  54.     bottom: 30px;
  55.     left: 310px;
  56.     cursor: pointer;
  57. }
  59. .btnSubmit {
  60.     margin-top: 15px;
  61.     border: 0px;
  62.     padding: 10px 20px;
  63.     border-radius: 5px;
  64.     font-size: 18px;
  65.     background-color: #1285c4;
  66.     color: #fff;
  67.     cursor: pointer;
  68. }
  70. .success {
  71.     color: green;
  72.     font-size: 18px;
  73.     margin-bottom: 15px;
  74.     display: none;
  75. }
  77. .error {
  78.     color: red;
  79.     display: none;
  80. }
  81.     </style>
  82.     <div class="container">
  83.         <section id="contact" class="contact">
  84.             <div class="container" data-aos="fade-up">
  86.                 <div class="section-header">
  87.                     <h2>Contact</h2>
  88.                     <p></p>
  89.                 </div>
  91.                 <div class="row gx-lg-0 gy-4">
  93.                     <div class="col-lg-4">
  95.                         <div class="info-container d-flex flex-column align-items-center justify-content-center">
  96.                             <div class="info-item d-flex">
  97.                                 <i class="bi bi-geo-alt flex-shrink-0"></i>
  98.                                 <div>
  99.                                     <h4>Location:</h4>
  100.                                     <p>Jl. Dr. Ratulangi No. 3</p>
  101.                                 </div>
  102.                             </div><!-- End Info Item -->
  104.                             <div class="info-item d-flex">
  105.                                 <i class="bi bi-envelope flex-shrink-0"></i>
  106.                                 <div>
  107.                                     <h4>Email:</h4>
  108.                                     <p>pusat.pdammks@gmail.com</p>
  109.                                 </div>
  110.                             </div><!-- End Info Item -->
  112.                             <div class="info-item d-flex">
  113.                                 <i class="bi bi-phone flex-shrink-0"></i>
  114.                                 <div>
  115.                                     <h4>Call:</h4>
  116.                                     <p>(0411) 850381</p>
  117.                                 </div>
  118.                             </div><!-- End Info Item -->
  120.                             <div class="info-item d-flex">
  121.                                 <i class="bi bi-clock flex-shrink-0"></i>
  122.                                 <div>
  123.                                     <h4>Open Hours:</h4>
  124.                                     <p>Mon-Sat: 11AM - 23PM</p>
  125.                                 </div>
  126.                             </div><!-- End Info Item -->
  127.                         </div>
  129.                     </div>
  131.                     <div class="col-lg-8">
  132.                         {# <form action="#" method="post" role="form" class="php-email-form"> #}
  133.                          
  134.                         <div class="php-email-form">
  135.                         <div id="success" hidden class="alert alert-success">
  136.                             <strong>Berhasil!</strong> Pesan anda telah berhasil terkirim.
  137.                         </div> 
  138.                         <div id="error" hidden class="alert alert-danger">
  139.                             <strong>Gagal!</strong> Pesan anda gagal terkirim.
  140.                         </div>
  141.                             <div class="row">
  142.                                 <div class="col-md-6 form-group">
  143.                                     <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
  144.                                 </div>
  145.                                 <div class="col-md-6 form-group mt-3 mt-md-0">
  146.                                     <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
  147.                                 </div>
  148.                             </div>
  149.                             <div class="form-group mt-3">
  150.                                 <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
  151.                             </div>
  152.                             <div class="form-group mt-3">
  153.                                 <textarea class="form-control" name="message" id="message" rows="7" placeholder="Message" required></textarea>
  154.                             </div>
  155.                             <div class="form-group mt-3">
  156.                             <input type="text" id="captcha-code" class="input" placeholder="Enter Captcha">
  157.                                     <span id="captcha-error" class="error"></span>
  158.                                 <div class="captcha-wrap">
  159.                                     <div id="CaptchaImageCode">
  160.                                         <canvas id="CapCode" class="capcode" width="300" height="80"></canvas>
  161.                                     </div>
  162.                                     <input type="button" class="ReloadBtn" onclick="CreateCaptcha()">
  163.                                     
  164.                                 </div>
  165.                             </div>
  166.                             <div class="my-3">
  167.                                 <div class="loading">Loading</div>
  168.                                 <div class="error-message"></div>
  169.                                 <div class="sent-message">Your message has been sent. Thank you!</div>
  170.                             </div>
  171.                             <div class="text-center"><button type="submit" value="Submit" onclick="CheckCaptcha(); Submit()">Send Message</button></div>
  172.                         </div>
  173.                         {# </form> #}
  174.                     </div><!-- End Contact Form -->
  176.                 </div>
  178.             </div>
  179.         </section><!-- End Contact Section -->
  180.     <!-- Bootstrap JS -->
  181.     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
  182.     <script src="js/jquery.js"></script>
  183.     <script src="js/captcha.js"></script>
  185. {% endblock %}