Toggle search
Toggle menu
11
1
158
Global Bio Index
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:PersonPage: Difference between revisions

Template page
More actions
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
<noinclude>
<!-- ===============================
<style>
Global Bio Index - Profile Template
/* Reset & Base */
PRO UI - FilmFreeway Style
.gbi-container * {
=============================== -->
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* Banner Section */
<!-- COVER BANNER -->
.gbi-profile-banner {
<div class="gbi-banner-wrapper">
  width: 100%;
[[File:{{{banner|globalbanner.jpg}}}|class=gbi-profile-banner]]
  height: 320px;
</div>
  object-fit: cover;
  display: block;
  border-radius: 0;
}
 
/* Profile Header */
.gbi-profile-header {
  position: relative;
  margin-top: -80px;
  padding: 0 40px 30px;
  background: linear-gradient(to bottom, transparent 0%, #ffffff 40%);
}
 
.gbi-profile-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
 
.gbi-name {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 8px;
}
 
.gbi-pronoun {
  font-size: 18px;
  font-weight: 400;
  color: #666;
  margin-left: 8px;
}
 
.gbi-headline {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-top: 8px;
  font-weight: 400;
}
 
/* Tabs Navigation */
.gbi-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 40px;
  margin-bottom: 32px;
  border-bottom: 2px solid #e5e5e5;
  flex-wrap: wrap;
}
 
.gbi-tab {
  padding: 12px 24px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  margin-bottom: -2px;
}
 
.gbi-tab:hover {
  color: #2563eb;
  background-color: #f8fafc;
}
 
.gbi-tab-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}
 
/* Main Layout */
.gbi-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  padding: 0 40px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
 
/* Left Column */
.gbi-left {
  min-width: 0;
}
 
.gbi-section {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
 
.gbi-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f1f1;
}
 
.gbi-section p,
.gbi-section ul,
.gbi-section div {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
}
 
/* Intro Section */
.gbi-intro {
  font-size: 16px;
  line-height: 1.8;
  color: #1f2937;
  margin-bottom: 24px;
}
 
/* Contact & Social */
.gbi-contact-grid {
  display: grid;
  gap: 12px;
}
 
.gbi-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 14px;
}
 
.gbi-contact-label {
  font-weight: 600;
  color: #4b5563;
  min-width: 80px;
}
 
.gbi-contact-value {
  color: #1f2937;
}
 
.gbi-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
 
.gbi-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #2563eb;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s ease;
}
 
.gbi-social-btn:hover {
  background: #1d4ed8;
}
 
/* Photo Gallery */
.gbi-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
 
.gbi-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
  cursor: pointer;
}
 
.gbi-gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
 
/* Right Column - Infobox */
.gbi-right {
  position: sticky;
  top: 20px;
  height: fit-content;
}
 
.gbi-infobox {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
 
.gbi-infobox-header {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
 
.gbi-infobox-body {
  padding: 0;
}
 
.gbi-infobox-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f1f1;
  gap: 12px;
}


.gbi-infobox-row:last-child {
<!-- PROFILE HEADER CENTERED -->
  border-bottom: none;
}
 
.gbi-infobox-label {
  font-weight: 600;
  color: #4b5563;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
 
.gbi-infobox-value {
  color: #1f2937;
  font-size: 14px;
  word-break: break-word;
}
 
/* Media Links */
.gbi-media-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.gbi-media-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
  text-decoration: none;
  color: #1f2937;
  transition: background 0.3s ease;
  font-size: 14px;
}
 
.gbi-media-link:hover {
  background: #f3f4f6;
}
 
/* Achievements */
.gbi-achievement-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.gbi-achievement-item {
  padding: 16px;
  background: #f0f9ff;
  border-left: 4px solid #2563eb;
  border-radius: 4px;
}
 
.gbi-achievement-title {
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 4px;
}
 
.gbi-achievement-desc {
  font-size: 14px;
  color: #374151;
}
 
/* Responsive Design */
@media (max-width: 1024px) {
  .gbi-layout {
    grid-template-columns: 1fr;
    padding: 0 20px 40px;
  }
 
  .gbi-right {
    position: static;
    order: -1;
  }
 
  .gbi-profile-header {
    padding: 0 20px 30px;
  }
 
  .gbi-tabs {
    padding: 0 20px;
  }
}
 
@media (max-width: 640px) {
  .gbi-profile-banner {
    height: 200px;
  }
 
  .gbi-profile-photo {
    width: 120px;
    height: 120px;
  }
 
  .gbi-name {
    font-size: 24px;
  }
 
  .gbi-headline {
    font-size: 16px;
  }
 
  .gbi-tabs {
    gap: 4px;
  }
 
  .gbi-tab {
    padding: 10px 16px;
    font-size: 14px;
  }
 
  .gbi-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
 
  .gbi-infobox-row {
    grid-template-columns: 1fr;
  }
}
 
/* Tab Content Control */
.gbi-tab-content {
  display: none;
}
 
.gbi-tab-content.active {
  display: block;
}
</style>
 
<script>
// Tab functionality
document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.gbi-tab');
  const sections = document.querySelectorAll('.gbi-section');
 
  tabs.forEach((tab, index) => {
    tab.addEventListener('click', function() {
      // Remove active class from all tabs
      tabs.forEach(t => t.classList.remove('gbi-tab-active'));
     
      // Add active class to clicked tab
      this.classList.add('gbi-tab-active');
     
      // Scroll to corresponding section
      if (sections[index]) {
        sections[index].scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});
</script>
</noinclude>
 
<!-- TEMPLATE CODE -->
<div class="gbi-container">
 
<!-- HERO BANNER -->
[[File:{{{banner|globalbanner.jpg}}}|class=gbi-profile-banner|link=]]
 
<!-- PROFILE HEADER -->
<div class="gbi-profile-header">
<div class="gbi-profile-header">
  [[File:{{{image|globalimage.jpg}}}|class=gbi-profile-photo|link=]]
    <div class="gbi-profile-photo-wrapper">
  <h1 class="gbi-name">
        [[File:{{{image|globalimage.jpg}}}|class=gbi-profile-photo]]
    {{{name|Person Name}}} <span class="gbi-pronoun">({{{pronoun|He/Him}}})</span>
    </div>
  </h1>
    <h1 class="gbi-name">
  <p class="gbi-headline">{{{headline|Professional Title / Tagline}}}</p>
        {{{name}}} <span class="gbi-pronoun">({{{pronoun|He/Him}}})</span>
    </h1>
    <p class="gbi-headline">{{{headline|}}}</p>
</div>
</div>


<!-- TABS -->
<!-- TAB NAVIGATION -->
<div class="gbi-tabs">
<div class="gbi-tabs">
  <span class="gbi-tab gbi-tab-active">Biography</span>
    <a href="#bio" class="gbi-tab gbi-tab-active">Bio</a>
  <span class="gbi-tab">Gallery</span>
    <a href="#media" class="gbi-tab">Media</a>
  <span class="gbi-tab">Contact</span>
    <a href="#contact" class="gbi-tab">Contact</a>
  <span class="gbi-tab">Social</span>
    <a href="#social" class="gbi-tab">Social</a>
  <span class="gbi-tab">Achievements</span>
    <a href="#achievements" class="gbi-tab">Achievements</a>
</div>
</div>


<!-- CONTENT LAYOUT -->
<!-- PAGE GRID -->
<div class="gbi-layout">
<div class="gbi-layout">


<!-- LEFT COLUMN -->
    <!-- LEFT COLUMN -->
<div class="gbi-left">
    <div class="gbi-left">


<!-- SHORT INTRO -->
        <div class="gbi-section-card" id="intro">
<div class="gbi-section">
        <h2>Short Intro</h2>
  <div class="gbi-intro">
        {{{intro|No introduction added yet…}}}
    {{{intro|A brief introduction about this person goes here. This should be a concise summary highlighting key aspects of their professional background and achievements.}}}
        </div>
  </div>
</div>


<!-- BIOGRAPHY -->
        <div class="gbi-section-card" id="contact">
<div class="gbi-section">
        <h2>Contact</h2>
  <h2>Biography</h2>
        {{{contact|Not provided}}}
  <div>
        </div>
    {{{bio|Full biography not added yet. This section will contain the complete professional and personal history of the individual.}}}
  </div>
</div>


<!-- PHOTO GALLERY -->
        <div class="gbi-section-card" id="social">
<div class="gbi-section">
        <h2>Social Media</h2>
  <h2>Photo Gallery</h2>
        {{{social_links|}}}
  <div class="gbi-gallery">
        </div>
    {{{photo_gallery|<p style="color: #9ca3af; text-align: center; padding: 40px 0;">No photos uploaded yet</p>}}}
  </div>
</div>


<!-- CONTACT INFO -->
        <div class="gbi-section-card" id="media">
<div class="gbi-section">
        <h2>Media Gallery</h2>
  <h2>Contact Information</h2>
        <div class="gbi-gallery">
  <div class="gbi-contact-grid">
            {{{media_gallery|}}}
    {{{contact|<div class="gbi-contact-item"><span class="gbi-contact-label">Email:</span><span class="gbi-contact-value">Not provided</span></div>}}}
        </div>
  </div>
        </div>
</div>


<!-- SOCIAL MEDIA -->
     </div>
<div class="gbi-section">
  <h2>Social Media</h2>
  <div class="gbi-social-links">
     {{{social_links|<p style="color: #9ca3af;">No social media links added</p>}}}
  </div>
</div>


<!-- MEDIA LINKS -->
    <!-- CENTER COLUMN -->
<div class="gbi-section">
    <div class="gbi-center">
  <h2>Media & Press</h2>
        <div class="gbi-section-card" id="bio">
  <div class="gbi-media-links">
        <h2>Biography</h2>
    {{{media_links|<p style="color: #9ca3af;">No media links available</p>}}}
        {{{bio|Biography not added yet...}}}
  </div>
        </div>
</div>


<!-- ACHIEVEMENTS -->
        <div class="gbi-section-card" id="achievements">
<div class="gbi-section">
        <h2>Achievements</h2>
  <h2>Achievements & Awards</h2>
        {{{achievements|}}}
  <div class="gbi-achievement-list">
        </div>
    {{{achievements|<p style="color: #9ca3af;">No achievements listed yet</p>}}}
    </div>
  </div>
</div>
 
</div>


<!-- RIGHT COLUMN - INFOBOX -->
    <!-- RIGHT COLUMN -->
<div class="gbi-right">
    <div class="gbi-right">
  <div class="gbi-infobox">
         {{Infobox_person
    <div class="gbi-infobox-header">Quick Info</div>
            | birth_date = {{{birth_date|}}}
    <div class="gbi-infobox-body">
            | nationality = {{{nationality|}}}
      <div class="gbi-infobox-row">
            | occupation = {{{occupation|}}}
         <div class="gbi-infobox-label">Birth Date</div>
            | industry = {{{industry|}}}
        <div class="gbi-infobox-value">{{{birth_date|Not specified}}}</div>
            | known_for = {{{known_for|}}}
      </div>
            | website = {{{website|}}}
      <div class="gbi-infobox-row">
        }}
        <div class="gbi-infobox-label">Nationality</div>
        <div class="gbi-infobox-value">{{{nationality|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Occupation</div>
        <div class="gbi-infobox-value">{{{occupation|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Industry</div>
        <div class="gbi-infobox-value">{{{industry|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Known For</div>
        <div class="gbi-infobox-value">{{{known_for|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Website</div>
        <div class="gbi-infobox-value">{{{website|Not provided}}}</div>
      </div>
     </div>
     </div>
  </div>
</div>
</div>


</div>
</div>

Revision as of 14:17, 25 November 2025


File:Globalbanner.jpg 

       File:Globalimage.jpg

{{{name}}} (He/Him) 

   <a href="#bio" class="gbi-tab gbi-tab-active">Bio</a>
   <a href="#media" class="gbi-tab">Media</a>
   <a href="#contact" class="gbi-tab">Contact</a>
   <a href="#social" class="gbi-tab">Social</a>
   <a href="#achievements" class="gbi-tab">Achievements</a>

Short Intro

       No introduction added yet…

Contact

       Not provided

Social Media

Biography

       Biography not added yet...

Achievements

Personal Information
Full Name
Born
Birthplace
Nationality
Occupation
Known For
Awards
Website
Retrieved from "https://globalbioindex.org/index.php?title=Template:PersonPage&oldid=16"