diff --git a/.inscode b/.inscode index e1777316cc8a34b6c53f0ae12504b6c66fbdb272..ab912d50c02cd9d3085b11119e0cff16fb93f856 100644 --- a/.inscode +++ b/.inscode @@ -1,4 +1,4 @@ -run = "npm i && npm run dev" +run = "cd lottery && cd server && npm i && cd ../product && npm i && npm run build && npm run start" language = "node" [env] diff --git a/lottery/.gitignore b/lottery/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..7e3594f69f3efa841623f8d21346735fbb65379b --- /dev/null +++ b/lottery/.gitignore @@ -0,0 +1,4 @@ +#npm +node_modules/ +temp.json +error.json \ No newline at end of file diff --git a/lottery/Dockerfile b/lottery/Dockerfile new file mode 100644 index 0000000000000000000000000000000000000000..a52f83e34f2d9ffbe1acee4399c1994de86097dc --- /dev/null +++ b/lottery/Dockerfile @@ -0,0 +1,33 @@ +# Use the official Node.js 16 image as base image +FROM node:16.14.0-buster + +# Upgrade npm to the latest version +RUN npm install -g npm@9.6.2 + +# Set the author of the Dockerfile +LABEL maintainer="YIN" + +# Add the application source code to the container +ADD lottery.tar.gz / + +# Set the working directory to the root directory of the application +WORKDIR /lottery + +# Set the ownership of the application directory to root +RUN chown -R root /lottery \ + # Remove the line that opens the default browser when starting the server + && sed -i '/openBrowser/ d' ./server/server.js \ + # Install dependencies for the server and product directories + && cd server && npm install \ + && cd ../product && npm install \ + # Build the application + && npm run build + +# Expose port 8080 to the outside world +EXPOSE 8080 + +# Set the working directory to the product directory +WORKDIR /lottery/product + +# Start the server +CMD ["npm", "run", "serve"] diff --git a/lottery/LICENSE b/lottery/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..fd53789787e0a51a3bb7720bf941991da84f93cd --- /dev/null +++ b/lottery/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 Pavel + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/lottery/README.MD b/lottery/README.MD new file mode 100644 index 0000000000000000000000000000000000000000..9b86a8dfc60db554de05aced1f719febda4f8f5e --- /dev/null +++ b/lottery/README.MD @@ -0,0 +1,243 @@ +# 演示示例 +点击访问: [https://inscode-lottery.inscode.cc](inscode-lottery) + +# 源码 +> 项目来源于: [https://moshang-xc.github.io/lottery/](https://moshang-xc.github.io/lottery/) + +本项目基于源码做以下修改 +> - 增加InsCode一键部署脚本 +> - 增加一键全屏 +> - 屏蔽号牌 + +立即体验: +# 抽奖程序 + +年会抽奖程序,3D 球体抽奖,支持奖品信息配置,参与抽奖人员信息`Excel`导入,抽奖结果`Excel`导出 + +如果该程序对你有帮助😎😎😎,希望给个⭐**star**⭐喔。😘😘😘😍🥰🎉🎈🎃 + +> 立即体验一下: [https://moshang-xc.github.io/lottery/](https://moshang-xc.github.io/lottery/) + +## 技术 + +技术:Node + Express + Three.js + +后台通过`Express`实现 + +前端抽奖界面通过`Three.js`实现 3D 抽奖球,引用了`Three.js`的官方 3D 示例 + +## 功能描述: + +1. 可将抽奖结果进行保存实时下载到 excel 中🎉 +2. 已抽取人员不在参与抽取,抽中的人员不在现场可以重新抽取🎁 +3. 刷新或者关掉服务器,会保存当前已抽取的数据,不会进行数据重置,只有点击界面上的重置按钮,才能重置抽奖数据🧧 +4. 每次抽取的奖品数目可配置🎈 +5. 抽取完所有奖品后还可以继续抽取特别奖(例如:现在抽取红包,追加的奖品等),此时默认一次抽取一个🧨 + +## 预览 + +![lottery.gif](https://raw.githubusercontent.com/moshang-xc/blog/master/share/lottery.gif) + +![index.jpg](https://raw.githubusercontent.com/moshang-xc/blog/master/share/index.jpg) + +![start.jpg](https://raw.githubusercontent.com/moshang-xc/blog/master/share/start.jpg) + +![end.jpg](https://raw.githubusercontent.com/moshang-xc/blog/master/share/end.jpg) + +## 安装 + +``` +git clone https://github.com/moshang-xc/lottery.git + +cd lottery + +# 服务端插件安装 +cd server +npm install + +# 前端插件安装 +cd ../product +npm install + +# 打包 +npm run build + +# 运行 +npm run serve + +# 开发调试 +npm run dev + +``` + +## 目录结构 + +``` +Lottery +├── product +│ ├── src +│ │ ├── lottery +│ │ │ └── index.js +│ │ ├── lib +│ │ ├── img +│ │ ├── css +│ │ └── data +│ ├── package.json +│ └── webpack.config.js +├── server +│ ├── config.js +│ ├── server.js +│ └── package.js +``` + +> 1. product 为前端页面目录 +> 2. package.josn web 项目配置文件 +> 3. webpack.config.js 打包配置文件 +> 4. server 为服务器目录 +> 5. config 为奖品信息的配置文件 + +## 配置信息 + +### 抽奖用户信息配置 + +抽奖用户信息在**`server/data/user.xlsx`**文件中,按文件格式进行填充,不能修改文件名和列头 + +### 奖品信息配置 + +奖品的配置信息填写在**server/config.js**文件中,不能修改文件名。 + +**其中奖品 prizes 的配置描述如下:** + +| 参数 | 值类型 | 描述 | +| ----- | ------ | ------------------------------------------------------------ | +| type | Number | 奖品类型,唯一标识,0 是默认特别奖的占位符,其它奖品不可使用 | +| count | Number | 奖品数量 | +| text | String | 奖项名称 | +| title | String | 奖品描述 | +| img | String | 奖品的图片地址,图片在**img**目录下 | + +```js +// 奖品信息,第一项为预留项不可修改,其他项可根据需要修改 +let prizes = [{ + type: 0, + count: 1000, + title: "", + text: "特别奖" + }, + { + type: 1, + count: 2, + text: "特等奖", + title: "神秘大礼", + img: "../img/secrit.jpg" + }, + { + type: 2, + count: 5, + text: "一等奖", + title: "Mac Pro", + img: "../img/mbp.jpg" + } + ... +]; +``` + +### 奖品每次抽取个数配置 + +**EACH_COUNT**用于配置每次的抽奖个数,与 prizes 奖品一一对应,例如上面的奖品配置对应的抽奖个数配置如下: + +```js +const EACH_COUNT = [1, 1, 5]; +``` + +如上配置,表示一次抽取的奖品个数顺序为:特别奖每次抽一个,特等奖每次抽一个,一等奖每次抽五个 + +### 企业标识配置 + +该标识用于显示在抽奖卡片上。 + +```js +const COMPANY = "MoShang"; +``` + + +## Docker部署方案 + +### 概述 + +该项目现在支持使用Docker进行部署。Docker是一个轻量级的容器化平台,可以让您快速地部署、测试和运行应用程序。本文档将向您介绍如何使用Docker部署该项目。 + +### 系统要求 + +在您开始使用Docker部署该项目之前,您需要确保已经安装了以下软件: + +- Docker(请参阅Docker的官方文档以获取安装说明) +- Docker Compose + +### 安装 + +1. 下载并解压该项目的源代码。 + +2. 进入解压后的项目目录。 + +3. 执行以下命令以构建Docker镜像: + + ``` + ./build.sh [TAG] + ``` + + 这将使用Dockerfile构建一个名为`lottery:[TAG]`的Docker镜像。如果未指定标签,则默认使用`latest`标签。 + +4. 执行以下命令以在本地运行容器: + + ``` + ./dev.sh [TAG] + ``` + + 这将启动容器并将应用程序部署在Docker容器中。您可以在本地进行测试,确保一切正常。请注意,容器内部的应用程序将会监听8888端口和443端口。 + +5. 执行以下命令以将Docker镜像标记并推送到远程Docker仓库: + + ``` + ./tagpush.sh [TAG] + ``` + + 这将为Docker镜像打上标签并将其推送到远程Docker仓库,如果要使用docker官方的hub请先在https://hub.docker.com/新建自己的repo,然后将文件中的用户名改为自己。请注意,`[TAG]`应替换为您要使用的标签名称。 + +6. 确保有一个名为`docker-compose.yml`的文件,并添加以下内容: + + ``` + version: '3.8' + + volumes: + lottery_log: + + services: + lottery: + container_name: lottery + expose: + - 8888 + ports: + - "28458:8888" + - "443:443" + volumes: + - "lottery_log:/var/log" + image: "panda1024/lottery:[TAG]" + restart: always + ``` + + 请注意,`[TAG]`应替换为您推送到Docker仓库的镜像名称。 + +7. 在服务器上的项目目录中运行以下命令以使用Docker Compose部署应用程序: + +``` + docker-compose up -d +``` + + 这将启动一个Docker Compose堆栈,并将该项目部署在其中。请注意,此处将容器的8888端口和443端口映射 到了服务器上的8888端口和443端口。如果您希望使用其他端口,请相应地更改`docker-compose.yml`文件。 + + + +## License + +MIT diff --git a/lottery/build.sh b/lottery/build.sh new file mode 100755 index 0000000000000000000000000000000000000000..8465977f471c27af3d92967a5fecff69df8c4ffd --- /dev/null +++ b/lottery/build.sh @@ -0,0 +1,6 @@ +TAG=${1:-latest} + +rm -f lottery.tar.gz +tar -czvf lottery.tar.gz ../lottery/ +docker build -t lottery:$TAG -f ./Dockerfile . + diff --git a/lottery/dev.sh b/lottery/dev.sh new file mode 100755 index 0000000000000000000000000000000000000000..660a0b945175482cc6327ec5931ae49742aac77b --- /dev/null +++ b/lottery/dev.sh @@ -0,0 +1,7 @@ +TAG=${1:-latest} + +docker run --rm -it \ + -p 5003:8888 \ + -p 443:443 \ + -v "$(pwd)"/server/data:/lottery/server/data/ \ + lottery:$TAG diff --git a/lottery/docker-compose.yml b/lottery/docker-compose.yml new file mode 100644 index 0000000000000000000000000000000000000000..ef0c2e5b602737d43167d9aadb32a768ae1df501 --- /dev/null +++ b/lottery/docker-compose.yml @@ -0,0 +1,15 @@ +version: '3.8' + +volumes: + lottery_log: +services: + lottery: + container_name: lottery + expose: + - 28458 + ports: + - "28458:8888" + volumes: + - "lottery_log:/var/log" + image: "panda1024/lottery:v0.3" + restart: always diff --git a/lottery/product/package.json b/lottery/product/package.json new file mode 100644 index 0000000000000000000000000000000000000000..c6b56ed7e1fa2d5cd09d230ea0d00a00ad6f0148 --- /dev/null +++ b/lottery/product/package.json @@ -0,0 +1,35 @@ +{ + "name": "lucky", + "version": "1.0.0", + "description": "抽奖", + "main": "index.js", + "scripts": { + "start": "cd dist && node ../../server/index.js 8888", + "serve": "npm run start", + "build": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --mode=production --progress --colors", + "dev": "webpack-dev-server --config webpack.dev.js --mode=development --progress --colors" + }, + "author": "moshang", + "license": "ISC", + "devDependencies": { + "autoprefixer": "^8.1.0", + "babel-core": "^6.26.0", + "babel-loader": "^7.1.3", + "babel-preset-es2015": "^6.24.1", + "babel-preset-es2015-loose": "^8.0.0", + "clean-webpack-plugin": "^0.1.19", + "copy-webpack-plugin": "^4.5.0", + "cross-env": "^6.0.3", + "css-loader": "^0.28.10", + "html-loader": "^0.5.5", + "html-webpack-plugin": "^3.0.4", + "postcss-loader": "^2.1.1", + "style-loader": "^0.20.2", + "url-loader": "^1.0.1", + "webpack": "^4.41.4", + "webpack-cli": "^3.3.10", + "webpack-dev-server": "^3.10.1", + "webpack-merge": "^4.2.2" + }, + "dependencies": {} +} diff --git a/lottery/product/postcss.config.js b/lottery/product/postcss.config.js new file mode 100644 index 0000000000000000000000000000000000000000..134417d3ae4dae954de3e59c884e310e9b8788b1 --- /dev/null +++ b/lottery/product/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [ + require('autoprefixer') + ] +} \ No newline at end of file diff --git a/lottery/product/src/css/animate.min.css b/lottery/product/src/css/animate.min.css new file mode 100644 index 0000000000000000000000000000000000000000..e7dd655009efb06ff5eef8ba503663f2c7896a41 --- /dev/null +++ b/lottery/product/src/css/animate.min.css @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +/*! + * animate.css -http://daneden.me/animate + * Version - 3.5.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2017 Daniel Eden + */ + +.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:slideOutUp} \ No newline at end of file diff --git a/lottery/product/src/data/music.mp3 b/lottery/product/src/data/music.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..f98240476606b2adf99aaf2e79e066f58ec7948f Binary files /dev/null and b/lottery/product/src/data/music.mp3 differ diff --git a/lottery/product/src/img/edifier.jpg b/lottery/product/src/img/edifier.jpg new file mode 100644 index 0000000000000000000000000000000000000000..df08cf8cdac01acdbf0d4e19b4741e90cf1e2ef6 Binary files /dev/null and b/lottery/product/src/img/edifier.jpg differ diff --git a/lottery/product/src/img/huawei.png b/lottery/product/src/img/huawei.png new file mode 100644 index 0000000000000000000000000000000000000000..5660bb3a8d936646c4d3498d5fa090013aa97ead Binary files /dev/null and b/lottery/product/src/img/huawei.png differ diff --git a/lottery/product/src/img/ipad.jpg b/lottery/product/src/img/ipad.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3cae644ad3d56d1524632e56b861fdb508ee86c8 Binary files /dev/null and b/lottery/product/src/img/ipad.jpg differ diff --git a/lottery/product/src/img/kindle.jpg b/lottery/product/src/img/kindle.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9e7aa0ef64fb6c9db4977a34ec55b1971bfabaee Binary files /dev/null and b/lottery/product/src/img/kindle.jpg differ diff --git a/lottery/product/src/img/mbp.jpg b/lottery/product/src/img/mbp.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a7f0037dcdf1f88d0c847626b3cc61201ccf6ae9 Binary files /dev/null and b/lottery/product/src/img/mbp.jpg differ diff --git a/lottery/product/src/img/secrit.jpg b/lottery/product/src/img/secrit.jpg new file mode 100644 index 0000000000000000000000000000000000000000..459514a829d0596909330c14e95a258dd7a8f690 Binary files /dev/null and b/lottery/product/src/img/secrit.jpg differ diff --git a/lottery/product/src/img/spark.jpg b/lottery/product/src/img/spark.jpg new file mode 100644 index 0000000000000000000000000000000000000000..05a55b7ad6202a422e0dc559135de1920fe8da6a Binary files /dev/null and b/lottery/product/src/img/spark.jpg differ diff --git a/lottery/product/src/index.html b/lottery/product/src/index.html new file mode 100644 index 0000000000000000000000000000000000000000..04ff157b8c3c7945e593cdc7ae0400c39605b98c --- /dev/null +++ b/lottery/product/src/index.html @@ -0,0 +1,48 @@ + + +
+