小精灵动效替换，清除页面文字

2023-05-26 19:44:38 +08:00
parent ca9aa29e89
commit 56ccb723c6
35 changed files with 85 additions and 61 deletions
--- a/view/peko/activity/act-ocean/index.html
+++ b/view/peko/activity/act-ocean/index.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>星级厨房</title>
+    <title></title>

    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="./css/index.css?v=2.2">
@@ -16,7 +16,7 @@
        <!-- <div class="wrap "> -->
        <div class="banner">
            <img id="bannerImg" src="" alt="">
-            <img id="subtitleImg" class="subtitle" src="./images/subtitle.png" alt="">
+            <img id="subtitleImg" class="subtitle" src="" alt="">
        </div>
        <div class="rule"><img id="ruleImg" src="" alt=""></div>
        <div class="record"><img id="recordImg" src="" alt=""></div>
@@ -178,7 +178,7 @@
                <div class="fragment-num"><b id="fragment_num">今日奖励：</b><span>0</span></div>
            </div>
            <div class="add"><img src="./images/add.png" alt=""></div>
-            <div class="rank"><img id="rankImg" src="./images/rank.png" alt=""></div>
+            <div class="rank"><img id="rankImg" src="" alt=""></div>
        </div>

        <!-- 规则弹窗 -->
--- a/view/peko/activity/act-ocean/record.html
+++ b/view/peko/activity/act-ocean/record.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>游戏记录</title>
+    <title></title>

    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="./css/record.css">
--- a/view/peko/modules/act-treasureSnatching/index.html
+++ b/view/peko/modules/act-treasureSnatching/index.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>夺宝达人</title>
+    <title></title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
--- a/view/peko/modules/act-treasureSnatching/list.html
+++ b/view/peko/modules/act-treasureSnatching/list.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>夺宝达人</title>
+    <title></title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/swiper.min.css">
    <link rel="stylesheet" href="./css/list.css">
@@ -18,11 +18,11 @@
    <img id="listTitle" src="" alt="" class="title">
    <!-- tab -->
    <div class="tab">
-        <div id="list_tab1" class="active">今日夺宝达人<span></span></div>
-        <div id="list_tab2">昨日夺宝达人<span></span></div>
+        <div id="list_tab1" class="active"><span></span></div>
+        <div id="list_tab2"><span></span></div>
    </div>
    <!-- 小标题 -->
-    <p id="list_tips">根据参与夺宝精灵获得奖品总价值进行排名</p>
+    <p id="list_tips"></p>
    <!-- 榜单列表 -->
    <ul>
        <!-- <li class="active">
--- a/view/peko/modules/act-treasureSnatching/record.html
+++ b/view/peko/modules/act-treasureSnatching/record.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>获奖记录</title>
+    <title></title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/swiper.min.css">
    <link rel="stylesheet" href="./css/record.css">
--- a/view/peko/modules/act-treasureSnatching/rule.html
+++ b/view/peko/modules/act-treasureSnatching/rule.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>玩法规则</title>
+    <title></title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/swiper.min.css">
    <link rel="stylesheet" href="./css/rule.css">
@@ -18,8 +18,8 @@
    <img id="ruleTitle" src="" alt="" class="title">
    <!-- tab切换 -->
    <div class="tab">
-        <div id="rule_probability" class="active">玩法概率<span></span></div>
-        <div id="rule_title">玩法规则<span></span></div>
+        <div id="rule_probability" class="active"><span></span></div>
+        <div id="rule_title"><span></span></div>
    </div>
    <!-- 内容 -->
    <ul class="tab1">
--- a/view/peko/modules/game/index.html
+++ b/view/peko/modules/game/index.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>邀请好友</title>
+    <title></title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
 </head>
@@ -33,11 +33,11 @@
        <img id="share_btn" src="" alt="">
    </div>
    <div class="rule-wrap">
-        <div id="rule_div">分享規則</div>
+        <div id="rule_div"></div>
        <div class="rule_detail">
-            <p id="rule_p1">1.分享後好友註冊並下載Peko，填寫您的邀請碼:</p>
-            <p id="rule_p2">2.同一臺手機設備註冊的用戶，視為同一用戶;</p>
-            <p id="rule_p3">3.每位新用戶僅能填寫一次邀請碼， 填寫後不可修改。</p>
+            <p id="rule_p1"></p>
+            <p id="rule_p2"></p>
+            <p id="rule_p3"></p>
        </div>
    </div>
    <ul class="invite-record-wrap">
--- a/view/peko/modules/level/index.html
+++ b/view/peko/modules/level/index.html
@@ -6,7 +6,7 @@
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>等级说明</title>
+  <title></title>
  <link rel="stylesheet" href="../../common/css/reset.css">
  <link rel="stylesheet" href="../../common/css/swiper.min.css">
  <link rel="stylesheet" href="css/index.css?v=1.1">
@@ -55,7 +55,7 @@
        <img src="./images/user.png" alt="">
        <img class="effects-img" src="./images/effects1.png" alt=""> -->

-        <img id="wealth" src="./images/wealth.png" alt="">
+        <img id="wealth" src="./images/wealth-en.png" alt="">
      </div>
      <div class="swiper-slide">
        <div class="user-charm">
--- a/view/peko/modules/level/js/index.js
+++ b/view/peko/modules/level/js/index.js
@@ -1,5 +1,6 @@
 let info = {};
 $(function () {
+  getInfoFromClient()
  fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
  setTimeout(() => {
    // 初始化国际化
--- a/view/peko/modules/logout/confirm.html
+++ b/view/peko/modules/logout/confirm.html
@@ -9,7 +9,7 @@
 	<link rel="stylesheet" type="text/css" href="../../common/css/reset.css" />
 	<link rel="stylesheet" href="./css/confirm.css" />
    <script src="../../common/js/flexible.js"></script>
-	<title>账号注销</title>
+	<title></title>
 </head>

 <body>
--- a/view/peko/modules/logout/fail.html
+++ b/view/peko/modules/logout/fail.html
@@ -9,7 +9,7 @@
 	<link rel="stylesheet" type="text/css" href="../../common/css/reset.css" />
 	<link rel="stylesheet" href="./css/fail.css" />
    <script src="../../common/js/flexible.js"></script>
-	<title>账号注销</title>
+	<title></title>
 </head>

 <body>
--- a/view/peko/modules/logout/hint.html
+++ b/view/peko/modules/logout/hint.html
@@ -9,7 +9,7 @@
 	<link rel="stylesheet" type="text/css" href="../../common/css/reset.css" />
 	<link rel="stylesheet" href="./css/hint.css" />
    <script src="../../common/js/flexible.js"></script>
-	<title>账号注销</title>
+	<title></title>
 </head>

 <body>
--- a/view/peko/modules/logout/index.html
+++ b/view/peko/modules/logout/index.html
@@ -9,7 +9,7 @@
 	<link rel="stylesheet" type="text/css" href="../../common/css/reset.css" />
 	<link rel="stylesheet" href="./css/index.css" />
    <script src="../../common/js/flexible.js"></script>
-	<title>账号注销</title>
+	<title></title>
 </head>

 <body>
--- a/view/peko/modules/pay/index.html
+++ b/view/peko/modules/pay/index.html
@@ -3,7 +3,7 @@

 <head>
    <meta charset="UTF-8">
-    <title id="pay_title">充值</title>
+    <title id="pay_title"></title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
@@ -23,7 +23,7 @@
        <!-- 头部 -->
        <div class="header_top">
            <div class="header_top_left">
-                <img src="./images/logo.png" alt=""><b id="pay_header_t_l">peko儲值中心</b>
+                <img src="./images/logo.png" alt=""><b id="pay_header_t_l"></b>
            </div>
            <div class="header_top_right">
                <img src="./images/more.png" alt=""><b></b>
@@ -34,7 +34,7 @@
    </div>
    <!-- 选择支付方式 -->
    <div class="pay_method">
-        <p id="pay_method_p">请选择儲值方式:</p>
+        <p id="pay_method_p"></p>
        <!-- <div class="methods methods0">
            <p style="width: 100%;color: #000;height: 0.5rem;"></p>
            <span>
@@ -53,7 +53,7 @@
    </div>
    <!-- 选择充值金额 -->
    <div class="pay_number">
-        <p id="pay_number_sd">請選擇您的儲值金額:</p>
+        <p id="pay_number_sd"></p>
        <div class="number">
            <!-- <span class="active">
                <b>100,000 金幣</b>
--- a/view/peko/modules/room_rank/hourRank.html
+++ b/view/peko/modules/room_rank/hourRank.html
@@ -5,7 +5,7 @@
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>小时榜</title>
+  <title></title>

  <link rel="stylesheet" href="../../common/css/reset.css">
  <link rel="stylesheet" href="./css/hourRank.css?v=1.1">
@@ -15,7 +15,7 @@
  <div class="wrap hour">
    <div class="tab_wrap">
      <div class="tab_contain">
-        <p id="hour_title">小时榜</p>
+        <p id="hour_title"></p>
        <!-- <p>贡献月榜</p> -->
        <img src="./images/single/rule-icon.png" alt="" class="rule_icon">
      </div>
@@ -23,8 +23,10 @@
    
    <div class="rank_wrap">
      <div class="time_wrap">
-        <p id="time_wrap_p1"><span class="h"></span>点小时榜</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        <p id="time_wrap_p2">距榜单截止<span class="m"></span>分<span class="s"></span>秒</p>
+        <!-- <p id="time_wrap_p1"><span class="h"></span>点小时榜</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <p id="time_wrap_p2">距榜单截止<span class="m"></span>分<span class="s"></span>秒</p> -->
+        <p id="time_wrap_p1"></p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <p id="time_wrap_p2"></p>
      </div>

      <div class="top_three_wrap">
--- a/view/peko/modules/room_rank/hourRankLicense.html
+++ b/view/peko/modules/room_rank/hourRankLicense.html
@@ -5,7 +5,7 @@
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>小时榜</title>
+  <title></title>

  <link rel="stylesheet" href="../../common/css/reset.css">
  <link rel="stylesheet" href="./css/hourRank1.css?v=1.1">
@@ -24,8 +24,8 @@
    
    <div class="rank_wrap">
      <div class="time_wrap">
-        <p id="time_wrap_p1"><span class="h"></span>点小时榜</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        <p id="time_wrap_p2">距榜单截止<span class="m"></span>分<span class="s"></span>秒</p>
+        <p id="time_wrap_p1"></p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <p id="time_wrap_p2"></p>
      </div>

      <div class="top_three_wrap">
--- a/view/peko/modules/room_rank/index.html
+++ b/view/peko/modules/room_rank/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>房间榜单</title>
+    <title></title>

    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="./css/index.css?v=1.8">
@@ -13,13 +13,13 @@
    <div class="wrap">
        <div class="tab_wrap">
            <div class="tab_contain">
-                <p id="tab_act1" class="active">爱意榜</p>
-                <p id="tab_act2">魅力榜</p>
+                <p id="tab_act1" class="active"></p>
+                <p id="tab_act2"></p>
            </div>
            <div class="rank_type">
-                <p id="rank_type1" class="active">日榜</p>
-                <p id="rank_type2">周榜</p>
-                <p id="rank_type3">总榜</p>
+                <p id="rank_type1" class="active"></p>
+                <p id="rank_type2"></p>
+                <p id="rank_type3"></p>
            </div>
        </div>
        
--- a/view/peko/modules/room_rank/js/hourRank.js
+++ b/view/peko/modules/room_rank/js/hourRank.js
@@ -101,7 +101,7 @@ const renderLastHourThree = () => {
      <div class="top_three_item">
        <div class="avatar" data-uid=${item.uid}>
          <p></p>
-          <img src="${item.avatar ? item.avatar : `noAvatar${index + 1}`}" alt="">
+          <img src="${item.avatar ? item.avatar : noAvatar1}" alt="">
        </div>
        <div class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</div>
        <div class="num" style="display:${item.score === '' ? 'none' : 'block'}">
--- a/view/peko/modules/room_rank/js/hourRankLicense.js
+++ b/view/peko/modules/room_rank/js/hourRankLicense.js
@@ -101,7 +101,7 @@ const renderLastHourThree = () => {
      <div class="top_three_item">
        <div class="avatar" data-uid=${item.uid}>
          <p></p>
-          <img src="${item.avatar ? item.avatar : `noAvatar${index+1}`}" alt="">
+          <img src="${item.avatar ? item.avatar : noAvatar1}" alt="">
        </div>
        <div class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</div>
        <div class="num" style="display:${item.score === '' ? 'none' : 'block'}">
--- a/view/peko/modules/room_rank/js/index.js
+++ b/view/peko/modules/room_rank/js/index.js
@@ -276,7 +276,7 @@ const renderList = (List) => {
                <div class="top_three_item">
                    <div class="avatar" data-uid=${item.uid}>
                        <p></p>
-                        <img src="${item.avatar ? item.avatar : `noAvatar${index + 1}`}" alt="">
+                        <img src="${item.avatar ? item.avatar : noAvatar1}" alt="">
                    </div>
                    <div class="nick">
                        ${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}
--- a/view/peko/modules/room_rank/rule.html
+++ b/view/peko/modules/room_rank/rule.html
@@ -5,7 +5,7 @@
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>榜单规则</title>
+  <title></title>

  <link rel="stylesheet" href="../../common/css/reset.css">
  <link rel="stylesheet" href="./css/rule.css?v=1.1">
@@ -15,11 +15,11 @@
  <div class="wrap">
    <div class="top">
      <div class="back"><img src="./images/back.png" alt=""></div>
-      <div id="rule_title" class="title">榜单规则</div>
+      <div id="rule_title" class="title"></div>
    </div>
    <div class="rule_content">
-      <p id="rule_content_p1">小时榜是按个人主播单小时内收到的礼物值进行排名。</p>
-      <p id="rule_content_p2">每小时进行榜单结算，TOP1将在所有主播房间中进行全服公告。</p>
+      <p id="rule_content_p1"></p>
+      <p id="rule_content_p2"></p>
    </div>
  </div>

@@ -50,10 +50,13 @@
      window.history.back(-1)
    })
    $(function () {
+      getInfoFromClient()
      fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
-      // 初始化国际化
+      setTimeout(() => {
+        // 初始化国际化
      initLocalLang();
      translateFun();
+      }, 50);
    })
    // 进行文本替换
    function translateFun() {
--- a/view/peko/modules/room_rank/ruleLicense.html
+++ b/view/peko/modules/room_rank/ruleLicense.html
@@ -5,7 +5,7 @@
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>榜单规则</title>
+  <title></title>

  <link rel="stylesheet" href="../../common/css/reset.css">
  <link rel="stylesheet" href="./css/rule.css?v=1.1">
@@ -18,8 +18,8 @@
      <!-- <div class="title">榜单规则</div> -->
    </div>
    <div class="rule_content">
-      <p id="rule_content_p3">小时榜是按派对房单小时内收到的礼物值进行排名。</p>
-      <p id="rule_content_p4">每小时进行榜单结算，TOP1将在所有派对房中进行全服公告。</p>
+      <p id="rule_content_p3"></p>
+      <p id="rule_content_p4"></p>
    </div>
  </div>

@@ -50,10 +50,13 @@
      window.history.back(-1)
    })
    $(function () {
+      getInfoFromClient()
      fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
-      // 初始化国际化
+      setTimeout(() => {
+        // 初始化国际化
      initLocalLang();
      translateFun();
+      }, 50);
    })
    // 进行文本替换
    function translateFun() {
--- a/view/peko/modules/rule/guide.html
+++ b/view/peko/modules/rule/guide.html
@@ -81,6 +81,7 @@
 	<script src="../../common/local/langHandler.js"></script>
 	<script>
 		$(function () {
+			getInfoFromClient()
 			fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
 			// 初始化国际化
 			initLocalLang();
--- a/view/peko/modules/rule/js/newWishingWellRule.js
+++ b/view/peko/modules/rule/js/newWishingWellRule.js
@@ -67,6 +67,7 @@ const renderList = () => {
 }

 $(function () {
+    getInfoFromClient()
    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言

    setTimeout(() => {
--- a/view/peko/modules/rule/live-protocol.html
+++ b/view/peko/modules/rule/live-protocol.html
@@ -263,7 +263,6 @@
        $('.appName').html('peko')
        let browser = checkVersion()
        getInfoFromClient()
-        getInfoFromClient()
        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
        setTimeout(() => {
            // 初始化国际化
--- a/view/peko/modules/rule/loginout.html
+++ b/view/peko/modules/rule/loginout.html
@@ -43,6 +43,8 @@
 	<script src="../../common/local/langHandler.js"></script>
 	<script>
 		$(function () {
+			getInfoFromClient()
+
 			fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
 			// 初始化国际化
 			initLocalLang();
--- a/view/peko/modules/rule/logout-agreement.html
+++ b/view/peko/modules/rule/logout-agreement.html
@@ -91,7 +91,7 @@
 <script src="../../common/local/langHandler.js"></script>

 <script>
-    // getInfoFromClient()
+    getInfoFromClient()
    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
    setTimeout(() => {
        // 初始化国际化
--- a/view/peko/modules/rule/newWishingWellRule.html
+++ b/view/peko/modules/rule/newWishingWellRule.html
@@ -9,7 +9,7 @@
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" type="text/css" href="../../common/css/reset.css"/>
  <link rel="stylesheet" href="./style/wishingWellRule.css">
-  <title>玩法规则</title>
+  <title></title>

 </head>

@@ -17,17 +17,17 @@
  <div class="max">
    <p class="rule">
      <span class="icon">1</span>
-      <span id="rule_tips1">從尋愛之旅處獲得的禮物放到禮物包裹，點開禮物面板即可查看；</span>
+      <span id="rule_tips1"></span>
    </p>
    <p class="rule">
      <span class="icon">2</span>
-      <span id="rule_tips2">每次在尋找之旅100%獲得禮物。</span>
+      <span id="rule_tips2"></span>
    </p>
  </div>

  <div class="tab">
    <div class="active">
-      <span class="tab-name" id="tab_name1">尋愛之旅</span>
+      <span class="tab-name" id="tab_name1"></span>
      <span class="line"></span>
    </div>
    <div style="display: none;">
--- a/view/peko/modules/spirit/js/main.js
+++ b/view/peko/modules/spirit/js/main.js
@@ -154,6 +154,7 @@ $(function () {
    function translateFun() {
        const langReplace = window.lang.replace;
        const localLang = window.lang;
+        $('#main_img').attr('src',langReplace(localLang.demoModule.main_img))
        $('.introduction-btn img').attr('src',langReplace(localLang.demoModule.introductionBtn))
        $('.record-btn img').attr('src',langReplace(localLang.demoModule.recordBtn))
        $('#exploreBtn').attr('src',langReplace(localLang.demoModule.exploreBtn))
@@ -684,12 +685,13 @@ const playAnimate = () => {
    const langReplace = window.lang.replace;
    const localLang = window.lang;
    $('#exploreBtn').attr('src',langReplace(localLang.demoModule.exploreBtnA))
+    let animateSvga = langReplace(localLang.demoModule.svga)
    $('.explore').addClass('again')
    $('.shade-mask-recharge').hide()
    $('.svga').show()
    let player = new SVGA.Player('.svga');
    let parser = new SVGA.Parser('.svga');
-    parser.load('./image/animate.svga', function (videoItem) {
+    parser.load(animateSvga, function (videoItem) {
        // player.loops = 1;
        player.clearsAfterStop = false;
        player.setVideoItem(videoItem);
--- a/view/peko/modules/spirit/local/ar.js
+++ b/view/peko/modules/spirit/local/ar.js
@@ -52,6 +52,8 @@ langAr = {
        diamond1: 'الماس',
        fail_find:'إنه لأمر مؤسف أنني لم أجد العفريت. </br> ابذل جهودًا دؤوبة في المرة القادمة!',

+        svga:'./image/animate-ar.svga',
+        main_img:'./image/ar/main-title-ay.png',
        introductionBtn:'./image/ar/introduction-btn-ay.png',
        recordBtn:'./image/ar/record-btn-ay.png',
        exploreBtn:'./image/ar/explore-btn-ay.png',
--- a/view/peko/modules/spirit/local/en.js
+++ b/view/peko/modules/spirit/local/en.js
@@ -52,6 +52,8 @@ langEn = {
        diamond1: 'diamond',
        fail_find:`It's a pity that I couldn't find the elf.</br> Make persistent efforts next time!`,

+        svga:'./image/animate-en.svga',
+        main_img:'./image/en/main-title.png',
        introductionBtn:'./image/en/introduction-btn.png',
        recordBtn:'./image/en/record-btn.png',
        exploreBtn:'./image/en/explore-btn.png',
--- a/view/peko/modules/spirit/local/id.js
+++ b/view/peko/modules/spirit/local/id.js
@@ -52,6 +52,8 @@ langId = {
        diamond1: 'berlian',
        fail_find:'Sayang sekali saya tidak dapat menemukan elf itu.</br> Lakukan upaya yang gigih lain kali!',

+        svga:'./image/animate-id.svga',
+        main_img:'./image/id/main-title-yn.png',
        introductionBtn:'./image/id/introduction-btn-yn.png',
        recordBtn:'./image/id/record-btn-yn.png',
        exploreBtn:'./image/id/explore-btn-yn.png',
--- a/view/peko/modules/spirit/local/tr.js
+++ b/view/peko/modules/spirit/local/tr.js
@@ -52,6 +52,8 @@ langTr = {
        diamond1: 'elmas',
        fail_find:'Elfi bulamamış olmam üzücü.</br> Bir dahaki sefere ısrarla çaba göster!',
        
+        svga:'./image/animate-tr.svga',
+        main_img:'./image/tr/main-title-tr.png',
        introductionBtn:'./image/tr/introduction-btn-tr.png',
        recordBtn:'./image/tr/record-btn-tr.png',
        exploreBtn:'./image/tr/explore-btn-tr.png',
--- a/view/peko/modules/spirit/local/zh.js
+++ b/view/peko/modules/spirit/local/zh.js
@@ -53,6 +53,8 @@ langZh = {
        diamond1: '鉆石',
        fail_find: '很遺憾未能找到小精靈</br>下次再接再厲哦！',

+        svga:'./image/animate.svga',
+        main_img:'./image/main-title.png',
        introductionBtn:'./image/introduction-btn.png',
        recordBtn:'./image/record-btn.png',
        exploreBtn:'./image/explore-btn.png',
--- a/view/peko/modules/spirit/main.html
+++ b/view/peko/modules/spirit/main.html
@@ -23,7 +23,7 @@
    <div class="title">
        <!-- <div class="canSelect">可以探访<span>0</span>个小动物的家寻找小精灵</div> -->
        <!-- <div id="canSelect" class="canSelect">可以探访小动物的家寻找小精灵</div> -->
-        <img src="./image/main-title.png" alt="">
+        <img id="main_img" src="" alt="">
        <div id="canSelect" class="canSelect"></div>
    </div>
    <div class="introduction-btn">