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

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

Tailwind invoice example

Author:
Elijah Davis

2 years ago

18.2k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

3 months ago

827
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

1 day ago

17
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

3 months ago

499
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

304
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

1 week ago

18
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
Anonymous

1 month ago

28
hello world
by salvator

Author:
Anonymous

1 month ago

171
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

2 weeks ago

100
Half filled circle with tailwind

Author:
Alok

2 years ago

12.8k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

4 months ago

595
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

2 months ago

228

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components