OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	05/19/2025 10:07:15 AM	rwxrwxrwx
📁 assets	-	02/24/2025 12:08:11 PM	rwxr-xr-x
📁 forms	-	05/19/2025 10:07:15 AM	rwxr-xr-x
📄 index.html	10.85 KB	02/24/2025 12:20:59 PM	rw-r--r--
📄 script.js	16.98 KB	02/24/2025 12:20:59 PM	rw-r--r--
📄 style.css	11.13 KB	02/24/2025 12:20:59 PM	rw-r--r--

Editing: index.html

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

.image-container {
      position: relative;
      max-width: 100%;
      height: auto;
    }

.save-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #333;
      padding: 10px;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      z-index: 1000;
    }

.checkbox-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 20px 0;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }

.form-field {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.3s ease;
    }

.hero {
      padding: 20px 0;
    }

.form-field.visible {
      opacity: 1;
      transform: translateY(0);
    }

header {
      background-color: black;
    }

.imgTextSection {
      display: flex;
      gap: 20px;
    }

.content-section {
      margin: 0px;
    }

footer {
      background-color: black;
      color: #f8f9fa;
    }

#footerCopy {
      text-align: center;
    }

@media (max-width: 768px) {
      .imgTextSection {
        flex-direction: column;
      }

#header-logo {
        width: auto;
        height: 40px;
      }
    }
  </style>
</head>

<section id="form-section" class="section content-section">
      <div class="container">
        <div class="content-section">
          <button class="edit-button edit-control" onclick="editText('form-title')">
            <i class="fa fa-pencil-alt"></i>
          </button>
          <h2 id="form-title">Register Now</h2>
        </div>

<div class="field-selection edit-control">
          <h3>Select Required Fields</h3>
          <div class="checkbox-container">
            <div class="checkbox-item">
              <input type="checkbox" id="nameField" name="fieldSelect" value="name" checked>
              <label for="nameField">Name</label>
            </div>
            <div class="checkbox-item">
              <input type="checkbox" id="emailField" name="fieldSelect" value="email" checked>
              <label for="emailField">Email</label>
            </div>
            <div class="checkbox-item">
              <input type="checkbox" id="phoneField" name="fieldSelect" value="phone" checked>
              <label for="phoneField">Phone Number</label>
            </div>
            <div class="checkbox-item">
              <input type="checkbox" id="stateField" name="fieldSelect" value="state">
              <label for="stateField">State</label>
            </div>
            <div class="checkbox-item">
              <input type="checkbox" id="cityField" name="fieldSelect" value="city">
              <label for="cityField">City</label>
            </div>
          </div>
        </div>

<form id="frmLead" class="contact-form" onsubmit="return chkLead()">
          <div id="formFields">
            
          </div>
          <div id="panelStatus" class="status-panel"></div>
          <div align="center">
            <button type="submit" id="btnSubmit" class="submit-button">Submit</button>
            <div id="contentLoader" style="display: none;">Processing...</div>
          </div>
        </form>
      </div>
    </section>

<section id="portfolio" class="portfolio section content-section">
      <div class="container">
        <div class="content-section">
          <button class="edit-button edit-control" onclick="editText('products-title')">
            <i class="fa fa-pencil-alt"></i>
          </button>
          <h2 id="products-title">Our Products</h2>
        </div>

<div class="image-section">
          <button class="edit-button edit-control" onclick="openImageUpload('product-image')">
            <i class="fa fa-pencil-alt"></i>
          </button>
          <div class="content-section imgTextSection">
            <img id="product-image" src="assets/pro_1.jpg" alt="Product">
            <div class="text-section content-section">
              <div>
                <button class="edit-button edit-control" onclick="editText('product-heading1')">
                  <i class="fa fa-pencil-alt"></i>
                </button>
                <h2 id="product-heading1">THE CUTTING EDGE TECHNOLOGY TO REBALANCE YOUR SCALP</h2>
                <button class="edit-button edit-control" onclick="editText('product-heading2')">
                  <i class="fa fa-pencil-alt"></i>
                </button>
                <h3 id="product-heading2">Discover Our SUPERFOOD COMPLEX</h3>
                <button class="edit-button edit-control" onclick="editText('product-description')">
                  <i class="fa fa-pencil-alt"></i>
                </button>
                <p id="product-description">A blend of superfood and skincare actives that help rebalance the scalp.</p>
              </div>
            </div>
          </div>
        </div>

</div>
    </section>
  </main>

<footer id="footer" class="footer">
    <div class="container footer-top">
      <div class="">
        <div class="">
          <button class="edit-button edit-control" onclick="editText('footerAddHead')"><i class="fa fa-pencil-alt"></i>
          </button>
          <strong id="footerAddHead">Address:</strong>
          <button class="edit-button edit-control" onclick="editText('footerAddress')"><i class="fa fa-pencil-alt"></i>
          </button>
          <span id="footerAddress">
            172A, First Floor, J P House, Lane 2, Saidulajab,
            Saket Behind Saket Metro Station New Delhi India
          </span>

<p class="mt-3"><strong>Phone:</strong> <span id="footerPhone">+91 96255 59438</span>
            <button class="edit-button edit-control" onclick="editText('footerPhone')"><i class="fa fa-pencil-alt"></i>
            </button><br>
            <strong>Email:</strong> <span id="footerEmail">info@evolvere.in</span>
            <button class="edit-button edit-control" onclick="editText('footerEmail')"><i class="fa fa-pencil-alt"></i>
            </button>
          </p>
        </div>
        <div class="col-lg-4 col-md-12 footer-newsletter">
          <button class="edit-button edit-control" onclick="editText('footerAboutH')"><i class="fa fa-pencil-alt"></i>
          </button>
          <h4 id="footerAboutH">About Us</h4>
          <button class="edit-button edit-control" onclick="editText('footerAboutus')"><i class="fa fa-pencil-alt"></i>
          </button>
          <p id="footerAboutus">One-stop problem-fixer for both the Salon owners and hair & beauty consumers
          </p>
        </div>
      </div>
    </div>
    <button class="edit-button edit-control" onclick="editText('footerCopy')"><i class="fa fa-pencil-alt"></i>
    </button>
    <p id="footerCopy">© Copyright 2025 All Rights Reserved </p>

</footer>

<div class="save-bar">
    <button style="background-color:#db5919;" onclick=" window.location.href='../index.php'">Back</button>
    <button class=" export-button" onclick="exportPage()">Export Page</button>
    <button class="restore-button" onclick="restoreDefaults()">Restore Defaults</button>
    <button class="edit-control" onclick="togglePreview()">Preview Page</button>
  </div>

<div id="imageUploadModal" class="image-upload-modal" style="display: none;">
    <div class="modal-content">
      <h2>Upload Image</h2>
      <input type="file" id="imageInput" accept="image/*">
      <div class="modal-buttons">
        <button onclick="uploadImage()">Upload</button>
        <button onclick="closeImageUpload()">Cancel</button>
      </div>
    </div>
  </div>

<div class="preview-notice" id="previewNotice">
    Preview Mode - This is how your page will look when published
  </div>

<div class="preview-bar" id="previewBar">
    <button class="edit-button" onclick="exitPreview()">Back to Edit</button>
    <button class="save-button" onclick="savePreview()">Save Page</button>
  </div>
  <div id="saveDetailsModal" class="save-modal">
    <div class="modal-content">
      <h2>Save Landing Page</h2>
      <div class="form-group">
        <label for="pageTitle">Page Title *</label>
        <input type="text" id="pageTitle" required>
      </div>
      <div class="form-group">
        <label for="actionEmail">Call to Action Email *</label>
        <input type="email" id="actionEmail" required>
      </div>
      <div class="modal-buttons">
        <button onclick="saveLandingPage()" class="save-button">Save</button>
        <button onclick="closeSaveModal()" class="restore-button">Cancel</button>
      </div>
      <div id="saveStatus" class="status-message"></div>
    </div>
  </div>
  <div class="edit-control" style="margin-bottom: 50px;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>

</body>

</html>