|
|
| Line 1: |
Line 1: |
| <!-- Beautiful Hero Section - All in One Template --> | | <templatestyles src="Template:Accession/styles.css" /> |
| | |
| | <!-- Beautiful Hero Section --> |
| <div class="accession-hero"> | | <div class="accession-hero"> |
| | | [Your existing hero HTML here] |
| <!-- Photo Gallery Section -->
| |
| <div class="hero-gallery">
| |
| <div class="gallery-main">
| |
| <!-- Primary hero image -->
| |
| <div class="hero-image">
| |
| {{#if: {{#show: {{{1}}} | ?Has whole plant in habitat photo}} |
| |
| <img src="/images/placeholder-plant.jpg" alt="{{PAGENAME}} in habitat" class="hero-img">
| |
| |
| |
| <div class="hero-placeholder">
| |
| <div class="placeholder-icon">🌿</div>
| |
| <div class="placeholder-text">No primary image available</div>
| |
| </div>
| |
| }}
| |
|
| |
| <!-- Image overlay with key info -->
| |
| <div class="hero-overlay">
| |
| <div class="hero-title">{{PAGENAME}}</div>
| |
| <div class="hero-subtitle">{{#show: {{{1}}} | ?Has accession ID | default=Accession ID not specified}}</div>
| |
| <div class="hero-location">
| |
| {{#show: {{{1}}} | ?Has locality}}, {{#show: {{{1}}} | ?Has province}} • {{#show: {{{1}}} | ?Has collection date}}
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- Gallery thumbnails -->
| |
| <div class="gallery-thumbs">
| |
| {{#if: {{#show: {{{1}}} | ?Has flowering branches photo}} |
| |
| <div class="thumb active">
| |
| <img src="/images/placeholder-flowering.jpg" alt="Flowering branches">
| |
| <span class="thumb-label">Flowering</span>
| |
| </div>
| |
| }}
| |
| {{#if: {{#show: {{{1}}} | ?Has close-up inflorescences photo}} |
| |
| <div class="thumb">
| |
| <img src="/images/placeholder-closeup.jpg" alt="Close-up inflorescences">
| |
| <span class="thumb-label">Close-up</span>
| |
| </div>
| |
| }}
| |
| {{#if: {{#show: {{{1}}} | ?Has habitat overview photo}} |
| |
| <div class="thumb">
| |
| <img src="/images/placeholder-habitat.jpg" alt="Habitat overview">
| |
| <span class="thumb-label">Habitat</span>
| |
| </div>
| |
| }}
| |
| {{#if: {{#show: {{{1}}} | ?Has farmer grower portraits}} |
| |
| <div class="thumb">
| |
| <img src="/images/placeholder-farmer.jpg" alt="Farmer portrait">
| |
| <span class="thumb-label">Farmer</span>
| |
| </div>
| |
| }}
| |
| </div>
| |
| </div>
| |
| | |
| <!-- Key Stats Dashboard -->
| |
| <div class="hero-stats">
| |
|
| |
| <!-- Conservation Status Card -->
| |
| <div class="stat-card status-card {{#switch: {{#show: {{{1}}} | ?Has conservation priority | link=none}}
| |
| | Critical = critical
| |
| | High = high
| |
| | Medium = medium
| |
| | Low = low
| |
| | #default = unknown
| |
| }}">
| |
| <div class="stat-icon">🛡️</div>
| |
| <div class="stat-content">
| |
| <div class="stat-label">Conservation Status</div>
| |
| <div class="stat-value">{{#show: {{{1}}} | ?Has conservation priority | default=Unknown}}</div>
| |
| <div class="stat-detail">{{#show: {{{1}}} | ?Has cultivation status | default=Status unknown}}</div>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- Collection Info Card -->
| |
| <div class="stat-card collection-card">
| |
| <div class="stat-icon">📅</div>
| |
| <div class="stat-content">
| |
| <div class="stat-label">Collection</div>
| |
| <div class="stat-value">{{#show: {{{1}}} | ?Has collection date | default=Date unknown}}</div>
| |
| <div class="stat-detail">{{#show: {{{1}}} | ?Has collection type | default=Type unknown}} • {{#show: {{{1}}} | ?Has collector | default=Collector unknown}}</div>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- Location Card -->
| |
| <div class="stat-card location-card">
| |
| <div class="stat-icon">📍</div>
| |
| <div class="stat-content">
| |
| <div class="stat-label">Location</div>
| |
| <div class="stat-value">{{#show: {{{1}}} | ?Has elevation | default=Unknown}}{{#if: {{#show: {{{1}}} | ?Has elevation}} | m elevation | }}</div>
| |
| <div class="stat-detail">{{#show: {{{1}}} | ?Has GPS coordinates | default=Coordinates not specified}}</div>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- Documentation Quality Card -->
| |
| <div class="stat-card docs-card">
| |
| <div class="stat-icon">📋</div>
| |
| <div class="stat-content">
| |
| <div class="stat-label">Documentation</div>
| |
| <div class="stat-value">{{#show: {{{1}}} | ?Has documentation status | default=Unknown}}</div>
| |
| <div class="stat-detail">
| |
| {{#if: {{#show: {{{1}}} | ?Has point of origin documentation}} | ✓ | ✗}} Origin •
| |
| {{#if: {{#show: {{{1}}} | ?Has photographic metadata preserved}} | ✓ | ✗}} Photos •
| |
| {{#if: {{#show: {{{1}}} | ?Has chain of custody maintained}} | ✓ | ✗}} Custody
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| </div>
| |
| | |
| <!-- Geographic Hierarchy Breadcrumb -->
| |
| <div class="hero-breadcrumb">
| |
| <div class="breadcrumb-container">
| |
| <div class="breadcrumb-item">
| |
| <span class="breadcrumb-icon">🌍</span>
| |
| <span class="breadcrumb-text">{{#show: {{{1}}} | ?Has country | default=Unknown Country}}</span>
| |
| </div>
| |
| {{#if: {{#show: {{{1}}} | ?Has growing region}} |
| |
| <div class="breadcrumb-arrow">→</div>
| |
| <div class="breadcrumb-item">
| |
| <span class="breadcrumb-text">{{#show: {{{1}}} | ?Has growing region}}</span>
| |
| </div>
| |
| }}
| |
| {{#if: {{#show: {{{1}}} | ?Has growing area}} |
| |
| <div class="breadcrumb-arrow">→</div>
| |
| <div class="breadcrumb-item">
| |
| <span class="breadcrumb-text">{{#show: {{{1}}} | ?Has growing area}}</span>
| |
| </div>
| |
| }}
| |
| {{#if: {{#show: {{{1}}} | ?Has appellation}} |
| |
| <div class="breadcrumb-arrow">→</div>
| |
| <div class="breadcrumb-item">
| |
| <span class="breadcrumb-text">{{#show: {{{1}}} | ?Has appellation}}</span>
| |
| </div>
| |
| }}
| |
| {{#if: {{#show: {{{1}}} | ?Has field}} |
| |
| <div class="breadcrumb-arrow">→</div>
| |
| <div class="breadcrumb-item current">
| |
| <span class="breadcrumb-text">{{#show: {{{1}}} | ?Has field}}</span>
| |
| </div>
| |
| }}
| |
| </div>
| |
| </div>
| |
| | |
| <!-- Interactive Map Section -->
| |
| <div class="hero-map">
| |
| <div class="map-container">
| |
| {{#if: {{#show: {{{1}}} | ?Has GPS coordinates}} |
| |
| <!-- Map will be rendered here with coordinates -->
| |
| <div class="map-placeholder">
| |
| <div class="map-icon">🗺️</div>
| |
| <div class="map-coords">{{#show: {{{1}}} | ?Has GPS coordinates}}</div>
| |
| <div class="map-text">Interactive map loading...</div>
| |
| </div>
| |
| |
| |
| <div class="map-unavailable">
| |
| <div class="map-icon">📍</div>
| |
| <div class="map-text">Location coordinates not available</div>
| |
| </div>
| |
| }}
| |
| </div>
| |
|
| |
| <!-- Quick Actions -->
| |
| <div class="map-actions">
| |
| {{#if: {{#show: {{{1}}} | ?Has GPS coordinates}} |
| |
| <button class="action-btn primary">📍 View on Map</button>
| |
| <button class="action-btn secondary">🔗 Share Location</button>
| |
| }}
| |
| <button class="action-btn secondary">📁 Download Data</button>
| |
| </div>
| |
| </div>
| |
| | |
| </div> | | </div> |
|
| |
| <!-- Temporary placeholder for detailed sections -->
| |
| <div class="coming-soon">
| |
| <div class="coming-soon-content">
| |
| <h3>📋 Detailed Information</h3>
| |
| <p>Additional sections (botanical description, cultural context, conservation details) will be added here with beautiful, scannable design.</p>
| |
| <p><em>For now, all essential information is displayed in the hero section above.</em></p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- ALL CSS STYLES IN ONE PLACE -->
| |
| <style>
| |
| .accession-hero {
| |
| margin-bottom: 2rem;
| |
| }
| |
|
| |
| /* Gallery Styles */
| |
| .hero-gallery {
| |
| margin-bottom: 1.5rem;
| |
| }
| |
|
| |
| .hero-image {
| |
| position: relative;
| |
| width: 100%;
| |
| height: 400px;
| |
| border-radius: 12px;
| |
| overflow: hidden;
| |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
| |
| }
| |
|
| |
| .hero-img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| }
| |
|
| |
| .hero-placeholder {
| |
| width: 100%;
| |
| height: 100%;
| |
| background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: center;
| |
| color: #64748b;
| |
| }
| |
|
| |
| .placeholder-icon {
| |
| font-size: 4rem;
| |
| margin-bottom: 1rem;
| |
| }
| |
|
| |
| .placeholder-text {
| |
| font-size: 1.1rem;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .hero-overlay {
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
| |
| color: white;
| |
| padding: 2rem;
| |
| }
| |
|
| |
| .hero-title {
| |
| font-size: 2.5rem;
| |
| font-weight: 700;
| |
| margin-bottom: 0.5rem;
| |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
| |
| }
| |
|
| |
| .hero-subtitle {
| |
| font-size: 1.1rem;
| |
| opacity: 0.9;
| |
| font-family: 'SF Mono', monospace;
| |
| margin-bottom: 0.5rem;
| |
| }
| |
|
| |
| .hero-location {
| |
| font-size: 1rem;
| |
| opacity: 0.8;
| |
| }
| |
|
| |
| .gallery-thumbs {
| |
| display: flex;
| |
| gap: 0.75rem;
| |
| margin-top: 1rem;
| |
| overflow-x: auto;
| |
| padding: 0.5rem 0;
| |
| }
| |
|
| |
| .thumb {
| |
| flex-shrink: 0;
| |
| width: 80px;
| |
| height: 60px;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| cursor: pointer;
| |
| opacity: 0.7;
| |
| transition: all 0.3s ease;
| |
| position: relative;
| |
| }
| |
|
| |
| .thumb:hover, .thumb.active {
| |
| opacity: 1;
| |
| transform: scale(1.05);
| |
| }
| |
|
| |
| .thumb img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| }
| |
|
| |
| .thumb-label {
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: rgba(0, 0, 0, 0.7);
| |
| color: white;
| |
| font-size: 0.7rem;
| |
| padding: 0.25rem;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Stats Dashboard */
| |
| .hero-stats {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| gap: 1rem;
| |
| margin-bottom: 1.5rem;
| |
| }
| |
|
| |
| .stat-card {
| |
| background: white;
| |
| border-radius: 12px;
| |
| padding: 1.5rem;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 1rem;
| |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .stat-card:hover {
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
| .stat-icon {
| |
| font-size: 2.5rem;
| |
| flex-shrink: 0;
| |
| }
| |
|
| |
| .stat-content {
| |
| flex: 1;
| |
| }
| |
|
| |
| .stat-label {
| |
| font-size: 0.9rem;
| |
| color: #64748b;
| |
| font-weight: 500;
| |
| margin-bottom: 0.25rem;
| |
| }
| |
|
| |
| .stat-value {
| |
| font-size: 1.3rem;
| |
| font-weight: 700;
| |
| color: #1e293b;
| |
| margin-bottom: 0.25rem;
| |
| }
| |
|
| |
| .stat-detail {
| |
| font-size: 0.85rem;
| |
| color: #64748b;
| |
| }
| |
|
| |
| /* Conservation Status Colors */
| |
| .status-card.critical {
| |
| border-left: 4px solid #ef4444;
| |
| background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
| |
| }
| |
|
| |
| .status-card.high {
| |
| border-left: 4px solid #f97316;
| |
| background: linear-gradient(135deg, #fffbeb 0%, #fed7aa 100%);
| |
| }
| |
|
| |
| .status-card.medium {
| |
| border-left: 4px solid #eab308;
| |
| background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
| |
| }
| |
|
| |
| .status-card.low {
| |
| border-left: 4px solid #22c55e;
| |
| background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
| |
| }
| |
|
| |
| /* Breadcrumb */
| |
| .hero-breadcrumb {
| |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
| |
| border-radius: 12px;
| |
| padding: 1rem 1.5rem;
| |
| margin-bottom: 1.5rem;
| |
| border: 1px solid #e2e8f0;
| |
| }
| |
|
| |
| .breadcrumb-container {
| |
| display: flex;
| |
| align-items: center;
| |
| flex-wrap: wrap;
| |
| gap: 0.5rem;
| |
| }
| |
|
| |
| .breadcrumb-item {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 0.5rem;
| |
| padding: 0.5rem 0.75rem;
| |
| background: white;
| |
| border-radius: 6px;
| |
| font-size: 0.9rem;
| |
| font-weight: 500;
| |
| color: #475569;
| |
| border: 1px solid #e2e8f0;
| |
| }
| |
|
| |
| .breadcrumb-item.current {
| |
| background: #2c5530;
| |
| color: white;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .breadcrumb-arrow {
| |
| color: #94a3b8;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .breadcrumb-icon {
| |
| font-size: 1rem;
| |
| }
| |
|
| |
| /* Map Section */
| |
| .hero-map {
| |
| background: white;
| |
| border-radius: 12px;
| |
| overflow: hidden;
| |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
| |
| }
| |
|
| |
| .map-container {
| |
| height: 200px;
| |
| background: #f1f5f9;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| position: relative;
| |
| }
| |
|
| |
| .map-placeholder, .map-unavailable {
| |
| text-align: center;
| |
| color: #64748b;
| |
| }
| |
|
| |
| .map-icon {
| |
| font-size: 3rem;
| |
| margin-bottom: 0.5rem;
| |
| }
| |
|
| |
| .map-coords {
| |
| font-family: 'SF Mono', monospace;
| |
| font-size: 0.9rem;
| |
| margin-bottom: 0.5rem;
| |
| font-weight: 600;
| |
| color: #1e293b;
| |
| }
| |
|
| |
| .map-text {
| |
| font-size: 1rem;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .map-actions {
| |
| padding: 1rem;
| |
| display: flex;
| |
| gap: 0.75rem;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| .action-btn {
| |
| padding: 0.75rem 1.5rem;
| |
| border-radius: 8px;
| |
| font-weight: 600;
| |
| font-size: 0.9rem;
| |
| cursor: pointer;
| |
| transition: all 0.3s ease;
| |
| border: none;
| |
| }
| |
|
| |
| .action-btn.primary {
| |
| background: #2c5530;
| |
| color: white;
| |
| }
| |
|
| |
| .action-btn.primary:hover {
| |
| background: #22452a;
| |
| transform: translateY(-1px);
| |
| }
| |
|
| |
| .action-btn.secondary {
| |
| background: #f1f5f9;
| |
| color: #475569;
| |
| border: 1px solid #e2e8f0;
| |
| }
| |
|
| |
| .action-btn.secondary:hover {
| |
| background: #e2e8f0;
| |
| transform: translateY(-1px);
| |
| }
| |
|
| |
| /* Coming Soon Placeholder */
| |
| .coming-soon {
| |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
| |
| border: 2px dashed #cbd5e0;
| |
| border-radius: 12px;
| |
| padding: 2rem;
| |
| margin: 2rem 0;
| |
| text-align: center;
| |
| }
| |
|
| |
| .coming-soon-content {
| |
| max-width: 500px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| .coming-soon h3 {
| |
| color: #475569;
| |
| margin-bottom: 1rem;
| |
| }
| |
|
| |
| .coming-soon p {
| |
| color: #64748b;
| |
| margin-bottom: 0.5rem;
| |
| }
| |
|
| |
| /* Mobile Responsive */
| |
| @media (max-width: 768px) {
| |
| .hero-title {
| |
| font-size: 1.8rem;
| |
| }
| |
|
| |
| .hero-stats {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .breadcrumb-container {
| |
| flex-direction: column;
| |
| align-items: stretch;
| |
| }
| |
|
| |
| .breadcrumb-arrow {
| |
| transform: rotate(90deg);
| |
| align-self: center;
| |
| }
| |
|
| |
| .map-actions {
| |
| flex-direction: column;
| |
| }
| |
| }
| |
| </style>
| |
|
| |
| <!-- Auto-categorization -->
| |
| {{#show: {{{1}}} | ?Has country | template=Category link | link=none | sep= }}
| |
| {{#show: {{{1}}} | ?Has growing region | template=Category link | link=none | sep= }}
| |
| {{#show: {{{1}}} | ?Has documentation status | template=Category link | link=none | sep= }}
| |
| {{#show: {{{1}}} | ?Has conservation priority | template=Category link | link=none | sep= }}
| |
| [[Category:Accessions]]
| |
|
| |
| <noinclude>
| |
| == Clean Accession Template ==
| |
|
| |
| This is the new, clean accession template with beautiful hero section and all CSS included.
| |
|
| |
| === Usage ===
| |
| <pre>{{Accession|{{PAGENAME}}}}</pre>
| |
|
| |
| === Features ===
| |
| * Beautiful hero section with photo gallery
| |
| * Key statistics dashboard
| |
| * Geographic breadcrumb navigation
| |
| * Conservation status indicators
| |
| * Location map integration
| |
| * Mobile-responsive design
| |
| * All CSS included in template
| |
|
| |
| [[Category:Templates]]
| |
| </noinclude>
| |
