Model Examples
No edit summary
(Replaced content with "<html> <style> @media (max-width: 767px) { .content { padding: 2em 1em; max-width: none; } .heading { font-size: 1.5em; } .sub-heading { font-size: 1em; } .description { font-size: 0.875em; } .input-container { max-width: none; height: auto; } .search-icon { margin-left: 1em;...")
Line 37: Line 37:
</div>
</div>
</div>
</div>
<style>
.container {
  display: flex;
}
.sidebar {
  flex: 0 0 200px; /* Adjust the width as needed */
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.menu-item {
  color: #0060A8;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px; /* Space between menu items */
  word-wrap: break-word;
}
.card-container , .card-container-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  margin: 0 auto;
  max-width: 960px;
}
.cards {
  width: 296px;
  background: white;
  border-radius: 6px;
  border: 1px solid #E3E8EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px; /* Space between card rows */
}
.card img {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.contentss {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.title {
  color: #112B3C;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px; /* Adjust as needed */
}
.description {
  font-size: 14px;
  font-weight: 300;
  color: black;
}
.download-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #F67A07;
  font-size: 14px;
  font-weight: 600;
}
.download-indicator {
  width: 12px;
  height: 12px;
  background: #F67A07;
  transform: rotate(-90deg);
  border: 2px solid #F67A07;
}
  .sidebar a {
    display: block;
    color: #182933;
    text-decoration: none;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    font-weight: 500;
  }
  .sidebar a.active {
    color: #1A50AD;
  }
  .sidebar a.active svg {
    position: absolute;
    left: 0;
    top: 0;
  }
@media screen and (max-width: 768px) {
    .container {
      flex-direction: column;
    }
    .sidebar {
      width: 100%;
      flex-direction: row;
      overflow-x: auto;
      white-space: nowrap;
      padding-bottom: 10px;
      box-sizing: border-box;
    }
    .sidebar .menu-item {
      display: inline-block;
      margin-right: 10px;
    }
    .card-container, .card-container-3 {
      grid-template-columns: 1fr;
      padding: 0 20px;
      max-width: none;
    }
    .cards {
      width: auto;
    }
    .menu-item {
      padding: 10px;
      font-size: 14px;
    }
    section h2, .card-container {
      margin-left: 0;
    }
  }
@media (max-width: 768px) {
    .sidebar,
    .card-container,
    .card-container-3 {
      flex: 0 0 100%;
      max-width: 100%;
      margin-left: 0;
    }
    .card-container,
    .card-container-3 {
      grid-template-columns: 1fr;
    }
  }
  .search-container {
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #E3E8EE;
    background: #FFF;
    width: 951px;
    height: 36px;
    flex-shrink: 0;
  }
 
  .search-container input[type="search"] {
    border: none;
    outline: none;
    width: 100%;
    padding: 0 10px;
    height: 100%;
    color: #999B9E; /* Placeholder text color */
  }
 
  .search-container svg {
    margin: 0 10px;
  }
 
  /* Change placeholder color */
  .search-container input::placeholder {
    color: #999B9E;
  }
 
  /* If you want to ensure that the input does not have border in any browser */
  .search-container input:focus {
    border: none;
    outline: none;
  }
</style>
</head>
<body>
<div class="container">
  <div class="sidebar">
    <!-- Menu items -->
    <a href="#complete-models" class="menu-item">Complete models</a>
  <a href="#another-model" class="menu-item">Another model</a>
  <a href="#final-model" class="menu-item">Final model</a>
  </div>
<main>
<div class="search-container">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M13 13L9 9L13 13ZM10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#999B9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <input type="search" id="searchBox" onkeyup="searchCards()" placeholder="Search here...">
</div>
    <!-- Section for Complete Models -->
<section id="complete-models">
      <h2>Complete Models</h2>
  <div class="card-container">
    <!-- Card 1 -->
    <div class="cards">
      <img src="https://via.placeholder.com/301x175" alt="Placeholder">
      <div class="contentss">
        <div class="title">Base App</div>
        <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
        <div class="download-link">
          <div class="download-indicator"></div>
          <div>Download .zip</div>
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <!-- Repeat the structure for other cards as needed -->
    <!-- ... -->
    <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
  </div>
</div>
</section>
<!-- Section for Complete Models -->
<section id="another-model">
      <h2 style="margin-left:300px;">Complete Models</h2>
  <div class="card-container" style="margin-left:300px;">
    <!-- Card 1 -->
    <div class="cards">
      <img src="https://via.placeholder.com/301x175" alt="Placeholder">
      <div class="contentss">
        <div class="title">Base App</div>
        <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
        <div class="download-link">
          <div class="download-indicator"></div>
          <div>Download .zip</div>
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <!-- Repeat the structure for other cards as needed -->
    <!-- ... -->
    <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
  </div>
</div>
<!-- Section for Complete Models -->
<section id="final-model">
      <h2 style="margin-left:300px;">Complete Models</h2>
  <div class="card-container" style="margin-left:300px;">
    <!-- Card 1 -->
    <div class="cards">
      <img src="https://via.placeholder.com/301x175" alt="Placeholder">
      <div class="contentss">
        <div class="title">Base App</div>
        <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
        <div class="download-link">
          <div class="download-indicator"></div>
          <div>Download .zip</div>
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <!-- Repeat the structure for other cards as needed -->
    <!-- ... -->
    <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Test</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
  </div>
</div>
<script>
function searchCards() {
  var input, filter, cards, title, i, txtValue;
  input = document.getElementById("searchBox");
  filter = input.value.toUpperCase();
  cards = document.getElementsByClassName("cards");
 
  for (i = 0; i < cards.length; i++) {
    title = cards[i].getElementsByClassName("title")[0];
    if (title) {
      txtValue = title.textContent || title.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        cards[i].style.display = "";
      } else {
        cards[i].style.display = "none";
      }
    }     
  }
}
</script>
<script>
// JavaScript to scroll to the section smoothly when a sidebar link is clicked
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('.sidebar a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetSection = document.querySelector(targetId);
      if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('.sidebar a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetSection = document.querySelector(targetId);
      if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="4" height="16" viewBox="0 0 4 16" fill="none">
    <path d="M0 0C2.20914 0 4 1.79086 4 4L4 12C4 14.2091 2.20914 16 0 16L0 0Z" fill="#1A50AD"/>
  </svg>`;
  // Function to create a new SVG element
  const createSvgElement = (htmlString) => {
    const div = document.createElement('div');
    div.innerHTML = htmlString.trim();
    return div.firstChild;
  };
  // Function to update active link style and SVG
  const updateActiveLink = (targetId) => {
    document.querySelectorAll('.sidebar a').forEach(link => {
      if (link.getAttribute('href') === targetId) {
        link.classList.add('active');
        // Insert SVG for active link
        link.prepend(createSvgElement(svgMarkup));
      } else {
        link.classList.remove('active');
        // Remove SVG for non-active links
        if (link.querySelector('svg')) {
          link.removeChild(link.querySelector('svg'));
        }
      }
    });
  };
  document.querySelectorAll('.sidebar a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      updateActiveLink(targetId);
      const targetSection = document.querySelector(targetId);
      if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});
</script>
</html>

Revision as of 12:48, 9 November 2023

<html> <style> 

   @media (max-width: 767px) {
       .content {
           padding: 2em 1em;
           max-width: none;
       }
       .heading {
           font-size: 1.5em;
       }
       .sub-heading {
           font-size: 1em;
       }
       .description {
           font-size: 0.875em;
       }
       .input-container {
           max-width: none;
           height: auto;
       }
       .search-icon {
           margin-left: 1em;
       }
       .search-input {
           padding-left: 1em;
           padding-right: 1em;
       }
   }

</style>

Model Samples
MODEL SAMPLES
Get started with MDriven sample models. Explore our models and choose what you want to build..
Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Model_Examples&oldid=12830"

© MDRIVEN . All Rights Reserved

API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved