test

.idea/workspace.xml

@@ -6,7 +6,6 @@
   <component name="ChangeListManager">
     <list default="true" id="5e4481c0-7ba2-42e4-bbe6-4c36a0d36baa" name="Changes" comment="test">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app.py" beforeDir="false" afterPath="$PROJECT_DIR$/app.py" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -64,14 +63,7 @@
       <workItem from="1723386893769" duration="12000" />
       <workItem from="1723386970626" duration="451000" />
       <workItem from="1723387453009" duration="27328000" />
-      <workItem from="1723978405562" duration="19589000" />
-    </task>
-    <task id="LOCAL-00001" summary="create">
-      <created>1723387548126</created>
-      <option name="number" value="00001" />
-      <option name="presentableId" value="LOCAL-00001" />
-      <option name="project" value="LOCAL" />
-      <updated>1723387548126</updated>
+      <workItem from="1723978405562" duration="20871000" />
     </task>
     <task id="LOCAL-00002" summary="add log dir">
       <created>1723388238692</created>
@@ -381,7 +373,42 @@
       <option name="project" value="LOCAL" />
       <updated>1724135983367</updated>
     </task>
-    <option name="localTasksCounter" value="46" />
+    <task id="LOCAL-00046" summary="test">
+      <created>1724137950036</created>
+      <option name="number" value="00046" />
+      <option name="presentableId" value="LOCAL-00046" />
+      <option name="project" value="LOCAL" />
+      <updated>1724137950036</updated>
+    </task>
+    <task id="LOCAL-00047" summary="test">
+      <created>1724138137165</created>
+      <option name="number" value="00047" />
+      <option name="presentableId" value="LOCAL-00047" />
+      <option name="project" value="LOCAL" />
+      <updated>1724138137165</updated>
+    </task>
+    <task id="LOCAL-00048" summary="test">
+      <created>1724138331816</created>
+      <option name="number" value="00048" />
+      <option name="presentableId" value="LOCAL-00048" />
+      <option name="project" value="LOCAL" />
+      <updated>1724138331817</updated>
+    </task>
+    <task id="LOCAL-00049" summary="test">
+      <created>1724138793323</created>
+      <option name="number" value="00049" />
+      <option name="presentableId" value="LOCAL-00049" />
+      <option name="project" value="LOCAL" />
+      <updated>1724138793323</updated>
+    </task>
+    <task id="LOCAL-00050" summary="test">
+      <created>1724139225839</created>
+      <option name="number" value="00050" />
+      <option name="presentableId" value="LOCAL-00050" />
+      <option name="project" value="LOCAL" />
+      <updated>1724139225851</updated>
+    </task>
+    <option name="localTasksCounter" value="51" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">

web_page.html

@@ -4,6 +4,260 @@
     <meta charset="UTF-8">
     <title>Cpp4App Test</title>
 <!--    <link rel="stylesheet" type="text/css" href="https://buyanghc.github.io/web_page.css">-->
+    <style>
+        body{
+                margin: 0;  /* Remove the default margin */
+                padding: 0;
+                min-width: 100vw;  /* Set the body's minimum width and height to the window's width and height */
+                min-height: 100vh;
+                background-color: white;  /* Set the background color to white */
+                overflow-x: hidden;  /* Hide the horizontal overflow (scrollbar only in the vertical direction) */
+                display: flex !important;
+                flex-direction: column !important; /* 按列布局 */
+                align-items: center !important;
+                color: rgb(40, 40, 40);
+            }
+
+            .title{
+                width: 100%;
+                height: 485px;
+                display: flex;
+            }
+
+            .title_half{
+                width: 50%;
+                height: 100%;
+            }
+
+            .title_half img{
+                width: 100%;
+                height: auto;
+            }
+
+            .title_content{
+                display: flex;
+                flex-direction: column; /* 按列布局 */
+                justify-content: center; /* 垂直方向居中 */
+                padding-left: 120px !important;
+                padding-right: 120px !important;
+                box-sizing: border-box !important;
+            }
+
+            .title_half p{
+                font-size: 21px !important;
+                margin-top: 10px;
+                font-weight: bolder;
+            }
+
+            h1{
+                font-size: 80px !important;
+                font-weight: bolder;
+            }
+
+            .choice{
+                display: flex;
+                width: 100%;
+                height: 80px;
+                margin-top: 50px !important;
+            }
+
+            .choice_btn{
+                width: 150px;
+                height: 50px;
+                display: flex;
+                flex-direction: column; /* 按列布局 */
+                justify-content: center; /* 垂直方向居中 */
+                align-items: center;
+                border-radius: 5px;
+                transition: color 0.3s ease, background-color 0.3s ease;
+            }
+
+            .start{
+                background-color: rgb(40, 40, 40);
+                color: white !important;
+                margin-right: 20px;
+                text-decoration: none !important;
+            }
+
+            .start:hover{
+                background-color: rgb(117, 209, 255) !important;
+            }
+
+            .view_examples{
+                color: rgb(40, 40, 40) !important;
+            }
+
+            .view_examples:hover{
+                color: rgb(24, 157, 246) !important;
+            }
+
+            .examples{
+                width: 100%;
+                margin-top: 60px;
+                padding-left: 120px;
+                padding-right: 120px;
+                box-sizing: border-box;
+            }
+
+            .head{
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+            }
+
+            h2{
+                font-size: 47px !important;
+                font-weight: bolder;
+            }
+
+            .examples p{
+                font-size: 18px !important;
+                font-weight: bolder;
+                margin-top: 20px;
+                margin-bottom: 40px !important;
+            }
+
+            .img_box{
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .eg{
+                width: 25%;
+            }
+
+            .eg img{
+                width: 100%;
+                height: auto;
+                border: 3px solid rgb(255, 255, 255);
+                transition: border-color 0.5s ease, border-width 0.5s ease;
+                border-radius: 10px;
+                cursor: pointer;
+            }
+
+            .eg img:hover{
+                border-color: rgb(117, 209, 255); /* 悬停时边框颜色 */
+                border-width: 3px; /* 悬停时边框粗细 */
+            }
+
+            .eg p{
+                width: 100%;
+                height: 60px;
+                display: flex;
+                flex-direction: column; /* 按列布局 */
+                justify-content: center; /* 垂直方向居中 */
+                align-items: center;
+                margin: 0;
+                font-style: italic;
+            }
+
+
+            .workspace{
+                width: 100%;
+                margin-top: 80px;
+                padding-left: 120px;
+                padding-right: 120px;
+                box-sizing: border-box;
+                margin-bottom: 180px;
+                display: flex;
+                flex-direction: column; /* 按列布局 */
+                align-items: center;
+            }
+
+            .workspace_btn{
+                width: 350px;
+                display: flex;
+                justify-content: space-between; /* 垂直方向居中 */
+                align-items: center;
+            }
+
+            .btn{
+                width: 150px;
+                height: 45px;
+                border: 2px solid rgb(40, 40, 40);
+                transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
+                border-radius: 5px;
+                cursor: pointer;
+            }
+
+            .run{
+                color: white !important;
+                background-color: rgb(40, 40, 40) !important;
+            }
+
+            .btn:hover{
+                color: white !important;
+                background-color: rgb(117, 209, 255) !important;
+                border: white !important;
+            }
+
+            .space{
+                width: 80%;
+            }
+
+            label{
+                font-size: 18px;
+                font-weight: bolder;
+                margin-bottom: 10px;
+            }
+
+            .step1{
+                display: flex;
+                flex-direction: column; /* 按列布局 */
+                margin-top: 50px;
+            }
+
+            .url{
+                height: 50px;
+                margin-top: 20px !important;
+                margin-bottom: 100px !important;
+                font-size: 20px;
+                color: rgb(194, 194, 194);
+                padding-left: 10px;
+                border: 2px solid rgb(40, 40, 40);
+                border-radius: 5px !important;
+            }
+
+            .step2{
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .img{
+                display: flex;
+                flex-direction: column; /* 按列布局 */
+                width: 40%;
+            }
+
+            .point{
+                width: 18%;
+                display: flex;
+                flex-direction: column; /* 按列布局 */
+                justify-content: center;
+                align-items: center;
+            }
+
+            .point img{
+                width: 80%;
+                height: auto;
+            }
+
+            .phone{
+                width: 100%;
+                height: 750px;
+                border: 2px solid rgb(40, 40, 40);
+                border-radius: 5px;
+                margin-top: 20px !important;
+            }
+
+            #image_input{
+                width: 100%;
+                height: 750px;
+                border: 2px solid rgb(40, 40, 40);
+                border-radius: 5px;
+                margin-top: 20px !important;
+            }
+    </style>
 </head>
 <body>