templates/blocks/vps-builder.html.twig line 1

  1. <section id="vpsBuilder" class="vps-builder vps-builder__desktop">
  2.     <div class="wrap">
  3.         <div class="vps-builder__container">
  4.             <div class="vps-builder__builder">
  5.                 <table>
  6.                     <tr class="vps-builder__header">
  7.                         <td class="vps-builder__header" colspan="4">Hosting Platform</td>
  8.                     </tr>
  9.                     <tr class="vps-builder__os">
  10.                         <td>
  11.                             <i class="fas fa-server fa-3x"></i>
  12.                         </td>
  13.                         <td>
  14.                             Operating<br>System
  15.                         </td>
  16.                         <td class="vps-builder__select">
  17.                             <select name="operatingSystem">
  18.                                 <option value="" data-price="0">Please Select</option>
  19.                                 <option value="CentOS 7.9" data-price="0" selected>CentOS 7.9</option>
  20.                                 <option value="Debian 11.0" data-price="0">Debian 11.0</option>
  21.                                 <option value="Ubuntu 20.04" data-price="0">Ubuntu 20.04</option>
  22.                             </select>
  23.                         </td>
  24.                         <td>Included</td>
  25.                     </tr>
  26.                     <tr class="vps-builder__platform">
  27.                         <td>
  28.                             <i class="fab fa-cpanel fa-3x"></i>
  29.                         </td>
  30.                         <td>
  31.                             Control Panel<br>
  32.                             <small>(cPanel or ISPConfig)</small>
  33.                         </td>
  34.                         <td class="vps-builder__select">
  35.                             <select name="hostingManagers" id="vpsDashboard" data-update="vps_dash_price">
  36.                                 <option value="" data-price="0">None</option>
  37.                                 <option value="cPanel" data-price="15.00">cPanel - £15.00/month</option>
  38.                                 <option value="ISPConfig" data-price="0">ISPConfig - FREE</option>
  39.                             </select>
  40.                         </td>
  41.                         <td id="vps_dash_price">Included</td>
  42.                     </tr>
  43.                     <tr class="vps-builder__header">
  44.                         <td class="vps-builder__header" colspan="4">Build Hardware</td>
  45.                     </tr>
  46.                     <tr class="vps-builder__cpu">
  47.                         <td>
  48.                             <i class="fa-solid fa-microchip fa-3x"></i>
  49.                         </td>
  50.                         <td id="vpsCpuVal">
  51.                             <span class="vps-builder__value">1</span> <span class="vps-builder__label">Core</span><br>
  52.                             <span class="vps-builder__opt">CPU</span>
  53.                         </td>
  54.                         <td>
  55.                             <input type="range" class="vps_sliders" min="1" max="16" value="1" step="1" id="cpu" data-price="15.00" data-update="vps_cpu_price">
  56.                         </td>
  57.                         <td id="vps_cpu_price">Included</td>
  58.                     </tr>
  59.                     <tr class="vps-builder__ram">
  60.                         <td>
  61.                             <i class="fa-solid fa-memory fa-3x"></i>
  62.                         </td>
  63.                         <td id="vpsRamVal">
  64.                             <span class="vps-builder__value">1</span> <span class="vps-builder__label">GB</span><br>
  65.                             <span class="vps-builder__opt">Memory</span>
  66.                         </td>
  67.                         <td>
  68.                             <input type="range" class="vps_sliders" min="1" max="16" value="1" step="1" id="ram" data-price="10.00" data-update="vps_ram_price">
  69.                         </td>
  70.                         <td id="vps_ram_price">Included</td>
  71.                     </tr>
  72.                     <tr class="vps-builder__ssd">
  73.                         <td>
  74.                             <box-icon name="hdd" type="solid" size="lg"></box-icon>
  75.                         </td>
  76.                         <td id="vpsSsdVal">
  77.                             <span class="vps-builder__value">50</span> <span class="vps-builder__label">GB</span><br>
  78.                             <span class="vps-builder__opt">SSD Disk</span>
  79.                         </td>
  80.                         <td>
  81.                             <input type="range" class="vps_sliders" min="50" max="1000" value="50" step="50" id="ssd" data-price="0.20" data-update="vps_ssd_price">
  82.                         </td>
  83.                         <td id="vps_ssd_price">Included</td>
  84.                     </tr>
  85.                     <tr class="vps-builder__data">
  86.                         <td>
  87.                             <i class="fas fa-infinity fa-3x"></i>
  88.                         </td>
  89.                         <td>
  90.                             <span class="vps-builder__value">Unlimited</span> <span class="vps-builder__label">Data</span><br>
  91.                             <span class="vps-builder__opt">Bandwidth</span>
  92.                         </td>
  93.                         <td>
  94.                             <input type="range" class="vps_sliders" min="100" max="1000" value="1000" step="100" id="data" disabled>
  95.                         </td>
  96.                         <td>Included</td>
  97.                     </tr>
  98.                     <tr class="vps-builder__ip">
  99.                         <td>
  100.                             <i class="fas fa-location-crosshairs fa-3x"></i>
  101.                         </td>
  102.                         <td id="vpsIpVal">
  103.                             <span class="vps-builder__value">1</span> <span class="vps-builder__label">IP</span><br>
  104.                             <span class="vps-builder__opt">Address</span>
  105.                         </td>
  106.                         <td>
  107.                             <input type="range" class="vps_sliders" min="1" max="8" value="1" step="1" id="ip" data-price="3.00" data-update="vps_ip_price">
  108.                         </td>
  109.                         <td id="vps_ip_price">Included</td>
  110.                     </tr>
  111.                     <tr class="vps-builder__speed">
  112.                         <td>
  113.                             <i class="fas fa-gauge-simple-high fa-3x"></i>
  114.                         </td>
  115.                         <td id="vpsTransitVal">
  116.                             <span class="vps-builder__value">1</span> <span class="vps-builder__label">Mb/s</span><br>
  117.                             <span class="vps-builder__opt">Speed</span>
  118.                         </td>
  119.                         <td>
  120.                             <input type="range" class="vps_sliders" min="0" max="50" value="0" step="5" id="transit" data-price="150.00" data-update="vps_speed_price">
  121.                         </td>
  122.                         <td id="vps_speed_price">Included</td>
  123.                     </tr>
  124.                 </table>
  125.             </div>
  126.             <aside class="vps-builder__calculations">
  127.                 <div class="vps-builder__calculations__book">
  128.                     <p class="vps-builder__calculations__price">
  129.                         <span>£35.00</span><small>/month</small>
  130.                     </p>
  131.                     <p>
  132.                         <button type="button" class="button button--indigo button--full button--xlarge" data-modal="orderModal" data-type="vps" data-value="custom-build">
  133.                             Order Your VPS
  134.                         </button>
  135.                     </p>
  136.                     <hr>
  137.                     <p>
  138.                         Would you like to learn more? No problem, why not speak to us online, or drop us an email.
  139.                     </p>
  140.                 </div>
  141.             </aside>
  142.         </div>
  143.     </div>
  144. </section>
  145. <section id="vpsBuilderMobile" class="vps-builder vps-builder__mobile">
  146.     <div class="wrap">
  147.         <div class="vps-builder__container">
  148.             <div class="vps-builder__builder">
  150.             </div>
  151.         </div>
  152.     </div>
  153. </section>