Kaynağa Gözat

first commit

chao 9 ay önce
ebeveyn
işleme
8eaa1ca895
46 değiştirilmiş dosya ile 2672 ekleme ve 122 silme
  1. 1110 59
      package-lock.json
  2. 2 0
      package.json
  3. 4 4
      public/index.html
  4. 0 17
      public/manifest.json
  5. 84 27
      src/App.css
  6. 2 15
      src/App.js
  7. 146 0
      src/asstes/css/CheckeredQuery.css
  8. 89 0
      src/asstes/css/Example.css
  9. 162 0
      src/asstes/css/Introduction.css
  10. 58 0
      src/asstes/css/ProcessFlow.css
  11. 43 0
      src/asstes/css/Sidebar.css
  12. 63 0
      src/asstes/css/contact.css
  13. 42 0
      src/asstes/css/header.css
  14. BIN
      src/asstes/img/01.png
  15. BIN
      src/asstes/img/011.png
  16. BIN
      src/asstes/img/1.png
  17. BIN
      src/asstes/img/2.png
  18. BIN
      src/asstes/img/3.png
  19. BIN
      src/asstes/img/4.png
  20. BIN
      src/asstes/img/5.png
  21. BIN
      src/asstes/img/6.png
  22. BIN
      src/asstes/img/Carousel1.png
  23. BIN
      src/asstes/img/border_bottom.png
  24. BIN
      src/asstes/img/example.png
  25. BIN
      src/asstes/img/example_back.png
  26. BIN
      src/asstes/img/example_back1.png
  27. BIN
      src/asstes/img/goUpper.png
  28. BIN
      src/asstes/img/logo.png
  29. BIN
      src/asstes/img/logo2.png
  30. BIN
      src/asstes/img/qrCode.png
  31. BIN
      src/asstes/img/userLogin.png
  32. BIN
      src/asstes/img/wenti.png
  33. BIN
      src/asstes/img/任务卡片.png
  34. BIN
      src/asstes/img/对话.png
  35. 35 0
      src/complates/CheckeredQuery.js
  36. 26 0
      src/complates/Contact.js
  37. 64 0
      src/complates/Examples.js
  38. 13 0
      src/complates/HeaderLeft.js
  39. 51 0
      src/complates/HeaderRight.js
  40. 40 0
      src/complates/Introduction.js
  41. 159 0
      src/complates/Privacy.js
  42. 66 0
      src/complates/ProcessFlow.js
  43. 116 0
      src/complates/Sidebar.js
  44. 225 0
      src/complates/TermsService.js
  45. 0 0
      src/logo.svg
  46. 72 0
      src/view/home.js

Dosya farkı çok büyük olduğundan ihmal edildi
+ 1110 - 59
package-lock.json


+ 2 - 0
package.json

@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.18.3",
+    "mammoth": "^1.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

+ 4 - 4
public/index.html

@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>CocoClass</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 0 - 17
public/manifest.json

@@ -1,23 +1,6 @@
 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

+ 84 - 27
src/App.css

@@ -1,38 +1,95 @@
-.App {
-  text-align: center;
+
+* {
+  box-sizing: border-box;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+p,
+blockquote,
+th,
+td {
+  margin: 0;
+  padding: 0;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+body {
+  background: #fff;
+  color: #555;
+  font-size: 14px;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+td,
+th,
+caption {
+  font-size: 14px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  font-size: 100%;
 }
 
-.App-link {
-  color: #61dafb;
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+ol,
+ul,
+li {
+  list-style: none;
+}
+
+
+input,
+textarea,
+select,
+button {
+  font: 14px Verdana, Helvetica, Arial, sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+html {
+  overflow-y: scroll;
+}
+a{
+  color: black;
 }

+ 2 - 15
src/App.js

@@ -1,23 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import Home from './view/home'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Home></Home>
     </div>
   );
 }

+ 146 - 0
src/asstes/css/CheckeredQuery.css

@@ -0,0 +1,146 @@
+.CheckeredQuery {
+    background-color: #E2EEFF;
+    padding: 100px 0;
+
+    h1 {
+        position: relative;
+        top: 0;
+        display: inline-block;
+        font-size: 64px;
+        font-weight: 500;
+        line-height: 92.67px;
+        padding-left: 100px;
+        /* background: linear-gradient(to right,#3681FC,#fff); */
+        z-index: 10;
+
+    }
+
+    h1::after {
+        content: '';
+        width: 100%;
+        padding: 12px 0;
+        background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
+        position: absolute;
+        top: 72px;
+        left: 0;
+        z-index: -1;
+    }
+
+    .Reusable {
+        margin: 0 auto;
+        text-align: center;
+        position: relative;
+        top: 100px;
+
+        h2 {
+            font-size: 64px;
+            font-weight: 700;
+            line-height: 76.8px;
+            letter-spacing: -0.04em;
+            color: #3681FC;
+            margin-bottom: 16px;
+        }
+
+        .Reusable_span {
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 27px;
+            text-align: center;
+            color: #585656;
+        }
+
+        button {
+            position: absolute;
+            top: 150px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            border-color: #3681FC;
+            background-color: #E3EEFF;
+            color: #1267E7;
+            padding: 20px 24px;
+
+            span {
+                display: inline-block;
+                /* padding: 18px 24px; */
+                font-size: 26px;
+            }
+        }
+
+        .Reusable_ul {
+            margin-top: 50px;
+            border-radius: 20px;
+            background-color: #3681FC;
+            padding: 45px 50px 70px;
+            color: #FFFFFFE5;
+            font-size: 18px;
+            text-align: left;
+
+            li {
+                margin-top: 24px;
+                list-style: disc;
+                line-height: 27px;
+                font-weight: 400;
+            }
+        }
+    }
+
+    .Subscribe {
+        margin: 0 auto;
+        text-align: center;
+        position: relative;
+
+        h2 {
+            font-size: 64px;
+            font-weight: 700;
+            line-height: 76.8px;
+            letter-spacing: -0.04em;
+            background: linear-gradient(rgba(196, 155, 87, 1), rgba(145, 106, 47, 1));
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 16px;
+        }
+
+        .Reusable_span {
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 27px;
+            text-align: center;
+            color: #585656;
+        }
+
+        button {
+            position: absolute;
+            top: 150px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            border-color: #AC8444;
+            /* background-color: #ffff; */
+            color: #AC8444;
+            padding: 20px 24px;
+
+            span {
+                display: inline-block;
+                /* padding: 18px 24px; */
+                font-size: 26px;
+            }
+        }
+
+        .Reusable_ul {
+            margin-top: 50px;
+            border-radius: 20px;
+            background-color: #040000;
+            padding: 45px 50px 70px;
+            color: #FFFFFFE5;
+            font-size: 18px;
+            text-align: left;
+            min-width: 428px;
+
+            li {
+                margin-top: 24px;
+                list-style: disc;
+                line-height: 27px;
+                font-weight: 400;
+            }
+        }
+    }
+}

+ 89 - 0
src/asstes/css/Example.css

@@ -0,0 +1,89 @@
+.Example {
+    position: relative;
+
+    h1 {
+        position: relative;
+        top: 0;
+        display: inline-block;
+        font-size: 64px;
+        font-weight: 500;
+        line-height: 92.67px;
+        padding-left: 100px;
+        /* background: linear-gradient(to right,#3681FC,#fff); */
+        z-index: 10;
+
+    }
+
+    h1::after {
+        content: '';
+        width: 100%;
+        padding: 12px 0;
+        background: linear-gradient(to right, #3681FC, #fff);
+        position: absolute;
+        top: 72px;
+        left: 0;
+        z-index: -1;
+    }
+
+    .Example_content {
+        margin: 0 100px;
+        margin-top: 67px;
+        background-color: #11225E;
+        border-radius: 48px;
+        position: relative;
+        background-image: url('../img/example_back.png'), url('../img/example_back1.png');
+        background-repeat: no-repeat, no-repeat;
+        background-position:left,right;
+        .Example_flex_div {
+            position: relative;
+            width: 25%;
+            text-align: center;
+            margin: 80px 100px 60px;
+            cursor: pointer;
+
+            span:nth-child(1) {
+                font-size: 24px;
+                color: #fff;
+                line-height: 24px;
+            }
+
+            span:nth-child(3) {
+                font-size: 18px;
+                color: rgba(255, 255, 255, .55);
+                line-height: 28px;
+            }
+        }
+
+        .Example_flex_div_plan::after {
+            content: '';
+            width: 100%;
+            padding: 2px 0;
+            background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
+            position: absolute;
+            top: 72px;
+            left: 0;
+        }
+        .Carousel_div{
+            padding: 0 100px 80px;
+            .contentStyle{
+                height: 500px;
+                background: linear-gradient(to right,#3673E8,#88CCFD);
+                text-align: center;
+                position: relative;
+                img{
+                    position: relative;
+                    top: 45%;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                }
+                span{
+                    position: relative;
+                    top: 100px;
+                    font-size: 32px;
+                    line-height: 44.8px;
+                    color: #FFFFFF8C;
+                }
+            }
+        }
+    }
+}

+ 162 - 0
src/asstes/css/Introduction.css

@@ -0,0 +1,162 @@
+.Introduction {
+    width: 100%;
+    padding: 0 100px;
+    height: auto;
+    padding-top: 160px;
+
+    .experience {
+        position: absolute;
+        bottom: 64px;
+        font-family: Noto Sans SC;
+        font-size: 24px;
+        font-weight: 500;
+        right: 64px;
+
+        .experience_img {
+            vertical-align: middle;
+            position: relative;
+            right: 0;
+        }
+    }
+
+    .Introduction_top {
+        background-image: url("../img/1.png");
+        background-repeat: no-repeat;
+        background-position: right center;
+        min-height: 520px;
+        margin-bottom: 76px;
+        position: relative;
+
+        .Introduction_top_title {
+            font-size: 64px;
+            font-weight: 700;
+            line-height: 76.8px;
+            letter-spacing: 0.04em;
+            text-align: left; 
+            position: relative;
+            top: 0;
+            display: inline-block;
+        }
+        
+        .Introduction_top_title::after {
+            content: '';
+            width: calc(100% + 100px);
+            padding: 12px 0;
+            background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
+            position: absolute;
+            top: 72px;
+            left: -100px;
+        }
+
+        p {
+            margin-top: 32px;
+            font-family: Noto Sans SC;
+            font-size: 64px;
+            font-weight: 500;
+            line-height: 76.8px;
+            letter-spacing: 0.04em;
+            text-align: left;
+
+            i {
+                color: rgb(0, 97, 255);
+                font-style: normal;
+            }
+        }
+
+        .Learning {
+            margin-top: 32px;
+            font-family: PingFang SC;
+            font-size: 32px;
+            font-weight: 500;
+            line-height: 36px;
+            letter-spacing: 0.1em;
+            text-align: left;
+            color: #5E9AFC;
+        }
+
+
+    }
+
+    .Introduction_bottom {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        min-height: 580px;
+
+        .Introduction_bottom_div {
+            width: 48%;
+            border-radius: 30px;
+            position: relative;
+        }
+
+        p {
+            margin-top: 48px;
+            font-family: Noto Sans SC;
+            font-size: 20px;
+            font-weight: 400;
+            line-height: 40px;
+            text-align: left;
+
+        }
+
+        .Introduction_bottom_left {
+            padding: 64px;
+            background-color: #3681FC;
+            color: #fff;
+            border-radius: 30px;
+
+            h2 {
+                font-family: Noto Sans SC;
+                font-size: 44px;
+                font-weight: 500;
+                line-height: 52.8px;
+                letter-spacing: 0.02em;
+                text-align: left;
+
+                i {
+                    font-style: normal;
+                    color: #F4C751;
+                }
+            }
+
+        }
+
+        .Introduction_bottom_right {
+            background-color: #3681FC;
+            border-radius: 30px;
+            padding-top: 10px;
+
+            .Introduction_bottom_right_div {
+                height: 100%;
+                padding: 64px;
+                border-radius: 30px;
+                background-color: rgb(235, 243, 255);
+
+                h2 {
+                    font-family: Noto Sans SC;
+                    font-size: 44px;
+                    font-weight: 500;
+                    line-height: 52.8px;
+                    letter-spacing: 0.02em;
+                    text-align: left;
+                    color: #000;
+
+                    i {
+                        font-style: normal;
+                        color: #3681FC;
+                    }
+                }
+
+                p {
+                    margin-top: 48px;
+                    font-family: Noto Sans SC;
+                    font-size: 20px;
+                    font-weight: 400;
+                    line-height: 40px;
+                    text-align: left;
+                    color: #00000099;
+                }
+            }
+        }
+    }
+}

+ 58 - 0
src/asstes/css/ProcessFlow.css

@@ -0,0 +1,58 @@
+.ProcessFlow {
+    margin-top: 100px;
+    background-color: #E2EEFF;
+    padding: 100px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .ProcessFlow_card {
+        position: relative;
+
+        .ProcessFlow_card_title {
+            font-size: 44px;
+            font-weight: 700;
+            letter-spacing: 0.02em;
+
+        }
+        .ProcessFlow_card_num{
+            font-family: DIN Alternate;
+            position: absolute;
+            top: 25px;
+            right: 25px;
+            font-size: 35px;
+            color: #fff;
+            z-index: 1;
+            opacity: 0.22;
+        }
+
+        .ProcessFlow_img_back {
+            padding: 5px;
+            position: absolute;
+            right: 0;
+            width: 93px;
+            top: 0;
+            
+        }
+
+
+    }
+
+    .english_text {
+        margin-top: 40px;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 30px;
+        color: #3681FC;
+    }
+
+    .ProcessFlow_text {
+        margin-top: 16px;
+        font-family: Noto Sans SC;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 30px;
+        text-align: left;
+        color: rgba(0, 0, 0, .6);
+    }
+}

+ 43 - 0
src/asstes/css/Sidebar.css

@@ -0,0 +1,43 @@
+.Sidebar {
+    position: fixed;
+    top: 50%;
+    right: 20px;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 100px;
+    box-shadow: 0px 4px 10px 0px #1D398314;
+    box-shadow: 1px 1px 20px 4px #1D39830D;
+    padding: 20px 0;
+    font-size: 10px;
+
+    div {
+        padding: 10px;
+        font-weight: 400;
+        color: #000000;
+        cursor: pointer;
+    }
+
+}
+
+.Model_h3_title {
+    font-weight: 600;
+    text-align: center;
+    font-size: 16px;
+    margin-bottom: 32px;
+}
+.model_checkbox_i{
+    font-style: normal;
+    color: #3681FC;
+    font-weight: 600;
+    padding: 0 3px;
+    cursor: pointer;
+}
+
+.model_p_text{
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #00000099;
+    margin-top: 16px;
+    margin-bottom: 8px;
+}

+ 63 - 0
src/asstes/css/contact.css

@@ -0,0 +1,63 @@
+.Contact {
+    h1 {
+        position: relative;
+        top: 0;
+        display: inline-block;
+        font-size: 64px;
+        font-weight: 500;
+        line-height: 92.67px;
+        padding-left: 100px;
+        /* background: linear-gradient(to right,#3681FC,#fff); */
+        z-index: 10;
+
+    }
+
+    h1::after {
+        content: '';
+        width: 100%;
+        padding: 12px 0;
+        background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
+        position: absolute;
+        top: 72px;
+        left: 0;
+        z-index: -1;
+    }
+    .Contact_flex{
+        margin: 50px 100px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid #585858;
+        div{
+            width: 50%;
+            p{
+                margin-top: 16px;
+                font-size: 20px;
+                font-weight: 400;
+                line-height: 28px;
+                letter-spacing: 8%;
+            }
+            img{
+                margin-top: 16px;
+            }
+        }
+        div:nth-child(2){
+            text-align: right;
+            position: relative;
+            top: 130px;
+            img{
+                margin-top: 0;
+                vertical-align: middle;
+            }
+            span{
+                font-size: 36px;
+                font-weight: 700;
+                line-height: 48px;
+                color: #000;
+                padding-left: 16px;
+                border-left: 2px solid #E2EEFF;
+                position: relative;
+                top: 5px;
+            }
+        }
+
+    }
+}

+ 42 - 0
src/asstes/css/header.css

@@ -0,0 +1,42 @@
+.headerLeft {
+    img {
+        vertical-align: middle;
+    }
+
+    span {
+        /* display: inline-block; */
+        padding-left: 8px;
+        border-left: 1px solid #00000033;
+        font-family: PingFang SC;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        text-align: left;
+
+    }
+}
+
+.headerRight {
+    ul {
+        display: flex;
+
+        li {
+            padding: 0 10px;
+            font-size: 16px;
+            font-weight: 600;
+            position: relative;
+            cursor: pointer;
+            
+            .imgBorderBottom {
+                width: 100%;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+            }
+            img{
+                vertical-align: middle;
+            }
+        }
+    }
+
+}

BIN
src/asstes/img/01.png


BIN
src/asstes/img/011.png


BIN
src/asstes/img/1.png


BIN
src/asstes/img/2.png


BIN
src/asstes/img/3.png


BIN
src/asstes/img/4.png


BIN
src/asstes/img/5.png


BIN
src/asstes/img/6.png


BIN
src/asstes/img/Carousel1.png


BIN
src/asstes/img/border_bottom.png


BIN
src/asstes/img/example.png


BIN
src/asstes/img/example_back.png


BIN
src/asstes/img/example_back1.png


BIN
src/asstes/img/goUpper.png


BIN
src/asstes/img/logo.png


BIN
src/asstes/img/logo2.png


BIN
src/asstes/img/qrCode.png


BIN
src/asstes/img/userLogin.png


BIN
src/asstes/img/wenti.png


BIN
src/asstes/img/任务卡片.png


BIN
src/asstes/img/对话.png


+ 35 - 0
src/complates/CheckeredQuery.js

@@ -0,0 +1,35 @@
+import { Flex,Button } from "antd";
+import "../asstes/css/CheckeredQuery.css"
+
+function CheckeredQuery() {
+    return (
+        <div className="CheckeredQuery">
+            <h1>價格查詢</h1>
+            <Flex className="CheckeredQuery_content">
+                <div className="Reusable">
+                    <h2>試用版</h2>
+                    <span className="Reusable_span">Get started with CocoClass Using GenAI.</span>
+                    <Button>$0  /年</Button>
+                    <ul className="Reusable_ul">
+                        <li>適用於尚未使用CococClass GenAI的學校</li>
+                        <li>每校開通≤3位教師賬號,≤50位學生賬號</li>
+                        <li>≤100次對話/月</li>
+                    </ul>
+                </div>
+                <div className="Subscribe">
+                    <h2>訂閲版</h2>
+                    <span className="Reusable_span">Upgrade for unlimited people and tools.</span>
+                    <Button>聯絡我們查詢GenAI方案</Button>
+                    <ul className="Reusable_ul">
+                        <li>全校教師賬號與學生賬號服務</li>
+                        <li>客制化自訂教學設計框架 - 3項</li>
+                        <li>客制化自訂教學設計框架 - 3項</li>
+                        <li>到校教師培訓工作坊 - 120分鐘</li>
+                        <li>綫上一對一技術支援</li>
+                    </ul>
+                </div>
+            </Flex>
+        </div>
+    )
+}
+export default CheckeredQuery;

+ 26 - 0
src/complates/Contact.js

@@ -0,0 +1,26 @@
+import { Flex } from 'antd';
+import qrCodeImg from '../asstes/img/qrCode.png';
+import Logo2 from '../asstes/img/logo2.png';
+import '../asstes/css/contact.css'
+
+
+function Contact() {
+    return (
+        <div className='Contact'>
+            <h1>聯絡我們</h1>
+            <Flex className='Contact_flex'>
+                <div>
+                    <p>郵箱:support-hk@cocorobo.cc</p>
+                    <p>電話 / WhatsApp:+85246820451</p>
+                    <img src={qrCodeImg} alt='' />
+                </div>
+                <div>
+                    <img src={Logo2} alt='' />
+                    <span>CocoClass</span>
+                </div>
+            </Flex>
+        </div>
+    )
+
+}
+export default Contact;

+ 64 - 0
src/complates/Examples.js

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { Carousel, Flex } from 'antd';
+import '../asstes/css/Example.css'
+import Carousel1 from '../asstes/img/Carousel1.png';
+
+
+const carouselRef = React.createRef();
+function Example() {
+    const [state1, setState1] = useState(0);
+    const onChange = (e) => {
+        setState1(e)
+    };
+    const switchClickState = (e) => {
+        carouselRef.current.goTo(e);
+    }
+    return (
+        <div className="Example">
+            <h1>使用示例</h1>
+            <div className="Example_content">
+                <Flex>
+                    <div className={state1 === 0 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(0)}>
+                        <span>AI教學設計</span><br />
+                        <span>AI as Co-Designer</span>
+                    </div>
+                    <div className={state1 === 1 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(1)}>
+                        <span>課堂助手</span><br />
+                        <span>AI as Teaching Assistant</span>
+                    </div>
+                    <div className={state1 === 2 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(2)}>
+                        <span>課堂觀察</span><br />
+                        <span>Classroom Observation</span>
+                    </div>
+                    <div className={state1 === 3 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(3)}>
+                        <span>教學評估</span><br />
+                        <span>AI-enabled Assessment</span>
+                    </div>
+                </Flex>
+                <div className="Carousel_div">
+                    <Carousel infinite afterChange={onChange} slideNumber={state1} ref={carouselRef}
+                        arrowOffset={16} arrowSize={16}>
+                        <div className="contentStyle">
+                            <img src={Carousel1} alt="即將上綫" />
+                            <span>即將上綫</span>
+                        </div>
+                        <div className="contentStyle">
+                            <img src={Carousel1} alt="即將上綫" />
+                            <span>即將上綫</span>
+                        </div>
+                        <div className="contentStyle">
+                            <img src={Carousel1} alt="即將上綫" />
+                            <span>即將上綫</span>
+                        </div>
+                        <div className="contentStyle">
+                            <img src={Carousel1} alt="即將上綫" />
+                            <span>即將上綫</span>
+                        </div>
+                    </Carousel>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Example;

+ 13 - 0
src/complates/HeaderLeft.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import '../asstes/css/header.css'
+import LogoImg from '../asstes/img/logo.png';
+
+function Header() {
+    return (
+        <div className="headerLeft">
+            <img src={LogoImg} alt="Logo" />
+            <span>CocoClass</span>
+        </div>
+    );
+}
+export default Header

+ 51 - 0
src/complates/HeaderRight.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import '../asstes/css/header.css'
+
+
+function Header() {
+    const [value, setValue] = useState(0)
+
+    const clickSwitchValue = (val) => {
+        setValue(val)
+    }
+    return (
+        <div className="headerRight">
+            <ul >
+                <li onClick={() => clickSwitchValue(0)}>
+                    <a href='#Introduction'>
+                        <span>整體介紹</span>
+                        {value === 0 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
+                    </a>
+                </li>
+                <li onClick={() => clickSwitchValue(1)}>
+                    <a href='#ProcessFlow'>
+                        <span>產品特點</span>
+                        {value === 1 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
+                    </a>
+                </li>
+                <li onClick={() => clickSwitchValue(2)}>
+                    <a href='#Example'>
+                        <span>使用示例</span>
+                        {value === 2 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
+                    </a>
+                </li>
+                <li onClick={() => clickSwitchValue(3)}>
+                    <a href='#CheckeredQuery'>
+                        <span>價格查詢</span>
+                        {value === 3 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
+                    </a>
+                </li>
+                <li onClick={() => clickSwitchValue(4)}>
+                    <a href='https://cloud.cocorobo.hk'>
+                    <img src={require('../asstes/img/userLogin.png')} alt="" />
+                    <span style={{ marginLeft: 8 }}>登入</span>
+                    {value === 4 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
+                    </a>
+                    
+                </li>
+            </ul>
+        </div>
+    );
+}
+export default Header

+ 40 - 0
src/complates/Introduction.js

@@ -0,0 +1,40 @@
+import '../asstes/css/Introduction.css'
+import ExperienceImg3 from '../asstes/img/3.png'
+import ExperienceImg6 from '../asstes/img/6.png'
+
+function Introduction() {
+    return (
+        <div className="Introduction">
+            <div className="Introduction_top">
+                <h1 className='Introduction_top_title'>CocoClass</h1>
+                <p>使用生成式AI <br /> 全面重塑<i>教與學模式</i></p>
+                <p className='Learning'>GenAI Assissted Teaching and Learning</p>
+                
+            </div>
+            <div className="Introduction_bottom">
+                <div className="Introduction_bottom_left Introduction_bottom_div">
+                    <h2>什麽是 <i>CocoClass?</i></h2>
+                    <p>
+                        CocoClass是由CocoRobo自主研發的教與學Web平臺,面嚮學校、教師及學生角色,致力於透過技術和學習科學提升教育質量,促進教育公平。
+                    </p>
+                    <div className='experience'>
+                        <img className='experience_img' src={ExperienceImg6} alt="" />
+                    </div>
+                </div>
+                <div className="Introduction_bottom_right Introduction_bottom_div">
+                    <div className='Introduction_bottom_right_div'>
+                        <h2>GenAI <i>支援教師</i></h2>
+                        <p>
+                            作爲教師的AI夥伴,CocoClass使用GenAI提供教學設計、實施、教學與學習評價支援服務,通過場景性的應用,針對性地支援教師探索更具科學性、探究性的課程設計。
+                        </p>
+                        <div className='experience'>
+                            <img className='experience_img' src={ExperienceImg3} alt="" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Introduction;

+ 159 - 0
src/complates/Privacy.js

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+function Privacy() {
+    const [htmlString, setHtmlString] = useState('');
+    return (
+        <div style={{maxHeight:500,overflow:'auto'}} dangerouslySetInnerHTML={{
+            __html: `<div class="Section0" style="layout-grid:15.6000pt;"><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:3;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:13.5000pt;mso-font-kerning:0.0000pt;"><font face="宋体">隐私政策</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:13.5000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">此隱私政策(</font><font face="宋体">“政策”)描述了CocoClass(“我們”或“我們的”)如何收集、保護和使用您(“用戶”或“您的”)通過CocoClass網站(https://cloud.cocorobo.hk/)或在購買任何CocoRobo Limited開發的CocoClass產品過程中提供的個人識別信息(“個人信息”)。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">該政策還描述了您對我們使用您的個人信息的選擇,以及如何訪問和更新此信息。此政策不適用於我們不擁有或控制的公司或我們不雇用或管理的個人。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">我們收集的內容和原因</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:5;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">身份和訪問</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">當您申請</font>CocoClass的試用賬戶時,我們會要求提供您的電子郵件地址、學校、聯絡方式等身份信息。這樣您可以個性化您的新賬戶,我們也可以向您發送產品更新和其他重要信息。我們可能會不時向您發送可選調查,以幫助我們了解您如何使用我們的產品並進行改進。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">我們絕不會將您的個人信息出售給第三方,並且不會在未經您允許的情況下在營銷聲明中使用您的姓名或單位名稱。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:5;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">產品互動</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">我們會在服務器上存儲您上傳、接收或保存在</font>CocoClass產品帳戶中的內容,以便您可以按照預期使用我們的產品,例如在CocoClass上使用GenAI創建內容。我們在您的帳戶活動期間保留這些內容。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:5;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">地理位置數據</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">對於大多數產品,我們會記錄用於註冊產品帳戶的完整</font>IP地址,並保留該地址以減少未來的垃圾註冊或請求。我們還會記錄所有帳戶訪問的完整IP地址,以便進行安全和防欺詐用途,並在您的產品帳戶活動期間保留這些登錄數據。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:5;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">網站互動</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">我們會收集有關您瀏覽活動的信息,用於分析和統計目的,例如轉化率測試和實驗新產品設計。這包括您的瀏覽器版本、您在</font>CocoClass中使用的功能、頁面加載時間。如果您有帳戶並已登錄,這些網絡分析數據會被匿名處理,不會與您的帳戶聯繫。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:5;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">自願通信</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:10.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">當您通過電子郵件或其他途徑向</font>CocoClass提出問題或請求幫助時,我們會保留該通信記錄,包括您的電子郵件地址,以便在您將來再次聯繫時參考。我們還會保存您可能自願提供的信息,例如調查問卷的書面回應。如果您同意進行客戶訪談,我們可能會徵求您的許可來錄製對話,僅在您明確同意的情況下才會這樣做。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">您的權利</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">在</font>CocoClass,我們努力為所有客戶提供相同的數據權利,無論其所在地如何。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">這些權利包括:</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">知情權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:您有權了解我們收集、使用、共享或出售的個人信息。我們在此隱私政策中列出了我們收集的數據類別以及它們的用途。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">訪問權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:您有權訪問我們收集的關於您的個人信息,並有權獲取有關該信息的共享、存儲、安全和處理的信息。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">更正權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:您有權要求更正您的個人信息。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">刪除權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:在適用法律的某些限制下,您有權要求刪除我們持有的您的個人信息。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">投訴權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:您有權向適當的監管機構投訴我們對您個人信息的處理方式。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">限制處理權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:您有權要求限制我們對您個人信息的使用或處理方式。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">反對權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:在某些情況下,您有權反對我們對您個人信息的處理。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">數據可攜權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:您有權接收我們持有的關於您的個人信息,並有權將其傳輸給其他方。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+            mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+            mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+            font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">免受自動決策權</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">:您有權反對和防止任何可能對您產生法律或類似重大影響的自動決策。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">您可以通過登錄並更新您的帳戶信息或聯繫我們來行使這些權利。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">我們如何保護您的數據</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">所有數據在從我們的服務器傳輸到您的瀏覽器時都通過</font>SSL/TLS進行加密。此外,我們在數據存儲方面也採取了多種措施來確保數據安全,包括所有系統和數據的訪問控制。儘管如此,由於需要隨時準備向您發送數據,我們的大部分數據在存儲在我們的數據庫中時並未加密。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">數據保留</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">我們根據收集和使用信息的目的保留您的信息,並根據您的選擇,在必要的時間後刪除或聚合這些信息。我們還可能根據法律義務、解決爭議和執行協議的需要保留和使用這些信息。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">站點和數據的位置</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">我們的產品和其他網站在中國香港和中國大陸運營,如果您位於中國以外地區,請注意,您提供給我們的任何信息將被轉移並存儲在中國香港或中國大陸。使用我們的網站或服務並向我們提供您的個人信息,即表示您同意此轉移。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">變更與問題</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">我們保留在任何時候修改本隱私政策的權利,更新後的版本將在網站上發布。當我們這樣做時,會修改本頁面頂部的更新日期。繼續使用網站即表示您同意這些變更。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+            mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+            mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">聯繫我們</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+            font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">如果您對此政策有任何疑問,請通過電子郵件聯繫我們:</font></span><span><a href="mailto:support-hk@cocorobo.cc"><u><span style="mso-spacerun:'yes';font-family:宋体;color:rgb(0,0,255);
+            text-decoration:underline;text-underline:single;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;">support-hk@cocorobo.cc</span></u></a></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><font face="宋体">。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+            mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal"><span style="mso-spacerun:'yes';font-family:等线;mso-fareast-font-family:宋体;
+            mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p>&nbsp;</o:p></span></p></div>`}}>
+
+        </div>
+    )
+}
+export default Privacy;

+ 66 - 0
src/complates/ProcessFlow.js

@@ -0,0 +1,66 @@
+import { Card } from 'antd';
+import '../asstes/css/ProcessFlow.css'
+import img1 from '../asstes/img/011.png'
+
+function ProcessFlow() {
+    return (
+        <div className='ProcessFlow'>
+            <Card
+                style={{
+                    width: '48%',
+                }}
+            >
+                <div className='ProcessFlow_card'>
+                    <span className='ProcessFlow_card_title'>Expand</span>
+                    <span className='ProcessFlow_card_num'>01</span>
+                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
+                </div>
+                <p className='english_text'>Envision and develop innovative instructional plans and themes.</p>
+                <p className='ProcessFlow_text'>CocoClass教學設計能夠根據教學需求和資源庫,創建符合教師要求的教學計劃、教案、數字化工作紙、評估及題目,並自動檢索相關網絡資源。</p>
+            </Card>
+            <Card
+                style={{
+                    width: '48%',
+                }}
+            >
+                <div className='ProcessFlow_card'>
+                    <span className='ProcessFlow_card_title'>Activate</span>
+                    <span className='ProcessFlow_card_num'>02</span>
+                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
+                </div>
+                <p className='english_text'>Use AI-driven analytics to contemplate the success and shortcomings of your instruction.</p>
+                <p className='ProcessFlow_text'>CocoClass課堂觀察使用若干理論模型,透過教學錄音與文本分析,對教師教學行爲(策略)、教學内容、師生互動、學生學習等進行分析與建議。</p>
+            </Card>
+            <Card
+                style={{
+                    marginTop:40,
+                    width: '48%',
+                }}
+            >
+                <div className='ProcessFlow_card'>
+                    <span className='ProcessFlow_card_title'>Reflect</span>
+                    <span className='ProcessFlow_card_num'>03</span>
+                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
+                </div>
+                <p className='english_text'>Use AI-driven analytics to contemplate the success and shortcomings of your instruction..</p>
+                <p className='ProcessFlow_text'>CocoClass課堂觀察使用若干理論模型,透過教學錄音與文本分析,對教師教學行爲(策略)、教學内容、師生互動、學生學習等進行分析與建議。</p>
+            </Card>
+            <Card
+                style={{
+                    marginTop:40,
+                    width: '48%',
+                }}
+            >
+                <div className='ProcessFlow_card'>
+                    <span className='ProcessFlow_card_title'>Understand</span>
+                    <span className='ProcessFlow_card_num'>04</span>
+                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
+                </div>
+                <p className='english_text'>Leverage GenAI to gain deep insights into student learning outcomes and progress.</p>
+                <p className='ProcessFlow_text'>CocoClass教學評估使用GenAI一體化功能來進行評估,根據學生的學習過程記錄和課程成果,使用AI分析學習數據並通過人工與AI綜合輸出評估反饋。</p>
+            </Card>
+        </div>
+    )
+}
+
+export default ProcessFlow

+ 116 - 0
src/complates/Sidebar.js

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import { Modal, Flex, Input, Typography, Checkbox, Button, Collapse } from "antd";
+import "../asstes/css/Sidebar.css"
+
+import Img1 from '../asstes/img/goUpper.png'
+import Img2 from '../asstes/img/任务卡片.png'
+import Img3 from '../asstes/img/对话.png'
+import Img4 from '../asstes/img/wenti.png'
+import TermsService from "./TermsService";
+import Privacy from "./Privacy";
+
+
+
+function Sidebar() {
+    const [isModalOpen1, setIsModalOpen1] = useState(false);
+    const [isModalOpen2, setIsModalOpen2] = useState(false);
+    const [isModalOpen3, setIsModalOpen3] = useState(false);
+    const [isModalOpen4, setIsModalOpen4] = useState(false);
+
+
+    const handleOk1 = () => {
+        setIsModalOpen1(false);
+    }
+    const handleOk2 = () => {
+        setIsModalOpen2(false);
+    }
+    const handleOk3 = () => {
+        setIsModalOpen2(false);
+    }
+    const handleOk4 = () => {
+        setIsModalOpen2(false);
+    }
+    const items = [
+        {
+            key: '1',
+            label: 'CocoClass的GenAI功能使用的是什麽大語言模型?',
+            children: <p>CocoClass(HK)的所有GenAI功能均接入OpenAI開發的Chat GPT-4o模型,以及Anthropic開發的Claude 3 Sonnet模型。</p>,
+        }
+    ];
+    const onChangeCollapse = (key) => {
+        console.log(key);
+    }
+    return (
+        <div className="Sidebar">
+            <div>
+                <a href="#Introduction">
+                    <img src={Img1} alt="回到頂部" />
+                    <br />
+                    <span>回到頂部</span>
+                </a>
+            </div>
+            <div onClick={() => setIsModalOpen1(true)}>
+                <img src={Img2} alt="申請試用" />
+                <br />
+                <span>申請試用</span>
+            </div>
+            <div>
+                <a href="#Contact">
+                    <img src={Img3} alt="聯絡我們" />
+                    <br />
+                    <span>聯絡我們</span>
+                </a>
+            </div>
+            <div onClick={() => setIsModalOpen2(true)}>
+                <img src={Img4} alt="常見問題" />
+                <br />
+                <span>常見問題</span>
+            </div>
+            <Modal open={isModalOpen1} onOk={handleOk1} onCancel={() => setIsModalOpen1(false)}
+                footer={[]}>
+                <h3 className="Model_h3_title">CocoClass賬號申請</h3>
+                <Flex vertical gap={16}>
+                    <div>
+                        <Typography.Title level={5}>學校名稱</Typography.Title>
+                        <Input placeholder="請輸入" />
+                    </div>
+                    <div>
+                        <Typography.Title level={5}>賬戶(請輸入電郵)</Typography.Title>
+                        <Input placeholder="請輸入" />
+                    </div>
+                    <div>
+                        <Typography.Title level={5}>聯絡電話</Typography.Title>
+                        <Input placeholder="請輸入" />
+                    </div>
+                </Flex>
+                <p className="model_p_text">*請填寫以上申請信息,我們將在工作日24小時内回復您。您的信息將被嚴格保密,不會被用於其他用途。</p>
+                <Checkbox></Checkbox> <span>繼續即表示您同意我們的
+                    <i className="model_checkbox_i" onClick={() => setIsModalOpen3(true)}>服務條款</i>和
+                    <i className="model_checkbox_i" onClick={() => setIsModalOpen4(true)}>隱私政策</i>,並確認您已年滿18歲。</span>
+                <div style={{ textAlign: 'center', marginTop: 20 }}>
+                    <Button type="primary" onClick={() => setIsModalOpen2(true)}>提交</Button>
+                </div>
+            </Modal>
+
+            <Modal open={isModalOpen2} onOk={handleOk2} onCancel={() => setIsModalOpen2(false)}
+                footer={[]} width={800} >
+                <h3 className="Model_h3_title">常見問題</h3>
+                <div style={{ minHeight: 400 }}>
+                    <Collapse items={items} defaultActiveKey={['1']} onChange={onChangeCollapse} />
+                </div>
+            </Modal>
+            <Modal open={isModalOpen3} onOk={handleOk3} onCancel={() => setIsModalOpen3(false)}
+                footer={[]} width={800}>
+                <h3 className="Model_h3_title">服務條款</h3>
+                <TermsService />
+            </Modal>
+            <Modal open={isModalOpen4} onOk={handleOk4} onCancel={() => setIsModalOpen4(false)}
+                footer={[]} width={800}>
+                <h3 className="Model_h3_title">隱私政策</h3>
+                <Privacy />
+            </Modal>
+        </div >
+    )
+}
+
+export default Sidebar

+ 225 - 0
src/complates/TermsService.js

@@ -0,0 +1,225 @@
+
+function TermsService() {
+    return (
+        <div style={{maxHeight:500,overflow:'auto'}} dangerouslySetInnerHTML={{__html:`<div class="Section0" style="layout-grid:15.6000pt;"><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:3;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:13.5000pt;mso-font-kerning:0.0000pt;"><font face="宋体">服務條款</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:13.5000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">歡迎使用</font>CocoClass的生成式人工智能應用。感謝您選擇我們的產品!我們致力於為您提供最優質的服務。為了確保我們的服務能夠順利運作,我們制定了以下服務條款(“條款”)。當我們在本文件中提及“公司”、“我們”、“我們的”或“CocoRobo”時,是指CocoRobo Limited。當我們提及“服務”時,是指我們的網站、CocoClass產品,以及任何由CocoRobo Limited創建和維護的產品,包括在網頁瀏覽器、桌面應用程序、移動應用程序或其他格式中提供的CocoClass產品。當我們提及“您”或“您的”時,是指擁有我們一項或多項服務帳戶的個人或組織。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們可能會在未來更新這些服務條款。這些更改通常是為了更清晰地說明一些條款,並通過鏈接到相關擴展政策來實現。每當我們對政策進行重大更改時,我們會更新頁面頂部的日期。當您現在或將來使用我們的服務時,您同意遵守最新的條款。有時我們可能不行使或執行某些條款,但這並不表示我們放棄該權利或條款。如果您違反任何條款,我們可能會終止您的帳戶。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">帳戶條款</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l4 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">您必須是年滿</font>18歲的人類並具有簽訂這些條款的法律權限。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l4 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">不允許通過</font><font face="宋体">“機器人”或其他自動方法註冊的帳戶,未滿18歲者創建的帳戶也不允許。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l4 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">您有責任維護您的帳戶安全。</font>CocoRobo不對您未能履行這項安全義務而導致的任何損失或損害承擔責任。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l4 level1 lfo1;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">您對在您的帳戶下發佈的所有內容和發生的活動負責。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;">AI 免責聲明</span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;">CocoClass為教師提供了設計和開發教育材料的工作區。我們的AI工具旨在建議和實施基於證據的教學實踐,並普遍提升教學過程的效率和質量,但需要注意以下事項:</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l2 level1 lfo2;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">人工監管</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">:</font>CocoClass並不能替代具有豐富背景知識和超高水平的上下文理解能力的教育專家。因此,使用者應審查並調整AI輸出,確保其符合學生的特定需求,並與其教育目標和使用者所參考的教育標準一致。教學設計、實施、評估中的最終決定應由了解其背景和獨特需求的教育者做出。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l2 level1 lfo2;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">準確性</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">:儘管我們努力提供準確且有用的</font>AI幫助,但生成式AI的建議基於統計模式和大量數據處理,可能並非在每個情境下都完全準確或合適。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">教育者應核實信息並進行必要調整。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l2 level1 lfo2;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-weight:bold;font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">隱私</font></span></b><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">:我們致力於保護您的隱私。與我們的</font>AI共享的任何數據均根據我們的隱私政策處理。未經您的明確同意,我們不會存儲您使用AI的個人信息。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">請注意,違反使用</font>AI系統的條款可能會導致帳戶被撤銷。使用我們的AI工具即表示您承認並同意將AI幫助作為教學設計、實施、評估過程中的輔助資源。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">免費使用</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l7 level1 lfo3;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">如果您使用我們服務的免費版本,我們不要求您提供支付信息,並且不會出售您的數據。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l7 level1 lfo3;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">對於提供免費試用的付費服務,我們會在通過您的註冊時説明您的使用次數限制。如果您所在的單位未采購</font>CocoClass產品,那麽您始終能夠在當月獲取一定的使用次數,並在下月獲得重置后的次數。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">取消和終止</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l5 level1 lfo4;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">您對正確取消您的帳戶負全部責任。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l5 level1 lfo4;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們有權隨時因任何原因暫停或終止您的帳戶並拒絕當前或未來使用我們的任何服務。暫停意味著您將無法訪問帳戶或帳戶中的任何內容。終止將進一步導致您的帳戶或您對帳戶的訪問被刪除,以及帳戶中所有內容的喪失和放棄。我們也保留隨時拒絕任何人使用服務的權利。我們有這個條款為了避免用戶使用</font>CocoClass的生成式AI服務進行不正當應用。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">服務的修改</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們向客戶承諾,只要</font>CocoRobo繼續運營,我們將支持我們的服務。這意味著在安全性、隱私和客戶支持方面,我們將繼續維護任何遺留服務。有時,由於技術上無法繼續某個功能,或者我們重新設計了服務的某個部分,我們認為這會更好,或者我們決定關閉某個產品的新註冊,我們保留隨時修改或停止任何服務的部分或全部的權利,無論是否通知。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">正常運行時間、安全和隱私</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo5;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">您使用服務的風險由您自行承擔。我們按</font><font face="宋体">“現狀”和“可用”基礎提供這些服務。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo5;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">如果您的使用量顯著超過其他客戶的平均使用量,我們保留暫時禁用您的帳戶的權利。當然,除了極少數情況會影響其他客戶的服務性能之外,我們會在採取任何行動之前與帳戶持有人聯繫。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l0 level1 lfo5;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們通過備份、冗餘和加密採取許多措施來保護和確保您的數據安全。我們對從公共互聯網進行的數據傳輸強制執行加密。在某些極端情況下,我們可能會通過我們的網絡未加密地傳輸您的數據。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">私隱保護</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l3 level1 lfo6;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">根據香港《個人資料(私隱)條例》(第</font>486章)和《開發及使用人工智能道德標準指引》(《人工智能指引》),我們致力於保護您的個人資料私隱。在開發及使用人工智能時,我們遵循《私隱條例》及《人工智能指引》中的數據管理價值及人工智能道德原則,並提供適當的策略管治及風險評估措施。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l3 level1 lfo6;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">當您使用我們的服務時,您將您的數據委託給我們。我們非常重視這種信任。您同意</font>CocoRobo可以按照我們的隱私政策處理您的數據,並且不會用於其他目的。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們可以出於以下原因訪問您的數據:</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:72.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l3 level2 lfo6;"><!--[if !supportLists]--><span style="font-family:'Courier New';mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">o<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">提供運行服務所需的硬件、軟件、網絡、存儲和相關技術。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:72.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l3 level2 lfo6;"><!--[if !supportLists]--><span style="font-family:'Courier New';mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">o<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">根據香港法律,我們不會保留、使用、披露或出售任何數據以進行其他商業目的,除非我們獲得您的明確許可。您同意遵守相關法律法規,不得以違反法規的方式使用</font>CocoRobo的服務。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">版權和內容所有權</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l8 level1 lfo7;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">所有發佈在服務上的內容必須符合香港《版權條例》。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l8 level1 lfo7;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">您授予我們有限的許可,允許我們使用您和您的用戶發佈的內容以提供服務,但我們不對這些材料聲索所有權。您提交給服務的所有材料仍然屬於您。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l8 level1 lfo7;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們會預先篩選輸入以檢查是否包含與教育無關的查詢,並保留在我們的全權酌情下拒絕或移除通過服務提供的任何內容的權利(但無義務)。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l8 level1 lfo7;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">公司或其許可方擁有</font>CocoClass 產品服務的所有權利、所有權和利益,包括其中的所有知識產權,您在使用服務後不會獲得服務的所有權。未經公司明確書面許可,您不得複製、複製、拷貝、銷售、轉售或利用服務的任何部分、使用服務或訪問服務。您必須請求許可以用於宣傳目的的公司標誌或任何服務標誌。請發送電子郵件至</span><span><a href="mailto:support-hk@cocorobo.cc"><u><span style="mso-spacerun:'yes';font-family:宋体;color:rgb(0,0,255);
+text-decoration:underline;text-underline:single;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;">support-hk@cocorobo.cc</span></u></a></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">以使用標誌。如果您違反這些條款,我們保留撤銷任何許可的權利。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l8 level1 lfo7;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">您同意不經公司明確書面許可,不得複製、複製、拷貝、銷售、轉售或利用服務的任何部分、使用服務或訪問服務。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">法律遵從</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l1 level1 lfo8;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們在整個條款中提及責任,但總結在一節中:您明確理解並同意,公司不對您或任何第三方因使用服務或無法使用服務而產生的任何直接、間接、附帶、失去利潤、特別、後果性、懲罰性或典型損害賠償,包括但不限於因以下原因造成的損害賠償:購買或獲取的任何商品、數據、信息或服務的替代品的成本;未經授權訪問或更改您的傳輸或數據;第三方在服務上作出的聲明或行為;或與這些條款或服務有關的任何其他事宜,無論是基於合同違約、侵權(包括主動或被動過失)或任何其他責任理論。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l1 level1 lfo8;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">在香港,我們遵守《</font>2021年刑事罪行(修訂)條例》的相關規定,該條例涵蓋未經同意下發布或威脅發布私密影像的罪行,包括使用人工智能技術生成的影像。對於任何違反法律或散播不實資訊的行為,我們將配合相關部門依法處理。</span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">功能和漏洞</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">我們根據自己的經驗和客戶分享的經驗精心設計我們的服務。然而,沒有任何服務可以滿足每個人的需求。我們不保證我們的服務將滿足您的特定要求或期望。我們在發佈之前會對所有功能進行廣泛測試。與任何軟件一樣,我們的服務不可避免地會有一些漏洞。我們會跟蹤報告給我們的漏洞,並處理優先級較高的漏洞,特別是與安全或隱私相關的漏洞。並非所有報告的漏洞都會得到修復,我們也不保證完全無錯誤的服務。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;mso-margin-top-alt:auto;
+mso-margin-bottom-alt:auto;mso-pagination:widow-orphan;text-align:left;
+mso-outline-level:4;"><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><font face="宋体">持續改進</font></span></b><b><span style="mso-spacerun:'yes';font-family:宋体;font-weight:bold;
+font-size:12.0000pt;mso-font-kerning:0.0000pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-top:5.0000pt;margin-bottom:5.0000pt;margin-left:36.0000pt;
+mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-indent:-18.0000pt;
+mso-pagination:widow-orphan;text-align:left;mso-list:l6 level1 lfo9;"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:宋体;mso-bidi-font-family:宋体;
+font-size:10.0000pt;mso-font-kerning:0.0000pt;"><span style="mso-list:Ignore;">·<span>&nbsp;</span></span></span><!--[endif]--><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">鑑於人工智能技術的發展仍在不斷演變,我們會持續關注其在香港的技術開發、應用及發展情況,並參考不同地區的做法,確保我們的服務在提供創新科技的同時,嚴格遵守相關法律法規,保障用戶的權益。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p>&nbsp;</o:p></span></p><p class="MsoNormal" style="mso-pagination:widow-orphan;text-align:left;"><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">如果您對這些條款有任何疑問,請聯繫我們:</font></span><span><a href="mailto:support-hk@cocorobo.cc"><u><span style="mso-spacerun:'yes';font-family:宋体;color:rgb(0,0,255);
+text-decoration:underline;text-underline:single;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;">support-hk@cocorobo.cc</span></u></a></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><font face="宋体">。</font></span><span style="mso-spacerun:'yes';font-family:宋体;font-size:12.0000pt;
+mso-font-kerning:0.0000pt;"><o:p></o:p></span></p><p class="MsoNormal"><span style="mso-spacerun:'yes';font-family:等线;mso-fareast-font-family:宋体;
+mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p>&nbsp;</o:p></span></p></div>`}}>
+
+        </div>
+    )
+}
+export default TermsService;

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
src/logo.svg


+ 72 - 0
src/view/home.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Flex, Layout } from 'antd';
+import HeaderLeft from '../complates/HeaderLeft'
+import HeaderRight from '../complates/HeaderRight'
+import Introduction from '../complates/Introduction'
+import ProcessFlow from '../complates/ProcessFlow'
+import Example from '../complates/Examples'
+import CheckeredQuery from '../complates/CheckeredQuery'
+import Contact from '../complates/Contact'
+import Sidebar from '../complates/Sidebar'
+
+const { Header, Footer, Content } = Layout;
+const headerStyle = {
+    height: 64,
+    paddingInline: 48,
+    lineHeight: '64px',
+    backgroundColor: '#fff',
+    display: "flex",
+    padding: "0 100px",
+    justifyContent: "space-between",
+    position: "fixed",
+    width: '100%',
+    zIndex: "100",
+};
+
+const contentStyle = {
+    marginTop:64,
+    backgroundColor: '#fff',
+};
+const footerStyle = {
+    padding: "100px 0px 0px"
+};
+
+const layoutStyle = {
+    borderRadius: 8,
+    overflow: 'hidden',
+    width: '100%',
+};
+function Home() {
+    return (
+        <Flex gap="middle" wrap>
+            <Layout style={layoutStyle}>
+                <Header style={headerStyle}>
+                    <HeaderLeft />
+                    <HeaderRight />
+                </Header>
+                <Content style={contentStyle}>
+                    <div id="Introduction">
+                        <Introduction />
+                    </div>
+                    <div id="ProcessFlow">
+                        <ProcessFlow />
+                    </div>
+                    <div id="Example">
+                        <Example />
+                    </div>
+                    <div id="CheckeredQuery">
+                        <CheckeredQuery />
+                    </div>
+                    <Sidebar />
+                </Content>
+                <Footer style={footerStyle}>
+                    <div id="Contact">
+                        <Contact />
+                    </div>
+                </Footer>
+            </Layout>
+        </Flex>
+    );
+}
+
+export default Home;

Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor