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

186

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

Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.2k
Homepage event

Author:
Anonymous

1 month ago

164
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

2 months ago

279
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

4 months ago

583
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

7 months ago

1.3k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

6 months ago

1.1k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

9 months ago

3.2k
About Us Component

Author:
KULDEEP

1 month ago

385
background animation
background animation

Author:
Anonymous

2 years ago

47.2k
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

1 month ago

360
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

11 months ago

1.7k
htmlcss3

Author:
Anonymous

1 month ago

92

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components