index.html 68 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>第六届广东省青少年创新思维及科技实践大赛(创新思维类选手报名)</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. body {
  14. font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  15. height: 100vh;
  16. display: flex;
  17. flex-direction: column;
  18. overflow: hidden;
  19. background-color: #f5f7fa;
  20. }
  21. /* 导航栏样式 */
  22. nav {
  23. background: linear-gradient(135deg, #1a73e8, #0d47a1);
  24. color: white;
  25. padding: 15px 30px;
  26. display: flex;
  27. align-items: center;
  28. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  29. z-index: 100;
  30. }
  31. .logo {
  32. font-size: 24px;
  33. font-weight: bold;
  34. margin-right: 15px;
  35. }
  36. .event-name {
  37. font-size: 20px;
  38. flex-grow: 1;
  39. }
  40. /* 主内容区域 */
  41. .main-container {
  42. display: flex;
  43. flex: 1;
  44. overflow: hidden;
  45. }
  46. /* 左侧菜单 */
  47. .sidebar {
  48. width: 200px;
  49. background-color: #2c3e50;
  50. color: white;
  51. display: flex;
  52. flex-direction: column;
  53. padding: 20px 0;
  54. }
  55. .menu-btn {
  56. padding: 15px 20px;
  57. margin: 10px 15px;
  58. background-color: #3498db;
  59. color: white;
  60. border: none;
  61. border-radius: 5px;
  62. font-size: 16px;
  63. cursor: pointer;
  64. transition: all 0.3s;
  65. text-align: center;
  66. }
  67. .menu-btn:hover {
  68. background-color: #2980b9;
  69. transform: translateY(-2px);
  70. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  71. }
  72. .menu-btn.active {
  73. background-color: #1abc9c;
  74. }
  75. /* 右侧内容区域 */
  76. .content-area {
  77. flex: 1;
  78. display: flex;
  79. flex-direction: column;
  80. padding: 20px;
  81. background-color: white;
  82. border-radius: 10px;
  83. margin: 20px;
  84. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  85. overflow: hidden;
  86. }
  87. .content-header {
  88. font-size: 24px;
  89. color: #2c3e50;
  90. margin-bottom: 20px;
  91. padding-bottom: 10px;
  92. border-bottom: 2px solid #3498db;
  93. }
  94. /* 下载区域 */
  95. .download-section {
  96. display: none;
  97. flex-direction: column;
  98. height: 100%;
  99. }
  100. .download-section.active {
  101. display: flex;
  102. }
  103. .download-list {
  104. overflow-y: auto;
  105. flex: 1;
  106. }
  107. .download-item {
  108. width: calc(100% - 30px);
  109. background-color: #f8f9fa;
  110. border: 1px solid #e9ecef;
  111. border-radius: 8px;
  112. padding: 15px;
  113. margin-bottom: 15px;
  114. display: flex;
  115. align-items: center;
  116. transition: all 0.3s;
  117. }
  118. .download-item:hover {
  119. transform: translateX(5px);
  120. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  121. border-color: #3498db;
  122. }
  123. .file-icon {
  124. font-size: 24px;
  125. margin-right: 15px;
  126. color: #3498db;
  127. }
  128. .file-info {
  129. flex: 1;
  130. }
  131. .file-title {
  132. font-weight: bold;
  133. margin-bottom: 5px;
  134. }
  135. .file-desc {
  136. color: #6c757d;
  137. font-size: 14px;
  138. }
  139. .download-btn {
  140. background-color: #28a745;
  141. color: white;
  142. border: none;
  143. padding: 8px 15px;
  144. border-radius: 5px;
  145. cursor: pointer;
  146. transition: background-color 0.3s;
  147. text-decoration: none;
  148. }
  149. .download-btn:hover {
  150. background-color: #218838;
  151. }
  152. /* 报名区域 */
  153. .registration-section {
  154. display: none;
  155. flex-direction: column;
  156. height: 100%;
  157. overflow-y: auto;
  158. position: relative;
  159. }
  160. .registration-section.active {
  161. display: flex;
  162. }
  163. .form-container {
  164. flex: 1;
  165. padding-right: 10px;
  166. }
  167. .form-group {
  168. margin-bottom: 20px;
  169. }
  170. .form-label {
  171. display: block;
  172. margin-bottom: 8px;
  173. font-weight: bold;
  174. color: #495057;
  175. }
  176. .required::after {
  177. content: " *";
  178. color: #e74c3c;
  179. }
  180. .form-input {
  181. width: 100%;
  182. padding: 12px;
  183. border: 1px solid #ced4da;
  184. border-radius: 5px;
  185. font-size: 16px;
  186. transition: border-color 0.3s;
  187. }
  188. .form-input:focus {
  189. border-color: #3498db;
  190. outline: none;
  191. box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  192. }
  193. .form-row {
  194. display: flex;
  195. gap: 20px;
  196. }
  197. .form-col {
  198. flex: 1;
  199. }
  200. .file-upload {
  201. border: 2px dashed #ced4da;
  202. padding: 30px;
  203. text-align: center;
  204. border-radius: 8px;
  205. margin: 20px 0;
  206. background-color: #f8f9fa;
  207. transition: all 0.3s;
  208. }
  209. .file-upload:hover {
  210. border-color: #3498db;
  211. background-color: #e3f2fd;
  212. }
  213. .upload-icon {
  214. font-size: 40px;
  215. color: #3498db;
  216. margin-bottom: 15px;
  217. }
  218. .submit-btn {
  219. background-color: #1a73e8;
  220. color: white;
  221. border: none;
  222. padding: 14px 25px;
  223. border-radius: 5px;
  224. font-size: 18px;
  225. cursor: pointer;
  226. transition: all 0.3s;
  227. margin-top: 20px;
  228. width: 100%;
  229. }
  230. .submit-btn:hover {
  231. background-color: #0d47a1;
  232. transform: translateY(-2px);
  233. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  234. }
  235. .error {
  236. color: #e74c3c;
  237. font-size: 14px;
  238. margin-top: 5px;
  239. display: none;
  240. }
  241. .remove-Contestant {
  242. padding: 7px 15px;
  243. font-size: 14px;
  244. background-color: #db3434;
  245. color: white;
  246. border: none;
  247. border-radius: 5px;
  248. cursor: pointer;
  249. transition: all 0.3s;
  250. text-align: center;
  251. position: absolute;
  252. top: 0;
  253. left: 80px;
  254. }
  255. .menu-btn-add:nth-last-child(1) {
  256. padding: 7px 15px;
  257. font-size: 14px;
  258. color: white;
  259. border: none;
  260. border-radius: 5px;
  261. cursor: pointer;
  262. transition: all 0.3s;
  263. text-align: center;
  264. background-color: #3498db;
  265. }
  266. .step-container {
  267. display: none;
  268. }
  269. .step-container.active {
  270. display: block;
  271. }
  272. .competition-grid {
  273. display: grid;
  274. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  275. gap: 20px;
  276. margin-bottom: 30px;
  277. }
  278. .competition-card {
  279. border: 1px solid #e0e0e0;
  280. border-radius: 10px;
  281. padding: 20px;
  282. text-align: center;
  283. cursor: pointer;
  284. transition: all 0.3s;
  285. }
  286. .competition-card:hover {
  287. border-color: #1a73e8;
  288. box-shadow: 0 4px 12px rgba(26, 115, 232, 0.15);
  289. transform: translateY(-5px);
  290. }
  291. .competition-card.selected {
  292. border-color: #1a73e8;
  293. background-color: #e8f0fe;
  294. }
  295. .competition-icon {
  296. font-size: 36px;
  297. color: #1a73e8;
  298. margin-bottom: 15px;
  299. }
  300. .competition-name {
  301. font-weight: 500;
  302. color: #202124;
  303. }
  304. .btn {
  305. padding: 12px 30px;
  306. border-radius: 8px;
  307. font-size: 16px;
  308. font-weight: 500;
  309. cursor: pointer;
  310. transition: all 0.3s;
  311. border: none;
  312. }
  313. .btn-prev {
  314. background-color: #f8f9fa;
  315. color: #5f6368;
  316. }
  317. .btn-prev:hover {
  318. background-color: #e8f0fe;
  319. color: #1a73e8;
  320. }
  321. .btn-next {
  322. background-color: #1a73e8;
  323. color: white;
  324. }
  325. .btn-next:hover {
  326. background-color: #0d47a1;
  327. }
  328. .btn-submit {
  329. background-color: #34a853;
  330. color: white;
  331. }
  332. .btn-submit:hover {
  333. background-color: #2d9249;
  334. }
  335. .error {
  336. color: #ea4335;
  337. font-size: 14px;
  338. margin-top: 5px;
  339. display: none;
  340. }
  341. .button-group {
  342. display: flex;
  343. justify-content: space-between;
  344. margin-top: 30px;
  345. }
  346. .step-title {
  347. font-size: 18px;
  348. color: #202124;
  349. margin-bottom: 20px;
  350. padding-bottom: 10px;
  351. border-bottom: 1px solid #e0e0e0;
  352. }
  353. .button-Contestant {
  354. display: none;
  355. margin-right: 20px;
  356. }
  357. .button-Contestant.active {
  358. display: block;
  359. }
  360. .help {
  361. position: fixed;
  362. color: #000;
  363. cursor: pointer;
  364. display: inline-block;
  365. width: 50px;
  366. height: 50px;
  367. border-radius: 50%;
  368. background-color: #fff;
  369. bottom: 10px;
  370. left: 10px;
  371. }
  372. .help::after {
  373. content: '?';
  374. position: absolute;
  375. top: 50%;
  376. left: 50%;
  377. transform: translate(-50%, -50%);
  378. font-size: 24px;
  379. }
  380. .help-qrCode {
  381. width: 50%;
  382. padding: 20px;
  383. }
  384. </style>
  385. <script src="./aws-sdk-2.235.1.min.js"></script>
  386. <script>
  387. var credentials = {
  388. accessKeyId: 'AKIATLPEDU37QV5CHLMH',
  389. secretAccessKey: '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'
  390. }; //秘鑰形式的登錄上傳
  391. window.AWS.config.update(credentials);
  392. window.AWS.config.region = 'cn-northwest-1'; //設置區域
  393. </script>
  394. </head>
  395. <body>
  396. <!-- 导航栏 -->
  397. <nav>
  398. </nav>
  399. <!-- 主内容区域 -->
  400. <div class="main-container">
  401. <!-- 左侧菜单 -->
  402. <div class="sidebar">
  403. <button class="menu-btn active" id="downloadBtn">资料下载</button>
  404. <button class="menu-btn" id="registerBtn">在线报名</button>
  405. <button class="menu-btn" id="registerBtn1">资格确认</button>
  406. <button class="menu-btn" id="registerBtn2">作品提交(桌游设计挑战类比赛)</button>
  407. <span onclick="help()" class="help"></span>
  408. </div>
  409. <!-- 右侧内容区域 -->
  410. <div class="content-area">
  411. <!-- 下载区域 -->
  412. <div class="download-section active" id="downloadSection">
  413. <h2 class="content-header">比赛资料下载</h2>
  414. <div class="download-list">
  415. <div class="download-item">
  416. <div class="file-icon">📋</div>
  417. <div class="file-info">
  418. <div class="file-title">第六届广东省青少年创新思维及科技实践大赛创新思维挑战赛</div>
  419. </div>
  420. <a target="_blank"
  421. href="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/a/%E5%88%9B%E6%96%B0%E6%80%9D%E7%BB%B4%E7%B1%BB-%E5%88%9B%E6%96%B0%E6%80%9D%E7%BB%B4%E6%8C%91%E6%88%98%E8%B5%9B.pdf"
  422. class="download-btn" download="第六届广东省青少年创新思维及科技实践大赛创新思维挑战赛.pdf">下载</a>
  423. </div>
  424. <div class="download-item">
  425. <div class="file-icon">📊</div>
  426. <div class="file-info">
  427. <div class="file-title">第六届广东省青少年创新思维及科技实践大赛的通知</div>
  428. </div>
  429. <a target="_blank"
  430. href="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/a/%E5%85%B3%E4%BA%8E%E4%B8%BE%E5%8A%9E%E7%AC%AC%E5%85%AD%E5%B1%8A%E5%B9%BF%E4%B8%9C%E7%9C%81%E9%9D%92%E5%B0%91%E5%B9%B4%E5%88%9B%E6%96%B0%E6%80%9D%E7%BB%B4%E5%8F%8A%E7%A7%91%E6%8A%80%E5%AE%9E%E8%B7%B5%E5%A4%A7%E8%B5%9B%E7%9A%84%E9%80%9A%E7%9F%A5%286%29.pdf"
  431. class="download-btn" download="第六届广东省青少年创新思维及科技实践大赛的通知.pdf">下载</a>
  432. </div>
  433. <div class="download-item">
  434. <div class="file-icon">📄</div>
  435. <div class="file-info">
  436. <div class="file-title">报名表模板</div>
  437. <div class="file-desc">完成在线报名后,请先下载该模板,经所在学校盖章确认后,将盖章后的模板上传至【资格确认】板块,即可完成赛前准备。</div>
  438. </div>
  439. <a target="_blank"
  440. href="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%5Bobject%20HTMLInputElement%5D/%E6%8A%A5%E5%90%8D%E8%A1%A8.docx"
  441. class="download-btn" download>下载</a>
  442. </div>
  443. <div class="download-item">
  444. <div class="file-icon">🎬</div>
  445. <div class="file-info">
  446. <div class="file-title">宣讲视频</div>
  447. </div>
  448. <a target="_blank" href="https://meeting.tencent.com/crm/l71mRRMd92" class="download-btn">观看</a>
  449. </div>
  450. <div class="download-item">
  451. <div class="file-icon">🎬</div>
  452. <div class="file-info">
  453. <div class="file-title">直播培训回放视频</div>
  454. </div>
  455. <a target="_blank" href="https://meeting.tencent.com/crm/KwBR303qc0" class="download-btn">观看</a>
  456. </div>
  457. <div class="download-item">
  458. <div class="file-icon">🎬</div>
  459. <div class="file-info">
  460. <div class="file-title">智能体应用赛-进阶应用拆解</div>
  461. </div>
  462. <a target="_blank" href="https://meeting.tencent.com/crm/2rVQ4P0ea6" class="download-btn">观看</a>
  463. </div>
  464. <div class="download-item">
  465. <div class="file-icon">📊</div>
  466. <div class="file-info">
  467. <div class="file-title">智能体应用备赛平台登录指引</div>
  468. </div>
  469. <a target="_blank"
  470. href="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0960e9b6-2687-b858-2285-455c29eac369/%E6%99%BA%E8%83%BD%E4%BD%93%E5%BA%94%E7%94%A8%E5%A4%87%E8%B5%9B%E5%B9%B3%E5%8F%B0%E7%99%BB%E5%BD%95%E6%8C%87%E5%BC%95.pdf"
  471. class="download-btn" download="智能体应用备赛平台登录指引.pdf">下载</a>
  472. </div>
  473. </div>
  474. </div>
  475. <!-- 报名区域 -->
  476. <div class="registration-section " id="registrationSection">
  477. <!-- <div class="select-type">
  478. <select id="selectType" class="form-input" required >
  479. <option value="">请选择参赛类型</option>
  480. <option value="1">桌游设计挑战类</option>
  481. <option value="2">智能体应用类</option>
  482. </select>
  483. </div> -->
  484. <div class="content-header" style="display: flex;justify-content: space-between;">
  485. <h2 style="display: inline-block;font-size: 24px;">参赛信息登记</h2>
  486. <div class="button-Contestant">
  487. <button class="menu-btn-add" onclick="addContestant()">添加选手</button>
  488. </div>
  489. </div>
  490. <!-- 步骤1:选择比赛类型 -->
  491. <div id="step1" class="step-container active">
  492. <div class="step-title">第一步:请选择您要报名的比赛类型</div>
  493. <div class="competition-grid">
  494. <div class="competition-card" data-id="1">
  495. <div class="competition-icon">🧮</div>
  496. <div class="competition-name">桌游设计挑战</div>
  497. </div>
  498. <div class="competition-card" data-id="2">
  499. <div class="competition-icon">💻</div>
  500. <div class="competition-name">智能体应用</div>
  501. </div>
  502. </div>
  503. <div class="button-group">
  504. <div></div> <!-- 占位 -->
  505. <button class="btn btn-next" id="nextToStep2">下一步</button>
  506. </div>
  507. </div>
  508. <!-- 步骤2:填写报名信息 -->
  509. <div id="step2" class="step-container">
  510. <div class="step-title">第二步:填写报名信息</div>
  511. <div class="form-group" style="display: flex;align-items: center;">
  512. <label class="form-label required" for="name">指导教师</label>
  513. <input style="width: 200px;margin-left: 20px;margin-right: 15px;" type="text" id="teacher"
  514. class="form-input">
  515. <label class="form-label required" for="name">手机号</label>
  516. <input style="width: 200px;margin-left: 20px;margin-right: 15px;" type="text" id="teacherPhone"
  517. class="form-input">
  518. </div>
  519. <div class="form-container" id="formContainer">
  520. <input type="hidden" id="competitionType" value="">
  521. <h3>选手1:</h3>
  522. <br />
  523. <form id="registrationForm1">
  524. <div class="form-row">
  525. <div class="form-col">
  526. <div class="form-group">
  527. <label class="form-label required" for="name">姓名</label>
  528. <input type="text" id="name1" class="form-input" required>
  529. <div class="error" id="name-error1">请输入姓名</div>
  530. </div>
  531. </div>
  532. <div class="form-col">
  533. <div class="form-group">
  534. <label class="form-label required" for="gender">性别</label>
  535. <select id="gender1" class="form-input" required>
  536. <option value="">请选择</option>
  537. <option value="1">男</option>
  538. <option value="2">女</option>
  539. </select>
  540. <div class="error" id="gender-error1">请选择性别</div>
  541. </div>
  542. </div>
  543. </div>
  544. <div class="form-row">
  545. <div class="form-col">
  546. <div class="form-group">
  547. <label class="form-label required" for="ethnicity">民族</label>
  548. <input type="text" id="ethnicity1" class="form-input" required>
  549. <div class="error" id="ethnicity-error1">请输入民族</div>
  550. </div>
  551. </div>
  552. <div class="form-col">
  553. <div class="form-group">
  554. <label class="form-label required" for="birthdate">出生年月</label>
  555. <input type="date" id="birthdate1" class="form-input" required>
  556. <div class="error" id="birthdate-error1">请选择出生年月</div>
  557. </div>
  558. </div>
  559. </div>
  560. <div class="form-row">
  561. <div class="form-col">
  562. <div class="form-group">
  563. <label class="form-label required" for="email">电子邮箱</label>
  564. <input type="email" id="email1" class="form-input" required>
  565. <div class="error" id="email-error1">请输入有效的电子邮箱</div>
  566. </div>
  567. </div>
  568. <div class="form-col">
  569. <div class="form-group">
  570. <label class="form-label required" for="idNumber">身份证号码</label>
  571. <input type="text" id="idNumber1" class="form-input" required
  572. pattern="\d{17}[\dXx]">
  573. <div class="error" id="idNumber-error1">请输入18位身份证号码</div>
  574. </div>
  575. </div>
  576. </div>
  577. <div class="form-row">
  578. <div class="form-col" id="group-containers">
  579. <!-- 组别:只显示一个,根据比赛类型动态显示 -->
  580. </div>
  581. <div class="form-col">
  582. <div class="form-group">
  583. <label class="form-label required" for="grade">年级</label>
  584. <input type="text" id="grade1" class="form-input" required>
  585. <div class="error" id="grade-error1">请输入年级</div>
  586. </div>
  587. </div>
  588. </div>
  589. <div class="form-row">
  590. <div class="form-col">
  591. <div class="form-group">
  592. <label class="form-label required" for="school">所在学校</label>
  593. <input type="text" id="school1" class="form-input" required>
  594. <div class="error" id="school-error1">请输入学校名称</div>
  595. </div>
  596. </div>
  597. <div class="form-col">
  598. <div class="form-group">
  599. <label class="form-label required" for="schoolRegion">学校所在地区</label>
  600. <input type="text" id="schoolRegion1" class="form-input" required
  601. placeholder="省/市/区">
  602. <div class="error" id="schoolRegion-error1">请输入学校所在地区</div>
  603. </div>
  604. </div>
  605. </div>
  606. <div class="form-group">
  607. <label class="form-label required" for="phone">联系电话</label>
  608. <input type="tel" id="phone1" class="form-input" required pattern="[0-9]{11}">
  609. <div class="error" id="phone-error1">请输入11位手机号码</div>
  610. </div>
  611. </form>
  612. </div>
  613. <div class="button-group">
  614. <button type="button" class="btn btn-prev" id="prevToStep1">上一步</button>
  615. <button type="submit" class="btn btn-submit" onclick="submitData()">提交报名</button>
  616. </div>
  617. </div>
  618. </div>
  619. <!-- 上传报名表单 -->
  620. <div class="registration-section" id="uploadSection">
  621. <h2 class="content-header">上传报名表</h2>
  622. <div class="download-list">
  623. <div class="form-row">
  624. <div class="form-col">
  625. <div class="form-group">
  626. <label class="form-label required" for="CompetitionType">比赛类型</label>
  627. <select id="CompetitionType" class="form-input" required>
  628. <option value="">请选择</option>
  629. <option value="1">桌游设计挑战</option>
  630. <option value="2">智能体应用</option>
  631. </select>
  632. </div>
  633. </div>
  634. <div class="form-col">
  635. <div class="form-group">
  636. <label class="form-label required" for="idNumber">身份证号码</label>
  637. <input type="text" id="id_number" class="form-input" required pattern="\d{17}[\dXx]"
  638. placeholder="请填写在线报名时,团队内任一选手的身份证号码">
  639. </div>
  640. </div>
  641. </div>
  642. <div class="form-row">
  643. <div class="form-col">
  644. <div class="file-upload">
  645. <label class="form-label required" for="photo">上传文件</label>
  646. <input type="file" id="uploadFile" required>
  647. </div>
  648. </div>
  649. <div class="form-col" style="display: none;" id="videoUploadDiv">
  650. <div class="file-upload">
  651. <label class="form-label required" for="photo">上传视频</label>
  652. <input type="file" id="uploadVideo" accept="video/*" required>
  653. </div>
  654. </div>
  655. </div>
  656. <button type="submit" class="submit-btn" onclick="submitRegistration()">提交报名表</button>
  657. </div>
  658. </div>
  659. <!-- 上传报名表单 -->
  660. <div class="registration-section" id="uploadSection2">
  661. <h2 class="content-header">作品提交</h2>
  662. <div class="download-list">
  663. <div class="form-row">
  664. <div class="form-col">
  665. <div class="form-group">
  666. <label class="form-label required" for="idNumber">身份证号码</label>
  667. <input type="text" id="id_number2" class="form-input" required pattern="\d{17}[\dXx]"
  668. placeholder="请填写在线报名时,团队内任一选手的身份证号码">
  669. </div>
  670. </div>
  671. </div>
  672. <div class="form-row">
  673. <div class="form-col">
  674. <div class="file-upload">
  675. <label class="form-label required" for="photo">上传作品说明文件</label>
  676. <input type="file" id="uploadFile2" required>
  677. </div>
  678. </div>
  679. </div>
  680. <button type="submit" class="submit-btn" onclick="submitRegistration2()">提交报名表</button>
  681. </div>
  682. </div>
  683. </div>
  684. </div>
  685. <script>
  686. const requesturl = window.location.href.indexOf("localhost") > -1 ? "http://localhost:11111/" : "http://183.36.25.93:888/";
  687. console.log("requesturl:", requesturl);
  688. // 获取url参数
  689. const urlSearch = window.location.search;
  690. if (urlSearch.slice(1) == "baoan") {
  691. document.getElementById("registerBtn1").innerText = `作品提交`
  692. document.getElementsByTagName("nav")[0].innerHTML = `<div class="event-name">宝安区智能体应用赛</div>`
  693. } else if (urlSearch.slice(1) == "guangming") {
  694. document.getElementById("registerBtn1").innerText = `作品提交`
  695. document.getElementsByTagName("nav")[0].innerHTML = `<div class="event-name">光明确智能体应用赛</div>`
  696. } else if (urlSearch.slice(1) == "pingshan") {
  697. document.getElementById("registerBtn1").innerText = `作品提交`
  698. document.getElementsByTagName("nav")[0].innerHTML = `<div class="event-name">坪山区智能体应用赛</div>`
  699. } else if (urlSearch.slice(1) == "longhua") {
  700. document.getElementById("registerBtn1").innerText = `作品提交`
  701. document.getElementsByTagName("nav")[0].innerHTML = `<div class="event-name">龙华区智能体应用赛</div>`
  702. } else if (urlSearch.slice(1) == "nanshan") {
  703. document.getElementById("registerBtn1").innerText = `作品提交`
  704. document.getElementsByTagName("nav")[0].innerHTML = `<div class="event-name">南山区智能体应用赛</div>`
  705. } else {
  706. if (urlSearch != "") {
  707. window.location.search = "";
  708. }
  709. document.getElementsByTagName("nav")[0].innerHTML = `<img src="./logo2.png" alt="logo" style="width: 200px;margin-right: 15px;"></img>
  710. <img src="./logo1.png" alt="logo" style="width: 200px;margin-right: 15px;"></img>
  711. <div class="event-name">第六届广东省青少年创新思维及科技实践大赛(创新思维类选手报名)</div>`
  712. }
  713. //document.getElementById("registerBtn2").style.display = "none";
  714. if (document.getElementById("registerBtn1").innerText == "作品提交") {
  715. document.getElementById("registerBtn2").style.display = "none";
  716. document.getElementsByClassName("content-header")[2].innerText = "作品提交"
  717. document.getElementById("uploadFile").previousElementSibling.innerText = "上传作品说明文件";
  718. document.getElementById("uploadVideo").previousElementSibling.innerText = "上传作品演示视频";
  719. document.getElementsByClassName("submit-btn")[0].innerText = "提交";
  720. document.getElementsByClassName("help")[0].style.display = "none";
  721. }
  722. const nowTime = new Date();
  723. const deadline = new Date("2025-09-22");
  724. // 切换下载和报名区域
  725. document.getElementById('downloadBtn').addEventListener('click', function () {
  726. document.getElementById('downloadBtn').classList.add('active');
  727. document.getElementById('registerBtn').classList.remove('active');
  728. document.getElementById('registerBtn1').classList.remove('active');
  729. document.getElementById('downloadSection').classList.add('active');
  730. document.getElementById('registrationSection').classList.remove('active');
  731. document.getElementById('uploadSection').classList.remove('active');
  732. document.getElementsByClassName("button-Contestant")[0].classList.remove('active');
  733. });
  734. document.getElementById('registerBtn1').addEventListener('click', function () {
  735. document.getElementById('registerBtn1').classList.add('active');
  736. document.getElementById('registerBtn2').classList.remove('active');
  737. document.getElementById('downloadBtn').classList.remove('active');
  738. document.getElementById('registerBtn').classList.remove('active');
  739. document.getElementById('downloadSection').classList.remove('active');
  740. document.getElementById('registrationSection').classList.remove('active');
  741. document.getElementsByClassName("button-Contestant")[0].classList.remove('active');
  742. document.getElementById('uploadSection').classList.add('active');
  743. document.getElementById('uploadSection2').classList.remove('active');
  744. const uploadTime = new Date("2025-10-13");
  745. if (nowTime < uploadTime && !urlSearch.length > 0) {
  746. document.getElementById('uploadSection').innerHTML = "<div style='display:flex;justify-content:center;align-items:center;height:100vh;font-size:2rem;color:#db3434;'>资格确认在2025-10-13开放上传</div>";
  747. }
  748. });
  749. document.getElementById('registerBtn2').addEventListener('click', function () {
  750. document.getElementById('registerBtn2').classList.add('active');
  751. document.getElementById('registerBtn1').classList.remove('active');
  752. document.getElementById('downloadBtn').classList.remove('active');
  753. document.getElementById('registerBtn').classList.remove('active');
  754. document.getElementById('downloadSection').classList.remove('active');
  755. document.getElementById('registrationSection').classList.remove('active');
  756. document.getElementsByClassName("button-Contestant")[0].classList.remove('active');
  757. document.getElementById('uploadSection').classList.remove('active');
  758. document.getElementById('uploadSection2').classList.add('active');
  759. });
  760. let buttonContestant = false
  761. document.getElementById('registerBtn').addEventListener('click', function () {
  762. document.getElementById('registerBtn').classList.add('active');
  763. document.getElementById('registerBtn2').classList.remove('active');
  764. document.getElementById('downloadBtn').classList.remove('active');
  765. document.getElementById('registerBtn1').classList.remove('active');
  766. document.getElementById('registrationSection').classList.add('active');
  767. document.getElementById('downloadSection').classList.remove('active');
  768. document.getElementById('uploadSection').classList.remove('active');
  769. document.getElementById('uploadSection2').classList.remove('active');
  770. console.log("selectedCompetitionId:", selectedCompetitionId);
  771. if (buttonContestant) {
  772. document.getElementsByClassName("button-Contestant")[0].classList.add('active');
  773. } else {
  774. document.getElementsByClassName("button-Contestant")[0].classList.remove('active');
  775. }
  776. });
  777. let uploadFileUrl = ''
  778. // 比赛类型选择
  779. const competitionCards = document.querySelectorAll('.competition-card');
  780. let selectedCompetitionId = null;
  781. competitionCards.forEach(card => {
  782. card.addEventListener('click', function () {
  783. // 移除所有卡片的selected类
  784. competitionCards.forEach(c => {
  785. c.classList.remove('selected');
  786. });
  787. // 添加当前卡片的selected类
  788. this.classList.add('selected');
  789. // 存储选择的比赛ID
  790. selectedCompetitionId = this.getAttribute('data-id');
  791. });
  792. });
  793. // 步骤切换
  794. document.getElementById('nextToStep2').addEventListener('click', function () {
  795. if (!selectedCompetitionId) {
  796. alert('请先选择比赛类型');
  797. return;
  798. }
  799. if (selectedCompetitionId == 2) {
  800. addContestant()
  801. }
  802. // 初始化
  803. updateGroupSelect(selectedCompetitionId);
  804. // 切换到步骤2
  805. document.getElementById('step1').classList.remove('active');
  806. document.getElementById('step2').classList.add('active');
  807. document.getElementsByClassName("button-Contestant")[0].classList.add('active');
  808. buttonContestant = true
  809. });
  810. document.getElementById('prevToStep1').addEventListener('click', function () {
  811. // 切换回步骤1
  812. document.getElementById('step2').classList.remove('active');
  813. document.getElementById('step1').classList.add('active');
  814. document.getElementsByClassName("button-Contestant")[0].classList.remove('active');
  815. buttonContestant = false
  816. const html = document.getElementById('formContainer');
  817. // 删除添加的表单
  818. addList.forEach((item, idx) => {
  819. let formDiv = html.querySelector(`div#addformContainer${item}`);
  820. if (formDiv) {
  821. html.removeChild(formDiv);
  822. }
  823. });
  824. addList = []
  825. num = 1
  826. });
  827. let num = 1;
  828. let addList = []
  829. function addContestant() {
  830. const html = document.getElementById('formContainer');
  831. if (html.children.length >= 6) {
  832. alert('最多添加3个选手');
  833. return
  834. }
  835. num = num + 1;
  836. addList.push(num)
  837. const ifFirst = addList.find(item => item === 1);
  838. let addListLength = addList.length + 1;
  839. if (ifFirst) {
  840. addListLength = addList.length
  841. }
  842. console.log("addListLength:", html.children.length);
  843. const createDiv = document.createElement('div');
  844. createDiv.id = `addformContainer${num}`;
  845. createDiv.style.position = 'relative';
  846. const h3Create = document.createElement('h3');
  847. h3Create.innerText = `选手${addListLength}:`;
  848. createDiv.appendChild(h3Create);
  849. const delButton = document.createElement('button');
  850. delButton.innerText = `删除选手${addListLength}`;
  851. delButton.className = 'menu-btn-add remove-Contestant';
  852. delButton.onclick = removeContestant;
  853. createDiv.appendChild(delButton);
  854. const brCreate = document.createElement('br');
  855. createDiv.appendChild(brCreate);
  856. const formCrate = document.createElement('form');
  857. formCrate.id = `registrationForm${num}`;
  858. if (selectedCompetitionId == 2) {
  859. formCrate.innerHTML = `<div class="form-row">
  860. <div class="form-col">
  861. <div class="form-group">
  862. <label class="form-label required" for="name">姓名</label>
  863. <input type="text" id="name${num}" class="form-input" required>
  864. <div class="error" id="name-error${num}">请输入姓名</div>
  865. </div>
  866. </div>
  867. <div class="form-col">
  868. <div class="form-group">
  869. <label class="form-label required" for="gender">性别</label>
  870. <select id="gender${num}" class="form-input" required>
  871. <option value="">请选择</option>
  872. <option value="1">男</option>
  873. <option value="2">女</option>
  874. </select>
  875. <div class="error" id="gender-error${num}">请选择性别</div>
  876. </div>
  877. </div>
  878. </div>
  879. <div class="form-row">
  880. <div class="form-col">
  881. <div class="form-group">
  882. <label class="form-label required" for="ethnicity">民族</label>
  883. <input type="text" id="ethnicity${num}" class="form-input" required>
  884. <div class="error" id="ethnicity-error${num}">请输入民族</div>
  885. </div>
  886. </div>
  887. <div class="form-col">
  888. <div class="form-group">
  889. <label class="form-label required" for="birthdate">出生年月</label>
  890. <input type="date" id="birthdate${num}" class="form-input" required>
  891. <div class="error" id="birthdate-error${num}">请选择出生年月</div>
  892. </div>
  893. </div>
  894. </div>
  895. <div class="form-row">
  896. <div class="form-col">
  897. <div class="form-group">
  898. <label class="form-label required" for="email">电子邮箱</label>
  899. <input type="email" id="email${num}" class="form-input" required>
  900. <div class="error" id="email-error${num}">请输入有效的电子邮箱</div>
  901. </div>
  902. </div>
  903. <div class="form-col">
  904. <div class="form-group">
  905. <label class="form-label required" for="idNumber">身份证号码</label>
  906. <input type="text" id="idNumber${num}" class="form-input" required pattern="\d{17}[\dXx]">
  907. <div class="error" id="idNumber-error${num}">请输入正确身份证号</div>
  908. </div>
  909. </div>
  910. </div>
  911. <div class="form-row">
  912. <div class="form-col">
  913. <div class="form-group">
  914. <label class="form-label required" for="group">组别</label>
  915. <select id="group${num}" class="form-input" required>
  916. <option value="">请选择</option>
  917. <option value="1">小学组(4-6年级)</option>
  918. <option value="2">初中组(7-9年级)</option>
  919. <option value="3">高中组(10-12年级,含中职)</option>
  920. <option value="4">高校组(含高职)</option>
  921. </select>
  922. <div class="error" id="group-error${num}">请选择组别</div>
  923. </div>
  924. </div>
  925. <div class="form-col">
  926. <div class="form-group">
  927. <label class="form-label required" for="grade">年级</label>
  928. <input type="text" id="grade${num}" class="form-input" required>
  929. <div class="error" id="grade-error${num}">请输入年级</div>
  930. </div>
  931. </div>
  932. </div>
  933. <div class="form-row">
  934. <div class="form-col">
  935. <div class="form-group">
  936. <label class="form-label required" for="school">所在学校</label>
  937. <input type="text" id="school${num}" class="form-input" required>
  938. <div class="error" id="school-error${num}">请输入学校名称</div>
  939. </div>
  940. </div>
  941. <div class="form-col">
  942. <div class="form-group">
  943. <label class="form-label required" for="schoolRegion">学校所在地区</label>
  944. <input type="text" id="schoolRegion${num}" class="form-input" required
  945. placeholder="省/市/区">
  946. <div class="error" id="schoolRegion-error${num}">请输入学校所在地区</div>
  947. </div>
  948. </div>
  949. </div>
  950. <div class="form-group">
  951. <label class="form-label required" for="phone">联系电话</label>
  952. <input type="tel" id="phone${num}" class="form-input" required pattern="[0-9]{11}">
  953. <div class="error" id="phone-error${num}">请输入11位手机号码</div>
  954. </div>`;
  955. } else {
  956. formCrate.innerHTML = `<div class="form-row">
  957. <div class="form-col">
  958. <div class="form-group">
  959. <label class="form-label required" for="name">姓名</label>
  960. <input type="text" id="name${num}" class="form-input" required>
  961. <div class="error" id="name-error${num}">请输入姓名</div>
  962. </div>
  963. </div>
  964. <div class="form-col">
  965. <div class="form-group">
  966. <label class="form-label required" for="gender">性别</label>
  967. <select id="gender${num}" class="form-input" required>
  968. <option value="">请选择</option>
  969. <option value="1">男</option>
  970. <option value="2">女</option>
  971. </select>
  972. <div class="error" id="gender-error${num}">请选择性别</div>
  973. </div>
  974. </div>
  975. </div>
  976. <div class="form-row">
  977. <div class="form-col">
  978. <div class="form-group">
  979. <label class="form-label required" for="ethnicity">民族</label>
  980. <input type="text" id="ethnicity${num}" class="form-input" required>
  981. <div class="error" id="ethnicity-error${num}">请输入民族</div>
  982. </div>
  983. </div>
  984. <div class="form-col">
  985. <div class="form-group">
  986. <label class="form-label required" for="birthdate">出生年月</label>
  987. <input type="date" id="birthdate${num}" class="form-input" required>
  988. <div class="error" id="birthdate-error${num}">请选择出生年月</div>
  989. </div>
  990. </div>
  991. </div>
  992. <div class="form-row">
  993. <div class="form-col">
  994. <div class="form-group">
  995. <label class="form-label required" for="email">电子邮箱</label>
  996. <input type="email" id="email${num}" class="form-input" required>
  997. <div class="error" id="email-error${num}">请输入有效的电子邮箱</div>
  998. </div>
  999. </div>
  1000. <div class="form-col">
  1001. <div class="form-group">
  1002. <label class="form-label required" for="idNumber">身份证号码</label>
  1003. <input type="text" id="idNumber${num}" class="form-input" required pattern="\d{17}[\dXx]">
  1004. <div class="error" id="idNumber-error${num}">请输入正确身份证号</div>
  1005. </div>
  1006. </div>
  1007. </div>
  1008. <div class="form-row">
  1009. <div class="form-col">
  1010. <div class="form-group">
  1011. <label class="form-label required" for="group">组别</label>
  1012. <select id="group${num}" class="form-input" required>
  1013. <option value="">请选择</option>
  1014. <option value="1">小学低龄</option>
  1015. <option value="2">小学高龄</option>
  1016. <option value="3">中学</option>
  1017. <option value="4">高校</option>
  1018. </select>
  1019. <div class="error" id="group-error${num}">请选择组别</div>
  1020. </div>
  1021. </div>
  1022. <div class="form-col">
  1023. <div class="form-group">
  1024. <label class="form-label required" for="grade">年级</label>
  1025. <input type="text" id="grade${num}" class="form-input" required>
  1026. <div class="error" id="grade-error${num}">请输入年级</div>
  1027. </div>
  1028. </div>
  1029. </div>
  1030. <div class="form-row">
  1031. <div class="form-col">
  1032. <div class="form-group">
  1033. <label class="form-label required" for="school">所在学校</label>
  1034. <input type="text" id="school${num}" class="form-input" required>
  1035. <div class="error" id="school-error${num}">请输入学校名称</div>
  1036. </div>
  1037. </div>
  1038. <div class="form-col">
  1039. <div class="form-group">
  1040. <label class="form-label required" for="schoolRegion">学校所在地区</label>
  1041. <input type="text" id="schoolRegion${num}" class="form-input" required
  1042. placeholder="省/市/区">
  1043. <div class="error" id="schoolRegion-error${num}">请输入学校所在地区</div>
  1044. </div>
  1045. </div>
  1046. </div>
  1047. <div class="form-group">
  1048. <label class="form-label required" for="phone">联系电话</label>
  1049. <input type="tel" id="phone${num}" class="form-input" required pattern="[0-9]{11}">
  1050. <div class="error" id="phone-error${num}">请输入11位手机号码</div>
  1051. </div>`;
  1052. }
  1053. createDiv.appendChild(formCrate);
  1054. html.appendChild(createDiv);
  1055. }
  1056. function removeContestant(e) {
  1057. const parentElement = Number(e.target.parentElement.id && e.target.parentElement.id.slice(16));
  1058. const html = document.getElementById('formContainer');
  1059. if (selectedCompetitionId == 2) {
  1060. if (html.children.length <= 5) {
  1061. alert('至少保留两个选手');
  1062. return
  1063. }
  1064. }
  1065. addList = addList.filter(item => item !== parentElement);
  1066. let selectForm = html.querySelector(`div#addformContainer${parentElement}`);
  1067. if (selectForm) html.removeChild(selectForm);
  1068. // 依次递增更新剩余选手的序号
  1069. addList.forEach((item, idx) => {
  1070. let formDiv = html.querySelector(`div#addformContainer${item}`);
  1071. if (formDiv) {
  1072. formDiv.querySelector('h3').innerText = `选手${idx + 2}:`;
  1073. formDiv.querySelector('button').innerText = `删除选手${idx + 2}`;
  1074. }
  1075. });
  1076. // num = num - 1;
  1077. }
  1078. async function submitData() {
  1079. const requiredFields = ['name', 'gender', 'ethnicity', 'birthdate', 'email',
  1080. 'idNumber', 'group', 'grade', 'school', 'schoolRegion', 'phone',];
  1081. let formData = [];
  1082. let idNumber = '';
  1083. let idError = '';
  1084. let phone = '';
  1085. let phoneError = '';
  1086. let i = 0
  1087. let isFirst = addList.find(item => item === 1);
  1088. if (!isFirst) addList.unshift(1);
  1089. const teacher = document.getElementById('teacher').value;
  1090. if (!teacher) {
  1091. alert('请填写指导老师');
  1092. return;
  1093. }
  1094. const teacherPhone = document.getElementById('teacherPhone').value;
  1095. if (!/^[0-9]{11}$/.test(teacherPhone)) {
  1096. alert('请正确填写指导老师手机号');
  1097. return;
  1098. }
  1099. let phoneSet = new Set();
  1100. for (let j = 0; j <= addList.length - 1; j++) {
  1101. let element = null;
  1102. let errorElement = null;
  1103. let isValid = true;
  1104. i = addList[j]
  1105. requiredFields.forEach(field => {
  1106. element = document.getElementById(field + i);
  1107. errorElement = document.getElementById(`${field}-error` + i);
  1108. if (!element.value) {
  1109. errorElement.style.display = 'block';
  1110. isValid = false;
  1111. } else {
  1112. errorElement.style.display = 'none';
  1113. }
  1114. });
  1115. // 验证身份证格式
  1116. idNumber = document.getElementById('idNumber' + i);
  1117. idError = document.getElementById('idNumber-error' + i);
  1118. if (idNumber.value.length > 5) {
  1119. idError.style.display = 'none';
  1120. } else {
  1121. idError.style.display = 'block';
  1122. isValid = false;
  1123. }
  1124. // 验证手机号格式
  1125. phone = document.getElementById('phone' + i);
  1126. phoneError = document.getElementById('phone-error' + i);
  1127. if (!/^[0-9]{11}$/.test(phone.value)) {
  1128. phoneError.style.display = 'block';
  1129. isValid = false;
  1130. } else {
  1131. phoneError.style.display = 'none';
  1132. }
  1133. if (!isValid) {
  1134. alert(`选手${j + 1}填写信息有误,请重新填写`);
  1135. return;
  1136. };
  1137. formData.push({
  1138. name: document.getElementById('name' + i).value,
  1139. gender: document.getElementById('gender' + i).value,
  1140. ethnicity: document.getElementById('ethnicity' + i).value,
  1141. birthdate: document.getElementById('birthdate' + i).value,
  1142. email: document.getElementById('email' + i).value,
  1143. id_number: document.getElementById('idNumber' + i).value,
  1144. group: document.getElementById('group' + i).value,
  1145. grade: document.getElementById('grade' + i).value,
  1146. school: document.getElementById('school' + i).value,
  1147. schoolRegion: document.getElementById('schoolRegion' + i).value,
  1148. phone: document.getElementById('phone' + i).value,
  1149. })
  1150. }
  1151. try {
  1152. // 收集表单数据
  1153. const formDataObj = {
  1154. type: selectedCompetitionId, // 报名类型,1桌游,2智能体
  1155. uploadUrl: teacher + teacherPhone, // 上传文件的URL
  1156. idCard: formData.map(item => item.id_number).join(","), // 选手身份证号拼接
  1157. registrationFormUrl: "", // 报名表上传URL
  1158. user: JSON.stringify(formData),
  1159. area: urlSearch.slice(1), // 区
  1160. };
  1161. let aa = selectedCompetitionId == 2 ? "智能体应用类比赛,手机号作为登录账号,请确认手机号填写正确且不能重复" : "桌游设计挑战类比赛"
  1162. if (!confirm(`您参加的是${aa},提交之后无法再修改信息,是否确认提交?`)) {
  1163. return;
  1164. }
  1165. // 发送报名信息请求
  1166. const registerResponse = await fetch(requesturl + 'api/user', {
  1167. method: 'POST',
  1168. headers: {
  1169. 'Content-Type': 'application/json'
  1170. },
  1171. body: JSON.stringify(formDataObj)
  1172. });
  1173. if (!registerResponse.ok) {
  1174. throw new Error('报名提交失败');
  1175. }
  1176. const registerData = await registerResponse.json();
  1177. console.log(registerData);
  1178. if (registerData.status == "ok") {
  1179. alert("报名完成,审核情况会通过邮箱通知,请注意邮箱信息");
  1180. } else {
  1181. alert(registerData.message);
  1182. }
  1183. // document.getElementById('registrationForm').reset();
  1184. } catch (error) {
  1185. console.error('提交错误:', error);
  1186. alert(`报名失败: ${error.message}`);
  1187. }
  1188. }
  1189. async function submitRegistration() {
  1190. var area = urlSearch.slice(1)
  1191. if (area.indexOf("longhua") > -1 || area.indexOf("guangming") > -1) { alert("报名时间已截止"); return }
  1192. const idNumber = document.getElementById('id_number');
  1193. const CompetitionType = document.getElementById('CompetitionType');
  1194. if (!idNumber.value && !CompetitionType.value) {
  1195. alert('请选择比赛类型和填写身份证号');
  1196. //e.target.value = ''; // 清空已选择的文件
  1197. return;
  1198. }
  1199. if (uploadFileUrl1 == "") {
  1200. alert('请上传报名文件');
  1201. return;
  1202. }
  1203. if (CompetitionType.value == 2 && document.getElementById("videoUploadDiv").style.display == "block") {
  1204. if (uploadVideoUrl == "") {
  1205. alert('请上传智能体视频');
  1206. return;
  1207. }
  1208. }
  1209. if (!confirm('如已上传过文件,本次上传会覆盖之前上传,是否确定提交吗?')) {
  1210. return;
  1211. }
  1212. try {
  1213. const response = await fetch(requesturl + "api/update", {
  1214. method: "POST",
  1215. headers: {
  1216. "Content-Type": "application/json"
  1217. },
  1218. body: JSON.stringify({
  1219. url: uploadFileUrl1,
  1220. id_number: idNumber.value,
  1221. type: CompetitionType.value,
  1222. area: urlSearch.slice(1)
  1223. })
  1224. })
  1225. if (!response.ok) {
  1226. throw new Error('信息更新失败');
  1227. }
  1228. const registerData = await response.json();
  1229. console.log(registerData);
  1230. alert(registerData.message);
  1231. } catch (error) {
  1232. console.error('信息更新失败:', error);
  1233. alert(error.message);
  1234. }
  1235. }
  1236. async function submitRegistration2() {
  1237. const idNumber = document.getElementById('id_number2');
  1238. if (!idNumber.value) {
  1239. alert('请选择比赛类型和填写身份证号');
  1240. return;
  1241. }
  1242. if (uploadFileUrl2 == "") {
  1243. alert('请上传报名文件');
  1244. return;
  1245. }
  1246. if (!confirm('如已上传过文件,本次上传会覆盖之前上传,是否确定提交吗?')) {
  1247. return;
  1248. }
  1249. try {
  1250. const response = await fetch(requesturl + "api/update", {
  1251. method: "POST",
  1252. headers: {
  1253. "Content-Type": "application/json"
  1254. },
  1255. body: JSON.stringify({
  1256. url: uploadFileUrl2,
  1257. id_number: idNumber.value,
  1258. type: 2,
  1259. area: ""
  1260. })
  1261. })
  1262. if (!response.ok) {
  1263. throw new Error('信息更新失败');
  1264. }
  1265. const registerData = await response.json();
  1266. console.log(registerData);
  1267. alert(registerData.message);
  1268. } catch (error) {
  1269. console.error('信息更新失败:', error);
  1270. alert(error.message);
  1271. }
  1272. }
  1273. async function help() {
  1274. const img1 = `<img class="help-qrCode" src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0960e9b6-2687-b858-2285-455c29eac369/code2.png" />`
  1275. const img2 = `<div><span>创新思维赛 桌游设计挑战类 答疑群</span><br /><img class="help-qrCode" src="./2.png" /></div>`
  1276. showModal(img1 + img2)
  1277. }
  1278. async function openVideo() {
  1279. // const video = `<video style="width:100%;height:100%" src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/f41a07d8-2cab-76b2-2b5b-8211d98bdb0c/%E9%A6%AC%E6%88%B2%E5%9C%98%E6%A9%9F%E5%99%A8%E4%BA%BA.mp4" controls autoplay></video>`
  1280. showModal("宣讲视频暂无...")
  1281. }
  1282. let uploadFileUrl1 = "";
  1283. let uploadFileUrl2 = "";
  1284. let uploadVideoUrl = "";
  1285. document.getElementById('uploadFile').addEventListener('change', async function (e) {
  1286. const idNumber = document.getElementById('id_number');
  1287. if (!idNumber.value) {
  1288. alert('请先填写身份证号');
  1289. e.target.value = ''; // 清空已选择的文件
  1290. return;
  1291. }
  1292. const file = e.target.files[0];
  1293. if (!file) return;
  1294. const fileName = `${idNumber.value}/${file.name}`;
  1295. uploadFileUrl1 = await uplod(fileName, file);
  1296. console.log('选择文件:', uploadFileUrl1);
  1297. });
  1298. document.getElementById('uploadFile2').addEventListener('change', async function (e) {
  1299. const idNumber = document.getElementById('id_number2');
  1300. if (!idNumber.value) {
  1301. alert('请先填写身份证号');
  1302. e.target.value = ''; // 清空已选择的文件
  1303. return;
  1304. }
  1305. const file = e.target.files[0];
  1306. if (!file) return;
  1307. const fileName = `${idNumber.value}/${file.name}`;
  1308. uploadFileUrl2 = await uplod(fileName, file);
  1309. console.log('选择文件:', uploadFileUrl2);
  1310. });
  1311. document.getElementById('uploadVideo').addEventListener('change', async function (e) {
  1312. const idNumber = document.getElementById('id_number');
  1313. if (!idNumber.value) {
  1314. alert('请先填写身份证号');
  1315. e.target.value = ''; // 清空已选择的文件
  1316. return;
  1317. }
  1318. const file = e.target.files[0];
  1319. if (!file) return;
  1320. const fileName = `${idNumber}/${file.name}`;
  1321. uploadVideoUrl = await uplod(fileName, file);
  1322. console.log('视频文件:', uploadVideoUrl);
  1323. })
  1324. async function uplod(fileName, file) {
  1325. var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } });
  1326. var params = {
  1327. Key: fileName,
  1328. ContentType: file.type,
  1329. Body: file,
  1330. 'Access-Control-Allow-Credentials': '*',
  1331. 'ACL': 'public-read'
  1332. };
  1333. try {
  1334. const data = await bucket.upload(params).promise();
  1335. console.log('上传成功:', data);
  1336. alert('文件上传成功');
  1337. return data.Location;
  1338. } catch (err) {
  1339. console.error('上传失败:', err);
  1340. alert('文件上传失败');
  1341. return '';
  1342. }
  1343. }
  1344. function styleHide() {
  1345. selectedCompetitionId = 2
  1346. document.getElementById('registerBtn').click();
  1347. document.getElementById('downloadBtn').style.display = 'none';
  1348. // document.getElementById('registerBtn1').style.display = 'none';
  1349. document.getElementById('prevToStep1').style.display = 'none';
  1350. addContestant()
  1351. updateGroupSelect(selectedCompetitionId);
  1352. // 切换到步骤2
  1353. document.getElementById('step1').classList.remove('active');
  1354. document.getElementById('step2').classList.add('active');
  1355. document.getElementsByClassName("button-Contestant")[0].classList.add('active');
  1356. document.getElementsByClassName("button-group")[1].style.textAlign = "center";
  1357. document.getElementsByClassName("button-group")[1].style.display = "block";
  1358. document.getElementsByClassName("step-title")[1].style.display = "none";
  1359. document.getElementById("videoUploadDiv").style.display = "block";
  1360. buttonContestant = true
  1361. }
  1362. window.onload = function () {
  1363. // updateGroupSelect("1")
  1364. if (urlSearch.slice(1) == "baoan") {
  1365. styleHide()
  1366. } else if (urlSearch.slice(1) == "guangming") {
  1367. styleHide()
  1368. } else if (urlSearch.slice(1) == "pingshan") {
  1369. styleHide()
  1370. } else if (urlSearch.slice(1) == "longhua") {
  1371. styleHide()
  1372. } else if (urlSearch.slice(1) == "nanshan") {
  1373. styleHide()
  1374. }
  1375. }
  1376. </script>
  1377. <!-- Modal -->
  1378. <div id="modal"
  1379. style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.4);z-index:999;justify-content:center;align-items:center;">
  1380. <div
  1381. style="background:#fff;padding:30px 20px;border-radius:10px;width:800px;box-shadow:0 4px 24px rgba(0,0,0,0.2);position:relative;">
  1382. <span id="modalClose" style="position:absolute;top:10px;right:15px;font-size:22px;cursor:pointer;">×</span>
  1383. <div id="modalContent" style="text-align: center;"></div>
  1384. </div>
  1385. </div>
  1386. <script>
  1387. // 显示modal
  1388. function showModal(content) {
  1389. document.getElementById('modalContent').innerHTML = content;
  1390. document.getElementById('modal').style.display = 'flex';
  1391. }
  1392. // 关闭modal
  1393. document.getElementById('modalClose').onclick = function () {
  1394. document.getElementById('modal').style.display = 'none';
  1395. };
  1396. // 点击遮罩关闭
  1397. document.getElementById('modal').onclick = function (e) {
  1398. if (e.target === this) this.style.display = 'none';
  1399. };
  1400. // 示例:点击左下角问号弹出帮助
  1401. // document.querySelector('.help').onclick = function() {
  1402. // showModal('如有疑问请联系组委会邮箱:ccrb@cocorobo.cn<br>或电话:020-8251-0085');
  1403. // };
  1404. </script>
  1405. </body>
  1406. <script>
  1407. // 根据比赛类型显示对应组别
  1408. function updateGroupSelect(type) {
  1409. const groupContainers = document.getElementById('group-containers')
  1410. console.log(groupContainers)
  1411. if (type == "1") {
  1412. groupContainers.innerHTML = `<div class="form-group" id="group-container1">
  1413. <label class="form-label required" for="group">组别</label>
  1414. <select id="group1" class="form-input" required>
  1415. <option value="">请选择</option>
  1416. <option value="1">小学低龄</option>
  1417. <option value="2">小学高龄</option>
  1418. <option value="3">中学</option>
  1419. <option value="4">高校</option>
  1420. </select>
  1421. <div class="error" id="group-error1">请选择组别</div>
  1422. </div>`
  1423. } else {
  1424. groupContainers.innerHTML = `
  1425. <div class="form-group" id="group-container2" >
  1426. <label class="form-label required" for="group">组别</label>
  1427. <select id="group1" class="form-input" required>
  1428. <option value="">请选择</option>
  1429. <option value="1">小学组(4-6年级)</option>
  1430. <option value="2">初中组(7-9年级)</option>
  1431. <option value="3">高中组(10-12年级,含中职)</option>
  1432. <option value="4">高校组(含高职)</option>
  1433. </select>
  1434. <div class="error" id="group-error1">请选择组别</div>
  1435. </div>`
  1436. }
  1437. }
  1438. </script>
  1439. <script>
  1440. </script>
  1441. </html>