A commitment to innovation and sustainability

Études is a pioneering firm that seamlessly merges creativity and functionality to redefine architectural excellence.

<style>
  .split-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: Arial, sans-serif;
    gap: 20px;
  }

  .split-box {
    flex: 1 1 45%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    min-width: 300px;
  }

  h2 {
    text-align: center;
  }

  input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    font-size: 1em;
  }

  button {
    padding: 10px 20px;
    font-size: 1em;
    margin: 10px 5px;
    cursor: pointer;
  }

  img {
    max-width: 100%;
    border-radius: 10px;
    margin: 10px 0;
  }

  .output {
    font-weight: bold;
  }
</style>

<div class="split-container">

  <!-- LEFT SIDE: Digital Cards -->
  <div class="split-box">
    <h2>🖼️ DRPCode™ Digital Cards</h2>
    <p>Select a card below:</p>
    <img src="https://via.placeholder.com/300x200?text=Card+1" alt="Card 1">
    <img src="https://via.placeholder.com/300x200?text=Card+2" alt="Card 2">
    <img src="https://via.placeholder.com/300x200?text=Card+3" alt="Card 3">
    <p><strong>Coming Soon:</strong> More cards, checkout, and custom messages.</p>
  </div>

  <!-- RIGHT SIDE: Converter Tools -->
  <div class="split-box">
    <h2>🔢 Letter to Number Converter</h2>
    <p>Type letters (A–Z) to get numbers.<br>Example: DRP CODE ➜ 04 18 16 / 03 15 04 05</p>
    <input type="text" id="letterInput" placeholder="Enter letters like DRP CODE">
    <button onclick="convertToNumbers()">Convert</button>
    <p><span class="output" id="numberOutput"></span></p>

    <hr>

    <h2>🔤 Number to Letter Converter</h2>
    <p>Type numbers (1–26). Use a slash (/) to separate words.<br>Example: 04 18 16 / 03 15 04 05 ➜ DRP CODE</p>
    <input type="text" id="numberInput" placeholder="Enter numbers like 04 18 16 / 03 15 04 05">
    <button onclick="convertToLetters()">Convert</button>
    <p><span class="output" id="letterOutput"></span></p>

    <button onclick="clearAll()">🔄 Clear Both</button>
  </div>

</div>

<script>
  function convertToLetters() {
    const input = document.getElementById("numberInput").value.trim();
    const wordGroups = input.split("/");
    let output = wordGroups.map(group => {
      return group.trim().split(/\s+/).map(num => {
        const n = parseInt(num, 10);
        return n >= 1 && n <= 26 ? String.fromCharCode(64 + n) : "";
      }).join('');
    }).join(' ');
    document.getElementById("letterOutput").innerText = output;
  }

  function convertToNumbers() {
    const input = document.getElementById("letterInput").value.trim().toUpperCase();
    const words = input.split(/\s+/);
    let output = words.map(word => {
      return word.split('').map(char => {
        const code = char.charCodeAt(0);
        return code >= 65 && code <= 90 ? String(code - 64).padStart(2, '0') : "";
      }).join(' ');
    }).join(' / ');
    document.getElementById("numberOutput").innerText = output;
  }

  function clearAll() {
    document.getElementById("letterInput").value = '';
    document.getElementById("numberInput").value = '';
    document.getElementById("letterOutput").innerText = '';
    document.getElementById("numberOutput").innerText = '';
  }
</script>

A passion for creating spaces

Our comprehensive suite of professional services caters to a diverse clientele, ranging from homeowners to commercial developers.