gobject_details.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="title" content="WoW 0.5.3 Database" />
    <meta name="description" content="Database browser for Alpha core 0.5.3" />
    <title>WoW 0.5.3 - Database Browser</title>
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/styles.css" />
    <link rel="icon" href="./assets/img/favicon.png" />
    <link href="./css/fontawesome/fontawesome.css" rel="stylesheet" />
    <link href="./css/fontawesome/brands.css" rel="stylesheet" />
    <link href="./css/fontawesome/solid.css" rel="stylesheet" />
  </head>
  <body>
    <!-- MAIN -->
    <main class="main-container">
      <!-- MENU NAV -->
      <header>
        <div class="menu-bar-main-container">
          <div class="menu-bar-header-container">
            <a href="index.html">
              <img
                class="menu-bar-logo"
                src="./assets/img/logo-small.png"
                alt="Alpha Core"
              />
            </a>
            <div class="menu-bar-title">
              <p>Database</p>
              <p>Alpha 0.5.3</p>
            </div>
          </div>
          <nav class="menu-bar-nav-container">
            <a href="creature_details.html" class="menu-bar-button">
              <i class="fa-solid fa-user"></i>
              <span>Creatures</span>
            </a>
            <a href="gobject_details.html" class="menu-bar-button">
              <i class="fas fa-cube"></i>
              <span>Game Objects</span>
            </a>
            <a href="item_details.html" class="menu-bar-button">
              <i class="fas fa-gavel"></i>
              <span>Items</span>
            </a>
            <a href="spell_details.html" class="menu-bar-button">
              <i class="fas fa-book"></i>
              <span>Spells</span>
            </a>
            <a href="default_details.html" class="menu-bar-button">
              <i class="fas fa-map"></i>
              <span>Maps</span>
            </a>
            <a href="page_details.html" class="menu-bar-button">
              <i class="fas fa-file"></i>
              <span>Pages</span>
            </a>
            <a href="default_details.html" class="menu-bar-button">
              <i class="fas fa-globe"></i>
              <span>Ports</span>
            </a>
            <a href="quest_details.html" class="menu-bar-button">
              <i class="fas fa-list"></i>
              <span>Quests</span>
            </a>
            <a href="default_details.html" class="menu-bar-button">
              <i class="fas fa-graduation-cap"></i>
              <span>Skills</span>
            </a>
            <a href="tables_details.html" class="menu-bar-button">
              <i class="fas fa-table"></i>
              <span>Tables</span>
            </a>
            <a href="default_details.html" class="menu-bar-button">
              <i class="fas fa-map-pin"></i>
              <span>Zones</span>
            </a>
          </nav>
          <div class="menu-bar-social-container">
            <a href=""><i class="menu-bar-social fab fa-github"></i></a>
            <a href=""><i class="menu-bar-social fab fa-discord"></i></a>
          </div>
        </div>
        <nav class="header__nav"></nav>
      </header>
      <!-- END MENU NAV -->

      <!-- PAGE CONTAINER-->
      <section class="main-page-container">
        <!-- PAGE TITLE -->
        <div class="page-title">
          <div>
            <a href="search.html" class="page-title__goback">
              <i class="fas fa-angle-left"></i>
            </a>
            <h1>A Conspicuous Gravestone</h1>
          </div>
          <div>
            <i class="page-title__database fas fa-database"></i>
            <i class="page-title__angle fas fa-angle-right"></i>
            <p class="page-title__table">Game object</p>
          </div>
        </div>
        <!-- END PAGE TITLE -->

        <!-- PAGE CONTENT -->
        <div class="object-container page-content">
          <div class="object-container__informations">
            <div class="object-container__informations__details1">
              <div class="tiny-title">
                <h2 class="tiny-title__heading">General</h2>
                <div class="tiny-title__bar"></div>
              </div>
              <div class="entry-navigation">
                <a href="" class="entry-navigation__left">
                  <i class="fas fa-angle-left"></i>
                </a>
                <span class="entry-navigation__entry">1/12</span>
                <a href="" class="entry-navigation__right">
                  <i class="fas fa-angle-right"></i>
                </a>
              </div>

              <!-- MODEL DISPLAY ID -->
              <img
                class="model-display"
                src="./assets/img/missing_creature.webp"
                alt="creature's model"
              />
              <!-- END MODEL DISPLAY ID -->

              <!-- GOBJECT SMALL TABLE -->
              <table class="table-fields">
                <thead>
                  <th>Field</th>
                  <th>Value</th>
                </thead>
                <tbody>
                  <tr>
                    <td>display_id1</td>
                    <td>1777</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem</td>
                  </tr>
                </tbody>
              </table>
              <!-- END GOBJECT TABLE -->
            </div>

            <div class="object-container__informations__details2">
              <!-- SPAWN POINTS 1 -->
              <div class="element-information">
                <h2 class="element-information__title">Spawn points - Map 1</h2>
                <div class="element-information__bar"></div>
                <div class="element-information__content">
                  <div class="row-card-container">
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                  </div>
                </div>
              </div>
              <!-- END SPAWN POINTS 1 -->

              <!-- SPAWN POINTS 2-->
              <div class="element-information">
                <h2 class="element-information__title">Spawn points - Map 2</h2>
                <div class="element-information__bar"></div>
                <div class="element-information__content">
                  <div class="row-card-container">
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                    <a class="row-card">
                      <span class="row-card__head">
                        <i class="fas fa-globe"></i>
                        Kalimdor
                      </span>
                      <span class="row-card__content"
                        >-8859.22 822.572 95.4902 0</span
                      >
                    </a>
                  </div>
                </div>
              </div>
              <!-- END SPAWN POINTS 2-->
            </div>

            
            <!-- CAROUSSEL -->
            <aside class="caroussel" onmouseleave="onMouseLeaveArea(event)">
              <div class="help-box">
                <i class="fas fa-arrow-pointer help-box__info-icon"></i>
                <span class="help-box__content"> hover </span>
                <span class="help-box__point"></span>
                <span class="help-box__content"> to magnify </span>
              </div>
              <a class="caroussel__left-arrow" href=
                ><i class="fas fa-angle-left"></i
              ></a>
              <a class="caroussel__right-arrow" href="#Eastern_Kingdoms_map"
                ><i class="fas fa-angle-right"></i
              ></a>
              <div class="map-container">
                <img
                  onmouseenter="onMouseEnterImg(event)"
                  onmousemove="onMouseMoveImg(event)"
                  src="./assets/img/Kalimdor.webp"
                  style="
                    display: block;
                    max-width: initial;
                    max-height: initial;
                    margin: 0;
                  "
                  id="Kalimdor_map"
                  alt="Kalimdor map"
                  title="Kalimdor map"
                />

                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 400px; left: 102px"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 383px; left: 31px"
                    class="spawn_point"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>

                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 481px; left: 102px"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 440px; left: 105px"
                    class="spawn_point"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>

                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 460px; left: 110px"
                    class="spawn_point"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>

                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 470px; left: 115px"
                    class="spawn_point"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>

                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 500px; left: 120px"
                    class="spawn_point"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>

                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 470px; left: 117px; position: absolute"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 479px; left: 118px; position: absolute"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
              </div>
              <div class="map-container">
                <img
                  onmouseenter="onMouseEnterImg(event)"
                  onmousemove="onMouseMoveImg(event)"
                  src="./assets/img/Eastern_Kingdoms.webp"
                  style="
                    display: block;
                    max-width: initial;
                    max-height: initial;
                    margin: 0;
                  "
                  id="Eastern_Kingdoms_map"
                  alt="Eastern_Kingdoms"
                  title="Eastern_Kingdoms"
                />
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 473px; left: 81px"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 383px; left: 81px"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 463px; left: 85px"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 478px; left: 88px"
                  >
                    <circle cx="4" cy="4" r="4" fill="yellow" stroke="black" />
                    <title>-9889.68 338.467 36.6486 0</title>
                  </svg>
                </div>
                <div
                  onmouseenter="onMouseEnterPoint(event)"
                  onmouseleave="onMouseLeavePoint(event)"
                >
                  <svg
                    width="8"
                    height="8"
                    class="spawn_point"
                    style="top: 481px; left: 234px"
                  >
                    <circle
                      cx="4"
                      cy="4"
                      r="4"
                      fill="yellow"
                      stroke="black"
                    ></circle>
                    <title>-2952.76 -3885.41 34.3089 1</title>
                  </svg>
                </div>
              </div>
              <!-- MAGNIFIER -->
              <div class="magnifier">
                <button class="magnifier__close"><i class="fas fa-plus"></i></button>
              </div>
              <!-- END MAGNIFIER -->
            </aside>
            <!-- END CAROUSSEL -->
          </div>
          <!-- DETAILS CONTAINER -->
          <div class="details-container">
            <div class="element-information element-information--independant">
              <h2 class="element-information__title">Train these spells</h2>
              <div class="element-information__bar"></div>
              <div class="element-information__content">
                <div class="simulate_box gameobject">
                  <h3 style="color: yellow">A Conspicuous Gravestone</h3>
                  Quest Giver
                </div>
              </div>
            </div>
            <!-- ELEMENT INFORMATION -->
            <div class="element-information element-information--independant">
              <h2 class="element-information__title">A name here</h2>
              <div class="element-information__bar"></div>
              <div class="element-information__content">
                <div class="row-card-container">
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1774
                    </span>
                    <span class="row-card__content"
                      >Here is a short description</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      444
                    </span>
                    <span class="row-card__content"
                      >Here is a quite long description to see render</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1345
                    </span>
                    <span class="row-card__content"
                      >Here a very very very very very long description to se
                      render on website</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1345
                    </span>
                    <span class="row-card__content"
                      >Here a very very very very very long description to se
                      render on website</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1345
                    </span>
                    <span class="row-card__content"
                      >Here a very very very very very long description to se
                      render on website</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1345
                    </span>
                    <span class="row-card__content"
                      >Here a very very very very very long description to se
                      render on website</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1345
                    </span>
                    <span class="row-card__content"
                      >Here a very very very very very long description to se
                      render on website</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1345
                    </span>
                    <span class="row-card__content"
                      >Here a very very very very very long description to se
                      render on website</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                </div>
              </div>
            </div>
            <!-- END ELEMENT INFORMATION -->
            <!-- ELEMENT INFORMATION -->
            <div class="element-information element-information--independant">
              <h2 class="element-information__title">A name here</h2>
              <div class="element-information__bar"></div>
              <div class="element-information__content">
                <div class="row-card-container">
                  <a href="" class="row-card row-card--independant">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1774
                    </span>
                    <span class="row-card__content"
                      >Here is a short description</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      444
                    </span>
                    <span class="row-card__content"
                      >Here is a quite long description to see render</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                  <a href="" class="row-card">
                    <span class="row-card__head">
                      <i class="fas fa-list"></i>
                      1345
                    </span>
                    <span class="row-card__content"
                      >Here a very very very very very long description to se
                      render on website</span
                    >
                    <span class="row-card__extra">Info</span>
                  </a>
                </div>
              </div>
            </div>
            <!-- END ELEMENT INFORMATION -->
          </div>
          <!-- END DETAILS CONTAINER -->
          <div class="object-container__items">
            <!-- TABLE CONTAINER -->
            <div class="table-container">
              <div class="tiny-title">
                <h2 class="tiny-title__heading">A name here</h2>
                <div class="tiny-title__bar"></div>
              </div>
              <div class="sql-statement">UPDATE entry WHERE....</div>
              <table class="table-rows">
                <thead>
                  <th>Field</th>
                  <th>Value</th>
                </thead>
                <tbody>
                  <tr>
                    <td>guid</td>
                    <td>576879</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>59</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                  <tr>
                    <td>field</td>
                    <td>value</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- END TABLE CONTAINER -->
          </div>
        </div>
        <!-- END PAGE CONTENT -->
      </section>
      <!-- END PAGE CONTAINER-->
    </main>
    <!-- END MAIN -->

    <!-- FOOTER -->
    <footer class="footer"></footer>
    <!-- END FOOTER -->
    <script src="./js/magnifier.js"></script>
  </body>
</html>