Начало Каталог Помощ
Вход
chao
/
CocoClass_home
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

update

chao преди 6 месеца
родител
d38a478ece
ревизия
2c6dbda1bb
променени са 38 файла, в които са добавени 303 реда и са изтрити 128 реда
Разделен изглед Покажи статистика за разликите
  1. 12 8
      build/asset-manifest.json
  2. 1 1
      build/index.html
  3. 0 0
      build/static/css/main.1ffcc924.css
  4. 0 0
      build/static/css/main.1ffcc924.css.map
  5. 0 0
      build/static/css/main.5fb8727e.css
  6. 0 0
      build/static/css/main.5fb8727e.css.map
  7. 1 0
      build/static/js/main.dd8c9d83.js
  8. 0 4
      build/static/js/main.dd8c9d83.js.LICENSE.txt
  9. 0 0
      build/static/js/main.dd8c9d83.js.map
  10. 0 1
      build/static/js/main.df8ac31c.js
  11. 0 0
      build/static/js/main.df8ac31c.js.map
  12. BIN
      build/static/media/011.22ad02aadee212e43e1f.png
  13. BIN
      build/static/media/1111.df0f830e8c280afea30c.mp4
  14. BIN
      build/static/media/new1.dced369d85065c89bba9.png
  15. BIN
      build/static/media/new2.83a904d88e92f9dc588e.png
  16. BIN
      build/static/media/new3.d41c3d52bea4a1856d3e.png
  17. BIN
      build/static/media/new4.1c4d39e891a5942a56b4.png
  18. BIN
      build/static/media/new6.1c5461e0d6276fd4c31a.png
  19. BIN
      build/static/media/new7.a6c900d5865f53720dee.png
  20. 2 0
      src/asstes/css/CheckeredQuery.css
  21. 2 1
      src/asstes/css/Example.css
  22. 5 4
      src/asstes/css/Introduction.css
  23. 122 38
      src/asstes/css/ProcessFlow.css
  24. BIN
      src/asstes/img/li_before.png
  25. BIN
      src/asstes/img/new1.png
  26. BIN
      src/asstes/img/new2.png
  27. BIN
      src/asstes/img/new3.png
  28. BIN
      src/asstes/img/new4.png
  29. BIN
      src/asstes/img/new5.png
  30. BIN
      src/asstes/img/new6.png
  31. BIN
      src/asstes/img/new7.png
  32. BIN
      src/asstes/video/1111.mp4
  33. 7 7
      src/complates/CheckeredQuery.js
  34. 9 5
      src/complates/Examples.js
  35. 13 1
      src/complates/HeaderRight.js
  36. 4 4
      src/complates/Introduction.js
  37. 119 54
      src/complates/ProcessFlow.js
  38. 6 0
      src/index.css

+ 12 - 8
build/asset-manifest.json
Целия файл 

@@ -1,20 +1,24 @@
 
 {
 
   "files": {
 
-    "main.css": "/cococlass/static/css/main.5fb8727e.css",
 
-    "main.js": "/cococlass/static/js/main.df8ac31c.js",
 
+    "main.css": "/cococlass/static/css/main.1ffcc924.css",
 
+    "main.js": "/cococlass/static/js/main.dd8c9d83.js",
 
     "static/js/453.423c454f.chunk.js": "/cococlass/static/js/453.423c454f.chunk.js",
 
-    "static/media/1111.mp4": "/cococlass/static/media/1111.df0f830e8c280afea30c.mp4",
 
+    "static/media/new7.png": "/cococlass/static/media/new7.a6c900d5865f53720dee.png",
 
     "static/media/1.png": "/cococlass/static/media/1.adbd7fafeb396230cc5a.png",
 
     "static/media/example_back.png": "/cococlass/static/media/example_back.0884d132251e074b4ec2.png",
 
-    "static/media/011.png": "/cococlass/static/media/011.22ad02aadee212e43e1f.png",
 
+    "static/media/new1.png": "/cococlass/static/media/new1.dced369d85065c89bba9.png",
 
     "static/media/example_back1.png": "/cococlass/static/media/example_back1.96b3cb37fdfdda7724e4.png",
 
+    "static/media/new3.png": "/cococlass/static/media/new3.d41c3d52bea4a1856d3e.png",
 
+    "static/media/new6.png": "/cococlass/static/media/new6.1c5461e0d6276fd4c31a.png",
 
+    "static/media/new2.png": "/cococlass/static/media/new2.83a904d88e92f9dc588e.png",
 
+    "static/media/new4.png": "/cococlass/static/media/new4.1c4d39e891a5942a56b4.png",
 
     "index.html": "/cococlass/index.html",
 
-    "main.5fb8727e.css.map": "/cococlass/static/css/main.5fb8727e.css.map",
 
-    "main.df8ac31c.js.map": "/cococlass/static/js/main.df8ac31c.js.map",
 
+    "main.1ffcc924.css.map": "/cococlass/static/css/main.1ffcc924.css.map",
 
+    "main.dd8c9d83.js.map": "/cococlass/static/js/main.dd8c9d83.js.map",
 
     "453.423c454f.chunk.js.map": "/cococlass/static/js/453.423c454f.chunk.js.map"
 
   },
 
   "entrypoints": [
 
-    "static/css/main.5fb8727e.css",
 
-    "static/js/main.df8ac31c.js"
 
+    "static/css/main.1ffcc924.css",
 
+    "static/js/main.dd8c9d83.js"
 
   ]
 
 }

+ 1 - 1
build/index.html
Целия файл 

@@ -1 +1 @@
 
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><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"/><title>CocoClass</title><script defer="defer" src="/cococlass/static/js/main.df8ac31c.js"></script><link href="/cococlass/static/css/main.5fb8727e.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
 
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><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"/><title>可可乐博</title><script defer="defer" src="/cococlass/static/js/main.dd8c9d83.js"></script><link href="/cococlass/static/css/main.1ffcc924.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html><script>console.log(navigator.language);let lang=navigator.language;document.getElementsByTagName("title")[0].text="zh-CN"==lang?"可可乐博":"zh-TW"==lang?"可可樂博":"CocoRobo"</script>

Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
build/static/css/main.1ffcc924.css


Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
build/static/css/main.1ffcc924.css.map


Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
build/static/css/main.5fb8727e.css


Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
build/static/css/main.5fb8727e.css.map


Файловите разлики са ограничени, защото са твърде много
+ 1 - 0
build/static/js/main.dd8c9d83.js


+ 0 - 4
build/static/js/main.df8ac31c.js.LICENSE.txt → build/static/js/main.dd8c9d83.js.LICENSE.txt
Целия файл 

@@ -72,8 +72,6 @@
 
 
 /**![edit](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI1Ny43IDc1MmMyIDAgNC0uMiA2LS41TDQzMS45IDcyMmMyLS40IDMuOS0xLjMgNS4zLTIuOGw0MjMuOS00MjMuOWE5Ljk2IDkuOTYgMCAwMDAtMTQuMUw2OTQuOSAxMTQuOWMtMS45LTEuOS00LjQtMi45LTcuMS0yLjlzLTUuMiAxLTcuMSAyLjlMMjU2LjggNTM4LjhjLTEuNSAxLjUtMi40IDMuMy0yLjggNS4zbC0yOS41IDE2OC4yYTMzLjUgMzMuNSAwIDAwOS40IDI5LjhjNi42IDYuNCAxNC45IDkuOSAyMy44IDkuOXptNjcuNC0xNzQuNEw2ODcuOCAyMTVsNzMuMyA3My4zLTM2Mi43IDM2Mi42LTg4LjkgMTUuNyAxNS42LTg5ek04ODAgODM2SDE0NGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJ2MzZjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTM2YzAtMTcuNy0xNC4zLTMyLTMyLTMyeiIgLz48L3N2Zz4=) */
 
 
-/**![ellipsis](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE3NiA1MTFhNTYgNTYgMCAxMDExMiAwIDU2IDU2IDAgMTAtMTEyIDB6bTI4MCAwYTU2IDU2IDAgMTAxMTIgMCA1NiA1NiAwIDEwLTExMiAwem0yODAgMGE1NiA1NiAwIDEwMTEyIDAgNTYgNTYgMCAxMC0xMTIgMHoiIC8+PC9zdmc+) */
 
-
 
 /**![enter](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg2NCAxNzBoLTYwYy00LjQgMC04IDMuNi04IDh2NTE4SDMxMHYtNzNjMC02LjctNy44LTEwLjUtMTMtNi4zbC0xNDEuOSAxMTJhOCA4IDAgMDAwIDEyLjZsMTQxLjkgMTEyYzUuMyA0LjIgMTMgLjQgMTMtNi4zdi03NWg0OThjMzUuMyAwIDY0LTI4LjcgNjQtNjRWMTc4YzAtNC40LTMuNi04LTgtOHoiIC8+PC9zdmc+) */
 
 
 /**![exclamation-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0tMzIgMjMyYzAtNC40IDMuNi04IDgtOGg0OGM0LjQgMCA4IDMuNiA4IDh2MjcyYzAgNC40LTMuNiA4LTggOGgtNDhjLTQuNCAwLTgtMy42LTgtOFYyOTZ6bTMyIDQ0MGE0OC4wMSA0OC4wMSAwIDAxMC05NiA0OC4wMSA0OC4wMSAwIDAxMCA5NnoiIC8+PC9zdmc+) */
 
@@ -88,8 +86,6 @@
 
 
 /**![loading](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk4OCA1NDhjLTE5LjkgMC0zNi0xNi4xLTM2LTM2IDAtNTkuNC0xMS42LTExNy0zNC42LTE3MS4zYTQ0MC40NSA0NDAuNDUgMCAwMC05NC4zLTEzOS45IDQzNy43MSA0MzcuNzEgMCAwMC0xMzkuOS05NC4zQzYyOSA4My42IDU3MS40IDcyIDUxMiA3MmMtMTkuOSAwLTM2LTE2LjEtMzYtMzZzMTYuMS0zNiAzNi0zNmM2OS4xIDAgMTM2LjIgMTMuNSAxOTkuMyA0MC4zQzc3Mi4zIDY2IDgyNyAxMDMgODc0IDE1MGM0NyA0NyA4My45IDEwMS44IDEwOS43IDE2Mi43IDI2LjcgNjMuMSA0MC4yIDEzMC4yIDQwLjIgMTk5LjMuMSAxOS45LTE2IDM2LTM1LjkgMzZ6IiAvPjwvc3ZnPg==) */
 
 
-/**![plus](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ4MiAxNTJoNjBxOCAwIDggOHY3MDRxMCA4LTggOGgtNjBxLTggMC04LThWMTYwcTAtOCA4LTh6IiAvPjxwYXRoIGQ9Ik0xOTIgNDc0aDY3MnE4IDAgOCA4djYwcTAgOC04IDhIMTYwcS04IDAtOC04di02MHEwLTggOC04eiIgLz48L3N2Zz4=) */
 
-
 
 /**![right](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTc2NS43IDQ4Ni44TDMxNC45IDEzNC43QTcuOTcgNy45NyAwIDAwMzAyIDE0MXY3Ny4zYzAgNC45IDIuMyA5LjYgNi4xIDEyLjZsMzYwIDI4MS4xLTM2MCAyODEuMWMtMy45IDMtNi4xIDcuNy02LjEgMTIuNlY4ODNjMCA2LjcgNy43IDEwLjQgMTIuOSA2LjNsNDUwLjgtMzUyLjFhMzEuOTYgMzEuOTYgMCAwMDAtNTAuNHoiIC8+PC9zdmc+) */
 
 
 /**![search](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkwOS42IDg1NC41TDY0OS45IDU5NC44QzY5MC4yIDU0Mi43IDcxMiA0NzkgNzEyIDQxMmMwLTgwLjItMzEuMy0xNTUuNC04Ny45LTIxMi4xLTU2LjYtNTYuNy0xMzItODcuOS0yMTIuMS04Ny45cy0xNTUuNSAzMS4zLTIxMi4xIDg3LjlDMTQzLjIgMjU2LjUgMTEyIDMzMS44IDExMiA0MTJjMCA4MC4xIDMxLjMgMTU1LjUgODcuOSAyMTIuMUMyNTYuNSA2ODAuOCAzMzEuOCA3MTIgNDEyIDcxMmM2NyAwIDEzMC42LTIxLjggMTgyLjctNjJsMjU5LjcgMjU5LjZhOC4yIDguMiAwIDAwMTEuNiAwbDQzLjYtNDMuNWE4LjIgOC4yIDAgMDAwLTExLjZ6TTU3MC40IDU3MC40QzUyOCA2MTIuNyA0NzEuOCA2MzYgNDEyIDYzNnMtMTE2LTIzLjMtMTU4LjQtNjUuNkMyMTEuMyA1MjggMTg4IDQ3MS44IDE4OCA0MTJzMjMuMy0xMTYuMSA2NS42LTE1OC40QzI5NiAyMTEuMyAzNTIuMiAxODggNDEyIDE4OHMxMTYuMSAyMy4yIDE1OC40IDY1LjZTNjM2IDM1Mi4yIDYzNiA0MTJzLTIzLjMgMTE2LjEtNjUuNiAxNTguNHoiIC8+PC9zdmc+) */

Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
build/static/js/main.dd8c9d83.js.map


Файловите разлики са ограничени, защото са твърде много
+ 0 - 1
build/static/js/main.df8ac31c.js


Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
build/static/js/main.df8ac31c.js.map


BIN
build/static/media/011.22ad02aadee212e43e1f.png
Целия файл


BIN
build/static/media/1111.df0f830e8c280afea30c.mp4
Целия файл


BIN
build/static/media/new1.dced369d85065c89bba9.png
Целия файл


BIN
build/static/media/new2.83a904d88e92f9dc588e.png
Целия файл


BIN
build/static/media/new3.d41c3d52bea4a1856d3e.png
Целия файл


BIN
build/static/media/new4.1c4d39e891a5942a56b4.png
Целия файл


BIN
build/static/media/new6.1c5461e0d6276fd4c31a.png
Целия файл


BIN
build/static/media/new7.a6c900d5865f53720dee.png
Целия файл


+ 2 - 0
src/asstes/css/CheckeredQuery.css
Целия файл 

@@ -27,6 +27,7 @@
 
     }
 
 
     .Reusable {
 
+        max-width: 45%;
 
         margin: 0 auto;
 
         text-align: center;
 
         position: relative;
 
@@ -85,6 +86,7 @@
 
     }
 
 
     .Subscribe {
 
+        max-width: 45%;
 
         margin: 0 auto;
 
         text-align: center;
 
         position: relative;

+ 2 - 1
src/asstes/css/Example.css
Целия файл 

@@ -64,7 +64,8 @@
 
             left: 0;
 
         }
 
         .Carousel_div{
 
-            padding: 0 100px 80px;
 
+            padding: 80px;
 
+            text-align: center;
 
             .contentStyle{
 
                 height: 500px;
 
                 background: linear-gradient(to right,#3673E8,#88CCFD);

+ 5 - 4
src/asstes/css/Introduction.css
Целия файл 

@@ -66,12 +66,13 @@
 
         .Learning {
 
             margin-top: 32px;
 
             font-family: PingFang SC;
 
-            font-size: 32px;
 
+            font-size: 36px;
 
             font-weight: 500;
 
-            line-height: 36px;
 
-            letter-spacing: 0.1em;
 
+            line-height: 54px;
 
+            /* letter-spacing: 0.1em; */
 
             text-align: left;
 
-            color: #5E9AFC;
 
+            color: #5B64E4;
 
+            font-weight: 700;
 
         }

+ 122 - 38
src/asstes/css/ProcessFlow.css
Целия файл 

@@ -1,59 +1,143 @@
 
 .ProcessFlow {
 
     margin-top: 100px;
 
-    background-color: #E2EEFF;
 
+    background-color: #fff;
 
     padding: 100px;
 
     display: flex;
 
     justify-content: space-between;
 
     flex-wrap: wrap;
 
 
     .ProcessFlow_card {
 
-        position: relative;
 
+        text-align: center;
 
+        width: 45%;
 
 
         .ProcessFlow_card_title {
 
-            font-size: 44px;
 
-            font-weight: 700;
 
-            letter-spacing: 0.02em;
 
+            font-size: 48px;
 
+            font-weight: 900;
 
+            line-height: 56.8px;
 
+            color: #4C14A6;
 
+            text-align: center;
 
+            margin: 50px 0;
 
+        }
 
+
 
+        .ProcessFlow_card_div {
 
+            display: flex;
 
+            justify-content: space-between;
 
+
 
+            .ProcessFlow_div {
 
+
 
+                width: 30%;
 
+                text-align: center;
 
+
 
+                .ProcessFlow_div_num {
 
+                    margin: 0 auto;
 
+                    font-family: DIN Alternate;
 
+                    display: flex;
 
+                    width: 56px;
 
+                    height: 56px;
 
+                    border-radius: 50%;
 
+                    background: linear-gradient(#DEE6FD, #E4EDFF00);
 
+                    align-items: center;
 
+                    justify-content: center;
 
+                    font-size: 24px;
 
+                    color: #2E32A8;
 
+                }
 
 
+                .english_text {
 
+                    font-size: 20px;
 
+                    font-weight: 500;
 
+                    line-height: 20px;
 
+                    color: #2E32A8;
 
+                }
 
+
 
+                .ProcessFlow_text {
 
+                    margin-top: 16px;
 
+                    font-family: Noto Sans SC;
 
+                    font-size: 17px;
 
+                    font-weight: 400;
 
+                    line-height: 20px;
 
+                    text-align: center;
 
+                    color: rgba(0, 0, 0, .6);
 
+                }
 
+            }
 
         }
 
-        .ProcessFlow_card_num{
 
-            font-family: DIN Alternate;
 
-            position: absolute;
 
-            top: 25px;
 
-            right: 25px;
 
-            font-size: 35px;
 
-            color: #fff;
 
-            z-index: 1;
 
-            opacity: 0.22;
 
+
 
+        .new_img {
 
+            display: block;
 
+            margin: 30px auto;
 
+
 
         }
 
 
-        .ProcessFlow_img_back {
 
-            padding: 5px;
 
-            position: absolute;
 
-            right: 0;
 
-            width: 93px;
 
-            top: 0;
 
-            
+        .new2_img {
 
+            padding: 5px 30px;
 
+            box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, .2);
 
+            border-radius: 5px;
 
         }
 
 
+        .ProcessFlow_ul {
 
+            li {
 
+                font-size: 16px;
 
+                font-weight: 400;
 
+                line-height: 24px;
 
+                color: #555;
 
+                text-align: left;
 
+                position: relative;
 
+                padding: 6px 10px;
 
+            }
 
 
-    }
 
+            li::before {
 
+                content: '';
 
+                display: inline-block;
 
+                width: 8px;
 
+                height: 8px;
 
+                background-image: url('../img/li_before.png');
 
+                border-radius: 50%;
 
+                margin-right: 8px;
 
+                position: absolute;
 
+                top: 14px;
 
+                left: -2px;
 
+            }
 
+        }
 
 
-    .english_text {
 
-        min-height: 60px;
 
-        margin-top: 40px;
 
-        font-size: 20px;
 
-        font-weight: 400;
 
-        line-height: 30px;
 
-        color: #3681FC;
 
-    }
 
+        .ProcessFlow_ul_2{
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            li{
 
+                width: 50%;
 
+            }
 
+        }
 
+
 
+        .cocoflow {
 
+            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .2);
 
+            border: 1px solid #DEE8F9;
 
+            border-radius: 16px;
 
+            padding: 20px;
 
+
 
+            .cocoflow_div {
 
+                display: flex;
 
+                align-items: center;
 
 
-    .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);
 
+                div {
 
+                    width: 50%;
 
+                    text-align: left;
 
+
 
+                    img {
 
+                        height: fit-content;
 
+                        margin-right: 30px;
 
+                    }
 
+
 
+                    h4 {
 
+                        font-size: 20px;
 
+                        font-weight: 500;
 
+                        padding-bottom: 15px;
 
+                    }
 
+
 
+                    .ProcessFlow_ul {
 
+                        span {
 
+                            color: #4D75EC;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        }
 
     }
 
 }

BIN
src/asstes/img/li_before.png
Целия файл


BIN
src/asstes/img/new1.png
Целия файл


BIN
src/asstes/img/new2.png
Целия файл


BIN
src/asstes/img/new3.png
Целия файл


BIN
src/asstes/img/new4.png
Целия файл


BIN
src/asstes/img/new5.png
Целия файл


BIN
src/asstes/img/new6.png
Целия файл


BIN
src/asstes/img/new7.png
Целия файл


BIN
src/asstes/video/1111.mp4
Целия файл


+ 7 - 7
src/complates/CheckeredQuery.js
Целия файл 

@@ -11,9 +11,9 @@ function CheckeredQuery() {
 
                     <span className="Reusable_span">Get started with CocoClass Using GenAI.</span>
 
                     <Button>$0  /年</Button>
 
                     <ul className="Reusable_ul">
 
-                        {/* <li>每校開通≤3位教師賬號，≤50位學生賬號</li> */}
 
-                        <li>≤1000次對話/月（含所有生成式AI對話場景）</li>
 
-                        <li>≤1000次生成/月（含所有場景下生成課程/教學分析等）</li>
 
+                        <li>適用於尚未使用CococClass GenAI的學校</li>
 
+                        <li>每校開通≤5位教師賬號，≤50位學生賬號</li>
 
+                        <li>3個月賬戶試用期</li>
 
                     </ul>
 
                 </div>
 
                 <div className="Subscribe">
 
@@ -22,10 +22,10 @@ function CheckeredQuery() {
 
                     <Button>聯絡我們查詢GenAI方案</Button>
 
                     <ul className="Reusable_ul">
 
                         <li>全校教師賬號與學生賬號服務</li>
 
-                        <li>AI 工具不限次對話</li>
 
-                        <li>客制化自訂教學設計框架 - 3項</li>
 
-                        <li>到校教師培訓工作坊 - 120分鐘</li>
 
-                        <li>綫上一對一技術支援</li>
 
+                        <li>客制化教學設計模式服务 - 3項</li>
 
+                        <li>到校教師培訓 ≥ 120分鐘</li>
 
+                        <li>客制化 CocoFlow 應用搭建 – 3項</li>
 
+                        <li>不限次綫上技術支援</li>
 
                     </ul>
 
                 </div>
 
             </Flex>

+ 9 - 5
src/complates/Examples.js
Целия файл 

@@ -1,8 +1,7 @@
 
 import React, { useState } from "react";
 
-import { Carousel, Flex } from 'antd';
 
+// import { Carousel, Flex } from 'antd';
 
 import '../asstes/css/Example.css'
 
-import Carousel1 from '../asstes/img/Carousel1.png';
 
-import videos from '../asstes/video/1111.mp4'
 
+// import Carousel1 from '../asstes/img/Carousel1.png';
 
 
 
 const carouselRef = React.createRef();
 
@@ -16,9 +15,9 @@ function Example() {
 
     }
 
     return (
 
         <div className="Example">
 
-            <h1>使用示例</h1>
 
+            <h1>使用示例視頻</h1>
 
             <div className="Example_content">
 
-                <Flex>
 
+                {/* <Flex>
 
                     <div className={state1 === 0 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(0)}>
 
                         <span>教學設計</span><br />
 
                         <span>AI as Co-Designer</span>
 
@@ -57,6 +56,11 @@ function Example() {
 
                             <span>即將上綫</span>
 
                         </div>
 
                     </Carousel>
 
+                </div> */}
 
+                <div className="Carousel_div">
 
+                    <video controls style={{width:'100%',borderRadius:'10px'}}>
 
+                        <source src="//cocorobo.hk/12月10日.mp4" type="video/mp4" />
 
+                    </video>
 
                 </div>
 
             </div>
 
         </div>

+ 13 - 1
src/complates/HeaderRight.js
Целия файл 

@@ -1,4 +1,4 @@
 
-import React, { useState } from 'react';
 
+import React, { useEffect, useState } from 'react';
 
 
 import '../asstes/css/header.css'
 
 
@@ -6,6 +6,18 @@ import '../asstes/css/header.css'
 
 function Header() {
 
     const [value, setValue] = useState(0)
 
 
+    useEffect(() => {
 
+        let hash = window.location.hash
 
+        if (hash === '#Introduction') {
 
+            setValue(0)
 
+        } else if (hash === '#ProcessFlow') {
 
+            setValue(1)
 
+        } else if (hash === '#Example') {
 
+            setValue(2)
 
+        } else if (hash === '#CheckeredQuery') {
 
+            setValue(3)
 
+        }
 
+    }, [])
 
     const clickSwitchValue = (val) => {
 
         setValue(val)
 
     }

+ 4 - 4
src/complates/Introduction.js
Целия файл 

@@ -7,11 +7,11 @@ function Introduction() {
 
         <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>
 
+                <p>使用GenAI全面 <br /> 支援與創新<i>學與教過程</i></p>
 
+                <p className='Learning'>Acceleration for Every Student and Teacher</p>
 
                 
             </div>
 
-            <div className="Introduction_bottom">
 
+            {/* <div className="Introduction_bottom">
 
                 <div className="Introduction_bottom_left Introduction_bottom_div">
 
                     <h2>什麽是 <i>CocoClass？</i></h2>
 
                     <p>
 
@@ -32,7 +32,7 @@ function Introduction() {
 
                         </div>
 
                     </div>
 
                 </div>
 
-            </div>
 
+            </div> */}
 
         </div>
 
     )
 
 }

+ 119 - 54
src/complates/ProcessFlow.js
Целия файл 

@@ -1,64 +1,129 @@
 
-import { Card } from 'antd';
 
+// import { div } from 'antd';
 
 import '../asstes/css/ProcessFlow.css'
 
-import img1 from '../asstes/img/011.png'
 
+import img1 from '../asstes/img/new1.png'
 
+import img2 from '../asstes/img/new2.png'
 
+import img3 from '../asstes/img/new3.png'
 
+import img4 from '../asstes/img/new4.png'
 
+import img5 from '../asstes/img/new5.png'
 
+import img6 from '../asstes/img/new6.png'
 
+import img7 from '../asstes/img/new7.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 className='ProcessFlow_card'>
 
+                <h1 className='ProcessFlow_card_title'>AI支援學與教</h1>
 
+                <div className='ProcessFlow_card_div'>
 
+                    <div className='ProcessFlow_div'>
 
+                        {/* <span className='ProcessFlow_div_title'>Expand</span> */}
 
+                        <span className='ProcessFlow_div_num'>01</span>
 
+                        {/* <img className='ProcessFlow_img_back' src={img1} alt=''/> */}
 
+                        <h4 className='english_text'>教學設計</h4>
 
+                        <p className='ProcessFlow_text'>預置標準與知識庫，使用 AI 輕鬆創建符合標準的課程及資源，助力開展專題研習等創新教學法。</p>
 
+                    </div>
 
+                    <div className='ProcessFlow_div'>
 
+                        {/* <span className='ProcessFlow_div_title'>Expand</span> */}
 
+                        <span className='ProcessFlow_div_num'>02</span>
 
+                        {/* <img className='ProcessFlow_img_back' src={img1} alt=''/> */}
 
+                        <h4 className='english_text'>課堂助手</h4>
 
+                        <p className='ProcessFlow_text'>創建獨特、相關的拓展课程內容與測試，即時展示學生進度，支援並追蹤學生任務成果。</p>
 
+                    </div>
 
+                    <div className='ProcessFlow_div'>
 
+                        {/* <span className='ProcessFlow_div_title'>Expand</span> */}
 
+                        <span className='ProcessFlow_div_num'>03</span>
 
+                        {/* <img className='ProcessFlow_img_back' src={img1} alt=''/> */}
 
+                        <h4 className='english_text'>學習評估</h4>
 
+                        <p className='ProcessFlow_text'>使用GenAI 創建評估任務與標準，對學生學習過程與成果進行自動化評估，提供數據分析與回饋。</p>
 
+                    </div>
 
                 </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=''/>
 
+                <img className='new_img' src={img1} alt='' />
 
+                <ul className='ProcessFlow_ul'>
 
+                    <li>支援教師進行課程設計以配合不同學習内容和情境，靈活運用不同的學與教策略（如探究式學習，小組學習等）</li>
 
+                    <li>支援設計完整的課堂教學材料，以及多類型電子工具的學習任務，照顧不同的學習需要</li>
 
+                    <li>設計與編排有意義的學習活動，培養學生學會學習；設計課程以匹配目標、教學法和評估</li>
 
+                    <li>記錄課堂活動備忘，以進行課堂分析</li>
 
+                    <li>使用電子工具進行互動，記錄、匯集學生電子工具任務成果</li>
 
+                    <li>提供學習資訊，提供寬廣、多元化的學習經歷</li>
 
+                    <li>客制化的課程資源獲取與問答</li>
 
+                </ul>
 
+            </div>
 
+            <div className='ProcessFlow_card'>
 
+                <h1 className='ProcessFlow_card_title'>AI支援行政管理</h1>
 
+                <img className='new_img' src={img2} alt='' />
 
+                <img className='new_img new2_img' src={img3} alt='' />
 
+                <ul className='ProcessFlow_ul'>
 
+                    <li>一個面嚮學校和教師的人事、事務材料收集、管理、檢索、分析應用</li>
 
+                    <li>快速、多端數位表單創建及信息收集</li>
 
+                    <li>持續建立學校數據與個人檔案，作爲教師考績例證</li>
 
+                    <li>追蹤與針對性支援教師持續專業發展</li>
 
+                </ul>
 
+            </div>
 
+            <div className='ProcessFlow_card'>
 
+                <h1 className='ProcessFlow_card_title'>CocoFlow</h1>
 
+                <div className='cocoflow'>
 
+                    <div className='cocoflow_div'>
 
+                        <div>
 
+                            <img src={img4} alt='' />
 
+                        </div>
 
+                        <div>
 
+                            <h4>低代碼構建教育應用</h4>
 
+                            <ul className='ProcessFlow_ul'>
 
+                                <li>
 
+                                    <span>流程構建</span>
 
+                                    <p>流程可视化界面；拖拽式组件编排</p>
 
+                                </li>
 
+                                <li>
 
+                                    <span>内容構建</span>
 
+                                    <p>客制化知識庫；教育場景工具；大模型調用</p>
 
+                                </li>
 
+                                <li>
 
+                                    <span>應用發佈</span>
 
+                                    <p>支持多种教学场景：课堂互动、作业、沉浸式學習等</p>
 
+                                </li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                    <div className='cocoflow_div' style={{ margin: '20px 0' }}>
 
+                        <div>
 
+                            <h4>多端分享與協作</h4>
 
+                            <ul className='ProcessFlow_ul'>
 
+                                <li>
 
+                                    <span>多端應用同步使用</span>
 
+                                    <p>手機、iPad、網頁的多端鏈接與記錄同步</p>
 
+                                </li>
 
+                                <li>
 
+                                    <span>不同編輯階段分享</span>
 
+                                    <p>教師協同編輯與經驗交流</p>
 
+                                </li>
 
+                            </ul>
 
+                        </div>
 
+                        <div style={{ textAlign: 'right' }}>
 
+                            <img src={img5} alt='' />
 
+                        </div>
 
+                    </div>
 
+                    <div className='cocoflow_div'>
 
+                        <div><img src={img6} alt='' /></div>
 
+                        <div>
 
+                            <h4>應用中心匯集與推廣</h4>
 
+                            <ul className='ProcessFlow_ul'>
 
+                                <li>建立工作流中心，匯集各領域場景的教育創新方案 </li>
 
+                                <li>優質教育技術應用傳播，復用與推廣
 
+                                </li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
                 </div>
 
-                <p className='english_text'>Use AI-driven analytics to contemplate the success and shortcomings of your instruction.</p>
 
-                <p className='ProcessFlow_text'>CocoClass課堂助手能夠支援教師通過GenAI調取課堂工具，依據課程内容提供拓展性的教學資源，依據課堂實施數據補充測試題目，以適應不斷變化的教學動態。</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>
 
+            <div className='ProcessFlow_card'>
 
+                <h1 className='ProcessFlow_card_title'>CocoFlow 與AI教育</h1>
 
+                <img className='new_img' src={img7} alt='' style={{width:'100%'}} />
 
+                <ul className='ProcessFlow_ul ProcessFlow_ul_2'>
 
+                    <li>支援教師組織人工智能課程，進行案例教學、分步引導、成果評估等。</li>
 
+                    <li>結合完整的工作流體驗，支援學生自主開展人工智能實踐應用探究，構建 AI 項目。</li>
 
+                    <li>支援教師客制化人工智能課程支援應用。</li>
 
+                    <li>允許學生以流程搭建的方式製作工作流，發展其使用資訊知識和人工智能解決問題的能力。</li>
 
+                </ul>
 
+            </div>
 
         </div>
 
     )
 
 }

+ 6 - 0
src/index.css
Целия файл 

@@ -11,3 +11,9 @@ code {
 
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
     monospace;
 
 }
 
+
 
+@media screen and (max-width: 1200px) {
 
+  .ProcessFlow_card{
 
+    width: 100% !important;
 
+  }
 
+}

Някои файлове не бяха показани, защото твърде много файлове са промени