update

lmj01 · Mar 21, 2024 · 4893e0f · 4893e0f
1 parent c9496ad
commit 4893e0f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/html/index.html b/html/index.html
@@ -8,13 +8,19 @@
   </head>
   <body class="mj-body">
     <section class="side-menu d-flex flex-column">
-      <p><a href="./transform.html">Transform</a></p>
-      <p></p><a href="./pbr3ed.html">PBR -- Physically Based Rendering online book</a></p>
-      <p></p><a href="./pbr.html">PBR -- Physically Based Rendering</a></p>
-      <p></p><a href="./algebra.html">algebra</a></p>
-      <p></p><a href="./gpu.html">GPU</a></p>
-      <p></p><a href="./personal.html">个人</a></p>
-      <p></p><a href="./pinyin.html">拼音</a></p>
+      <div class="m-3">
+        <h4>Mathjax latex Article</h4>
+        <p><a href="./transform.html">Transform</a></p>
+        <p></p><a href="./pbr3ed.html">PBR -- Physically Based Rendering online book</a></p>
+        <p></p><a href="./pbr.html">PBR -- Physically Based Rendering</a></p>
+        <p></p><a href="./algebra.html">algebra</a></p>
+        <p></p><a href="./gpu.html">GPU</a></p>
+      </div>
+      <div class="m-3">
+        <h4>其他内容</h4>
+        <p></p><a href="./personal.html">个人</a></p>
+        <p></p><a href="./pinyin.html">拼音</a></p>
+      </div>
     </section>
   </body>
 </html>
diff --git a/html/pinyin.html b/html/pinyin.html
@@ -5,25 +5,35 @@
 <script src="./html.config.js" defer></script>
 <script src="./third/pinyin-pro.js" defer></script>
 </script>
+<style>
+    /* css */
+    .py-chinese-item {
+        position: relative;
+        /* color: blue; */
+    }
+    .py-pinyin-item {
+        color: #d08080;
+    }
+</style>
 </head>
 <body>
     <div class="container-xl d-flex flex-column">
         <h1>拼音</h1>
         <h6><a class="mx-3" href="https://fayin.love/">爱发音</a></h6>
         <div class="w-100 d-flex flex-column">
             <h4 id="section1">汉字转换拼音</h4>            
-            <div class="w-100 d-flex my-3 justify-content-evenly">
-                <textarea id="idSrc" class="w-50" rows="3"></textarea>
-                <textarea id="idDst" class="w-50" rows="3" readonly></textarea>
+            <div class="w-100 d-flex my-3 flex-column justify-content-evenly">
+                <textarea id="idSrc" class="w-100" rows="4"></textarea>
+                <div id="idDst" class="w-100 d-flex flex-wrap"></div>
             </div>
         </div>
         <div></div>
         <script type="module">
-            const { pinyin } = pinyinPro;            
+            const { pinyin, html } = pinyinPro;            
             const elTextareaSrc = document.getElementById('idSrc');
-            const elTextareaDst = document.getElementById('idDst');
+            const elDivDst = document.getElementById('idDst');
             elTextareaSrc.addEventListener('change', (event)=>{
-                elTextareaDst.value = pinyin(elTextareaSrc.value);
+                elDivDst.innerHTML = html(elTextareaSrc.value);
             })
         </script>
     </div>

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
       <a href="./index/computerScience.md">CS</a>      
       <a href="./index/stomatological.md">口腔</a>
       <a href="./blender/index.md">Blender</a>
-      <a href="./html/index.html">Mathjax latex Article</a>
+      <a href="./html/index.html">HTML 入口</a>
     </section>
     <main class="main-content">
       <div id="content"></div>