Home
Mario Williams
Energy Efficiency Program - Oklahoma

Energy Efficiency Program - Oklahoma

Code for new IT proposal

This tailwind example is contributed by Mario Williams, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Mario Williams

405

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>S4 Energy Efficiency Program Mock-up</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }

.s4-header {
      background-color: #004A99;
      /* SAP-like blue */
      color: white;
      padding: 1rem;
      font-size: 1.25rem;
      font-weight: bold;
    }

.s4-sidebar {
      background-color: #F0F2F5;
      /* Light grey */
      width: 250px;
      padding: 1rem;
    }

.s4-main-content {
      flex-grow: 1;
      padding: 1.5rem;
      background-color: #FFFFFF;
    }

.s4-section-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 0.75rem;
      border-bottom: 1px solid #E5E7EB;
      padding-bottom: 0.5rem;
    }

.s4-label {
      font-weight: 500;
      color: #4B5563;
      /* Gray-600 */
      margin-bottom: 0.25rem;
      display: block;
    }

.s4-input,
    .s4-select {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid #D1D5DB;
      /* Gray-300 */
      border-radius: 0.375rem;
      /* rounded-md */
      box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

.s4-button {
      padding: 0.625rem 1.25rem;
      border-radius: 0.375rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }

.s4-button-primary {
      background-color: #007BFF;
      /* Primary blue */
      color: white;
    }

.s4-button-primary:hover {
      background-color: #0056b3;
    }

.s4-button-secondary {
      background-color: #6C757D;
      /* Gray */
      color: white;
    }

.s4-button-secondary:hover {
      background-color: #545b62;
    }

.highlight-change {
      border: 2px solid #FFD700;
      /* Gold border to highlight changes */
      padding: 2px;
      background-color: #FFFACD;
      /* LemonChiffon for subtle background highlight */
    }

.modal {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

.modal-content {
      background-color: white;
      padding: 2rem;
      border-radius: 0.5rem;
      /* rounded-lg */
      width: 90%;
      max-width: 600px;
      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

/* Simulating the SAP Fiori-like layout */
    .fiori-page-container {
      display: flex;
      min-height: 100vh;
    }

.fiori-content-area {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

.fiori-program-list {
      width: 300px;
      /* Fixed width for program list like in PDF */
      background-color: #F7F7F7;
      padding: 1rem;
      border-right: 1px solid #D1D5DB;
    }

.fiori-program-item {
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      cursor: pointer;
    }

.fiori-program-item:hover,
    .fiori-program-item.active {
      background-color: #E0EBF5;
      /* Light blue for hover/active */
    }

.fiori-program-item-title {
      font-weight: bold;
    }

.fiori-program-item-desc {
      font-size: 0.875rem;
      color: #555;
    }

.fiori-detail-pane {
      flex-grow: 1;
      padding: 1.5rem;
      background-color: #FFFFFF;
    }
  </style>
</head>

<div class="fiori-page-container">
    <div class="fiori-program-list">
      <h2 class="text-lg font-semibold mb-4 text-gray-700">Billing Programs</h2>

<div class="mb-2">
        <div class="s4-section-title">OTHER PROGRAMS</div>
        <ul>
          <li class="fiori-program-item">
            <div class="fiori-program-item-title">AMB</div>
            <div class="fiori-program-item-desc">Average Monthly Billing</div>
          </li>
          <li class="fiori-program-item">
            <div class="fiori-program-item-title">GFB</div>
            <div class="fiori-program-item-desc">Guaranteed Flat Bill Pricing Option</div>
          </li>
          <li class="fiori-program-item active highlight-change" onclick="showProgramDetails()">
            <div class="fiori-program-item-title">ENRG_E</div>
            <div class="fiori-program-item-desc">Energy Efficiency</div>
          </li>
          <li class="fiori-program-item">
            <div class="fiori-program-item-title">PBILL</div>
            <div class="fiori-program-item-desc">Paperless Billing Program</div>
          </li>
          <li class="fiori-program-item">
            <div class="fiori-program-item-title">PYDD</div>
            <div class="fiori-program-item-desc">Push Your Due Date</div>
          </li>
        </ul>
      </div>
    </div>

<div class="fiori-detail-pane" id="programDetailPane" style="display: none;">
      <h1 class="text-2xl font-bold mb-6 text-gray-800 highlight-change">Energy Efficiency Program - OKLAHOMA</h1>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
          <span class="s4-label">Contract Account:</span>
          <p class="text-gray-700">133013203-4</p>
        </div>
        <div>
          <span class="s4-label">Name:</span>
          <p class="text-gray-700">Riyaz Shak</p>
        </div>
        <div class="md:col-span-2">
          <span class="s4-label">Service Address:</span>
          <p class="text-gray-700">1601 E IMHOFF RD 1006 NORMAN OK 73071</p>
        </div>
        <div>
          <span class="s4-label">Home/Cell Phone:</span>
          <p class="text-gray-700">4055533002</p>
        </div>
        <div>
          <span class="s4-label">Email:</span>
          <p class="text-gray-700">rshak@example.com</p>
        </div>
      </div>

<div class="space-y-6">
        <div>
          <label for="ownOrRent" class="s4-label">Own or Rent? (O or R):</label>
          <select id="ownOrRent" class="s4-select">
                        <option value="">Select...</option>
                        <option value="O" selected>O (Own)</option>
                        <option value="R">R (Rent)</option>
                    </select>
        </div>

<div class="highlight-change p-2 rounded-md">
          <label for="annualIncome" class="s4-label">Annual Income:</label>
          <select id="annualIncome" class="s4-select">
                        <option value="">Select...</option>
                        <option value="less_than_60k">Less than 60k</option>
                        <option value="greater_than_60k">Greater than 60K</option>
                    </select>
        </div>

<div class="highlight-change p-2 rounded-md">
          <label class="s4-label">Services Interested In:</label>
          <div class="space-y-2 mt-1">
            <div>
              <input type="checkbox" id="serviceCaulking" class="mr-2 rounded"><label for="serviceCaulking">Caulking, air sealing, and weather stripping</label>
            </div>
            <div>
              <input type="checkbox" id="serviceHvac" class="mr-2 rounded"><label for="serviceHvac">HVAC TUNE UP</label>
            </div>
            <div>
              <input type="checkbox" id="serviceDuct" class="mr-2 rounded"><label for="serviceDuct">AIR DUCT SEAL AND REPAIR</label>
            </div>
            <div>
              <input type="checkbox" id="serviceWaterHeater" class="mr-2 rounded"><label for="serviceWaterHeater">WATER HEATER CALIBRATION</label>
            </div>
            <div>
              <input type="checkbox" id="serviceAll" class="mr-2 rounded" onclick="toggleAllServices(this)"><label for="serviceAll">ALL OF THE ABOVE</label>
            </div>
            <div>
              <input type="checkbox" id="serviceNotSure" class="mr-2 rounded"><label for="serviceNotSure">NOT SURE</label>
            </div>
          </div>
        </div>

<div id="qualificationMessage" class="mt-4 p-3 rounded-md bg-green-100 text-green-700 border border-green-300"
          style="display: none;">
          QUALIFIED
        </div>

<div id="programQualificationField" class="mt-4" style="display:none;">
          <label class="s4-label highlight-change">Energy Efficiency Program Qualification:</label>
          <p class="text-gray-700" id="qualificationStatusText">We are processing your application. You will be
            contacted by our contractor within 30 days to set up your appointment.</p>
        </div>

</div>

<div class="mt-8 flex justify-end space-x-3">
        <button class="s4-button s4-button-secondary" onclick="alert('Action Cancelled (Mock)')">Cancel</button>
        <button id="executeButton" class="s4-button s4-button-primary" onclick="checkQualification()">Execute</button>
        <button id="moreInfoButton" class="s4-button s4-button-primary" style="display: none;" onclick="showInfoModal()">You Qualify, more information?</button>
      </div>
    </div>
  </div>

<div id="infoModal" class="modal" style="display: none;">
    <div class="modal-content">
      <h2 class="text-xl font-semibold mb-4 highlight-change">Energy Efficiency Program Information - OKLAHOMA</h2>
      <p class="text-gray-700 mb-2 highlight-change">
        The OG&E Energy Efficiency Program is designed to make homes more energy efficient, which will help reduce
        energy costs and improve the comfort of your home.
      </p>
      <p class="text-gray-700 mb-2">Typical improvements may include:</p>
      <ul class="list-disc list-inside text-gray-700 mb-4">
        <li>Attic insulation</li>
        <li>Window caulking to help eliminate air leaks</li>
        <li>Testing for carbon monoxide levels</li>
        <li>Installing energy-saving lights</li>
        <li>Weather stripping doors</li>
        <li>Duct sealing</li>
        <li>Other miscellaneous thermal improvements</li>
      </ul>
      <p class="text-gray-700 mb-2 highlight-change">
        The program does not cover re-siding, adding siding or roof replacement.
        An OG&E employed, energy certified contractor will contact the customer to schedule an appointment and install
        the improvements at a later date.
      </p>
      <p class="text-gray-700 mb-2">
        The contractor that will be contacting you for energy efficiency services will be Skyline Energy Solutions.
      </p>
      <p class="text-gray-700 mb-2 font-semibold">
        It is imperative that you keep your scheduled appointment.
      </p>
      <p class="text-gray-700 mb-4 highlight-change">
        We understand that emergencies do arise. However, if you are unable to keep the appointment, please reschedule
        at least 24 hours in advance.
        Failure to do so may result in disqualification from the OG&E Energy Efficiency Program.
      </p>
      <div class="flex justify-end space-x-3 mt-6">
        <button class="s4-button s4-button-secondary" onclick="closeInfoModal()">Close</button>
        <button class="s4-button s4-button-primary" onclick="enrollCustomer()">Interested</button>
      </div>
    </div>
  </div>

// Ensure "Not Sure" is unchecked if any other service or "All of the Above" is checked
    const serviceCheckboxes = ['serviceCaulking', 'serviceHvac', 'serviceDuct', 'serviceWaterHeater', 'serviceAll'];
    serviceCheckboxes.forEach(id => {
        document.getElementById(id).addEventListener('change', function() {
            if (this.checked) {
                document.getElementById('serviceNotSure').checked = false;
            }
        });
    });
    document.getElementById('serviceNotSure').addEventListener('change', function() {
        if (this.checked) {
            serviceCheckboxes.forEach(id => {
                document.getElementById(id).checked = false;
            });
        }
    });

function checkQualification() {
        // Mock qualification logic
        const income = document.getElementById('annualIncome').value;
        if (!income) {
            alert("Please select an annual income range.");
            return;
        }
        
        document.getElementById('qualificationMessage').style.display = 'block';
        document.getElementById('executeButton').style.display = 'none';
        document.getElementById('moreInfoButton').style.display = 'inline-block';
    }

function showInfoModal() {
        document.getElementById('infoModal').style.display = 'flex';
    }

function closeInfoModal() {
        document.getElementById('infoModal').style.display = 'none';
    }

function enrollCustomer() {
        closeInfoModal();
        document.getElementById('programQualificationField').style.display = 'block';
        document.getElementById('moreInfoButton').style.display = 'none'; // Hide "more info" after "Interested"
        // Potentially disable other fields or show a final confirmation
        alert("Customer enrollment initiated for Energy Efficiency Program (Mock).");
    }

</script>

</body>

</html>

Related Examples

Heading Style

Author:
KULDEEP

8 months ago

508
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
M Junaid

7 months ago

482
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

Author:
SAURAV SINGH

6 months ago

527
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2.5k
Show credit card details

Author:
Manuela Bianka

3 years ago

12.3k
Product cards
Product cards for eCommerce

Author:
ehmasuk

3 months ago

417
magic card
by salvator

Author:
Baraka Salvator

8 months ago

930
Tailwind invoice example

Author:
Elijah Davis

3 years ago

19.1k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

9k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

10 months ago

1.2k
Upvote downvote buttons

Author:
Lucas Martinez

3 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components