From e963c52e3a5aa265a833d5fa9b1e188a58d7aa16 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Wed, 30 Jul 2025 09:55:15 +0800
Subject: [PATCH] =?UTF-8?q?UI=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EditOption.vue      |  18 ++-
 src/components/PointRecord.vue     |  89 +++++++++++++
 src/components/SModal.vue          |  47 ++++---
 src/components/ScreenHint2.vue     |  66 ++++++++++
 src/pages.json                     |   3 +
 src/pages/point-book-create.vue    |  64 ++++++----
 src/pages/point-book-detail.vue    | 198 ++++++++++++++++++++++++++++-
 src/pages/point-book-edit.vue      |  79 ++++++++++++
 src/pages/point-book-list.vue      | 141 +++++++++++++++++++-
 src/static/close-grey.png          | Bin 0 -> 374 bytes
 src/static/close-white-outline.png | Bin 0 -> 954 bytes
 src/static/s-question-mark.png     | Bin 0 -> 760 bytes
 src/static/s-triangle.png          | Bin 0 -> 442 bytes
 13 files changed, 655 insertions(+), 50 deletions(-)
 create mode 100644 src/components/PointRecord.vue
 create mode 100644 src/components/ScreenHint2.vue
 create mode 100644 src/pages/point-book-edit.vue
 create mode 100644 src/static/close-grey.png
 create mode 100644 src/static/close-white-outline.png
 create mode 100644 src/static/s-question-mark.png
 create mode 100644 src/static/s-triangle.png

diff --git a/src/components/EditOption.vue b/src/components/EditOption.vue
index eed1e90..398fe2b 100644
--- a/src/components/EditOption.vue
+++ b/src/components/EditOption.vue
@@ -11,12 +11,16 @@ const props = defineProps({
   },
   onExpand: {
     type: Function,
-    default: null,
+    default: () => {},
   },
   onSelect: {
     type: Function,
     default: () => {},
   },
+  noArrow: {
+    type: Boolean,
+    default: false,
+  },
 });
 const bowTypes = [
   {
@@ -95,7 +99,13 @@ const onMeterChange = (e) => {
 </script>
 
 <template>
-  <view class="container" :style="{ maxHeight: expand ? '500px' : '50px' }">
+  <view
+    class="container"
+    :style="{
+      maxHeight: expand ? '500px' : '50px',
+      marginTop: noArrow ? '0' : '10px',
+    }"
+  >
     <view @click="() => onExpand(itemIndex, !expand)">
       <text :style="{ opacity: expand ? 1 : 0 }">{{
         itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
@@ -126,6 +136,7 @@ const onMeterChange = (e) => {
       </block>
       <button hover-class="none">
         <image
+          v-if="!noArrow"
           src="../static/arrow-grey.png"
           mode="widthFix"
           :style="{ transform: expand ? 'rotateX(180deg)' : 'rotateX(0deg)' }"
@@ -218,9 +229,8 @@ const onMeterChange = (e) => {
 
 <style scoped>
 .container {
-  width: calc(100vw - 40px);
+  width: calc(100% - 20px);
   background-color: #fff;
-  margin-top: 10px;
   border-radius: 10px;
   padding: 0 10px;
   font-size: 14px;
diff --git a/src/components/PointRecord.vue b/src/components/PointRecord.vue
new file mode 100644
index 0000000..f9817b1
--- /dev/null
+++ b/src/components/PointRecord.vue
@@ -0,0 +1,89 @@
+<script setup>
+const props = defineProps({
+  signin: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <view class="labels">
+        <text>反曲弓</text>
+        <text>5 米</text>
+        <text>40 全环靶</text>
+      </view>
+      <view>
+        <text>2025-07-10 14:00:00</text>
+      </view>
+    </view>
+    <view>
+      <image src="../static/bow-target.png" mode="widthFix" />
+      <view class="aroow-amount">
+        <text>共</text>
+        <text>36</text>
+        <text>箭</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  background-color: #fff;
+  border-radius: 15px;
+  display: flex;
+  margin-bottom: 15px;
+  height: 24vw;
+}
+.container > view {
+  position: relative;
+  margin-left: 15px;
+}
+.container > view:first-child {
+  width: calc(100% - 5vw);
+}
+.container > view:first-child > view {
+  width: 100%;
+  height: 50%;
+  display: flex;
+  align-items: center;
+}
+.labels {
+  align-items: flex-end !important;
+}
+.labels > text {
+  font-size: 12px;
+  color: #333333;
+  border: 1px solid #eee;
+  margin-right: 10px;
+  border-radius: 10px;
+  padding: 5px 10px;
+}
+.container > view:last-child {
+  margin-right: 1vw;
+}
+.container > view:last-child > image {
+  width: 24vw;
+}
+.aroow-amount {
+  position: absolute;
+  background-color: #0009;
+  border-radius: 10px;
+  color: #fffc;
+  font-size: 12px;
+  line-height: 22px;
+  width: 60px;
+  display: flex;
+  justify-content: center;
+  top: calc(50% - 11px);
+  left: calc(50% - 30px);
+}
+.aroow-amount > text:nth-child(2) {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 3px;
+}
+</style>
diff --git a/src/components/SModal.vue b/src/components/SModal.vue
index c9fa6e8..3349e80 100644
--- a/src/components/SModal.vue
+++ b/src/components/SModal.vue
@@ -9,32 +9,50 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  noBg: {
+    type: Boolean,
+    default: false,
+  },
 });
+const showContainer = ref(false);
 const showContent = ref(false);
 watch(
   () => props.show,
   (newValue) => {
-    setTimeout(() => {
-      showContent.value = newValue;
-    }, 100);
-  }
+    if (newValue) {
+      showContainer.value = true;
+      setTimeout(() => {
+        showContent.value = true;
+      }, 100);
+    } else {
+      showContent.value = false;
+      setTimeout(() => {
+        showContainer.value = false;
+      }, 100);
+    }
+  },
+  {}
 );
-const closeModal = () => {
-  showContent.value = false;
-  setTimeout(() => {
-    props.onClose();
-  }, 300);
-};
 </script>
 
 <template>
-  <view class="container" v-if="show" :style="{ opacity: show ? 1 : 0 }">
+  <view
+    class="container"
+    v-if="showContainer"
+    :style="{ opacity: show ? 1 : 0 }"
+    @click="onClose"
+  >
     <view
       class="modal-content"
-      :style="{ transform: `translateY(${showContent ? '0%' : '100%'})` }"
+      :style="{ transform: `translateY(${showContent ? '0%' : '100%'})`, height: !noBg ? '260px' : 'auto' }"
+      @click.stop=""
     >
-      <image src="../static/modal-content-bg.png" mode="widthFix" />
-      <view class="close-btn" @click="closeModal">
+      <image
+        v-if="!noBg"
+        src="../static/modal-content-bg.png"
+        mode="widthFix"
+      />
+      <view class="close-btn" @click="onClose">
         <image src="../static/close-yellow.png" mode="widthFix" />
       </view>
       <slot></slot>
@@ -60,7 +78,6 @@ const closeModal = () => {
 }
 .modal-content {
   width: 100%;
-  height: 260px;
   transform: translateY(100%);
   transition: all 0.3s ease;
   position: relative;
diff --git a/src/components/ScreenHint2.vue b/src/components/ScreenHint2.vue
new file mode 100644
index 0000000..0314671
--- /dev/null
+++ b/src/components/ScreenHint2.vue
@@ -0,0 +1,66 @@
+<script setup>
+import IconButton from "./IconButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: null,
+  },
+  height: {
+    type: Number,
+    default: 100,
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="scale-in">
+      <image src="../static/point-book-tip-bg.png" mode="widthFix" />
+      <slot />
+    </view>
+    <IconButton
+      v-if="!!onClose"
+      src="../static/close-white-outline.png"
+      :width="30"
+      :onClick="onClose"
+    />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 75vw;
+  margin-bottom: 15px;
+  border-radius: 20px;
+  overflow: hidden;
+  background: #fff;
+}
+.container > view:first-child > image {
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+  top: 0;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 5c0f38e..7c440dc 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -3,6 +3,9 @@
     {
       "path": "pages/point-book-create"
     },
+    {
+      "path": "pages/point-book-edit"
+    },
     {
       "path": "pages/index"
     },
diff --git a/src/pages/point-book-create.vue b/src/pages/point-book-create.vue
index 3cb81fd..2b7c151 100644
--- a/src/pages/point-book-create.vue
+++ b/src/pages/point-book-create.vue
@@ -4,7 +4,7 @@ import Container from "@/components/Container.vue";
 import EditOption from "@/components/EditOption.vue";
 import SButton from "@/components/SButton.vue";
 
-const clickable = ref(false);
+const clickable = ref(true);
 const expandIndex = ref(-1);
 const bowType = ref("");
 const distance = ref(0);
@@ -14,8 +14,6 @@ const onExpandChange = (index, expand) => {
   expandIndex.value = !expand ? -1 : index;
 };
 
-const onClick = () => {};
-
 const toListPage = () => {
   uni.navigateTo({
     url: "/pages/point-book-list",
@@ -35,6 +33,11 @@ const onSelect = (itemIndex, value) => {
     clickable.value = true;
   }
 };
+const toEditPage = () => {
+  uni.navigateTo({
+    url: "/pages/point-book-edit",
+  });
+};
 </script>
 
 <template>
@@ -46,35 +49,37 @@ const onSelect = (itemIndex, value) => {
   >
     <view class="container">
       <image src="../static/point-book-banner.png" mode="widthFix" />
-      <EditOption
-        :itemIndex="0"
-        :expand="expandIndex === 0"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
-      <EditOption
-        :itemIndex="1"
-        :expand="expandIndex === 1"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
-      <EditOption
-        :itemIndex="2"
-        :expand="expandIndex === 2"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
-      <EditOption
-        :itemIndex="3"
-        :expand="expandIndex === 3"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
+      <view>
+        <EditOption
+          :itemIndex="0"
+          :expand="expandIndex === 0"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+        <EditOption
+          :itemIndex="1"
+          :expand="expandIndex === 1"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+        <EditOption
+          :itemIndex="2"
+          :expand="expandIndex === 2"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+        <EditOption
+          :itemIndex="3"
+          :expand="expandIndex === 3"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+      </view>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton
         :disabled="!clickable"
-        :onClick="onClick"
+        :onClick="toEditPage"
         disabledColor="#DDDDDD"
         :color="clickable ? '#000' : '#fff'"
       >
@@ -102,4 +107,7 @@ const onSelect = (itemIndex, value) => {
   box-sizing: border-box;
   border-radius: 10px;
 }
+.container > view:nth-child(2) {
+  margin: 0 10px;
+}
 </style>
diff --git a/src/pages/point-book-detail.vue b/src/pages/point-book-detail.vue
index 11f09b7..a096f80 100644
--- a/src/pages/point-book-detail.vue
+++ b/src/pages/point-book-detail.vue
@@ -1,9 +1,203 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
+import Container from "@/components/Container.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+
+const selectedIndex = ref(0);
+const showTip = ref(false);
+const showTip2 = ref(false);
+
+const openTip = (index) => {
+  if (index === 1) showTip.value = true;
+  else if (index === 2) showTip2.value = true;
+};
+
+const closeTip = () => {
+  showTip.value = false;
+  showTip2.value = false;
+};
 </script>
 
 <template>
-  <Container> </Container>
+  <Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false" title="分析">
+    <view class="container">
+      <view class="tab-bar">
+        <view
+          v-for="(_, index) in [1, 2, 3, 4, 5]"
+          :key="index"
+          @click="selectedIndex = index"
+        >
+          <text
+            :style="{
+              color: selectedIndex === index ? '#FF8709' : '#333',
+              fontSize: selectedIndex === index ? '15px' : '13px',
+              letterSpacing: index !== 0 ? '2px' : '0',
+            }"
+            >{{ index === 0 ? "全部" : `第${index}组` }}</text
+          >
+          <image
+            src="../static/s-triangle.png"
+            mode="widthFix"
+            :style="{ bottom: selectedIndex !== index ? '0' : '-6px' }"
+          />
+        </view>
+      </view>
+      <view class="detail-data">
+        <view>
+          <view
+            :style="{ display: 'flex', alignItems: 'center' }"
+            @click="() => openTip(1)"
+          >
+            <text>落点稳定性</text>
+            <image
+              src="../static/s-question-mark.png"
+              mode="widthFix"
+              class="question-mark"
+            />
+          </view>
+          <text>98.99</text>
+        </view>
+        <view>
+          <view>黄心率</view>
+          <text>86.3%</text>
+        </view>
+        <view>
+          <view>10环数</view>
+          <text>65</text>
+        </view>
+        <view>
+          <view>平均环数</view>
+          <text>8.99</text>
+        </view>
+        <view>
+          <view>总环数</view>
+          <text>700/999</text>
+        </view>
+      </view>
+      <view class="title-bar">
+        <view />
+        <text>落点分布</text>
+        <button hover-class="none" @click="() => openTip(2)">
+          <image
+            src="../static/s-question-mark.png"
+            mode="widthFix"
+            class="question-mark"
+          />
+        </button>
+      </view>
+      <BowTarget />
+      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+        <view class="tip-content">
+          <block v-if="showTip">
+            <text>落点稳定性说明</text>
+            <text
+              >通过计算每支箭与其他箭的平均距离衡一量射击的稳定性，数字越小则说明射击越稳定。该数据只能在用户标记落点的情况下生成。</text
+            >
+          </block>
+          <block v-if="showTip2">
+            <text>落点分布说明</text>
+            <text>展示用户某次练习中射击的点位</text>
+          </block>
+        </view>
+      </ScreenHint2>
+    </view>
+  </Container>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  width: 100%;
+}
+.tab-bar {
+  display: flex;
+  width: clac(100% - 20px);
+  overflow-x: auto;
+  padding: 0 10px;
+}
+.tab-bar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.tab-bar > view {
+  border-radius: 10px;
+  background-color: #fff;
+  width: 24vw;
+  height: 13vw;
+  line-height: 13vw;
+  text-align: center;
+  margin: 5px;
+  margin-top: 0;
+  font-size: 14px;
+  flex: 0 0 auto;
+  position: relative;
+}
+.tab-bar > view > text {
+  transition: all 0.2s ease;
+}
+.tab-bar > view > image {
+  position: absolute;
+  width: 14px;
+  height: 4px;
+  left: calc(50% - 7px);
+  transition: all 0.3s ease;
+}
+.detail-data {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 3vw;
+  margin: 10px 15px;
+}
+.detail-data > view {
+  border-radius: 10px;
+  background-color: #fff;
+  margin-bottom: 10px;
+  padding: 12px;
+}
+.detail-data > view > view {
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 8px;
+}
+.question-mark {
+  width: 15px;
+  height: 15px;
+  margin-left: 3px;
+}
+.title-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #999;
+}
+.title-bar > view:first-child {
+  width: 5px;
+  height: 15px;
+  border-radius: 10px;
+  background-color: #fed847;
+  margin-right: 7px;
+  margin-left: 15px;
+}
+.title-bar > text {
+  margin-bottom: 2px;
+}
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+}
+.tip-content > text {
+  width: 100%;
+}
+.tip-content > text:first-child {
+  text-align: center;
+}
+.tip-content > text:last-child {
+  font-size: 13px;
+  margin-top: 20px;
+  opacity: 0.8;
+}
+</style>
diff --git a/src/pages/point-book-edit.vue b/src/pages/point-book-edit.vue
new file mode 100644
index 0000000..d735a93
--- /dev/null
+++ b/src/pages/point-book-edit.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from "vue";
+import Container from "@/components/Container.vue";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+import SButton from "@/components/SButton.vue";
+
+const clickable = ref(false);
+const showTip = ref(false);
+
+const onBack = () => {
+  uni.navigateBack();
+};
+const onClick = () => {};
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    :onBack="() => (showTip = true)"
+  >
+    <view>
+      <ScreenHint2 :show="showTip">
+        <view class="tip-content">
+          <text>现在离开会导致</text>
+          <text>未提交的数据丢失，是否继续？</text>
+          <view>
+            <button hover-class="none" @click="onBack">退出</button>
+            <button hover-class="none" @click="showTip = false">
+              继续记录
+            </button>
+          </view>
+        </view>
+      </ScreenHint2>
+    </view>
+    <view :style="{ marginBottom: '20px' }">
+      <SButton
+        :disabled="!clickable"
+        :onClick="onClick"
+        disabledColor="#DDDDDD"
+        :color="clickable ? '#000' : '#fff'"
+      >
+        记完了，提交看分析
+      </SButton>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+}
+.tip-content > text {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.tip-content > view {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.tip-content > view > button {
+  width: 48%;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 12px 0;
+  font-size: 14px;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
+</style>
diff --git a/src/pages/point-book-list.vue b/src/pages/point-book-list.vue
index ed80652..e9bb5de 100644
--- a/src/pages/point-book-list.vue
+++ b/src/pages/point-book-list.vue
@@ -1,6 +1,35 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
 import Container from "@/components/Container.vue";
+import SModal from "@/components/SModal.vue";
+import EditOption from "@/components/EditOption.vue";
+import PointRecord from "@/components/PointRecord.vue";
+
+const bowType = ref("");
+const distance = ref(0);
+const bowtargetType = ref("");
+const showModal = ref(false);
+const selectorIndex = ref(0);
+
+const openSelector = (index) => {
+  selectorIndex.value = index;
+  showModal.value = true;
+};
+
+const onSelectOption = (itemIndex, value) => {
+  if (itemIndex === 0) {
+    bowType.value = value;
+  } else if (itemIndex === 1) {
+    distance.value = value;
+  } else if (itemIndex === 2) {
+    bowtargetType.value = value;
+  }
+};
+const toDetailPage = (record) => {
+  uni.navigateTo({
+    url: `/pages/point-book-detail?id=${record.id}`,
+  });
+};
 </script>
 
 <template>
@@ -10,7 +39,117 @@ import Container from "@/components/Container.vue";
     :whiteBackArrow="false"
     title="计分记录"
   >
+    <view class="container">
+      <view class="selectors">
+        <view @click="() => openSelector(0)">
+          <text :style="{ color: bowType ? '#000' : '#999' }">{{
+            bowType || "请选择"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
+        </view>
+        <view @click="() => openSelector(1)">
+          <text :style="{ color: bowType ? '#000' : '#999' }">{{
+            distance ? distance + " 米" : "请选择"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
+        </view>
+        <view @click="() => openSelector(2)">
+          <text :style="{ color: bowType ? '#000' : '#999' }">{{
+            bowtargetType || "请选择"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
+        </view>
+      </view>
+      <view class="point-records">
+        <view v-for="i in 4" :key="i" @click="toDetailPage">
+          <PointRecord />
+        </view>
+      </view>
+      <SModal
+        :show="showModal"
+        :noBg="true"
+        :onClose="() => (showModal = false)"
+      >
+        <view class="selector">
+          <button hover-class="none" @click="() => (showModal = false)">
+            <image src="../static/close-grey.png" mode="widthFix" />
+          </button>
+          <EditOption
+            v-show="selectorIndex === 0"
+            :itemIndex="0"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+          />
+          <EditOption
+            v-show="selectorIndex === 1"
+            :itemIndex="1"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+          />
+          <EditOption
+            v-show="selectorIndex === 2"
+            :itemIndex="2"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+          />
+        </view>
+      </SModal>
+    </view>
   </Container>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+.selectors {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+}
+.selectors > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  height: 55px;
+  border-radius: 12px;
+  color: #333;
+  font-size: 13px;
+  width: 26vw;
+}
+.selectors > view:last-child {
+  width: 34vw;
+}
+.selectors > view > text {
+  width: calc(100% - 11vw);
+  text-align: center;
+  margin-left: 3vw;
+}
+.selectors > view > image {
+  width: 5vw;
+  margin-right: 3vw;
+}
+.selector {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 10px;
+  position: relative;
+}
+.selector > button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.selector > button > image {
+  width: 40px;
+}
+.point-records {
+  padding: 15px;
+}
+</style>
diff --git a/src/static/close-grey.png b/src/static/close-grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..c79b417a9b58597a3607a672f261ed1ee59cba63
GIT binary patch
literal 374
zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q3?%1AoYnzSEa{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyaaLr1AIbU-3xqXfWh?X(}6UQgn)VT<^dU#CQX8HXMzEcJ!Q%ixcWJB=0Id2
zA`tECLTp=shD((M`2{mvu8Rn-7rQL_TQu;SB<oV)teRS(4KH6@xwLrMZGE7sxt=bL
zAs)xyUfIoeSb?WCQC+q5&a5S#`Op8#Z&7s?UC{h?W%GZ*m%>as9Xh8s_4OV-Rr7F1
zUBOMS59WO_7k8aGcz%xV><~BciguqR2ULTe@CCit7xbpA@{+|Oske&?1D&3}s9_iD
zt$rkUUb9RzE>?HC{PW#^+vXhWOf7l%{K)3H9%_CH&QteVhx;AfV<O?kc4t}AxpjMM
eA5Qyvd@rMbD2JhHHb)K6p$wj`elF{r5}E*XX{1#E

literal 0
HcmV?d00001

diff --git a/src/static/close-white-outline.png b/src/static/close-white-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0955dbdc7513ee03ab05fcd776a39ed2aa342ef
GIT binary patch
literal 954
zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q3?%1AoYnzSEa{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyaaM?1o(uwx)=ETAC7>1s{2i#AKgoW{DK+6>+k>m_xiG^Fl*N5EiGnTO=ljk
zG5KD|`#zQ3;Owm;K`BnPqdye=#hh0&f0%L5^k(5K8Oyqt+wWOL1b&lTDqCA4wBg02
zE7@t9-V6*(x}GkMAs)w<PQPCE$U(s6G)L#0gHJMC&YiT#U-$q2;@X5<iL*TdoByu3
zc=hGw;JdL*B8IW+%)1vq-gT~UW2F9a4v~)!Q`{8OCMW*U5<6|F68`x}g@CqLa&uwQ
zKBbpWlJ-TI%~d)5cI}TZi(}O$zg#nKxBdmcw;}5OnzLK0dBfJ<Jd<7`fA&e{^;fGV
z=S{xq<vHJPWl-v7ZTtESH?n?+ue-SDt3o0BH|y(O_g;Q}ptxI1zWVz69p62?Pi(uF
zvR~XqcCX#+>7uJPUgcc2+OK<S_wUWCd0BeguKwF~KBrNXrH_kyzLb}7JQv@zPd@)I
zmtH#epzXwslan76`#fCcVaU!<*uMMr0d=cF2IpzE?D<90yLw}u2^?t2{kV4eb!&d{
z-ajHI%+wE*xcT3&Oa5{0u%Qx9gKm1T&dyJ2VnQb~S|+aeajeUGjb*$3$_EC|rKHs!
zxUaHM*>SKb`Nsq=zGS_GLI&HF&kPo@w!i9>O!^UdT+xkPuRE*ujig_Og~-cSj&D49
z+m&K-R~>la5PH-;*mhMnbI-pI;)l<l+RWHL>otR$;J?0ircY*YZ)Iq>xKgirecpMd
z0MB>bmnRml3su_xK;`IsSH1014``m`Kew#QP0UjC<}(*lE0wvPPcln94!?@M<lV78
z|I>y^#~$~Wd#2xy7kPZKMnQT#!{?>Rd!C&UU;R_d+>HNO+0i=+Goy`)g<oV_m)C6z
x&Mw&=-n(w+)_?rQ_5W%&$XqYgdHeowJacK9TaEF;OTe_q;OXk;vd$@?2>_;uDFOfh

literal 0
HcmV?d00001

diff --git a/src/static/s-question-mark.png b/src/static/s-question-mark.png
new file mode 100644
index 0000000000000000000000000000000000000000..961e6827d79324e77a38b1c5446eb2c69b54f507
GIT binary patch
literal 760
zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s3?yAI>n{UREa{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyaaNd2l#}zx)=CNn>KC6j2Sb*VD{|UKsFG}nl%e308|BG0NFq(h#DX{ckW!E
z8e~DB?3_7s;2Pm7kr_av;HE*uAzTPKfBt-knLsHZ17aGGy=c)QWMe@_fZYa^g0NSu
zS_O0u#6UC>Xb42{J)Q%~K+pJ;1o;Is2!`Bvt#~}m{yF2JAAQNw-gYW2xnlfNqsq?i
zXI0me?_YO{7^No6cvr2w<ZAOD2~|nCMx7v5?hLDY|I{XAr*v#&vrO;56L9w2FT+0P
zQyZrPgEidK#W6(VeC_1xMYkPzT>CvtCuL1>F^ztA_vK#eqkgvk|Jzn32tGZ-;@@p+
zEy3_zPegG2C6!lS7pcS^z0<9*rOV)k)7ovXN-q5`E?s*oFE?WQ%Ed=5{PpzDZN0hn
zhEIF%+1tlvp5wZewab{{!H+Lr%o)`8=RBKw+lt{t-Ku{UY!(;I92Ph?n6p=|XOCw*
zXVPF%a)lvo-_@HBAMU$X%P94{&CvTUYsJEg)id6|EN|eB-FVH=VbyxZeJ^<rEM2DJ
z$5=5dbv?tbUyKde!b<AVr*~cLXNZx!xH;arf8O5W|C|i9)zKe5&J+9lbVJ;?$-h20
zPW0(n)y81;>u2RmA778|K&~5_=aYRSUoF~Waca}zPkSzeZnbNuTyCtNDlK_z_R;+5
zvRMJs*YL5orkHMAy{UO_(3|>PqdPa27~IG+yjWqlN_tJ&*?%cj_h<b#Hx<yo{<Azn
dfA#wh;{E6BzX%1?rU9dl!PC{xWt~$(695_<cH95}

literal 0
HcmV?d00001

diff --git a/src/static/s-triangle.png b/src/static/s-triangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..7de05fdd31546bd8d57807222a080e20a464393a
GIT binary patch
literal 442
zcmV;r0Y(0aP)<h;3K|Lk000e1NJLTq001Ze000mO1^@s6WY;~d00001b5ch_0Itp)
z=>Px$bV)=(R7gwB)xRr6VI0Tt_eUX7in16i78VnW(PW_fDBR6p@MBPSVYM(w87u}R
zrTiET%5Y2Z4=5!ivqUoa)uTtx)#2WI?sLvP-1|(Y&iDC#UwzN>eU6MVlfVX0M`f*d
zU|!Z_jOhXnf%Xb9J_2KsPQHK+*$8X_!(~QZ0|Sz-tm7LPfTn?Ept=mu3@|F`AzM2K
z=(^bp>;bL+h};C`B)tV|<^?)r3$P3H{W0<bNK0DJSEnG*A*+BTU=gs-Nv|hhT+(r&
z#G$~zx$FmafaU~+H*Od%!*Y57T{qi+eV``+<S8&B>AqMlZ=gfg0BgW(vBV+o?Nv4{
z>D4DkBw*l^PXKo68hnbl7&{CLl2#+^$-M`CHydL*+~23uW6v{?l62$|`y(V)2Lqj~
zcb!ay6ut!pC0#_t+4z!x0qBf7o3+0X=fIGpyEwSSfNp@gfdjx!yIuBLnv(Pq7ndl|
kA)A10;7rm=DX{F`Pqf`$d2wsv_y7O^07*qoM6N<$f-wKU3jhEB

literal 0
HcmV?d00001