diff --git a/sql/picturebed.sql b/sql/picturebed.sql
index f6c6d53..441ee44 100644
--- a/sql/picturebed.sql
+++ b/sql/picturebed.sql
@@ -11,7 +11,7 @@
Target Server Version : 50720
File Encoding : 65001
- Date: 30/06/2019 15:36:20
+ Date: 14/07/2019 17:55:13
*/
SET NAMES utf8mb4;
@@ -33,13 +33,15 @@ CREATE TABLE `config` (
`notice` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '公告',
`baidu` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '百度统计',
`domain` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '站点域名',
+ `background1` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '首页背景图',
+ `background2` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '上传页面背景图',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of config
-- ----------------------------
-INSERT INTO `config` VALUES (1, 1, 1, 'Hellohao图床', '网站由JAVA语言编写应用SpringBoot框架开发，前端全部组件由BootStrap/Layui框架编写。由作者个人更新维护，后期会加入更全面的功能供大家使用，如有BUG请与我反馈。', 'https://hellohao.nos-eastchina1.126.net/%E7%BD%91%E7%AB%99%E7%B4%A0%E6%9D%90/logo2.png', 'Hellohao 切勿上传违反中华人民共和国互联网法律条约资源', '作者博客高清壁纸json格式化', '', 'console.log(\'百度统计JS代码\');', 'http://tc.hellohao.cn');
+INSERT INTO `config` VALUES (1, 1, 1, 'Hellohao图床', '网站由JAVA语言编写应用SpringBoot框架开发，前端全部组件由BootStrap/Layui框架编写。由作者个人更新维护，后期会加入更全面的功能供大家使用，如有BUG请与我反馈。', 'https://hellohao.nos-eastchina1.126.net/%E7%BD%91%E7%AB%99%E7%B4%A0%E6%9D%90/logo2.png', 'Hellohao 切勿上传违反中华人民共和国互联网法律条约资源', '作者博客高清壁纸json格式化', '也许...|这将是最好用的图床', 'console.log(\'百度统计JS代码\');', 'http://tc.hellohao.cn', 'https://hellohao.oss-cn-beijing.aliyuncs.com/Hellohao/eb83a0714030248.jpg', 'https://hellohao.oss-cn-beijing.aliyuncs.com/Hellohao/086650714030248.jpg');
-- ----------------------------
-- Table structure for emailconfig
@@ -162,7 +164,7 @@ CREATE TABLE `user` (
`uid` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户唯一标识',
`isok` int(2) NOT NULL,
PRIMARY KEY (`id`) USING BTREE
-) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
+) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of user
diff --git a/src/main/resources/static/webuploade/css/component.css b/src/main/resources/static/webuploade/css/component.css
new file mode 100644
index 0000000..9d6af2a
--- /dev/null
+++ b/src/main/resources/static/webuploade/css/component.css
@@ -0,0 +1,740 @@
+/* General styles for the modal */
+
+/*
+Styles for the html/body for special modal where we want 3d effects
+Note that we need a container wrapping all content on the page for the
+perspective effects (not including the modals and the overlay).
+*/
+.md-perspective,
+.md-perspective body {
+ height: 100%;
+ overflow: hidden;
+}
+
+.md-perspective body {
+ background: #fff;
+ -webkit-perspective: 600px;
+ -moz-perspective: 600px;
+ perspective: 600px;
+}
+
+.container {
+ min-height: 100%;
+}
+
+.md-modal {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: 50%;
+ max-width: 551px;
+ min-width: 321px;
+ height: auto;
+ z-index: 9999999;
+ visibility: hidden;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ -moz-transform: translateX(-50%) translateY(-50%);
+ -ms-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+}
+
+.md-show {
+ visibility: visible;
+}
+
+.md-overlay {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ top: 0;
+ left: 0;
+ z-index: 9999995;
+ opacity: 0;
+ background: rgba(1,1,1,0.6);
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.md-show ~ .md-overlay {
+ opacity: 1;
+ visibility: visible;
+}
+
+/* Content styles */
+.md-content {
+ color: #5b5b5b;
+ background: #fff;
+ position: relative;
+ border-radius: 0px;
+ margin: 0 auto;
+}
+.md-content .md-close-btn {
+ position: absolute;
+ top: 10px;
+ right: 5px;
+ z-index: 999999;
+}
+.md-content .md-close-btn a{
+ color: #909090;
+ cursor: pointer;
+}
+.md-content .md-close-btn a:hover{
+ color: #212121;
+}
+.md-content .md-close {
+ font-size: 13px;
+}
+
+.md-content h3 {
+ font-size: 16px;
+ font-weight: 600;
+ margin: 0;
+ padding: 20px;
+ text-align: center;
+ background: #fff;
+ border-radius: 0;
+ color: #797979;
+}
+
+.md-content > div {
+ padding: 15px 40px 30px;
+ margin: 0;
+ font-weight: 300;
+ font-size: 14px;
+}
+
+.md-content > div p {
+ margin: 0;
+ padding: 10px 0;
+}
+
+.md-content > div ul {
+ margin: 0;
+ padding: 0 0 30px 20px;
+}
+
+.md-content > div ul li {
+ padding: 5px 0;
+}
+
+
+/* Individual modal styles with animations/transitions */
+
+/* Effect 1: Fade in and scale up */
+.md-effect-1 .md-content {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ opacity: 0;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+.md-show.md-effect-1 .md-content {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+}
+
+/* Effect 2: Slide from the right */
+.md-effect-2 .md-content {
+ -webkit-transform: translateX(20%);
+ -moz-transform: translateX(20%);
+ -ms-transform: translateX(20%);
+ transform: translateX(20%);
+ opacity: 0;
+ -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+ -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+ transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+}
+
+.md-show.md-effect-2 .md-content {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ opacity: 1;
+}
+
+/* Effect 3: Slide from the bottom */
+.md-effect-3 .md-content {
+ -webkit-transform: translateY(20%);
+ -moz-transform: translateY(20%);
+ -ms-transform: translateY(20%);
+ transform: translateY(20%);
+ opacity: 0;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.md-show.md-effect-3 .md-content {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+}
+
+/* Effect 4: Newspaper */
+.md-effect-4 .md-content {
+ -webkit-transform: scale(0) rotate(720deg);
+ -moz-transform: scale(0) rotate(720deg);
+ -ms-transform: scale(0) rotate(720deg);
+ transform: scale(0) rotate(720deg);
+ opacity: 0;
+}
+
+.md-show.md-effect-4 ~ .md-overlay,
+.md-effect-4 .md-content {
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ transition: all 0.5s;
+}
+
+.md-show.md-effect-4 .md-content {
+ -webkit-transform: scale(1) rotate(0deg);
+ -moz-transform: scale(1) rotate(0deg);
+ -ms-transform: scale(1) rotate(0deg);
+ transform: scale(1) rotate(0deg);
+ opacity: 1;
+}
+
+/* Effect 5: fall */
+.md-effect-5.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-5 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: translateZ(600px) rotateX(20deg);
+ -moz-transform: translateZ(600px) rotateX(20deg);
+ -ms-transform: translateZ(600px) rotateX(20deg);
+ transform: translateZ(600px) rotateX(20deg);
+ opacity: 0;
+}
+
+.md-show.md-effect-5 .md-content {
+ -webkit-transition: all 0.3s ease-in;
+ -moz-transition: all 0.3s ease-in;
+ transition: all 0.3s ease-in;
+ -webkit-transform: translateZ(0px) rotateX(0deg);
+ -moz-transform: translateZ(0px) rotateX(0deg);
+ -ms-transform: translateZ(0px) rotateX(0deg);
+ transform: translateZ(0px) rotateX(0deg);
+ opacity: 1;
+}
+
+/* Effect 6: side fall */
+.md-effect-6.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-6 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
+ -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
+ -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
+ transform: translate(30%) translateZ(600px) rotate(10deg);
+ opacity: 0;
+}
+
+.md-show.md-effect-6 .md-content {
+ -webkit-transition: all 0.3s ease-in;
+ -moz-transition: all 0.3s ease-in;
+ transition: all 0.3s ease-in;
+ -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
+ -moz-transform: translate(0%) translateZ(0) rotate(0deg);
+ -ms-transform: translate(0%) translateZ(0) rotate(0deg);
+ transform: translate(0%) translateZ(0) rotate(0deg);
+ opacity: 1;
+}
+
+/* Effect 7: slide and stick to top */
+.md-effect-7{
+ top: 0;
+ -webkit-transform: translateX(-50%);
+ -moz-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.md-effect-7 .md-content {
+ -webkit-transform: translateY(-200%);
+ -moz-transform: translateY(-200%);
+ -ms-transform: translateY(-200%);
+ transform: translateY(-200%);
+ -webkit-transition: all .3s;
+ -moz-transition: all .3s;
+ transition: all .3s;
+ opacity: 0;
+}
+
+.md-show.md-effect-7 .md-content {
+ -webkit-transform: translateY(0%);
+ -moz-transform: translateY(0%);
+ -ms-transform: translateY(0%);
+ transform: translateY(0%);
+ border-radius: 0 0 3px 3px;
+ opacity: 1;
+}
+
+/* Effect 8: 3D flip horizontal */
+.md-effect-8.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-8 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: rotateY(-70deg);
+ -moz-transform: rotateY(-70deg);
+ -ms-transform: rotateY(-70deg);
+ transform: rotateY(-70deg);
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+ opacity: 0;
+}
+
+.md-show.md-effect-8 .md-content {
+ -webkit-transform: rotateY(0deg);
+ -moz-transform: rotateY(0deg);
+ -ms-transform: rotateY(0deg);
+ transform: rotateY(0deg);
+ opacity: 1;
+}
+
+/* Effect 9: 3D flip vertical */
+.md-effect-9.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-9 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: rotateX(-70deg);
+ -moz-transform: rotateX(-70deg);
+ -ms-transform: rotateX(-70deg);
+ transform: rotateX(-70deg);
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+ opacity: 0;
+}
+
+.md-show.md-effect-9 .md-content {
+ -webkit-transform: rotateX(0deg);
+ -moz-transform: rotateX(0deg);
+ -ms-transform: rotateX(0deg);
+ transform: rotateX(0deg);
+ opacity: 1;
+}
+
+/* Effect 10: 3D sign */
+.md-effect-10.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-10 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: rotateX(-60deg);
+ -moz-transform: rotateX(-60deg);
+ -ms-transform: rotateX(-60deg);
+ transform: rotateX(-60deg);
+ -webkit-transform-origin: 50% 0;
+ -moz-transform-origin: 50% 0;
+ transform-origin: 50% 0;
+ opacity: 0;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.md-show.md-effect-10 .md-content {
+ -webkit-transform: rotateX(0deg);
+ -moz-transform: rotateX(0deg);
+ -ms-transform: rotateX(0deg);
+ transform: rotateX(0deg);
+ opacity: 1;
+}
+
+/* Effect 11: Super scaled */
+.md-effect-11 .md-content {
+ -webkit-transform: scale(2);
+ -moz-transform: scale(2);
+ -ms-transform: scale(2);
+ transform: scale(2);
+ opacity: 0;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.md-show.md-effect-11 .md-content {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+}
+
+/* Effect 12: Just me */
+.md-effect-12 .md-content {
+ -webkit-transform: scale(0.8);
+ -moz-transform: scale(0.8);
+ -ms-transform: scale(0.8);
+ transform: scale(0.8);
+ opacity: 0;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.md-show.md-effect-12 ~ .md-overlay {
+ background: rgba(255,255,255,1);
+}
+
+.md-effect-12 .md-content h3,
+.md-effect-12 .md-content {
+ background: transparent;
+}
+
+.md-show.md-effect-12 .md-content {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+}
+
+/* Effect 13: 3D slit */
+.md-effect-13.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-13 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: translateZ(-3000px) rotateY(90deg);
+ -moz-transform: translateZ(-3000px) rotateY(90deg);
+ -ms-transform: translateZ(-3000px) rotateY(90deg);
+ transform: translateZ(-3000px) rotateY(90deg);
+ opacity: 0;
+}
+
+.md-show.md-effect-13 .md-content {
+ -webkit-animation: slit .7s forwards ease-out;
+ -moz-animation: slit .7s forwards ease-out;
+ animation: slit .7s forwards ease-out;
+}
+
+@-webkit-keyframes slit {
+ 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
+ 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
+}
+
+@-moz-keyframes slit {
+ 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
+ 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
+}
+
+@keyframes slit {
+ 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
+ 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
+}
+
+/* Effect 14: 3D Rotate from bottom */
+.md-effect-14.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-14 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: translateY(100%) rotateX(90deg);
+ -moz-transform: translateY(100%) rotateX(90deg);
+ -ms-transform: translateY(100%) rotateX(90deg);
+ transform: translateY(100%) rotateX(90deg);
+ -webkit-transform-origin: 0 100%;
+ -moz-transform-origin: 0 100%;
+ transform-origin: 0 100%;
+ opacity: 0;
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+}
+
+.md-show.md-effect-14 .md-content {
+ -webkit-transform: translateY(0%) rotateX(0deg);
+ -moz-transform: translateY(0%) rotateX(0deg);
+ -ms-transform: translateY(0%) rotateX(0deg);
+ transform: translateY(0%) rotateX(0deg);
+ opacity: 1;
+}
+
+/* Effect 15: 3D Rotate in from left */
+.md-effect-15.md-modal {
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.md-effect-15 .md-content {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+ -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+ -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+ transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+ -webkit-transform-origin: 0 100%;
+ -moz-transform-origin: 0 100%;
+ transform-origin: 0 100%;
+ opacity: 0;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.md-show.md-effect-15 .md-content {
+ -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+ -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+ -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+ transform: translateZ(0px) translateX(0%) rotateY(0deg);
+ opacity: 1;
+}
+
+/* Effect 16: Blur */
+.md-show.md-effect-16 ~ .md-overlay {
+ background: rgba(1,1,1,0.6);
+}
+
+.md-show.md-effect-16 ~ .container {
+ -webkit-filter: blur(3px);
+ -moz-filter: blur(3px);
+ filter: blur(3px);
+}
+
+.md-effect-16 .md-content {
+ -webkit-transform: translateY(-5%);
+ -moz-transform: translateY(-5%);
+ -ms-transform: translateY(-5%);
+ transform: translateY(-5%);
+ opacity: 0;
+}
+
+.md-show.md-effect-16 ~ .container,
+.md-effect-16 .md-content {
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.md-show.md-effect-16 .md-content {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+}
+
+/* Effect 17: Slide in from bottom with perspective on container */
+.md-show.md-effect-17 ~ .container {
+ height: 100%;
+ overflow: hidden;
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ transition: transform 0.3s;
+}
+
+.md-show.md-effect-17 ~ .container,
+.md-show.md-effect-17 ~ .md-overlay {
+ -webkit-transform: rotateX(-2deg);
+ -moz-transform: rotateX(-2deg);
+ -ms-transform: rotateX(-2deg);
+ transform: rotateX(-2deg);
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+}
+
+.md-effect-17 .md-content {
+ opacity: 0;
+ -webkit-transform: translateY(200%);
+ -moz-transform: translateY(200%);
+ -ms-transform: translateY(200%);
+ transform: translateY(200%);
+}
+
+.md-show.md-effect-17 .md-content {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+ -webkit-transition: all 0.3s 0.2s;
+ -moz-transition: all 0.3s 0.2s;
+ transition: all 0.3s 0.2s;
+}
+
+/* Effect 18: Slide from right with perspective on container */
+.md-show.md-effect-18 ~ .container {
+ height: 100%;
+ overflow: hidden;
+}
+
+.md-show.md-effect-18 ~ .md-overlay {
+ background: rgba(1,1,1,0.6);
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ transition: all 0.5s;
+}
+
+.md-show.md-effect-18 ~ .container,
+.md-show.md-effect-18 ~ .md-overlay {
+ -webkit-transform-style: preserve-3d;
+ -webkit-transform-origin: 0% 50%;
+ -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
+ -moz-transform-style: preserve-3d;
+ -moz-transform-origin: 0% 50%;
+ -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
+ transform-style: preserve-3d;
+ transform-origin: 0% 50%;
+ animation: rotateRightSideFirst 0.5s forwards ease-in;
+}
+
+@-webkit-keyframes rotateRightSideFirst {
+ 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
+ 100% { -webkit-transform: translateZ(-200px); }
+}
+
+@-moz-keyframes rotateRightSideFirst {
+ 50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
+ 100% { -moz-transform: translateZ(-200px); }
+}
+
+@keyframes rotateRightSideFirst {
+ 50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
+ 100% { transform: translateZ(-200px); }
+}
+
+.md-effect-18 .md-content {
+ -webkit-transform: translateX(200%);
+ -moz-transform: translateX(200%);
+ -ms-transform: translateX(200%);
+ transform: translateX(200%);
+ opacity: 0;
+}
+
+.md-show.md-effect-18 .md-content {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ opacity: 1;
+ -webkit-transition: all 0.5s 0.1s;
+ -moz-transition: all 0.5s 0.1s;
+ transition: all 0.5s 0.1s;
+}
+
+/* Effect 19: Slip in from the top with perspective on container */
+.md-show.md-effect-19 ~ .container {
+ height: 100%;
+ overflow: hidden;
+}
+
+.md-show.md-effect-19 ~ .md-overlay {
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ transition: all 0.5s;
+}
+
+.md-show.md-effect-19 ~ .container,
+.md-show.md-effect-19 ~ .md-overlay {
+ -webkit-transform-style: preserve-3d;
+ -webkit-transform-origin: 50% 100%;
+ -webkit-animation: OpenTop 0.5s forwards ease-in;
+ -moz-transform-style: preserve-3d;
+ -moz-transform-origin: 50% 100%;
+ -moz-animation: OpenTop 0.5s forwards ease-in;
+ transform-style: preserve-3d;
+ transform-origin: 50% 100%;
+ animation: OpenTop 0.5s forwards ease-in;
+}
+
+@-webkit-keyframes OpenTop {
+ 50% {
+ -webkit-transform: rotateX(10deg);
+ -webkit-animation-timing-function: ease-out;
+ }
+}
+
+@-moz-keyframes OpenTop {
+ 50% {
+ -moz-transform: rotateX(10deg);
+ -moz-animation-timing-function: ease-out;
+ }
+}
+
+@keyframes OpenTop {
+ 50% {
+ transform: rotateX(10deg);
+ animation-timing-function: ease-out;
+ }
+}
+
+.md-effect-19 .md-content {
+ -webkit-transform: translateY(-200%);
+ -moz-transform: translateY(-200%);
+ -ms-transform: translateY(-200%);
+ transform: translateY(-200%);
+ opacity: 0;
+}
+
+.md-show.md-effect-19 .md-content {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+ -webkit-transition: all 0.5s 0.1s;
+ -moz-transition: all 0.5s 0.1s;
+ transition: all 0.5s 0.1s;
+}
+
+@media screen and (max-width: 32em) {
+ body { font-size: 75%; }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/webuploade/js/classie.js b/src/main/resources/static/webuploade/js/classie.js
new file mode 100644
index 0000000..a967554
--- /dev/null
+++ b/src/main/resources/static/webuploade/js/classie.js
@@ -0,0 +1,80 @@
+/*!
+ * classie - class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ *
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true */
+/*global define: false */
+
+( function( window ) {
+
+'use strict';
+
+// class helper functions from bonzo https://github.com/ded/bonzo
+
+function classReg( className ) {
+ return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+}
+
+// classList support for class management
+// altho to be fair, the api sucks because it won't accept multiple classes at once
+var hasClass, addClass, removeClass;
+
+if ( 'classList' in document.documentElement ) {
+ hasClass = function( elem, c ) {
+ return elem.classList.contains( c );
+ };
+ addClass = function( elem, c ) {
+ elem.classList.add( c );
+ };
+ removeClass = function( elem, c ) {
+ elem.classList.remove( c );
+ };
+}
+else {
+ hasClass = function( elem, c ) {
+ return classReg( c ).test( elem.className );
+ };
+ addClass = function( elem, c ) {
+ if ( !hasClass( elem, c ) ) {
+ elem.className = elem.className + ' ' + c;
+ }
+ };
+ removeClass = function( elem, c ) {
+ elem.className = elem.className.replace( classReg( c ), ' ' );
+ };
+}
+
+function toggleClass( elem, c ) {
+ var fn = hasClass( elem, c ) ? removeClass : addClass;
+ fn( elem, c );
+}
+
+var classie = {
+ // full names
+ hasClass: hasClass,
+ addClass: addClass,
+ removeClass: removeClass,
+ toggleClass: toggleClass,
+ // short names
+ has: hasClass,
+ add: addClass,
+ remove: removeClass,
+ toggle: toggleClass
+};
+
+// transport
+if ( typeof define === 'function' && define.amd ) {
+ // AMD
+ define( classie );
+} else {
+ // browser global
+ window.classie = classie;
+}
+
+})( window );
diff --git a/src/main/resources/static/webuploade/js/modalEffects.js b/src/main/resources/static/webuploade/js/modalEffects.js
new file mode 100644
index 0000000..795eddd
--- /dev/null
+++ b/src/main/resources/static/webuploade/js/modalEffects.js
@@ -0,0 +1,48 @@
+
+var ModalEffects = (function() {
+
+ function init() {
+
+ var overlay = document.querySelector( '.md-overlay' );
+
+ [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
+
+ var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
+ close = modal.querySelector( '.md-close' );
+
+ function removeModal( hasPerspective ) {
+ classie.remove( modal, 'md-show' );
+
+ if( hasPerspective ) {
+ classie.remove( document.documentElement, 'md-perspective' );
+ }
+ }
+
+ function removeModalHandler() {
+ removeModal( classie.has( el, 'md-setperspective' ) );
+ }
+
+ el.addEventListener( 'click', function( ev ) {
+ classie.add( modal, 'md-show' );
+ overlay.removeEventListener( 'click', removeModalHandler );
+ overlay.addEventListener( 'click', removeModalHandler );
+
+ if( classie.has( el, 'md-setperspective' ) ) {
+ setTimeout( function() {
+ classie.add( document.documentElement, 'md-perspective' );
+ }, 25 );
+ }
+ });
+
+ // close.addEventListener( 'click', function( ev ) {
+ // ev.stopPropagation();
+ // removeModalHandler();
+ // });
+
+ } );
+
+ }
+
+ init();
+
+})();
\ No newline at end of file