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

243

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

pages / slides

Author:
MD Fardous Alom

9 months ago

1.2k
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

5 months ago

882
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

685
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

Author:
ishimwe shadad

5 months ago

449
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

3 weeks ago

52
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

354
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.5k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

20.4k
joker
joker cyber punk

Author:
Baraka Salvator

4 months ago

874
Table
Table with image and status with pagination buttons

Author:
Abhiraj

9 months ago

2.1k
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

3 months ago

512
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

5 months ago

599

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components