تصنيف:زيارة وارث
<!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 {
float: left;
width: 60%;
margin-right: 20px;
}
/* WIKI INFOBOX TEMPLATE - Main Component */
.wiki-infobox {
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 {
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>
Wiki Infobox Template
This template creates Wikipedia-style infoboxes that can be embedded in any article or topic page.
Example Article
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.
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.
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.
Topic Title
Subtitle or Type
<img src="https://via.placeholder.com/250x200/4a90e2/ffffff?text=Main+Image" alt="Main topic image">
Caption describing the image
| Basic Information | |
| Type: | Example Type |
| Origin: | <a href="#">Place of Origin</a> |
| Founded: | Date or Year |
| Status: | Active/Inactive |
| Details | |
| Category: |
|
| Related: |
<a href="#">Related Topic 1</a> |
| Website: | <a href="#">Official Website</a> |
Categories:
<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>
HTML Template Code
<button class="copy-button" onclick="copyTemplate()">Copy Template</button>
<!-- 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> <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>