Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

User:Globe/Main page redesign: Difference between revisions

From WikiOasis Meta
Globe (talk | contribs)
Add
Tags: Mobile edit Mobile web edit
(username removed)
rework
Line 49: Line 49:
   color: rgba(255,255,255,0.9);
   color: rgba(255,255,255,0.9);
   margin: 0 0 2rem 0;
   margin: 0 0 2rem 0;
   max-width: 600px;
   max-width: 800px;
   margin-left: auto;
   margin-left: auto;
   margin-right: auto;
   margin-right: auto;
Line 86: Line 86:
   " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.2)'">✨ Request Wiki</span>]]
   " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.2)'">✨ Request Wiki</span>]]
</div>
</div>
  </div>
</div>
<!-- Features Grid -->
<div class="features-grid" style="
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
">
  <!-- Why WikiOasis Card -->
  <div class="feature-card" style="
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
```
<div style="
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
"></div>
<div style="text-align: center; margin-bottom: 1.5rem;">
  <div style="
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 16px;
    margin-bottom: 1rem;
  ">
    [[File:OOjs UI icon userGroup-ltr.svg|30px|link=|style=filter: brightness(0) invert(1);]]
  </div>
  <h3 style="
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
  ">Why WikiOasis?</h3>
</div>
<div class="feature-list" style="space-y: 1rem;">
  <div style="
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  ">
    <div style="
      width: 6px;
      height: 6px;
      background: #10b981;
      border-radius: 50%;
      margin-top: 0.5rem;
      flex-shrink: 0;
    "></div>
    <p style="margin: 0; color: #4b5563; line-height: 1.6;"><strong>Free, forever.</strong> Host a wiki at no cost with access to all features. We'll never charge you to host a wiki on WikiOasis.</p>
  </div>
 
  <div style="
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  ">
    <div style="
      width: 6px;
      height: 6px;
      background: #10b981;
      border-radius: 50%;
      margin-top: 0.5rem;
      flex-shrink: 0;
    "></div>
    <p style="margin: 0; color: #4b5563; line-height: 1.6;"><strong>No advertisements.</strong> We mean it. Adverts annoy us just as much as they annoy you, so we'll never show them on your wiki.</p>
  </div>
 
  <div style="
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  ">
    <div style="
      width: 6px;
      height: 6px;
      background: #10b981;
      border-radius: 50%;
      margin-top: 0.5rem;
      flex-shrink: 0;
    "></div>
    <p style="margin: 0; color: #4b5563; line-height: 1.6;"><strong>Fully customizable.</strong> Your wiki is yours, and you can customize it exactly as you envision.</p>
  </div>
</div>
```
  </div>
  <!-- Quick Links Card -->
  <div class="feature-card" style="
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
```
<div style="
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
"></div>
<div style="text-align: center; margin-bottom: 1.5rem;">
  <div style="
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-radius: 16px;
    margin-bottom: 1rem;
  ">
    [[File:OOjs_UI_icon_academic.svg|30px|link=|style=filter: brightness(0) invert(1);]]
  </div>
  <h3 style="
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
  ">Quick Links</h3>
</div>
<div class="quick-links" style="space-y: 0.75rem;">
  <h4 style="
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
  ">Community & Requests</h4>
 
  <div style="margin-bottom: 0.75rem;">
    [[Community portal|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">🏛️ Community Portal</span>]]
  </div>
 
  <div style="margin-bottom: 0.75rem;">
    [[Steward requests|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">⚖️ Steward Requests</span>]]
  </div>
 
  <div style="margin-bottom: 0.75rem;">
    [[Special:RequestWiki|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">🌟 Request a Wiki</span>]]
  </div>
 
  <div>
    [[Special:GlobalRenameRequest|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">👤 Username Change</span>]]
  </div>
</div>
```
  </div>
</div>
<!-- Contact Section -->
<div class="contact-section" style="
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
">
  <div style="
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 16px;
    margin-bottom: 1rem;
  ">
    [[File:OOjs UI icon help-ltr.svg|30px|link=|style=filter: brightness(0) invert(1);]]
  </div>
  <h3 style="
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1.5rem 0;
  ">Get in Touch</h3>
  <div style="
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  ">
    <div>
      [mailto:[email protected] <span style="
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: white;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        text-decoration: none;
        color: #374151;
        font-weight: 500;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
      " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 10px rgba(0,0,0,0.1)'">📧 Email Us</span>]
    </div>
```
<div>
  [https://discord.gg/Hc249nXbak <span style="
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #5865f2;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.3);
    transition: all 0.3s ease;
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 20px rgba(88, 101, 242, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 10px rgba(88, 101, 242, 0.3)'">💬 Discord</span>]
</div>
<div>
  [https://phorge.wikioasis.org/ <span style="
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 10px rgba(0,0,0,0.1)'">🔧 Phorge</span>]
</div>
```
  </div>
</div>
</div>
<style>
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.5rem !important;
  }
 
  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
 
  .features-grid {
    grid-template-columns: 1fr !important;
  }
}
</style>
Cookies help us deliver our services. By using our services, you agree to our use of cookies.