From 68d99f86b17bdee4bbffd60a81c031960f61086c Mon Sep 17 00:00:00 2001
From: king <2229249788@qq.com>
Date: Wed, 6 Sep 2023 19:42:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E7=AB=A0=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                         |   4 +-
 src/app.scss                                 |  29 ++++++-
 src/pages/home/components/curRecommended.tsx |  84 +++++++++++--------
 src/pages/index/index.tsx                    |   8 +-
 src/static/img/emptyLineChart.png            | Bin 0 -> 10099 bytes
 src/static/img/play-back.png                 | Bin 0 -> 1587 bytes
 6 files changed, 85 insertions(+), 40 deletions(-)
 create mode 100644 src/static/img/emptyLineChart.png
 create mode 100644 src/static/img/play-back.png

diff --git a/.env b/.env
index 3852d45..86e2b46 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
-TARO_APP_API=https://yjx.dev.yaojiankang.top
-#TARO_APP_API=https://mooc.yaojiankang.top
+#TARO_APP_API=https://yjx.dev.yaojiankang.top
+TARO_APP_API=https://mooc.yaojiankang.top
 #TARO_APP_API=https://shopfix.yaojiankang.top
 #TARO_APP_API=https://playedu.yaojiankang.top
 TARO_APP_LGOIN=true
diff --git a/src/app.scss b/src/app.scss
index 76057d2..5f2fd71 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -234,6 +234,8 @@
 .font-68{font-size: 68rpx;line-height: 1;}
 .font-weight{font-weight: bold}
 
+.bold {font-weight: bold}
+
 .text-indent{text-indent:2;}
 .text-through{text-decoration:line-through;}
 .text-left { text-align: left;}
@@ -272,10 +274,12 @@
 .text-hover-dark{ color: #121416;}
 .text-body { color: #212529;}
 .text-muted { color: #909795;}
+.text-black {color: #000 }
 
 .lh-28 {line-height: 28rpx}
 .lh-40 {line-height: 40rpx}
-
+.lh1_2 {line-height: 1.2}
+.lh1_5 {line-height: 1.5}
 
 /* 圆角 */
 .rounded { border-radius: 8rpx;}
@@ -369,3 +373,26 @@
 .hr-dashed {
   border-bottom-style: dashed;
 }
+
+.relative {position: relative}
+.absolute {position: absolute}
+.fixed {position: fixed}
+.sticky {position: sticky}
+
+.top {top: 0}
+.right{right: 0}
+.bottom{bottom: 0}
+.left{left: 0}
+
+.divided::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  transform: scaleY(0.5);
+  transform-origin: bottom center;
+  content: "";
+  background: #000;
+  opacity: 0.05;
+}
diff --git a/src/pages/home/components/curRecommended.tsx b/src/pages/home/components/curRecommended.tsx
index a1a124f..e47d4f3 100644
--- a/src/pages/home/components/curRecommended.tsx
+++ b/src/pages/home/components/curRecommended.tsx
@@ -1,26 +1,22 @@
-import {FC, useEffect, useState} from "react";
+import {FC, ReactNode, useEffect, useState} from "react";
 import {Image, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
-import Taro, {useReachBottom} from "@tarojs/taro";
+import {useReachBottom} from "@tarojs/taro";
 import styles from "../home.module.scss";
 import VideoCover from "@/components/videoCover/videoCover";
 import courseTag from '@/static/img/courseTag.png'
+import {rfc33392time} from "@/utils/day";
+import Img from "@/components/image/image";
 
 const CurRecommended: FC = () => {
   const [page, setPage] = useState(1)
   const [data, setData] = useState<Curriculum[]>([])
   const [total, setTotal] = useState(0)
-  const [examine, setExamine] = useState(false)
   const [articles, setArticles] = useState<any[]>([])
 
   async function getData() {
     const res = await HomeApi.course(page, 4)
-    if (res.audit_mode) {
-      Taro.setTabBarItem({index: 1, text: '文章'})
-      setArticles(res.articles)
-      setExamine(res.audit_mode)
-      return
-    }
+    setArticles(res.articles)
     setTotal(res.course.total)
     const newData = res.course.data.reduce((pre, cut) => {
       const index = pre.findIndex(d => d.id === cut.id)
@@ -42,32 +38,54 @@ const CurRecommended: FC = () => {
     data.length < total && setPage(page + 1)
   })
 
+  let examines: ReactNode | undefined
+  if (articles.length > 0) {
+    examines = (
+      <View className="mb-5">
+        <View className='text-center my-2'>推荐文章</View>
+        <View className='bg-white rounded-20 clip'>
+          {articles.map((d, i) => <View className='p-3 relative'>
+            {i > 0 && <View className='absolute top left right divided ml-3 mr-3' />}
+            <View className="font-34 bold text-black">{d.title}</View>
+            {(d.intro || '').length > 40 && (<View className='flex mt-1'>
+              <View className="flex-1 font-24 lh1_5">{d.intro}文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨文章结束阿斯卡极乐空间是你拉卡萨</View>
+              {d.cover && <Img className='ml-l' width={140} height={100} src={d.cover} errorType="acquiesce" />}
+            </View>)}
+            <View className="flex mt-3 justify-between font-24 text-muted">
+              <View>{rfc33392time(d.created_at).split(' ')[0]}</View>
+              <View>阅读 {d.page_view || 0}</View>
+            </View>
+          </View>)}
+        </View>
+      </View>
+    )
+  }
+
+  let videos: ReactNode | undefined
+  if (data.length > 0) {
+    videos = (
+      <View>
+        <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
+        <View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}>
+          {
+            data.map(c => <VideoCover
+              thumb={c.thumb}
+              title={c.title}
+              id={c.id}
+              depId={c.id}
+              key={c.id}
+              marker={`共${c.class_hour}节`}
+            />)
+          }
+        </View>
+      </View>
+    )
+  }
+
   return (
     <>
-      {
-        examine ?
-          <>
-            <View className='text-center my-2'>推荐文章</View>
-            {
-              articles.map(d => <View className='bg-white p-2 mb-2'>{d.title}</View>)
-            }
-          </>
-          : data.length > 0 && <View>
-          <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
-          <View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}>
-            {
-              data.map(c => <VideoCover
-                thumb={c.thumb}
-                title={c.title}
-                id={c.id}
-                depId={c.id}
-                key={c.id}
-                marker={`共${c.class_hour}节`}
-              />)
-            }
-          </View>
-        </View>
-      }
+      {examines}
+      {videos}
       <View className='text-center text-muted font-28'>- 暂无更多 -</View>
     </>
   )
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 5cb819b..d8f88a1 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -5,7 +5,7 @@ import {VideoList} from "@/pages/index/components/videoList";
 import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
 import {CoursesKey, publicApi} from "@/api/public";
 import NavigationBar from "@/components/navigationBar/navigationBar";
-import Taro from "@tarojs/taro";
+// import Taro from "@tarojs/taro";
 
 const category: TabList[] = [
   {title: "企选课程", value: 'is_required'},
@@ -41,9 +41,9 @@ const AuditMode: FC = () => {
     publicApi.course({page: 1, pageSize: 10}).then(res => {
       setAuditMode(res.audit_mode)
       setArticles(res.articles)
-      if(res.audit_mode){
-        Taro.setTabBarItem({index: 1, text: '文章'})
-      }
+      // if(res.audit_mode){
+      //   Taro.setTabBarItem({index: 1, text: '文章'})
+      // }
     })
   }, [])
   return (
diff --git a/src/static/img/emptyLineChart.png b/src/static/img/emptyLineChart.png
new file mode 100644
index 0000000000000000000000000000000000000000..80622abf72e647e0aeb76d9b9497c2d1491519a5
GIT binary patch
literal 10099
zcmeHtcT`jBvo?XyiBd!)ph#Dwh!PFGND~l2DG@}1NDWmGR0u>A6oeomMWl*&P+DlB
z(n5`b^xi~>s7Mnz6sg~vfbATA-&%Kl>$`v4b^n2^Wbc`IXP%jPX7&y>GSq>wz*%T$
zXkf>6HBZsd(4xTSPfQHp@8QD<IPeeRbxKErCbyY?oQ7sE&2de2lgsC(l1|=A)VW$e
zJe{0ujIo#F)n*AwELay-V*GaJS_Hix3MG87yY7zsWir1lli;0qtIG5HO9dMlG&nun
zszSH#J_uz#_N96c?Zus9jC_*hzz3%d)OK<`ad@0DK0e(l94U3idC|P<q$$>V-d*~9
z{Bm;1@?x3QeCErQiG*1?2$LEOZ2(kz>ScN9iwhsk61w@0WM4t4?))sXEyq-#x2e2B
z*_WK$)qkv#_AEVw$s|Ut>C&jLc6uQh)7<H7{rp_xQXVtWxC7>KBRvF{-jLZrIB6d1
zibP3z+m(Ado}8YtboDcGTut0QdL_q+2KjhQm)QQr*DP%|DN1>P7Flh4jHo^~m-SZ;
z=C9qkOIICxwz*6+T<a<J^5$s4MD%$WG)CbvMrN`#$cn<kXs0_>ZE?1xRwd>~%%?KD
z{*FObxTW=!9Ch=~X=)6KMi!_vciLE6v5|`SnNjfdW(m29!-s;dG4S$Z<pUO)6Lt?J
zNu5pVJcsNm5l^n1Qj8hQv&D8I|8zYvp!H0CaQFTceerXJ&w2~z;ubR!?%&E+aSp#>
zYk`MK!U7$*;lsSVRchDS@VWdXcgKzA#nV^Mq|KgO^tnP_Nq>YAV7=7RsqT>&mf1>U
zjfZAyT%Nz~59?@o)F0;2xx`3vA6a@m;J^}S(b|Qd{fjl_>Ii<q?nUHZ0*GxjvQj#<
zu_2X(ED<x|;n6&>L&%pNliu(Jm(-4|=qqJC1I4ax!(URRvLmHWC|r@`@3<&}c3M)*
zYF%o6#l!%=;Nd-TxxAwwqPw6`wAt2ueqpNJr{&wra2YhVGoJO|4zfZ{dw08BsvkIH
zkVR^|5y^fYo7gQ^x4w;ZKJjtHR}i-Z?IW$jSQx8ZQbR+vvF&btaS#8E{+Ch_aCifk
z$#fTk&uraLDndfcP}Q03`folGm!TT8G-AnT=B|(zEiLNOE6{gXX6WKevAL@3Nci=U
z_}KKh>T5Pmunv<Jo#24Z%giKZe$|&(SBJ8y0;SK6lv)Yk3{;&Jw&9)RISF#BNv4ke
z4i^&3904SPg&~c>u`ZGm=?tQOa)d7NVwxyl<8r1t^PdjRNjU5Hy1qcg*{J$AucK4d
z8FY9+sCg_3@_~`}en;c3|5g1z(&6D!ypRRn2*HZ28d4D=&(p9<i*#lSAwvNgPFzpB
zdxNG01M>knO)Ue~HHoZt0T6x!Lk*}_<02*vnz)a}^|1e`zn_dTE_Iu6lkR&F^LRc4
zhS}2{8MA!*7^aKS$1BghW$3v>@j`21_1Sava~8IxGMj}gEYGGn_)sMc9wa+x0^WE3
zW4BPczIX55ccm(v1n3v6h(B!ZNz5F=qw_f{={RJfsnB}EuItUq?QA>N14hPV<P6Pp
zw;D*f{a`WOz{`v8E=lpI6Qgi5%OLTgIq+#r{L=tw1&>Z7Gf4=dU$dMqF}H)z51L-V
z3um324+fe%SFwI%?VkQJ7bKUCbg~}N7b}83p~Yv9%d@euKW$}-bS}Ft4AJj6PH&>(
z=g@?oZr+(|*dUqsd4Q{BSlTE?ko}7o)#9?K7N4{{n?lp38E2%k5~xhzrqd=WpR#*3
zChiq=_n&WRwtgGuEW~h)k!dM65}K{)`W}ONI3D{<k{{6xtj-vJ<ZjGcnYKpmzIsQ2
z+DrV{3vMOcryNJGQ>7wAG{McO5maCp0BC~Y^3Ir(Z&gk&bp+)`^9H{B@`Pvl`MLVb
zOgjXr28Ff44%YV&Xih&V65&TIR8bW$OC%ZAB*VO~UOM%){B5qQ*GfpLO7oNFGs~a&
z2_Np|t=g=>#Zq+Z=tnYT*(s10KVkIZty7;iM&2>PvK(7lG{kB_H~T__s)DolcAib>
zW6S;mk4_XFi1y=XvCPTu-Q)qfq^BguRmB(?!4>Gc>7_(tjPw_T!D(dyZs6G)R3~wn
zysdoZrk}3e3SV@lD_t6OYlYux5rquTN8w^Jt^8s7azpL0!RhsIB&h#Ma_VC>B}cN~
zvXu_AtqA*l$gorwU>x;24noH^@WsnXE1z)+gOZ*9#!Igg(c=M{qk<DBDQmm`m=RHr
zC-=>;`8N96(7&;?6%)dc1ICQs;IWP`Go)B`A`sMzLvh^qgh!8W#z@5HoA{_^hm`A?
z;d+@VIz2gAU_;Qew>pVv`mx)WjW&g3N=4UU|6yh=vzZaTqgLmi46EW%C9=p2i$1!z
zyf7HyXGUf%_$$r-%M8Vu#^3^v>^z(5{TBp*?GZoBA&bn;_ON4L7Mxu&{6<zBR((;@
z(!<K_)kr}rH~E0T7$)9dh@0m|dc7LeN18;IhFQ<i6l-NyE5#|(5)9+BOJl@|e)*TL
zD7T0@b6VGMo+v4@8_CRPpoW=)5OmSssB9>A;J||{A2~AY>@TVDT9Fb9?y0^n9)f?q
zakbF5d-9Xp=~M0_Cd0{>lS|*7#EnxDS!8HjdK44ymr<67vwgcR7U(Td&O5$-LgpiO
zLrg_0({*gS!hvV43ZmRrmXm$o8dpv=8PxhO^3s|;WcY%RZ1dK)+=<U97K;q!AjkoE
za{MF-^3kHeL5m({mDInz-Q$i{sOok5rU;_x$J@srR)m}|PtN1;NR+8eSGAyxWsnDX
z@0tB|i*6NvUg`)wS?)oaFBl}POdkeWm^AV|3-vK4_HY5N=?^f2^ihEM9cdl!dd)UG
zG1b4Ypmumf$%JZ{(8l*z+dAdEwmlD(jEDs7fHaX5>sl0xIL~F`MkQS`juBy@n>w^t
zwm?Q|w}>XyGNIrCfTrRVlMt3kv(MN%?5ion>+6sM6RIOY>L=OCFX%S49R&(bQWPxa
z<qWiErg1z-y_k1|a9d`YA;(zOa~K<fi+SbvJuWB<%-8r`5PdSpt(w`bOmW}7nJEd(
zAJaxlTW%mEwm(zf6P#zGE_T|+7-`m9CSj0-%kT`v(d)pjiAYqeut5%lTG@XuIr&B1
z?`36aW9xNjck&~kcQcnLt`qU$Aei)G`K(O^lHM@06XY1U2=6il?`YOh!XcV}8<$Z%
zJ+Sn2`O^hM94<pP{&(q6Np7Fvdh;$FaW7hM#44yH(wRxbc$VUY<C8+@Cxn$F6;D+Z
z?sM%$JF$tOtBjBB4Go)7IY!hw&jZm99x9nNoo{=cNCVNgJqTgN!)cFi28gqi2_-RE
z5s~*a((nTmIQx2}d~U*-o}hKVkp`Xw<~Wn!)P&kyRL9jy)5fxtx|6d$r$@^}zzNaF
zFyuMqERKYScm0em-S|}6!cO2<&k9+AKYp5WdmF!(XThV$>*!Qj2D}i31?V2-rU)9V
zKXatN=U^Z75J!-$n0D;EP5AYy*I5?gUTm`~-HrDvix2^!2di6x2LXu{@@^9r^<TU{
z4#9Nh4wOF7_i@W`Dz~XgxH(V$yjGW1{F$!wMNi2`x4}XSzxdH>=EaZmY)r9bX&+!D
zqYG`yVuZO5eR*#cyo27q&(UlcF5J!lm3)0TY!Q9@;L9)&n`pZ3p97iP{j22G<iUZG
z{)N=mC3%7OnBGL&=(QGFJo`RPG(X||sz*>pS|ZkH465I;&kY2Bo=n&M(fp)kk74PF
zk;XPFMMBO2#&bQ*ZCVu}O&kw3wsYfy56ZrZqk%NW4c7F`?vdmG#h>BP0}!1#52AC)
z#6rV|r@M<2+{P+pul_oxEyIsQ%kZ9KBe9*3>NqBZb{gD^4yBZ=y+a^&_ixg5JIrMF
zwGH)EcfBs-F`S<Y{pen*9R7`W3e&sFF0r6Hf(qwKR{~&Ds=|^F(Z=2aFsExj0TB01
z0gc_9+)4^gYv)NVOs<Y$pV*6?uL!aG`o(TL9sbZgCS^Q8O9v117lXZ2(GkO~>z<gQ
zoC{TLTO(YyKkR@m)-9yU(=FR@P7NgM^gr&weqFd<owC#WL0sRjB?TU<$kRh&)G<FF
z?kl85yjYF!JP6UR1<e;S{urcQXLg5EZ{an=Ji|RTe&tpJ9~NNSEk0x7EiK=x!tvky
z6947^-dJKr{RG!z`yNH90Y|CQ7%zToR*8GuGe5k!o$_E0Av^7|5)ye;jeK_$z`X7Z
zc0l)Mej*0Ov->`Wm)ONG+_`f93x@_MjmMPT18<Vc<oA4=1zL#AD34Bd-G>yjCf6_%
z&*Yq;N%Q6XMCpp>d_~%IwOCkIZw;G@6_P<mX_y`)(#EfMP-{!#deV(TrEHtP3oT{d
zn4O`6x$_9gquUBq_8^<}?o3q1Q2f33XKFjw$LW|g5JaM-JdHt1ojrEm*$()r{kb|Z
zC_O}tlbTF1wbF;b*RxMfO_^3DzDMIG2lYCx)`TFoPmuI}&yoJbz#(o(V_{W=C-0x@
zfVF(m?1^Ait25I6!=<x~CLkM91|HCJ5#*!{f7koH8kp;S++0qSfB4QVU1MY@fEE68
zAv%!O;np)1(`2fcFzX}9T3%7^nU0x~zuI>Pm*M33Gc3QB%}P#%l=4D*9p49cUr29K
z%2-EJ^&9`L#NTVBOnEb761Sye(%oh+*L;VMGBf&!MhR_VJM!3{&k<+guo|)uNr!Fu
z)KNb4;xbtg!~=AcKb6{mCzn*NtQd@(WPPb}=gPO`1GKRi2c-a||KL-LB*VXKS{M|{
z6|S_-%=@_d`59R-gn>T2V@DIy4`i_u?)GXCPuVQG`kSt`e?B`?<dR;@?;TKbb;ZZ2
zl&47B*%MS<$bWE9k;0E2xo1$R%m6GSy6NlI4T%!<PW}6khQd4E&rqAyt=%13SlEMH
zC2Qe#$f}vmR>@Js_hUP8>Nbe>Hg>k(8Wh)73zErczUl6YDnG-jP`L@^1C9}$ql$Sc
z2unm^F8!MC#F)$})y~v;k~)G`yY!B{PLOl!ktC66N_+V2fd1a|F85woJ->V9;4a2&
zCRNKk`{vmuUBKAyx-}_hDrkT%@4Tow#4%F2^My=p6q}c1^qR+Teajv;(8p$Hnayqp
zfLeNSTKrlf+G)Agm{Qsfq2<lycnyUDZYAW|sC@FOV8C+?ilUwRlX0S>ub5+@A`tzc
zHq%;4-+gg+XT&1Hz(j?Qm%>$#9ERv$kK4}bNU5^?yG<z+CRW(7%fq_HWZtXo8sNZ=
zGQc&LDTD;{Gaa4He#T^h80<M{x^~w4oi353zY+X&4(z2UtfGx#lOS3?$P5M)nX2;a
zrYKrCL{S8Gc3{Ty@HU~gaeS(24HkB~t3`_uY{62?4T$aUfZ6|TrXaVW$nLHR-{fED
zJYQZMbnpHADTG2GejN@)(DYMwz~eH%!+c3vW0Ri9<ZSc3*n>Jo<n(-RIL&znYRar_
z&Oz<@dKPkTdkz|ZbGh&iISxJ09um7^js`pxLth1^-Jf&>S@i?|U+hs42+&GMy4O?}
z7q@YkAl5!*f&%<I$&jzw@^}!~E&QZgo<UoLDx+%zs&5OUG!`yNX5FBt(DbZZ)Pspi
z!Dle>nf^x(dAx@na6C+nEW`IQPr+&(^A_QWGrP$pNi{~tkRY;``6*|3t`H@e8e@ta
z%kpd<e(ifjjN-~pZK8&47x7pACBDV5tSxpM66Cts37Y)!Rd;bBnR=TH1S)CX{&2P;
zB(%Xnm=4I_!XcXGSALne#qk21E+MPhfr~*4z-b4kJ{|eL`2-NOucxv$*#-zDS(0xG
z6YoNMp9ze(+(j|W4Dd3K9iD*0tG#>zxDbL*fXe<PKUKa6bh!V(`U583_WtBeu(9DT
zdi~F<7wOExQwA%A8=}B4kGCrj*rr2k)+#2x%kfLKac$I^#U|MRY33Olv4Ai*a?Rid
zH9;Dnbg*;4wC`L7WEr1B->0OuO!=JyPrH^6waM@J>bg2<JiA{bq7F(23b3Qe<+|h4
zY^oFk*<^qD1rs{~2|^!5Nj4zsVo(NzS0@<9ee<v>EyrE}E!yI4>>04vmf_a|6$O6B
z(}W4-i99XJ4hksbfDwj+a1RZ>Pw?pU2!EtO41*>dvH?PwP&Nt^`ld(ZfLO43Pdz08
z&DQIyyHI%?htndmENAbfoR0%wHs+Kd+O$DhOrI#xOXnX(*qgb(hKYio*38yOI6eyK
zi&8r+#s)DYh<RYY@WBm368&wje_b4`OuGg<F;^Qb3=k`kp+S6l&&nW{D?3P;xOR~x
zXcVeX$Ab3=*GN63#e|9}xc!=wz_LIC$=bUQ9A^jr$gW_uj4*bBgdI<`D4Kf`LTjdO
z1YEigSuM+QO^^E*tDxCIsbJA<<Z;7x2W^bRmL{AjfsqMCug<|Hm->#0v=1s_dIM*=
zzcgMFl7-&RPGAWV+U2NL#ep|wGI`1b$vWjDdxqAmYR_IYH&p9jD=tWwKb<|(B&vT+
z=CJY$bwgrc$+`81r!K_1h%$KyWHTQDdA-)S_5k#cRO2)O1i$bTe_n!+$-vbZ95-aH
zEQS)Epamtq1Q48&OhKdl+_YvHljjS{G*JXbWR(O{SlqM!C(}4K<$>cXs}X@XbSi{i
z2dOP+^h9Vgn#?GAKOD}KeMgnrf6dn_JFWlgH~oJO(1BR1bf2NOLuU)T4xE^P@pUU@
z3&c(T<LOil>U2ZeHtPkYDlM>lDj#9efk7fz)-p$sC$x&Jxd@N1CC|^K8`h{;oq0Bb
z&c9>w`=co#O2|~`dt2o$Q*OORkQiM{z;U<dw&W#0%S~F4XxmyVPVrl55{1z8uD;aV
z1L0*i6eR|nAhOt)|9B{scs$_OQHK*`-C<?YV=IG$@!FZa!(ejhC^Gg))PA)#16jn-
z#+L5x$Xl9BLMXmew0y4cq`>2;`$?rhzpHKE_|+-Oru@I>t6CnX2PhFwrj}C+&$H&7
zKGj!Tmz-2tCe!ssGn|sZ{hQSXq_$cX=Vfr|{wa8+`ZPKHQlV+a)BBg2lF#*yMa)E=
z7X>G-J^AeB7)YQp>Z3bD(Q0sx_CC9X?<<n&U*;Jua0qq3Rpc)3sgVsi`X%f{u}qK(
zzLT<(paVsQKTESWj~OLVs*n_-JYZq|TG{O5)?SgZk5YHkQ@j*a<@roDG!t<dRb}%M
z>Za<4eDP5WzyS|=N$}0lChPs4EU(ScMjf*^nGv%7SJrG4;5JAV=I}4keh1%yhlme#
zR}g?A#q}9FG?_V+N!1j+_;P4OPGfcL1`TWeV;&~z%*3pl+`}23Pmy0QUAVO}x$BqR
zT&@Uqi#6am6?@Bda6MRMP=`m_yB~|8w%H)=8TpNq)R`t5yB5+LeYBcoV|Ox~^04aE
z3Ere|W&%6rjVN_m71?{`oc_W3esFSl=^K@+hnxM_q{|W)A0SNw-jr?w#?bx27~0q{
zVFfs?WUUb1Kg@{sZooaX9MT!7t-vmbcB1S%kPp)Zi5illy2QJ<M*^a|fb{T0pinzH
z^xmzAIHvS77ULQ&j_{Ssp+>b)aZI9AGeE=HMSj9g7|nm&?hT}O@N)C26D2g9mUk_C
zDx?buzeC+<|63M#{G3ptn^rzY6dM_u6~Eg{H7pp_0X8p!q*>o07FAR1YEs^CD_J`o
zUU~83E+>E@r~atLO|#S}>_-{3$$s8m&!~E(e?ti0c0ow=ydmMCyv39T07T&Tu67QC
z)b7uduWF}|jUR_jL?2h<G!fkezDK`@>etF97(CK^!)zv}lVx=amoYo@QB{8BdCBst
zVZEYxi?>JFfdR|2@xn894|we#ttD_}-%naTg?8y(T8kA|6>ove&sYw=wz50ZtpJpl
zlX2YSk1J3~W_t=98f%tqr{KCMz0dGbUV|X|34f#IO`wIsP+u`qwpel!R20^O4G`5v
z3i+inT*@j5&J8}=%Ejo0@QS0_By+q40iINT{u~3qC=Q|zsGX;#&M~mwqVir5%5bQb
z&MAYQeF6=&rMOyu)NEY{7)YYZ-%@PYvP?%q!zf637hqu`p=~MVP&feK0Y9L&{yas^
z3LDi#a1+T<B8p8It>snJA559SnNSLN4!7ZZYg6=0PZI*di>$qZ0Cu0(<g$n;aDsp`
zYg1=bwR8;-HGk!XwJC5LWhaLJ<j4e23^)q4i;Y~70$6Lug=bWUs!O(a?$^KtKWEAq
zw*^~B03rxU=-%T<Ue!F(@Gj2fvF^#rGdLWgystqn2xlsGG@cbql5|@k|D*#W0guRV
zI8Tm>YH;g#%Te}jco)YX%;Eb%3UkaWZ!N^{GqD1eM)>}61&9Wql0Jasj^4tDfW1LY
z6bwcU#j<gYtOXIyw{schWxJNs^Ht?a=!IS4sDzK^3lcy|-EUGR;EPw<mg=y8l18<$
zgWVyrAdMOo4OM6A<dObF^N`E*Ny5M0epq<^`)(eyJ^hMxy+)z|=B&-J>r`$U0EpG5
z!*5ek!?2zA5`1C2p#a8sJ6Nxa@8-h$w-sH_7=!CS9=R2aBJZP6fla;uvKilIBE)+n
zP8_9Ze)7SklLMcZn*60ztqP|<UvssR_jn<3J72OE&iAv8fh_z0h&~Ts+xYFDiv}+F
z*?D#0Et>AXFD<XIDs3xX;4gQ1rJ;1X(f^X{A5@u(qf#z)+ix=$hY?yQ2Dk=F(&vwT
z)&NQv-~H&7zbX+|5LjIclgduH+mO3^esXnYlCoc@*U0u{!2c_h4{md1&+_$eOgOGB
zt-Ca&%*H)hudkjyTQ-{nDvLa|y=a3c`ae7d#%)r5v-pO8eaQTIush4K6xh>$x)KYv
z@eL6Ug54+v9V#sbXrg2yHT~=YgSy7$Ci~LoQ!C0#2$+HU!xh(nc#VIFZ=B3hbV%`^
zX$>VT0Xll|)78K1ZtFBkSc2a2oIqKdsbe1P1Zt2pKh#h_3wlZq9YkLgsV=^VE1p|U
z==<yfwr2KK{rqJHz_~fBVQahbb;uKZ^dzSn-#>GYXMsI_NBF+wMcoj)jf}pTjmDR|
zyWv{-ei4@Zu*uQwzU8?&4O+n0fBoibP}L>@8?Kw>*(kD!C`H5!+FoK<i^480y3^-G
zStJ6~(EJQ#I(>G^+E@r;C!M?FP2rU)>-XhpYeJl)nGemgGe@%9*ajoL*a?@<VRoLU
zFnf^m0OX+fVtl4_CY}wlt=xSR5Qvspzw%b*^(rZ{durc7Qt&#lB2JMMh$=A?c2Qkm
zpj&x6Gd2{dl!svb1w_JAJqW*2Y`w(+n`wFPpob;Cjxt4a6^pHb>r=cFyF<o$EtHCe
zSFf+iOG^fiUG|m<#Q#CU#HvkW^O{9(WZm#;3U*-qL7D2#;crfj%`iHz?3sZDfw899
z<&&1rp7Y0&N7gH>8WM$DFije4-y_69LatnDQmE`Acn!n+Y)KC)dyA(6cRRkiXF`vM
z+t%|}&Rr+0Ej6aJMY5D!K6hYW0-*R>%!HO5qVrQ^A<wc6`_VfjySXm~-JvlaopKxT
zwwZCvA4kU2myJ7a0u06Cv?H*O5An}1W~Y?!yfF*VIy~Y2baE{PTZ!GFU3%fEN9V4K
z)v~p5%6w~?vdnl7ZxQ11CnlF_52RTLxkupU#$r#b>#V>2;W-)8Z5t&Hae)OgU6Q3J
zc6@rW)jC<8ywub9%(!ELoO9*<t2v8;3(za)3RU#VY*L~?{|`e3l(#7PSEl&}l-aYg
zCgkmxSNJ?I7wBVom>l+mXl&ct9NCktuiDHO9gxU7lK%r5`Yp2~I0U?F(joAY{f9e<
zZRV;=9g1dI5pqz8$Fw>THsAAu@_rV`LP=#3X;^k;c>O|G^Xlij!;_2C{fh&B0X_CU
z-28|T>hK5WUZ%`|;9q_bzj&bN>*kpwu8WG`1tt54lR4diSJ0Lly**0(1}5(^WiNi5
ze>^p<us~kE=31_&s`80uZQo~|ZXIUbW#gc>cPKr4N99}&c%b-UO4Rb({A1W6pO3SN
zYJi9@=2(`@c9)sT6(8HF<l=#2O~P-e!TetLwki{-c^lhZIoU$GFW|R<x9Dh&YZ+?h
IYM_Ju53B`!<^TWy

literal 0
HcmV?d00001

diff --git a/src/static/img/play-back.png b/src/static/img/play-back.png
new file mode 100644
index 0000000000000000000000000000000000000000..26e3336fbe85c6bb1363f0b9f9f08993b5c9d9aa
GIT binary patch
literal 1587
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

literal 0
HcmV?d00001