1
0
Fork 0
timelinize/frontend/pages/entity.html
2025-01-16 14:43:46 -07:00

126 lines
No EOL
3.5 KiB
HTML

<title>Entity</title> <!-- TODO: use JS to change the title -->
<link rel="stylesheet" href="/resources/css/entity.css">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row align-items-center">
<div class="page-pretitle mb-2">
Entity
</div>
<div class="col-auto me-2" id="picture">
<!-- avatar -->
</div>
<div class="col">
<span id="entity-id">
<!-- id -->
</span>
<h1 class="page-title my-2" id="name">
<!-- name -->
</h1>
<div class="row summary-row">
<div class="col-auto me-2 d-flex align-items-center justify-content-center" id="entity-type">
<!-- type -->
</div>
<div class="col-auto" id="num-items">
<!-- no. items -->
</div>
</div>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a id="merge-entity" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-merge-entity">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-users">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
</svg>
Merge Entity
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<ul class="nav nav-bordered mb-4">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Attributes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Items</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Map</a>
</li>
</ul>
<div class="row row-cards g-4">
<div class="col-md-3" id="attribute-groups">
</div>
<div class="col-md-9">
<div class="row row-cards">
<div class="card">
<div class="card-header">
<h3 class="card-title">Basic profile</h3>
</div>
<div class="card-body">
<div class="datagrid">
<div class="datagrid-item">
<div class="datagrid-title">Birth date</div>
<div class="datagrid-content" id="birth-date">&mdash;</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Birth place</div>
<div class="datagrid-content" id="birth-place">&mdash;</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Gender</div>
<div class="datagrid-content" id="gender">&mdash;</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Websites</div>
<div class="datagrid-content" id="websites">&mdash;</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div id="chart" style="height: 500px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<template id="tpl-attribute-label">
<label class="form-check">
<input type="checkbox" class="form-check-input" checked>
<span class="form-check-label"></span>
</label>
</template>