Tags: Mobile edit Mobile web edit |
(username removed) |
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>
| |
| | |
| 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>
| |