查看“︁用户:TheNewMillium/Road To Morgen/Visual Novel Reader”︁的源代码

特别鸣谢：[[User:生理盐水]]

测试文本摘自《抗争阵线》（TheNewMillium）


<!-- Page 1 -->
<div class="lw-treediv P1" style="width: 700px; height: 350px; background-color: #f0f0f0; border: 1px solid #333; padding: 20px; padding-bottom: 60px; margin: 20px auto; overflow: auto; position: relative;">
-九月五日'''一〇'''时'''二二'''分-

-“方舟基地”正西方向约'''三二〇'''千米处-

<div style="position: absolute; bottom: 20px; right: 20px; z-index: 10;">
<p>{{TreeButton|show=P2|name=→}}</p>
</div>
</div>

<!-- Page 2 -->
<div class="lw-treediv P2" style="display:none; width: 700px; height: 350px; background-color: #f0f0f0; border: 1px solid #333; padding: 20px; padding-bottom: 60px; margin: 20px auto; overflow: auto; position: relative;">
沙尘暴在肆虐着。

黄色的怒涛覆盖了视野内的一切，将原本清晰的世界变得模糊不清，就连原本铁灰色的天空，也被沙粒染成了一片浑浊的灰黄。

<div style="position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 10;">
<p>{{TreeButton|show=P3|name=→}}</p>
</div>
</div>

<!-- Page 3 -->
<div class="lw-treediv P3" style="display:none; width: 700px; height: 350px; background-color: #f0f0f0; border: 1px solid #333; padding: 20px; padding-bottom: 60px; margin: 20px auto; overflow: auto; position: relative;">
这样的天气并不适合出击。过低的能见度会影响队伍中的协调和操作的准确，这些无一不会影响稍后的恶战中己方的赢面。

然而，对于那一边也是一样的。

对此刻正在向西全速驱驰，由整整25架战术机组成的钢铁战队而言，狂野的沙尘暴反而构成了最好的干扰屏障。

<div style="position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 10;">
<p>{{TreeButton|show=P4|name=→}}</p>
</div>
</div>

<!-- Page 4(Conservation) -->
<div class="lw-treediv P4" style="display:none; width: 700px; height: 350px; background-color: #f0f0f0; border: 1px solid #333; padding: 20px; padding-bottom: 60px; margin: 20px auto; overflow: auto; position: relative;">

    <div style="
            width: 600px;
            min-height: 80px;
            background-color: #e0e0e0;
            border: 1px dashed #666;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin: 0 auto 20px auto; /* 上0，左右居中，下20px */
        ">
        <p style="
            width: 100%;
            line-height: 1.4em;
            color: #333;
        ">
            【HQ】<br>“HQ呼叫Hercules中队！两分钟后接敌！重复一遍！两分钟后接敌！”
        </p>
    </div>

    <div style="
            width: 600px;
            min-height: 80px;
            background-color: #e0e0e0;
            border: 1px dashed #666;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin: 0 auto 20px auto; /* 上0，左右居中，下20px */
        ">
        <p style="
            width: 100%;
            line-height: 1.4em;
            color: #333;
        ">
            【???】<br>“Hercules Leader收到。”
        </p>
    </div>

    <p style="margin: 20px auto;">
        在队伍最前方的战术机中全神贯注操纵着操纵杆的金发少年一边回复，一边向面前屏幕右下角弹出的即时传输视频稍微瞥了一眼，然后用左手拨动了控制通信线路的拨片。
    <div style="position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 10;">

        <p>{{TreeButton|show=P5|name=→}}</p>
    </div>

</div>

<!-- Page 5(Conservation) -->
<div class="lw-treediv P5" style="display:none; width: 700px; height: 350px; background-color: #f0f0f0; border: 1px solid #333; padding: 20px; padding-bottom: 60px; margin: 20px auto; overflow: auto; position: relative;">

    <div style="
            width: 600px;
            min-height: 80px;
            background-color: #e0e0e0;
            border: 1px dashed #666;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin: 0 auto 20px auto; /* 上0，左右居中，下20px */
        ">
        <p style="
            width: 100%;
            line-height: 1.4em;
            color: #333;
        ">
            【Hercules Leader】<br>“Hercules Leader呼叫Coodinator。天气方面的预报出现更改了吗？”
        </p>
    </div>

    <div style="
            width: 600px;
            min-height: 80px;
            background-color: #e0e0e0;
            border: 1px dashed #666;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin: 0 auto 20px auto; /* 上0，左右居中，下20px */
        ">
        <p style="
            width: 100%;
            line-height: 1.4em;
            color: #333;
        ">
            【Coodinator】<br>“已经确认约90秒后沙尘暴将大幅度减弱！准确度……接近百分之百！！”
        </p>
    </div>

    <div style="
            width: 600px;
            min-height: 80px;
            background-color: #e0e0e0;
            border: 1px dashed #666;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin: 0 auto 20px auto; /* 上0，左右居中，下20px */
        ">
        <p style="
            width: 100%;
            line-height: 1.4em;
            color: #333;
        ">
            【Hercules Leader】<br>“了解！”
        </p>
    </div>

    <div style="position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 10;">
        <p>{{TreeButton|show=P1|name=Return}}</p>
    </div>
</div>