index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="The original Running With Rifles wiki website's table design was not mobile-friendly. As a result, the website was difficult to use on smartphones and other small devices. To address this issue, I refactor the entire Running With Rifles wiki website using a more mobile-friendly design. This new design makes it easier for users to access and use the information on the website, regardless of the device they are using.">
  <meta name="keywords" content="Running With Rifles,RWR,rwr,running with rifles">
  <meta name="author" content="Xiang">
  <meta property="og:title" content="RWR_WiKi -RWD redesign">
  <meta property="og:image" content="img/RWR_WiKi.png" />
  <meta property="og:description" content="The original Running With Rifles wiki website's table design was not mobile-friendly. As a result, the website was difficult to use on smartphones and other small devices. To address this issue, I refactor the entire Running With Rifles wiki website using a more mobile-friendly design. This new design makes it easier for users to access and use the information on the website, regardless of the device they are using." />
  <title>Running With Rifles Wiki - Xiang</title>
  <link rel="shortcut icon" href="img/Site-favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/index.css">
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <a href="https://SiteStates.com" title="站長工具" style="display: none;">
        <img src="https://SiteStates.com/show/image/33611.jpg" border="0" />
    </a>

  <section class="wrap">

    <section class="introduction">
      <h2 class="underline">RWR WiKi Weapon Table Redesign</h2>

      <div class="github-badge">
        <img src="https://img.shields.io/github/last-commit/Xiang511/RWR_WiKi?display_timestamp=committer&style=flat-square" alt="GitHub last commit">
        <img src="https://img.shields.io/github/commit-activity/y/Xiang511/RWR_WiKi?style=flat-square" alt="GitHub commit activity">
        <img src="https://img.shields.io/github/created-at/Xiang511/RWR_WiKi?style=flat-square" alt="GitHub Created At">
        <img src="https://img.shields.io/github/license/Xiang511/RWR_WiKi?style=flat-square" alt="GitHub License">

        <a href="https://github.com/Xiang511/RWR_WiKi" target="_blank"><img src="https://img.shields.io/badge/Github-demo?style=flat-square&logo=github&color=%23000" alt=""></a>

      </div>

      <h1>
        The original RWR wiki website's weapon table design was not mobile-friendly. As a result, the website was difficult to use on smartphones and other small devices. To address this issue, I rewrote the entire weapon table using a more mobile-friendly design. This new design makes it easier for users to access and use the information on the website, regardless of the device they are using.
      </h1>

      <a href="https://xiang511.com/RWR_WiKi/assault_rifles.html">Website Link | 網站連結 </a>
    </section>

    <section class="usage">
      <h2 class="underline">Changes</h2>
      <h3>Responsive design</h3>
      <p>The new website is responsive, which means that it will automatically adjust its layout to fit the screen size of the device being used. This makes it easier for users to view the website on smartphones and other small devices.</p>
      <h3>Mobile-friendly tables</h3>
      <p>The tables on the website have been redesigned to be more mobile-friendly. This includes using smaller fonts and making sure that the tables can be easily scrolled on a touchscreen device. Additionally, a fixed table header has been implemented to allow for smooth and continuous reading even when scrolling.</p>
    </section>


    <section class="usage">
      <h2 class="underline">Feature</h2>

      <p>Integration of the DataTables plugin.</p>
      <p>Currently supports <code>basic sorting</code> ,<code>pagination</code> ,and <code>filtering</code> .</p>
      <p>Using a <code>fixed table header</code> makes reading more smooth and efficient.</p>
      <p><code>Comparison tool:</code> Now you can easily compare the stats of two guns side-by-side, without affecting the original search function.</p>
      <p><code>Global Search:</code> Now you can cross-reference information on different types of guns</p>
      <p><code>Custom search boxes:</code> Users can now customize the number of search boxes. ( maximum : 5)</p>

    </section>


    <section class="usage">
        <h2 class="underline">Loved my work?</i></h2>
        <p><a href="https://github.com/Xiang511/RWR_WiKi">✨ Give a star to this project </a></p>
        <p><a href="https://github.com/Xiang511">🎉 Follow Me on Github</a></p>
      </section>


    <section class="usage">
      <h2 class="underline">License</i></h2>
      <p>This project is published under MIT License.</p>
    </section>


  </section>


  <div class="wrap">
    <section class="feature">
      <h2 class="underline">Website information</h2>

      <div class="todo" style="margin: 0;">


        <script src="https://SiteStates.com/show/js_text/13a70ee8947810131d9c9b5dd46d4e94" type="text/javascript"></script>
        <style>
          .sitestatesJs {
            display: none;
          }
        </style>

        <i class='bx bx-notepad'></i><span id="Total" class="icon"></span></br>

        <i class='bx bx-walk'></i><span id="Today" class="icon"></span></br>

        <i class='bx bx-pulse'></i><span id="online" class="icon"></span></br>
      </div>
    </section>
  </div>
  <script src="js/main.js"></script>
</body>

</html>