westech-r2/westech_r2/page/customer-records/customer-records.html

<style>
.customer-records-page {
  font-family: Segoe UI, Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: white;
}
.customer-records-page h1 {
  font-size: 36px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.toolbar button {
  padding: 8px 20px;
  border: 2px solid #333;
  background: #f0f0f0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 3px;
}
.toolbar button:hover { background: #e0e0e0; }
.toolbar .record-counter {
  font-size: 18px;
  font-weight: 600;
  margin: 0 10px;
}
.toolbar .nav-btn {
  padding: 6px 14px;
  font-size: 18px;
  min-width: 40px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
  margin-bottom: 20px;
}
.form-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-group label {
  font-weight: 600;
  font-size: 13px;
  min-width: 140px;
  text-align: right;
  white-space: nowrap;
}
.form-group input,
.form-group textarea {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ccc;
  font-size: 13px;
  background: #f8f8f8;
}
.form-group textarea {
  min-height: 60px;
  resize: vertical;
}
.form-group.full-width {
  grid-column: 1 / -1;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #333;
}
.search-bar label {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}
.search-bar select,
.search-bar input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  font-size: 13px;
}
.search-bar .search-label {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 10px;
}
.search-bar button {
  padding: 6px 20px;
  border: 2px solid #333;
  background: #f0f0f0;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.search-bar button:hover { background: #e0e0e0; }
</style>

<div class="customer-records-page">
  <h1>Modify Records</h1>

  <div class="toolbar">
    <button id="btn-save">Save</button>
    <span class="record-counter">
      <span id="current-index">0</span> of <span id="total-count">0</span>
    </span>
    <button class="nav-btn" id="btn-prev">&lt;</button>
    <button class="nav-btn" id="btn-next">&gt;</button>
    <button class="nav-btn" id="btn-first">&lt;&lt;</button>
    <button class="nav-btn" id="btn-last">&gt;&gt;</button>
    <button id="btn-delete">Delete</button>
    <button id="btn-print">Print</button>
  </div>

  <div class="form-grid">
    <div class="form-group">
      <label>Record #</label>
      <input type="text" id="record-number" readonly>
    </div>
    <div class="form-group">
      <label>Additional Numbers:</label>
      <input type="text" id="additional-numbers">
    </div>

    <div class="form-group">
      <label>*</label>
      <input type="text" id="field-star">
    </div>
    <div class="form-group">
      <label>Customer Address:</label>
      <input type="text" id="customer-address">
    </div>

    <div class="form-group">
      <label>Any Letter:</label>
      <input type="text" id="any-letter">
    </div>
    <div class="form-group">
      <label>City:</label>
      <input type="text" id="city">
    </div>

    <div class="form-group">
      <label>E</label>
      <input type="text" id="field-e">
    </div>
    <div class="form-group">
      <label>Zip:</label>
      <input type="text" id="zip">
    </div>

    <div class="form-group">
      <label>Company Name:</label>
      <input type="text" id="company-name">
    </div>
    <div class="form-group">
      <label>Contacted date:</label>
      <input type="date" id="contacted-date">
    </div>

    <div class="form-group full-width">
      <label>Contact Person(s):</label>
      <textarea id="contact-persons"></textarea>
    </div>
    <div class="form-group">
      <label>Follow up date:</label>
      <input type="text" id="follow-up-date">
    </div>

    <div class="form-group">
      <label>E-Mail Address:</label>
      <input type="email" id="email-address">
    </div>
    <div class="form-group">
      <label>Last P/U date:</label>
      <input type="text" id="last-pu-date">
    </div>

    <div class="form-group full-width">
      <label>Contact Numbers:</label>
      <textarea id="contact-numbers"></textarea>
    </div>

    <div class="form-group full-width">
      <label>Hours of Operation:</label>
      <input type="text" id="hours-operation">
    </div>

    <div class="form-group full-width">
      <label>Comments:</label>
      <textarea id="comments"></textarea>
    </div>
  </div>

  <div class="search-bar">
    <label>SEARCH:</label>
    <select id="search-field">
      <option value="address">Address</option>
      <option value="company_name">Company Name</option>
      <option value="contact_person">Contact Person</option>
      <option value="phone">Phone</option>
      <option value="email">Email</option>
      <option value="city">City</option>
      <option value="zip">Zip</option>
      <option value="record_number">Record #</option>
    </select>
    <span class="search-label">FOR</span>
    <input type="text" id="search-value" style="min-width:200px;">
    <button id="btn-search">Search!</button>
    <button id="btn-reset">Reset</button>
  </div>
</div>