Model Examples
No edit summary
No edit summary
Line 41: Line 41:
.container-model {
.container-model {
     display: flex;
     display: flex;
     padding-left: 5em;  
     padding-left: 5em;
     padding-right: 5em;  
     padding-right: 5em;
}
}


.sidebar {
.sidebar {
   flex: 0 0 200px;  
   flex: 0 0 200px;
   padding: 20px;
   padding: 20px;
   display: flex;
   display: flex;
Line 113: Line 113:
     font-size: 14px;
     font-size: 14px;
     font-weight: 600;
     font-weight: 600;
     text-decoration: none;  
     text-decoration: none;
     transition: background-color 0.3s, color 0.3s;  
     transition: background-color 0.3s, color 0.3s;
}
}


Line 120: Line 120:
     width: 14px;
     width: 14px;
     height: 15px;
     height: 15px;
     display: block;  
     display: block;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none"><path d="M1 10.6094L1 11.3594C1 12.602 2.00736 13.6094 3.25 13.6094L10.75 13.6094C11.9926 13.6094 13 12.602 13 11.3594L13 10.6094M10 7.60937L7 10.6094M7 10.6094L4 7.60937M7 10.6094L7 1.60937" stroke="%23F77A07" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none"><path d="M1 10.6094L1 11.3594C1 12.602 2.00736 13.6094 3.25 13.6094L10.75 13.6094C11.9926 13.6094 13 12.602 13 11.3594L13 10.6094M10 7.60937L7 10.6094M7 10.6094L4 7.60937M7 10.6094L7 1.60937" stroke="%23F77A07" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
     background-size: contain;  
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-position: center;  
     background-position: center;
}
}


Line 158: Line 158:
   }
   }


  .cards {
.cards {
     margin-bottom: 20px; /* Adjust space between card rows as needed */
     margin-bottom: 20px; /* Adjust space between card rows as needed */
     width: auto; /* Auto width for flexibility */
     width: auto; /* Auto width for flexibility */
Line 203: Line 203:
}
}
.section-divider {
.section-divider {
     border: 0;  
     border: 0;
     height: 1px;  
     height: 1px;
     background-color: #E3E8EE;  
     background-color: #E3E8EE;
     margin: 20px 0;  
     margin: 20px 0;
}
}
</style>
</style>
Line 239: Line 239:
       <!-- Card 1 -->
       <!-- Card 1 -->
       <div class="cards">
       <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 251: Line 251:
<!-- Card 2 -->
<!-- Card 2 -->
       <div class="cards">
       <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model2.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model2.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 263: Line 263:
<!-- Card 3 -->
<!-- Card 3 -->
         <div class="cards">
         <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model3.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model3.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 275: Line 275:
<!-- Card 4 -->
<!-- Card 4 -->
         <div class="cards">
         <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model4.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model4.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 287: Line 287:
<!-- Card 5 -->
<!-- Card 5 -->
       <div class="cards">
       <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model5.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model5.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 299: Line 299:
<!-- Card 6 -->
<!-- Card 6 -->
       <div class="cards">
       <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model6.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model6.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 315: Line 315:
   <section id="another-model">
   <section id="another-model">
         <h2>Patterns</h2>
         <h2>Patterns</h2>
<div><span style="color: black; font-size: 16px; font-weight: 400; word-wrap: break-word">Packages primarily used by importing into an existing model. </span><a  
<div><span style="color: black; font-size: 16px; font-weight: 400; word-wrap: break-word">Packages primarily used by importing into an existing model. </span><a
  href="#" style="color: #1A50AD; font-size: 16px;  font-weight: 500; text-decoration: underline; word-wrap: break-word">How to merge .modlr file?</a></div>
  href="#" style="color: #1A50AD; font-size: 16px;  font-weight: 500; text-decoration: underline; word-wrap: break-word">How to merge .modlr file?</a></div>
     <div class="card-container">
     <div class="card-container">
       <!-- Card 1 -->
       <!-- Card 1 -->
       <div class="cards">
       <div class="cards">
   <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
   <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 332: Line 332:
       <!-- Card 2 -->
       <!-- Card 2 -->
       <div class="cards">
       <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 344: Line 344:
<!-- Card 3 -->
<!-- Card 3 -->
         <div class="cards">
         <div class="cards">
   <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
   <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 356: Line 356:
<!-- Card 4 -->
<!-- Card 4 -->
         <div class="cards">
         <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 368: Line 368:
<!-- Card 5 -->
<!-- Card 5 -->
         <div class="cards">
         <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 388: Line 388:
       <!-- Card 1 -->
       <!-- Card 1 -->
       <div class="cards">
       <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 400: Line 400:
       <!-- Card 2 -->
       <!-- Card 2 -->
       <div class="cards">
       <div class="cards">
   <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
   <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 412: Line 412:
<!-- Card 3 -->
<!-- Card 3 -->
       <div class="cards">
       <div class="cards">
   <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
   <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 424: Line 424:
<!-- Card 4 -->
<!-- Card 4 -->
       <div class="cards">
       <div class="cards">
   <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
   <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 436: Line 436:
<!-- Card 5 -->
<!-- Card 5 -->
         <div class="cards">
         <div class="cards">
     <img src="https://newwiki.mdriven.net/images/model1.svg" alt="Placeholder" width="301" height="175">
     <img src="/images/model1.svg" alt="Placeholder" width="301" height="175">
     <div class="contentss">
     <div class="contentss">
         <div class="title">Base App</div>
         <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="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
         <a href="/path/to/your/download.zip" class="download-link">
         <a href="/path/to/your/download.zip" class="download-link">
             <span class="download-indicator"></span>  
             <span class="download-indicator"></span>
             <span>Download .zip</span>
             <span>Download .zip</span>
         </a>
         </a>
Line 456: Line 456:
     filter = input.value.toUpperCase();
     filter = input.value.toUpperCase();
     cards = document.getElementsByClassName("cards");
     cards = document.getElementsByClassName("cards");
   
 
     for (i = 0; i < cards.length; i++) {
     for (i = 0; i < cards.length; i++) {
       title = cards[i].getElementsByClassName("title")[0];
       title = cards[i].getElementsByClassName("title")[0];
Line 466: Line 466:
           cards[i].style.display = "none";
           cards[i].style.display = "none";
         }
         }
       }      
       }    
     }
     }
   }
   }
Line 486: Line 486:
   </script>
   </script>
   <script>
   <script>
 
   document.addEventListener('DOMContentLoaded', (event) => {
   document.addEventListener('DOMContentLoaded', (event) => {
     document.querySelectorAll('.sidebar a').forEach(link => {
     document.querySelectorAll('.sidebar a').forEach(link => {
Line 505: Line 505:
       <path d="M0 0C2.20914 0 4 1.79086 4 4L4 12C4 14.2091 2.20914 16 0 16L0 0Z" fill="#1A50AD"/>
       <path d="M0 0C2.20914 0 4 1.79086 4 4L4 12C4 14.2091 2.20914 16 0 16L0 0Z" fill="#1A50AD"/>
     </svg>`;
     </svg>`;
 
     // Function to create a new SVG element
     // Function to create a new SVG element
     const createSvgElement = (htmlString) => {
     const createSvgElement = (htmlString) => {
Line 512: Line 512:
       return div.firstChild;
       return div.firstChild;
     };
     };
 
     // Function to update active link style and SVG
     // Function to update active link style and SVG
     const updateActiveLink = (targetId) => {
     const updateActiveLink = (targetId) => {
Line 530: Line 530:
     };
     };


updateActiveLink('#complete-models');
updateActiveLink('#complete-models');
 
     document.querySelectorAll('.sidebar a').forEach(link => {
     document.querySelectorAll('.sidebar a').forEach(link => {
       link.addEventListener('click', function(e) {
       link.addEventListener('click', function(e) {

Revision as of 20:44, 19 December 2023

Model Samples
MODEL SAMPLES
Get started with MDriven sample models. Explore our models and choose what you want to build.
Complete models Patterns Extensions

Complete Models

Use ready-made "complete system" (model+data) to apply to an existing turnkey site.
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip

Patterns

Packages primarily used by importing into an existing model. How to merge .modlr file?
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip

Extensions

Ready-made solutions used by importing into an existing model. How to merge .modlr file?
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Placeholder
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip

Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Model_Examples&oldid=12875"

© MDRIVEN . All Rights Reserved

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

© MDRIVEN . All Rights Reserved