|
|
| (٨ مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) |
| سطر ١: |
سطر ١: |
| <!DOCTYPE html>
| | == '''قال الإمام الصادق (عليه السلام):''' == |
| <html lang="en">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Wiki Infobox Template</title>
| |
| <style>
| |
| body {
| |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
| |
| line-height: 1.6;
| |
| color: #333;
| |
| background: #f8f9fa;
| |
| padding: 20px;
| |
| }
| |
|
| |
|
| .demo-container {
| | == '''"من زار الحسين (عليه السلام) عارفًا بحقه غفر الله له ما تقدم من ذنبه وما تأخر."''' == |
| max-width: 800px;
| |
| margin: 0 auto;
| |
| background: white;
| |
| padding: 30px;
| |
| border-radius: 10px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1);
| |
| }
| |
|
| |
|
| .demo-text {
| | === '''كامل الزيارات، ص 139تؤكد هذه الرواية الشريفة عظمة زيارة الإمام الحسين (ع)، خصوصًا حين تكون الزيارة عن معرفة ووعي بحقه ومكانته، حيث يُكتب للزائر غفران الذنوب السابقة واللاحقة.''' === |
| float: left;
| | ------ |
| width: 60%;
| |
| margin-right: 20px;
| |
| }
| |
|
| |
|
| /* WIKI INFOBOX TEMPLATE - Main Component */
| | === uk,hk === |
| .wiki-infobox {
| | 55 |
| float: right;
| | == ------- == |
| width: 300px;
| |
| margin: 0 0 20px 20px;
| |
| background: #f8f9fa;
| |
| border: 1px solid #a2a9b1;
| |
| border-radius: 3px;
| |
| font-size: 14px;
| |
| line-height: 1.4;
| |
| clear: right;
| |
| }
| |
|
| |
|
| .wiki-infobox-header {
| | == kdsfkskjf'JDF'sfj'SDJ== |
| background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
| | [[تصنيف:زيارة الاربعين]] |
| color: white;
| | == [[تصنيف:صفحات مفهرسة]] == |
| padding: 12px 15px;
| |
| font-size: 16px;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| border-radius: 3px 3px 0 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .wiki-infobox-subheader {
| |
| background: #eaecf0;
| |
| color: #333;
| |
| padding: 8px 15px;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| text-align: center;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| margin: 0;
| |
| }
| |
| | |
| .wiki-infobox-image {
| |
| text-align: center;
| |
| padding: 15px;
| |
| background: white;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| }
| |
| | |
| .wiki-infobox-image img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| border: 1px solid #ddd;
| |
| border-radius: 3px;
| |
| }
| |
| | |
| .wiki-infobox-caption {
| |
| font-size: 12px;
| |
| color: #666;
| |
| margin-top: 8px;
| |
| font-style: italic;
| |
| }
| |
| | |
| .wiki-infobox-table {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| background: white;
| |
| }
| |
| | |
| .wiki-infobox-table tr {
| |
| border-bottom: 1px solid #eaecf0;
| |
| }
| |
| | |
| .wiki-infobox-table tr:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .wiki-infobox-label {
| |
| background: #f8f9fa;
| |
| padding: 8px 12px;
| |
| font-weight: 600;
| |
| color: #333;
| |
| width: 35%;
| |
| vertical-align: top;
| |
| border-right: 1px solid #eaecf0;
| |
| }
| |
| | |
| .wiki-infobox-value {
| |
| padding: 8px 12px;
| |
| vertical-align: top;
| |
| background: white;
| |
| }
| |
| | |
| .wiki-infobox-section {
| |
| background: #f0f0f0;
| |
| padding: 8px 12px;
| |
| font-weight: bold;
| |
| color: #333;
| |
| text-align: center;
| |
| border-top: 1px solid #a2a9b1;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| }
| |
| | |
| .wiki-infobox-value a {
| |
| color: #0645ad;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .wiki-infobox-value a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| .wiki-infobox-list {
| |
| margin: 0;
| |
| padding-left: 15px;
| |
| }
| |
| | |
| .wiki-infobox-list li {
| |
| margin: 2px 0;
| |
| }
| |
| | |
| /* Categories template */
| |
| .wiki-categories {
| |
| margin-top: 30px;
| |
| padding: 10px;
| |
| background: #f8f9fa;
| |
| border: 1px solid #a2a9b1;
| |
| border-radius: 3px;
| |
| font-size: 13px;
| |
| }
| |
| | |
| .wiki-categories-label {
| |
| font-weight: bold;
| |
| color: #666;
| |
| margin-right: 10px;
| |
| }
| |
| | |
| .wiki-category-link {
| |
| color: #0645ad;
| |
| text-decoration: none;
| |
| margin-right: 5px;
| |
| }
| |
| | |
| .wiki-category-link:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Navigation template */
| |
| .wiki-navbox {
| |
| margin-top: 20px;
| |
| background: #f8f9fa;
| |
| border: 1px solid #a2a9b1;
| |
| border-radius: 3px;
| |
| font-size: 13px;
| |
| }
| |
| | |
| .wiki-navbox-header {
| |
| background: #ccccff;
| |
| padding: 8px 12px;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| }
| |
| | |
| .wiki-navbox-content {
| |
| padding: 10px 12px;
| |
| text-align: center;
| |
| }
| |
| | |
| .wiki-navbox-content a {
| |
| color: #0645ad;
| |
| text-decoration: none;
| |
| margin: 0 5px;
| |
| }
| |
| | |
| .wiki-navbox-content a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Copy button styling */
| |
| .copy-button {
| |
| background: #4a90e2;
| |
| color: white;
| |
| border: none;
| |
| padding: 8px 16px;
| |
| border-radius: 4px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| margin: 10px 0;
| |
| }
| |
| | |
| .copy-button:hover {
| |
| background: #357abd;
| |
| }
| |
| | |
| .code-block {
| |
| background: #f6f8fa;
| |
| border: 1px solid #d0d7de;
| |
| border-radius: 6px;
| |
| padding: 16px;
| |
| margin: 20px 0;
| |
| font-family: 'Courier New', monospace;
| |
| font-size: 12px;
| |
| overflow-x: auto;
| |
| white-space: pre-wrap;
| |
| }
| |
| | |
| .clearfix::after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |
| | |
| h2 {
| |
| color: #333;
| |
| border-bottom: 2px solid #4a90e2;
| |
| padding-bottom: 5px;
| |
| margin-top: 30px;
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .wiki-infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 20px 0;
| |
| }
| |
|
| |
| .demo-text {
| |
| float: none;
| |
| width: 100%;
| |
| margin-right: 0;
| |
| }
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <div class="demo-container">
| |
| <h1>Wiki Infobox Template</h1>
| |
| <p>This template creates Wikipedia-style infoboxes that can be embedded in any article or topic page.</p>
| |
| | |
| <div class="clearfix">
| |
| <div class="demo-text">
| |
| <h2>Example Article</h2>
| |
| <p>This is sample article text that flows around the infobox. The infobox provides quick access to key information about the topic without interrupting the reading flow.</p>
| |
|
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
| |
|
| |
| <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
| |
| </div>
| |
| | |
| <!-- MAIN INFOBOX TEMPLATE -->
| |
| <div class="wiki-infobox">
| |
| <div class="wiki-infobox-header">Topic Title</div>
| |
| <div class="wiki-infobox-subheader">Subtitle or Type</div>
| |
|
| |
| <div class="wiki-infobox-image">
| |
| <img src="https://via.placeholder.com/250x200/4a90e2/ffffff?text=Main+Image" alt="Main topic image">
| |
| <div class="wiki-infobox-caption">Caption describing the image</div>
| |
| </div>
| |
|
| |
| <table class="wiki-infobox-table">
| |
| <tr>
| |
| <td class="wiki-infobox-section" colspan="2">Basic Information</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Type:</td>
| |
| <td class="wiki-infobox-value">Example Type</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Origin:</td>
| |
| <td class="wiki-infobox-value"><a href="#">Place of Origin</a></td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Founded:</td>
| |
| <td class="wiki-infobox-value">Date or Year</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Status:</td>
| |
| <td class="wiki-infobox-value">Active/Inactive</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-section" colspan="2">Details</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Category:</td>
| |
| <td class="wiki-infobox-value">
| |
| <ul class="wiki-infobox-list">
| |
| <li>Category 1</li>
| |
| <li>Category 2</li>
| |
| <li>Category 3</li>
| |
| </ul>
| |
| </td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Related:</td>
| |
| <td class="wiki-infobox-value">
| |
| <a href="#">Related Topic 1</a><br>
| |
| <a href="#">Related Topic 2</a>
| |
| </td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Website:</td>
| |
| <td class="wiki-infobox-value"><a href="#">Official Website</a></td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| </div>
| |
| | |
| <div style="clear: both;"></div>
| |
| | |
| <!-- CATEGORIES TEMPLATE -->
| |
| <div class="wiki-categories">
| |
| <span class="wiki-categories-label">Categories:</span>
| |
| <a href="#" class="wiki-category-link">Science</a> |
| |
| <a href="#" class="wiki-category-link">Technology</a> |
| |
| <a href="#" class="wiki-category-link">History</a> |
| |
| <a href="#" class="wiki-category-link">Culture</a>
| |
| </div>
| |
| | |
| <!-- NAVIGATION TEMPLATE -->
| |
| <div class="wiki-navbox">
| |
| <div class="wiki-navbox-header">Related Topics Navigation</div>
| |
| <div class="wiki-navbox-content">
| |
| <a href="#">Topic 1</a> •
| |
| <a href="#">Topic 2</a> •
| |
| <a href="#">Topic 3</a> •
| |
| <a href="#">Topic 4</a> •
| |
| <a href="#">Topic 5</a>
| |
| </div>
| |
| </div>
| |
| | |
| <h2>HTML Template Code</h2>
| |
| <button class="copy-button" onclick="copyTemplate()">Copy Template</button>
| |
| <div class="code-block" id="templateCode"><!-- WIKI INFOBOX TEMPLATE -->
| |
| <div class="wiki-infobox">
| |
| <div class="wiki-infobox-header">Topic Title</div>
| |
| <div class="wiki-infobox-subheader">Subtitle or Type</div>
| |
|
| |
| <div class="wiki-infobox-image">
| |
| <img src="your-image.jpg" alt="Main topic image">
| |
| <div class="wiki-infobox-caption">Caption describing the image</div>
| |
| </div>
| |
|
| |
| <table class="wiki-infobox-table">
| |
| <tr>
| |
| <td class="wiki-infobox-section" colspan="2">Basic Information</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Type:</td>
| |
| <td class="wiki-infobox-value">Example Type</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Origin:</td>
| |
| <td class="wiki-infobox-value"><a href="#">Place of Origin</a></td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Founded:</td>
| |
| <td class="wiki-infobox-value">Date or Year</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Status:</td>
| |
| <td class="wiki-infobox-value">Active/Inactive</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-section" colspan="2">Details</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Category:</td>
| |
| <td class="wiki-infobox-value">
| |
| <ul class="wiki-infobox-list">
| |
| <li>Category 1</li>
| |
| <li>Category 2</li>
| |
| <li>Category 3</li>
| |
| </ul>
| |
| </td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Related:</td>
| |
| <td class="wiki-infobox-value">
| |
| <a href="#">Related Topic 1</a><br>
| |
| <a href="#">Related Topic 2</a>
| |
| </td>
| |
| </tr>
| |
| <tr>
| |
| <td class="wiki-infobox-label">Website:</td>
| |
| <td class="wiki-infobox-value"><a href="#">Official Website</a></td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| | |
| <!-- CATEGORIES TEMPLATE -->
| |
| <div class="wiki-categories">
| |
| <span class="wiki-categories-label">Categories:</span>
| |
| <a href="#" class="wiki-category-link">Science</a> |
| |
| <a href="#" class="wiki-category-link">Technology</a> |
| |
| <a href="#" class="wiki-category-link">History</a> |
| |
| <a href="#" class="wiki-category-link">Culture</a>
| |
| </div>
| |
| | |
| <!-- NAVIGATION TEMPLATE -->
| |
| <div class="wiki-navbox">
| |
| <div class="wiki-navbox-header">Related Topics Navigation</div>
| |
| <div class="wiki-navbox-content">
| |
| <a href="#">Topic 1</a> •
| |
| <a href="#">Topic 2</a> •
| |
| <a href="#">Topic 3</a> •
| |
| <a href="#">Topic 4</a> •
| |
| <a href="#">Topic 5</a>
| |
| </div>
| |
| </div></div>
| |
| </div>
| |
| | |
| <script>
| |
| function copyTemplate() {
| |
| const templateCode = document.getElementById('templateCode').textContent;
| |
|
| |
| if (navigator.clipboard && navigator.clipboard.writeText) {
| |
| navigator.clipboard.writeText(templateCode).then(() => {
| |
| const button = document.querySelector('.copy-button');
| |
| const originalText = button.textContent;
| |
| button.textContent = 'Copied!';
| |
| button.style.background = '#28a745';
| |
|
| |
| setTimeout(() => {
| |
| button.textContent = originalText;
| |
| button.style.background = '#4a90e2';
| |
| }, 2000);
| |
| }).catch(err => {
| |
| alert('Failed to copy to clipboard');
| |
| });
| |
| } else {
| |
| // Fallback for older browsers
| |
| const textArea = document.createElement('textarea');
| |
| textArea.value = templateCode;
| |
| document.body.appendChild(textArea);
| |
| textArea.select();
| |
|
| |
| try {
| |
| document.execCommand('copy');
| |
| const button = document.querySelector('.copy-button');
| |
| const originalText = button.textContent;
| |
| button.textContent = 'Copied!';
| |
| button.style.background = '#28a745';
| |
|
| |
| setTimeout(() => {
| |
| button.textContent = originalText;
| |
| button.style.background = '#4a90e2';
| |
| }, 2000);
| |
| } catch (err) {
| |
| alert('Failed to copy to clipboard');
| |
| }
| |
|
| |
| document.body.removeChild(textArea);
| |
| }
| |
| }
| |
| </script>
| |
| </body>
| |
| </html>
| |
