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

213

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

Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.2k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

2 months ago

657
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

957
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

10 months ago

1.1k
magic card
by salvator

Author:
Baraka Salvator

4 months ago

516
Chatbox template

Author:
Lucas Martinez

2 years ago

12.2k
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

10 months ago

2.7k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

1 year ago

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

5 months ago

890
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

3 months ago

601
Popover
basic popover example

Author:
Dipti narayan

2 years ago

12.5k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

3 months ago

589

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components