Main Page: Difference between revisions

OSRS-style HTML layout v2 — div-based, no tables
Run (talk | contribs)
mNo edit summary
 
(26 intermediate revisions by one other user not shown)
Line 1: Line 1:
<div class="wov-main-page">
<div class="mainpage-container">


<div class="wov-welcome-box">
    <div class="mainpage-header">
<div class="wov-welcome-title">Welcome to the Winds of Valen Wiki!</div>
        <div class="header-intro">
<p class="wov-welcome-sub">We are the official community-maintained encyclopaedia for the fantasy sandbox MMORPG. Anyone can contribute [[Special:CreateAccount|create an account]] to get started.</p>
            <div class="header-title">Welcome to the Winds of Valen Wiki!</div>
</div>
            <p>We are the official community-maintained encyclopaedia for the fantasy sandbox MMORPG. Anyone can contribute &mdash; [[Special:CreateAccount|create an account]] to get started.</p>
        </div>
        <div class="header-stats plainlist nomobile">
            <ul>
                <li><span>Articles:</span> <b>{{NUMBEROFARTICLES}}</b></li>
                <li><span>Files:</span> <b>{{NUMBEROFFILES}}</b></li>
                <li><span>Users:</span> <b>{{NUMBEROFUSERS}}</b></li>
                <li><span>Edits:</span> <b>{{NUMBEROFEDITS}}</b></li>
            </ul>
        </div>
    </div>


<div class="wov-layout-grid">
    <div class="mainpage-layout">
        <div class="mainpage-left">


<div class="wov-main-col">
            <!-- Latest Updates -->
            <div class="section-title">Latest Updates</div>
            <div class="tile-row updates-row">
<div class="update-card">
                    <div class="update-header">22 AUG 2026 &bull; GAME UPDATE</div>
                    <div class="update-title">[https://steamstore-a.akamaihd.net/news/externalpost/steam_community_announcements/1841579228672457 Smithing Rework and Abandoned Dwarven Mine Outpost]</div>
                    <p>We are very excited for todays massive update, smithing is getting overhauled to add more depth and to tie into future skills. Along with this we a...</p>
                </div>
                <div class="update-card">
                    <div class="update-header">20 AUG 2026 &bull; GAME UPDATE</div>
                    <div class="update-title">[https://steamstore-a.akamaihd.net/news/externalpost/steam_community_announcements/1841579228665246 Smithing Rework is Coming]</div>
                    <p>The smithing rework is releasing this weekend! The exact times are: Sunday, 23 August 2026 12:00 pm, NZST Sunday, 23 August 2026 12:00 am, GMT Satu...</p>
                </div>
            </div>


<div class="wov-parchment-box">
            <!-- Categories -->
<div class="wov-section-header">Latest Updates</div>
            <div class="section-title">Categories</div>
<div class="wov-updates-row">
            <div class="tile-row categories-grid">
<div class="wov-update-card">
                <div class="category-card">
<div class="wov-update-tag">10 July 2026 &bull; Game Update</div>
                    <div class="tile-top tile-image">[[File:T_BronzeSword_Icon.png|link=Category:Items]]</div>
<div class="wov-update-title">[[Open The Gates|Open The Gates — First Quest is Live!]]</div>
                    <div class="tile-bottom link-button">[[:Category:Items|Items]]</div>
<p class="wov-update-snippet">Help the guards of Valen City open the ancient sealed gates and earn 5,000 Mining XP. The first official quest is now available to all players.</p>
                </div>
</div>
                <div class="category-card">
<div class="wov-update-card">
                    <div class="tile-top tile-image">[[File:skills.png|link=Category:Skills]]</div>
<div class="wov-update-tag">10 July 2026 &bull; Wiki Launch</div>
                    <div class="tile-bottom link-button">[[:Category:Skills|Skills]]</div>
<div class="wov-update-title">[[Main Page|Winds of Valen Wiki is Open!]]</div>
                </div>
<p class="wov-update-snippet">The community wiki is now live. 169 items, 6 skills, regions, quests, and more are documented and ready to be expanded by players.</p>
                <div class="category-card">
</div>
                    <div class="tile-top tile-image">[[File:quest.png|link=Category:Quests]]</div>
</div>
                    <div class="tile-bottom link-button">[[:Category:Quests|Quests]]</div>
</div>
                </div>
                <div class="category-card">
                    <div class="tile-top tile-image">[[File:map.png|link=Category:Regions]]</div>
                    <div class="tile-bottom link-button">[[:Category:Regions|Regions]]</div>
                </div>
            </div>


<div class="wov-parchment-box">
            <!-- Popular Pages -->
<div class="wov-section-header">Categories</div>
            <div class="section-title">Popular Pages</div>
<div class="wov-categories-grid">
            <div class="popular-grid">
<div class="wov-cat-card">
                <div class="link-button dark-button">[[Open The Gates|Quest: Open The Gates]]</div>
<div class="wov-cat-img-box">[[File:T_BronzeSword_Icon.png|80px|link=Items]]</div>
                <div class="link-button dark-button">[[Valen City]]</div>
<div class="wov-cat-label">[[Items|Items]]</div>
                <div class="link-button dark-button">[[The Wilderness|The Darklands (PVP)]]</div>
</div>
                <div class="link-button dark-button">[[Lava Cavern]]</div>
<div class="wov-cat-card">
                <div class="link-button dark-button">[[Combat|Combat Training]]</div>
<div class="wov-cat-img-box">[[File:T_BronzePickaxe_Icon.png|80px|link=Skills]]</div>
                <div class="link-button dark-button">[[Mining|Mining Guide]]</div>
<div class="wov-cat-label">[[Skills|Skills]]</div>
            </div>
</div>
           
<div class="wov-cat-card">
            <!-- Skills -->
<div class="wov-cat-img-box">[[File:T_SantaHat_Icon.png|80px|link=Quests]]</div>
            <div class="section-title">Skill Training</div>
<div class="wov-cat-label">[[Quests|Quests]]</div>
            <div class="skills-grid">
</div>
                <div class="skill-item">[[File:T_BronzeSword_Icon.png|16px|link=Combat]] [[Combat]]</div>
<div class="wov-cat-card">
                <div class="skill-item">[[File:T_BronzePickaxe_Icon.png|16px|link=Mining]] [[Mining]]</div>
<div class="wov-cat-img-box">[[File:T_LeatherBoots_Icon.png|80px|link=Regions]]</div>
                <div class="skill-item">[[File:T_SmithingHammer_Icon.png|16px|link=Smithing]] [[Smithing]]</div>
<div class="wov-cat-label">[[Regions|Regions]]</div>
                <div class="skill-item">[[File:T_WoodBow_Icon.png|16px|link=Archery]] [[Archery]]</div>
</div>
                <div class="skill-item">[[File:T_FishingRod_Icon.png|16px|link=Fishing]] [[Fishing]]</div>
</div>
                <div class="skill-item">[[File:T_SmallVial_Icon.png|16px|link=Potion Making]] [[Potion Making]]</div>
</div>
            </div>


<div class="wov-parchment-box">
            <!-- Leaderboards -->
<div class="wov-section-header">Popular Pages</div>
            <div class="section-title">Community Leaderboards</div>
<div class="wov-popular-inner">
            <div class="leaderboard-announcement" style="background: #fdf5e6; border-left: 4px solid #d2b48c; border-right: 4px solid #d2b48c; padding: 10px 15px; margin-bottom: 20px; border-radius: 4px; font-weight: bold; color: #5c4033; text-align: center;">
<div class="wov-popular-grid">
                Event: On August 31st, we will give the top 3 contributors of "All-Time" 1 month of membership each!
[[Open The Gates|<span class="wov-popular-btn">Quest: Open The Gates</span>]]
            </div>
[[Valen City|<span class="wov-popular-btn">Valen City</span>]]
            <div class="leaderboards-row" style="display: flex; gap: 20px; flex-wrap: wrap;">
[[The Wilderness|<span class="wov-popular-btn">The Wilderness (PvP)</span>]]
                <div class="widget-box" style="flex: 1; min-width: 300px;">
[[Lava Cavern|<span class="wov-popular-btn">Lava Cavern</span>]]
                    <div class="widget-title">Weekly Leaderboard</div>
[[Combat|<span class="wov-popular-btn">Combat Training</span>]]
                    <div class="widget-body plainlist" style="overflow-x: auto;">
[[Mining|<span class="wov-popular-btn">Mining Guide</span>]]
                        {{Special:ContributionScores/5/7}}
</div>
                    </div>
</div>
                </div>
</div>


<div class="wov-parchment-box">
                <div class="widget-box" style="flex: 1; min-width: 300px;">
<div class="wov-section-header">Skill Training</div>
                    <div class="widget-title">All-Time Leaderboard</div>
<div class="wov-skills-inner">
                    <div class="widget-body plainlist" style="overflow-x: auto;">
<div class="wov-skills-grid">
                        {{Special:ContributionScores/10/0}}
<div class="wov-skill-item">[[File:T_BronzeSword_Icon.png|16px|link=Combat]] [[Combat]]</div>
                    </div>
<div class="wov-skill-item">[[File:T_BronzePickaxe_Icon.png|16px|link=Mining]] [[Mining]]</div>
                </div>
<div class="wov-skill-item">[[File:T_SmithingHammer_Icon.png|16px|link=Smithing]] [[Smithing]]</div>
            </div>
<div class="wov-skill-item">[[File:T_WoodBow_Icon.png|16px|link=Archery]] [[Archery]]</div>
<div class="wov-skill-item">[[File:T_FishingRod_Icon.png|16px|link=Fishing]] [[Fishing]]</div>
<div class="wov-skill-item">[[File:T_SmallVial_Icon.png|16px|link=Potion Making]] [[Potion Making]]</div>
</div>
</div>
</div>


</div>
        </div>


<div class="wov-side-col">
        <div class="mainpage-right">
           
            <!-- Discord -->
            <div class="discord-widget plainlinks">
[https://discord.gg/xxzDqg9xWc <span class="discord-click-target"></span>]
                <div class="discord-top">
                    <div class="discord-icon"></div>
                    <div class="discord-text">
                        <div class="discord-title">Community</div>
                        <div class="discord-server-name">Winds of Valen</div>
                        <div class="discord-join-text">Join the Discord server!</div>
                    </div>
                </div>
<div class="discord-bottom">Official Game Server</div>
            </div>


<div class="wov-widget-stats">
            <!-- Contribute -->
<div class="wov-section-header">Wiki Statistics</div>
            <div class="widget-box">
<div class="wov-stats-body">
                <div class="widget-title">Help Improve the Wiki</div>
<dl>
                <div class="widget-body plainlist">
<dt>Articles</dt><dd>{{NUMBEROFARTICLES}}</dd>
                    <p>Anyone can contribute. Click '''Edit''' on any page to add or fix information.</p>
<dt>Files</dt><dd>{{NUMBEROFFILES}}</dd>
                    <ul>
<dt>Users</dt><dd>{{NUMBEROFUSERS}}</dd>
                        <li>[[Special:RecentChanges|Recent changes]]</li>
<dt>Edits</dt><dd>{{NUMBEROFEDITS}}</dd>
                        <li>[[Special:WantedPages|Wanted pages]]</li>
</dl>
                        <li>[[Special:NewFiles|New files]]</li>
</div>
                        <li>[[Special:Statistics|Statistics]]</li>
</div>
                    </ul>
                </div>
            </div>


<div class="wov-discord-widget">
        </div>
<div class="wov-section-header-dark">&#127918; Join the Community</div>
    </div>
<div class="wov-discord-body">
<p class="wov-discord-desc">Chat with players, share discoveries, and stay up to date with game news and wiki announcements.</p>
<a href="https://discord.gg/xxzDqg9xWc" class="wov-discord-link" target="_blank" rel="noopener">
<svg class="wov-discord-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
Chat on Discord
</a>
</div>
</div>
</div>
__NOTOC__


<div class="wov-widget-help">
<!-- Bust 2 -->
<div class="wov-section-header">Help Improve the Wiki</div>
<div class="wov-help-body">
<p>Anyone can contribute. Click <b>Edit</b> on any page to add or fix information.</p>
<ul>
<li>[[Special:RecentChanges|Recent changes]]</li>
<li>[[Special:WantedPages|Wanted pages]]</li>
<li>[[Special:NewFiles|New files]]</li>
<li>[[Special:Statistics|Statistics]]</li>
</ul>
</div>
</div>
 
</div>
 
</div>
 
</div>
__NOTOC__