新媒体-合同签约,CA签约

signing.html 9.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>短信验证</title>
  8. <link rel="stylesheet" type="text/css" href="common/reset.css"/>
  9. <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  10. <link rel="stylesheet" href="css/signing.css">
  11. <script src="common/jquery-2.1.0.js"></script>
  12. <script type="text/javascript" src="./common/jq-signature.js"></script>
  13. <script type="text/javascript">
  14. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  15. window.onresize = function(){
  16. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  17. }
  18. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  19. // 通过下面这个API隐藏右上角按钮
  20. WeixinJSBridge.call('hideOptionMenu');
  21. });
  22. </script>
  23. <style>
  24. .signatureDiv{
  25. position: fixed;
  26. width: 100%;
  27. height: 100%;
  28. top: 0;
  29. left: 0;
  30. background: rgba(0, 0, 0, 0.5);
  31. display: none;
  32. }
  33. .signatureCon{
  34. width: 100%;
  35. background: #ffffff;
  36. position: absolute;
  37. top: 50%;
  38. transform: translateY(-50%);
  39. margin: auto;
  40. padding-bottom: 0.2rem;
  41. }
  42. .signatureDiv .buttonDiv{
  43. display: flex;
  44. align-items: center;
  45. justify-content: space-around;
  46. margin-top: 0.6rem;
  47. }
  48. .signatureDiv .buttonDiv button{
  49. width: 1rem;
  50. line-height: 0.3rem;
  51. border: none;
  52. background: #1B82D2;
  53. color: #ffffff;
  54. border-radius: 0.3rem;
  55. }
  56. .signatureDiv #clearBtn{
  57. background: #8e8e94;
  58. }
  59. .contract_signing .contract_button2{
  60. display: none;
  61. }
  62. #signature img{
  63. width: 1rem;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <!-- 客户确认合同-01 -->
  69. <div class="contract_signing">
  70. <h3 class="title">短视频拍摄合作协议</h3>
  71. <div class="user_reading">
  72. <div class="party_B first_party">
  73. <!-- <p>乙方(姓名):</p>
  74. <p>地址: </p>
  75. <p>身份证号:</p>
  76. <p>快手ID:</p>
  77. <p>移动电话:</p> -->
  78. </div>
  79. <div class="first_party">
  80. <p>乙方: 北京酷炫网络技术股份有限公司</p>
  81. <p>办公地址:北京市朝阳区东四环中路41号嘉泰国际大厦B座2001室</p>
  82. <p>法定代表人:郭磊</p>
  83. <p>联系电话:010-65202100</p>
  84. <p>电子邮箱:hongbin.yang@kuxuan-inc.com</p>
  85. </div>
  86. <div class="contract_content">
  87. <p>依据《中华人民共和国合同法》和有关法规的规定,乙方接受甲方的委托,就短视频拍摄与推广事项,双方经协商一致,签订本合同,信守执行:</p>
  88. <h4>一、视频制作的内容</h4>
  89. <p>甲方根据客户要求,通过快手-快接单平台(https://www.chenzhongtech.com/)向乙方发送短视频制作与推广需求,乙方根据甲方需求进行短视频拍摄,拍摄所需的演员、场景、道具、器材等均由乙方负责提供。每条短视频具体制作的主题、内容以及客户信息以快手-快接单后台的订单要求为准。</p>
  90. <h4>二、合作期限</h4>
  91. <p>自 2019 年 1 月 1 日起至2020年12月31日止。合同期限届满双方同意继续进行合作的,可签署补充协议对合作期限进行延长。</p>
  92. <h4>三、合作费用</h4>
  93. <p>1、双方合作期限内,乙方为甲方制作的视频收费总金额以乙方在快手-快接单后台的报价为准。</p>
  94. <p>2、上述费用包括如下服务内容:</p>
  95. <p>1) 拍摄人员与拍摄场地日常费用</p>
  96. <p>2) 背景音乐及画面韵律合成</p>
  97. <p>3) 基础拍摄设备费用</p>
  98. <p>4) 对制作内容进行(后期制作)修改</p>
  99. <h4>四、付款方式</h4>
  100. <p>甲方根据客户需求,通过快手-快接单后台给乙方下单并将视频制作与发布所涉及到的款项预付到快接单平台,乙方在视频制作与发布成功后收到快接单平台的付款,具体结算时间以快手-快接单平台的规定为准。</p>
  101. <h4>五、制作时间</h4>
  102. <p>1、甲方应在下单前,提前3个工作日通知乙方具体的拍摄创意、拍摄场地以及当期视频节目的拍摄要求。</p>
  103. <p>2、乙方在接到甲方的订单后安排视频拍摄,并于快手-快接单平台下单约定的期限内将制作完成的完整视频及相关文件资料交付给甲方进行验收。</p>
  104. <h4>六、知识产权约定</h4>
  105. <p>1、乙方根据甲方需求为甲方客户设计、策划、拍摄、制作的推广素材,其知识产权归属于甲方与对应客户,乙方不得自用或者准予第三人使用。</p>
  106. <p>2、乙方授权甲方使用素材中所涉及的乙方肖像、造型、声音等可以在全球范围内使用,授权期限为乙方通过快手-快手接单后台上传最终版推广素材之日起一年。</p>
  107. <p>3、乙方保证,其向甲方交付的推广素材不会侵犯任何第三方的合法权益,若该等素材涉及第三方的权利内容,包括但不限于商标、专利、著作权等,乙方将自行取得相关权利人的使用授权,且该等授权期限、范围等应覆盖双方事先就素材使用期限、范围的相关约定。</p>
  108. <h4>七、双方的权利义务</h4>
  109. <p>甲方权利和义务:</p>
  110. <p>1、甲方有权对乙方的视频拍摄与后期制作提出建议和思路,以使乙方的作品符合甲方确认需求 。</p>
  111. <p>2、在终稿交付前,甲方有权对乙方所制作的作品提出书面修改意见,在合理范围内,乙方应接受甲方的意见并及时进行修改。</p>
  112. <p>3、甲方有义务提供有关产品资料或其他有关资料给乙方,并且上述资料不侵犯第三方知识产权,但未经甲方书面同意,除为执行本合同,乙方不得擅自使用甲方所提供的资料。</p>
  113. <p>乙方权利和义务:</p>
  114. <p>1、乙方有权要求甲方提供有关产品资料供乙方制作参考。</p>
  115. <p>2、乙方需按照甲方的要求进行作品制作,未经甲方同意,不得擅自修改作品内容。</p>
  116. <p>3、乙方需按照快手-快接单后台订单约定的时间按时交付作品。 </p>
  117. <p>4、乙方承诺提供给甲方的制作视频不侵犯任何第三方的合法权益,没有违反法律法规,因视频侵权或违反法律法规导致甲方遭受损失的,乙方应负责赔偿。</p>
  118. <h4>八、违约责任</h4>
  119. <p>1、如一方违反本合同中所规定的义务,违约方在收到守约方中要求纠正其违约行为的书面通知之日,应立即停止其违约行为,并赔偿守约方因此受到的所有损失。如违约方继续进行违约行为或不履行其义务,守约方除就其所有损失而获得违约方赔偿外,亦有权提前终止本协议。</p>
  120. <h4>九、不可抗力</h4>
  121. <p>1、 “不可抗力”是指本合同双方不能合理控制、不可预见或即使预见亦无法避免的事件,该事件妨碍、影响或延误任何一方根据合同履行其全部或部分义务。该事件包括但不限于政府行为、自然灾害、战争任何其他类似事件。</p>
  122. <p>2、由于以上所述不可抗力事件致使合同的部分或全部不能履行或延迟履行,则双方互不承担任何违约责任。</p>
  123. <h4>十、争议解决和适用法律</h4>
  124. <p>1、甲乙双方在本协议的条款范围内发生纠纷,应尽量协商解决。</p>
  125. <p>2、如协商不成,甲乙双方同意将争议提交本合同签订地人民法院进行诉讼,本合同签订地为北京市朝阳区。</p>
  126. <p>3、本合同的订立、效力、执行和解释及争议的解决均应适用中国法律。</p>
  127. <h4>十一、其他</h4>
  128. <p>1、本合同自双方加盖公章或签字之日起生效。</p>
  129. <p>2、本合同的修改与变更必须经双方协商一致,以书面形式进行,并由双方盖章后生效。</p>
  130. <p>3、本合同一式贰份,双方各执壹份,具有同等法律效力。</p>
  131. <p>4、本合同未尽事宜,双方另行协商后签订补充协议,补充协议与本合同具有同等法律效力。</p>
  132. <div class="detailTime">
  133. <div class="info" id="nail">
  134. <div class="">甲方签字:</div>
  135. <div id="signature"></div>
  136. </div>
  137. <div class="info">
  138. <div class="">乙方:北京酷炫网络技术股份有限公司</div>
  139. <div>代表签字:郭磊</div>
  140. </div>
  141. </div>
  142. </div>
  143. <button class="contract_button contract_button1" onclick="goSignature()">签名</button>
  144. <div class="contractDiv contract_button2">
  145. <button onclick="goSignature()">重签</button>
  146. <button class="button" onclick="signingEvent()">已阅读并确认</button>
  147. </div>
  148. </div>
  149. <!-- 客户确认完毕 -->
  150. <!-- <div class="iframe" style="height: 100vh;">
  151. <iframe src="" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
  152. </div> -->
  153. </div>
  154. <div class="alert-info" style="display: none;">
  155. <!-- tip提示,3s后消失 -->
  156. <p></p>
  157. </div>
  158. <!-- loading -->
  159. <div class="loading">
  160. <img src="img/loading.gif" />
  161. </div>
  162. <!-- 签名区域 -->
  163. <div class="signatureDiv">
  164. <div class="signatureCon">
  165. <!--签名区域-->
  166. <div class="js-signature"
  167. data-width="600"
  168. data-height="200"
  169. data-border="1px solid #ededed"
  170. data-background="#fff"
  171. data-line-color="#000"
  172. data-auto-fit="true">
  173. </div>
  174. <div class="buttonDiv">
  175. <button id="clearBtn" onclick="clearCanvas();">清除</button>
  176. <button id="saveBtn" onclick="saveSignature();" disabled>确定</button>
  177. </div>
  178. </div>
  179. </div>
  180. </body>
  181. </html>
  182. <script src="js/signing.js?v=5"></script>