+
+
+
-
-
-
Rahal's Shop
-
-
-
-
+
+
+
Rahal's Shop
+
+
+
+
diff --git a/FrontEnd/public_profile.html b/FrontEnd/public_profile.html
new file mode 100644
index 0000000..cb88a08
--- /dev/null
+++ b/FrontEnd/public_profile.html
@@ -0,0 +1,100 @@
+
+
+
+
+
SitnShop
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Rahal's Shop
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontEnd/scriptes.js b/FrontEnd/scriptes.js
index 3177a47..bf6ac80 100644
--- a/FrontEnd/scriptes.js
+++ b/FrontEnd/scriptes.js
@@ -1,19 +1,41 @@
-function readURL(input)
-{
- if (input.files && input.files[0])
- {
- var reader = new FileReader();
-
- reader.onload = function (e)
- {
- $('#Uimage').attr('src', e.target.result).width(250).show();
- $('#drop').hide();
- $('#or').hide();
- $('#image_icon').hide();
- $('#cancel').show();
- $('#browse').hide();
- };
-
- reader.readAsDataURL(input.files[0]);
- }
+// import "zuck.js/zuck.js";
+// import Zuck from 'zuck';
+function readURL(input)
+{
+ if (input.files && input.files[0])
+ {
+ var reader = new FileReader();
+
+ reader.onload = function (e)
+ {
+ $('#Uimage').attr('src', e.target.result).width(250).show();
+ $('#drop').hide();
+ $('#or').hide();
+ $('#image_icon').hide();
+ $('#cancel').show();
+ $('#browse').hide();
+ };
+
+ reader.readAsDataURL(input.files[0]);
+ }
+}
+
+/* Open */
+function openNav() {
+ document.getElementById("myNav").style.height = "100%";
+}
+
+/* Close */
+function closeNav() {
+ document.getElementById("myNav").style.height = "0%";
+}
+
+function openStatus() {
+ document.getElementById("status").style.height = "100%";
+ document.getElementById("progressBar").style.width = "100%";
+}
+
+/* Close */
+function closeStatus() {
+ document.getElementById("status").style.height = "0%";
}
\ No newline at end of file
diff --git a/FrontEnd/skins/facesnap.css b/FrontEnd/skins/facesnap.css
new file mode 100644
index 0000000..fcdd69a
--- /dev/null
+++ b/FrontEnd/skins/facesnap.css
@@ -0,0 +1,6 @@
+.stories.facesnap .story > a {text-decoration:none;color:#333}
+.stories.facesnap .story > a > .img {border-radius:50%;padding:2px;background:#3B5998;}
+.stories.facesnap .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.facesnap .story.seen{opacity:.5}
+.stories.facesnap .story.seen > a > .img {background:#999}
diff --git a/FrontEnd/skins/facesnap.min.css b/FrontEnd/skins/facesnap.min.css
new file mode 100644
index 0000000..f6b9681
--- /dev/null
+++ b/FrontEnd/skins/facesnap.min.css
@@ -0,0 +1 @@
+.stories.facesnap .story>a{text-decoration:none;color:#333}.stories.facesnap .story>a>.img{border-radius:50%;padding:2px;background:#3B5998}.stories.facesnap .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.facesnap .story.seen{opacity:.5}.stories.facesnap .story.seen>a>.img{background:#999}
diff --git a/FrontEnd/skins/snapgram.css b/FrontEnd/skins/snapgram.css
new file mode 100644
index 0000000..7c7f1e9
--- /dev/null
+++ b/FrontEnd/skins/snapgram.css
@@ -0,0 +1,7 @@
+.stories.snapgram .story > a {text-decoration:none;color:#333}
+.stories.snapgram .story > a > .img {border-radius:50%;padding:2px;background:radial-gradient(ellipse at 70% 70%,#ee583f 8%,#d92d77 42%,#bd3381 58%);}
+.stories.snapgram .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.snapgram .story.seen{opacity:.75}
+.stories.snapgram .story.seen > a > .img {background:#999}
+.stories.snapgram .story.seen > a{color:#999!important}
diff --git a/FrontEnd/skins/snapgram.min.css b/FrontEnd/skins/snapgram.min.css
new file mode 100644
index 0000000..2b6dea9
--- /dev/null
+++ b/FrontEnd/skins/snapgram.min.css
@@ -0,0 +1 @@
+.stories.snapgram .story>a{text-decoration:none;color:#333}.stories.snapgram .story>a>.img{border-radius:50%;padding:2px;background:radial-gradient(ellipse at 70% 70%,#ee583f 8%,#d92d77 42%,#bd3381 58%)}.stories.snapgram .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.snapgram .story.seen{opacity:.75}.stories.snapgram .story.seen>a>.img{background:#999}.stories.snapgram .story.seen>a{color:#999!important}
diff --git a/FrontEnd/skins/snapssenger.css b/FrontEnd/skins/snapssenger.css
new file mode 100644
index 0000000..7379db9
--- /dev/null
+++ b/FrontEnd/skins/snapssenger.css
@@ -0,0 +1,17 @@
+.stories.snapssenger.list .story > a {text-decoration:none;color:#333}
+.stories.snapssenger.list .story > a > .img {border-radius:50%;padding:2px;background:#0084FF;}
+.stories.snapssenger.list .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.snapssenger.list .story.seen{opacity:.75}
+.stories.snapssenger.list .story.seen > a > span{background:#999;color:#999}
+.stories.snapssenger.list .story.seen > a{color:#999!important}
+
+.stories.snapssenger.carousel .story {max-height: 100px;max-width: 100px;width: 25vw;}
+.stories.snapssenger.carousel .story > a {text-decoration:none;text-align: left; color:#fff;position: relative;max-height: 100px;}
+.stories.snapssenger.carousel .story > a > .img {height: 18vh;}
+.stories.snapssenger.carousel .story > a > .img > * {border-radius: 5px;position: absolute;}
+.stories.snapssenger.carousel .story > a > .info {top: auto;height: auto;box-sizing: border-box;position: absolute;left:0;right:0;bottom:0;padding:6px;font-weight: 700;font-size:12px;text-shadow:1px 1px 1px rgba(0,0,0,0.35), 1px 0 1px rgba(0,0,0,0.35);}
+.stories.snapssenger.carousel .story > a > .info strong {font-weight: 500;}
+.stories.snapssenger.carousel .story > a > .info .time {display: block;font-weight: 100;font-size:11px;}
+
+.stories.snapssenger .story.seen {opacity:0.5}
diff --git a/FrontEnd/skins/snapssenger.min.css b/FrontEnd/skins/snapssenger.min.css
new file mode 100644
index 0000000..1b62020
--- /dev/null
+++ b/FrontEnd/skins/snapssenger.min.css
@@ -0,0 +1 @@
+.stories.snapssenger.list .story>a{text-decoration:none;color:#333}.stories.snapssenger.list .story>a>.img{border-radius:50%;padding:2px;background:#0084FF}.stories.snapssenger.list .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.snapssenger.list .story.seen{opacity:.75}.stories.snapssenger.list .story.seen>a>span{background:#999;color:#999}.stories.snapssenger.list .story.seen>a{color:#999!important}.stories.snapssenger.carousel .story{max-height:100px;max-width:100px;width:25vw}.stories.snapssenger.carousel .story>a{text-decoration:none;text-align:left;color:#fff;position:relative;max-height:100px}.stories.snapssenger.carousel .story>a>.img{height:18vh}.stories.snapssenger.carousel .story>a>.img>*{border-radius:5px;position:absolute}.stories.snapssenger.carousel .story>a>.info{top:auto;height:auto;box-sizing:border-box;position:absolute;left:0;right:0;bottom:0;padding:6px;font-weight:700;font-size:12px;text-shadow:1px 1px 1px rgba(0,0,0,.35),1px 0 1px rgba(0,0,0,.35)}.stories.snapssenger.carousel .story>a>.info strong{font-weight:500}.stories.snapssenger.carousel .story>a>.info .time{display:block;font-weight:100;font-size:11px}.stories.snapssenger .story.seen{opacity:.5}
diff --git a/FrontEnd/skins/vemdezap.css b/FrontEnd/skins/vemdezap.css
new file mode 100644
index 0000000..28bd10b
--- /dev/null
+++ b/FrontEnd/skins/vemdezap.css
@@ -0,0 +1,20 @@
+/*
+ https://www.buzzfeed.com/rafaelcapanema/vem-de-zap?utm_term=.xs0yjRxwk#.wmQ3NQrlp
+
+ Aliexpress? 🇨🇳🇨🇳 vem de avião✈️✈️
+ Sedex?📦📦 vem de van 🚐
+ Pizza?🍕🍕 vem de moto 🚷🏍
+ E vc meu bb? 😉😉 VEM DE ZAP 😜😘👌👌
+*/
+
+.stories.vemdezap .story > a {text-decoration:none;color:#333}
+.stories.vemdezap .story > a > .img {border-radius:50%;padding:2px;background:#00bfa5;}
+.stories.vemdezap .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.list.vemdezap .story{border-bottom:1px solid #eee;}
+.stories.list.vemdezap .story:last-child{border-bottom:0;}
+.stories.list.vemdezap .story > a > .info .time {display: inline-block;color:#999;}
+
+.stories.vemdezap .story.seem > img {opacity:.75}
+.stories.vemdezap .story.seem > a > .img {background:#999}
+.stories.vemdezap .story.seem > a{color:#999!important}
diff --git a/FrontEnd/skins/vemdezap.min.css b/FrontEnd/skins/vemdezap.min.css
new file mode 100644
index 0000000..ab19c57
--- /dev/null
+++ b/FrontEnd/skins/vemdezap.min.css
@@ -0,0 +1 @@
+.stories.vemdezap .story>a{text-decoration:none;color:#333}.stories.vemdezap .story>a>.img{border-radius:50%;padding:2px;background:#00bfa5}.stories.vemdezap .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.list.vemdezap .story{border-bottom:1px solid #eee}.stories.list.vemdezap .story:last-child{border-bottom:0}.stories.list.vemdezap .story>a>.info .time{display:inline-block;color:#999}.stories.vemdezap .story.seem>img{opacity:.75}.stories.vemdezap .story.seem>a>.img{background:#999}.stories.vemdezap .story.seem>a{color:#999!important}
diff --git a/FrontEnd/styles.css b/FrontEnd/styles.css
index fd29b85..9990bf2 100644
--- a/FrontEnd/styles.css
+++ b/FrontEnd/styles.css
@@ -11,7 +11,7 @@ div.content
background-color: rgb(255,255,255);
padding : 10px 30px 10px 30px;
margin: auto;
- margin-top: 100px;
+ margin-top: 50px;
border-radius: 10px;
border-color: rgb(220,220,220);
border-style: solid;
@@ -41,7 +41,7 @@ hr
/* image */
-img.avatar
+img.avatar /* icons of the shops in posts */
{
width: 70px;
height: 70px;
@@ -49,17 +49,17 @@ img.avatar
display: inline;
float : left;
}
-img.icon
+img.icon /*websites icon*/
{
width: 15px;
height: 15px;
border-radius: 50%;
border : solid;
- border-width: 2px;
+ border-width: 0px;
display: inline;
float : left;
}
-img.icon2
+img.icon2 /* navbar profile icon*/
{
width: 25px;
height: 25px;
@@ -67,6 +67,21 @@ img.icon2
display: inline;
float : left;
}
+img.status /*status images*/
+{
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: solid;
+ border-color: rgb(220,220,220);
+ display: inline-block;
+ margin: auto;
+ margin-top: 20px;
+ margin-bottom: 6px;
+ margin-left: 20px;
+ margin-right: 20px;
+ padding: 1px;
+}
img.post
{
width :90%;
@@ -78,7 +93,7 @@ img.post
/* Text */
-h1 /*shop name font*/
+h1 /*shop name font in posts*/
{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
@@ -98,8 +113,85 @@ h1:hover
cursor: pointer;
text-decoration: underline;
}
+h1.profile /* shope owner's profile text*/
+{
+ font-family: 'Open Sans', sans-serif;
+ color:rgb(72,72,72);
+ text-align: left;
+ margin-top: 25px;
+ display: inline-block;
+
+ margin-left: 200px;
+ margin-bottom: 0px;
+ font-weight: 800;
+ font-size: 30px;
+}
+h1.profile:hover
+{
+ text-decoration: none;
+}
+h1.aboutHead
+{
+ font-family: 'Open Sans', sans-serif;
+ color:rgb(72,72,72);
+ text-align: left;
+ margin-top: 10px;
+ margin-left: 30px;
+ margin-bottom: 10px;
+ font-weight: 400;
+ font-size: 16px;
+ display: block;
+}
+h1.aboutHead:hover
+{
+ color:rgb(72,72,72);
+ cursor: pointer;
+ text-decoration: none;
+}
+h1.aboutDetails
+{
+ font-family: 'Open Sans', sans-serif;
+ color:rgb(72,72,72);
+ text-align: left;
+ margin-left: 30px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-weight: 400;
+ font-size: 13px;
+ display: block;
+}
+h1.aboutDetails:hover
+{
+ color:rgb(72,72,72);
+ cursor: pointer;
+ text-decoration: none;
+}
+h1.aboutDetailsLink
+{
+ font-family: 'Open Sans', sans-serif;
+ color:rgb(72,72,72);
+ text-align: left;
+ margin-left: 30px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-weight: 400;
+ font-size: 13px;
+ display: block;
+ overflow: hidden;
+}
+h1.aboutDetailsLink:hover
+{
+ color:rgb(72,72,72);
+ cursor: pointer;
+ text-decoration: underline;
+}
+i.about
+{
+ margin-right: 5px;
+}
h4 /* address of the shop */
{
+ display: inline-block;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 13px;
@@ -109,7 +201,27 @@ h4 /* address of the shop */
margin-top: 0px;
font-weight: 400;
margin-left: 10px;
- display: inline-block;
+}
+h4.followers
+{
+ margin-top: 0px;
+ margin-left: 200px;
+}
+h4.statusName
+{
+ display: block;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 400;
+ font-size: 13px;
+ font-style: lighter;
+ color:rgb(72,72,72);
+ text-align: left;
+ margin-top: 5px;
+ margin-left: 10px;
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
h5 /* follow */
{
@@ -120,7 +232,6 @@ h5 /* follow */
color:rgb(72,72,72);
text-align: left;
margin-top: 0px;
- font-weight: 400;
margin-left: 2px;
display: inline-block;
float: right;
@@ -230,6 +341,282 @@ div.navbar
background-color: rgb(245,245,245);
}
+/* Contact Overlay */
+.ContactOverlay
+{
+ /* Height & width depends on how you want to reveal the overlay (see JS below) */
+ height: 0%;
+ width: 100%;
+ position: fixed; /* Stay in place */
+ z-index: 100; /* Sit on top */
+ left: 0;
+ top: 0;
+ background-color: rgb(0,0,0); /* Black fallback color */
+ background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
+ overflow-x: hidden; /* Disable horizontal scroll */
+ transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
+}
+
+/* Position the content inside the overlay */
+.ContactOverlay-content {
+ position: relative;
+ top: 5%; /* 25% from the top */
+ width: 100%; /* 100% width */
+ text-align: center; /* Centered text/links */
+ margin-top: 10px; /* 30px top margin to avoid conflict with the close button on smaller screens */
+}
+
+/* The navigation links inside the overlay */
+.ContactOverlay a {
+ padding: 8px;
+ text-decoration: none;
+ font-size: 36px;
+ color: #818181;
+ display: block; /* Display block instead of inline */
+ transition: 0.3s; /* Transition effects on hover (color) */
+}
+
+/* When you mouse over the navigation links, change their color */
+.ContactOverlay a:hover, .ContactOverlay a:focus {
+ color: #f1f1f1;
+}
+
+/* Position the close button (top right corner) */
+.ContactOverlay .closebtn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 30px;
+}
+
+/*contact section */
+.ContactContainer {
+ max-width: 1000px;
+ margin: auto;
+ border-radius: 5px;
+ background-color: #f2f2f2;
+ padding: 10px;
+}
+
+/* Create two columns that float next to eachother */
+.ContactColumn {
+ float: left;
+ width: 50%;
+ margin-top: 6px;
+ padding: 20px;
+ text-align: left;
+}
+
+/* Clear floats after the columns */
+.ContactRow:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+*{
+ box-sizing: border-box;
+}
+
+.ContactColumn input[type=text], select, textarea {
+ width: 100%;
+ padding: 12px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin-top: 6px;
+ margin-bottom: 16px;
+ resize: vertical;
+}
+
+.ContactColumn input[type=submit] {
+ background-color: #4CAF50;
+ color: white;
+ padding: 12px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.ContactColumn input[type=submit]:hover {
+ background-color: #45a049;
+}
+
+/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+ .ContactColumn, input[type=submit] {
+ width: 100%;
+ margin-top: 0;
+ }
+}
+/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
+/*@media screen and (max-height: 450px) {
+ .overlay a {font-size: 20px}
+ .overlay .closebtn {
+ font-size: 40px;
+ top: 15px;
+ right: 35px;
+ }
+}*/
+/* Status Bar */
+
+div.statusbar
+{
+ display: flex;
+ flex-wrap: nowrap;
+ max-width: 760px;
+ background-color: rgb(255,255,255);
+ overflow: auto;
+ white-space: nowrap;
+
+ z-index: 100;
+ margin: auto;
+ margin-top: 40px;
+ border-radius: 10px;
+ border-color: rgb(220,220,220);
+ border-style: solid;
+ border-width: 1px;
+}
+div.statusbar > div
+{
+ width: 100px;
+
+}
+img.statusDp /* icons of the shops in posts */
+{
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ display: inline;
+ margin-left:10px;
+ margin-top:10px;
+}
+
+.StatusOverlay
+{
+ /* Height & width depends on how you want to reveal the overlay (see JS below) */
+ height: 0%;
+ width: 100%;
+ position: fixed; /* Stay in place */
+ z-index: 100; /* Sit on top */
+ left: 0;
+ top: 0;
+ background-color: rgb(0,0,0); /* Black fallback color */
+ background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
+ overflow-x: hidden; /* Disable horizontal scroll */
+ transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
+}
+
+/* Position the content inside the overlay */
+.StatusOverlay-content {
+ position: relative;
+ top: 5%; /* 25% from the top */
+ width: 100%; /* 100% width */
+ text-align: center; /* Centered text/links */
+ margin-top: 10px; /* 30px top margin to avoid conflict with the close button on smaller screens */
+}
+
+/* The navigation links inside the overlay */
+.StatusOverlay a {
+ padding: 8px;
+ text-decoration: none;
+ font-size: 36px;
+ color: #818181;
+ display: block; /* Display block instead of inline */
+ transition: 0.3s; /* Transition effects on hover (color) */
+}
+
+/* When you mouse over the navigation links, change their color */
+.StatusOverlay a:hover, .StatusOverlay a:focus {
+ color: #f1f1f1;
+}
+
+/* Position the close button (top right corner) */
+.StatusOverlay .closebtn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 30px;
+}
+div.status
+{
+ max-width: 300px;
+ height:80vh;
+ background-color: rgb(255,255,255);
+ margin: auto;
+ border-color: rgb(220,220,220);
+ border-style: solid;
+ border-width: 1px;
+ text-align: left;
+}
+.StatusPostOverlay {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ width: 100%;
+ opacity: 0;
+ transition: .3s ease;
+}
+
+div.status:hover .StatusPostOverlay {
+ opacity: 1;
+}
+
+.StatusChangeIconRight {
+ color: white;
+ font-size: 20px;
+ position: absolute;
+ top: 50%;
+ left: 95%;
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ text-align: center;
+ z-index: 101;
+}
+.StatusChangeIconLeft {
+ color: white;
+ font-size: 20px;
+ position: absolute;
+ top: 50%;
+ left: 5%;
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ text-align: center;
+ z-index: 101;
+}
+.StatusProgressBar
+{
+ background-color:rgb(72,72,72);
+ color: rgb(72,72,72);
+ width:0%;display: block;height: 2px;
+ margin-top: 5px;
+ -webkit-transition: all 2s linear;
+ -moz-transition: all 2s linear;
+ -o-transition: all 2s linear;
+ -ms-transition: all 2s linear;
+ transition: all 2s linear;
+}
+img.statusPost
+{
+ width :100%;
+ display: block;
+ margin: auto;
+ margin-bottom: 10px;
+}
+h1.status /*shop name font in posts*/
+{
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 400;
+ font-size: 15px;
+ font-style: lighter;
+ color:rgb(72,72,72);
+ text-align: left;
+ margin-top: 0px;
+ margin-left: 10px;
+ display: inline-block;
+}
+
/* links */
a
{
@@ -263,6 +650,14 @@ a.follow:hover
{
color: rgb(152,152,152);
}
+a.followProfile
+{
+ float: right;
+ color: rgb(72,72,72);
+ font-size: 14px;
+ margin-top: 40px;
+ margin-right: 40px;
+}
/* login */
@@ -278,7 +673,7 @@ div.login input[type=text],input[type="password"]
margin-bottom: 6px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
- font-size: 17px;
+ font-size: 15px;
font-style: lighter;
color:rgb(72,72,72);/*rgba(255,255,255,0.8)*/
background-color: rgb(232,232,232);
@@ -286,10 +681,9 @@ div.login input[type=text],input[type="password"]
div.login input[type=submit]
{
- width: 65%;
+ width: 63%;
padding: 6px;
border-radius: 10px;
- border-color: rgb(72,72,72);
border-style: solid;
margin-top: 15px;
margin-bottom: 6px;
@@ -298,13 +692,14 @@ div.login input[type=submit]
font-size: 17px;
font-style: lighter;
color:rgb(248,248,248);/*rgba(255,255,255,0.8)*/
- background-color: rgb(72,72,72);
+ background-color: #4CAF50; /* rgb (96,96,96) */
+ border-color: #4CAF50;
}
div.login input[type=submit]:hover
{
- background-color: rgb(96,96,96);
- border-color: rgb(96,96,96);
+ background-color: #45a049; /* rgb (96,96,96) */
+ border-color: #45a049;
}
@@ -345,7 +740,7 @@ input[type="text"], input[type="password"], textarea, select
}
.Neon-input-dragDrop {
display: block;
- width: 343px;
+ max-width: 343px;
margin: 0 auto 25px auto;
padding: 25px;
color: #8d9499;
@@ -396,6 +791,186 @@ input[type="text"], input[type="password"], textarea, select
transition: all 0.2s;
}
+/* profile overlay */
+
+div.cover {
+ top: 0;
+ left: 0;
+ position: relative;
+
+ max-width: 47.5em; /*760px*/
+ background-color: rgb(255,255,255);
+ padding : 0px 0px 10px 0px;
+ margin: auto;
+ margin-top: 50px;
+ border-radius: 10px;
+ border-color: rgb(220,220,220);
+ border-style: solid;
+ border-width: 1px;
+}
+.image1{
+ width: 100%;
+ position: relative;
+ height: auto;
+}
+.image2 {
+ position: absolute;
+ max-width: 9.375em; /* 150, 150 */
+ max-height: 9.375em;
+ top: 20px;
+ left: 20px;
+ z-index: 1;
+ border : solid;
+ border-color: white;
+}
+
+.CoverContainer {
+ position: relative;
+ width: 100%;
+}
+
+.CoverImage {
+ display: block;
+ width: 100%;
+ height: auto;
+}
+
+.CoverOverlay {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ width: 100%;
+ opacity: 0;
+ transition: .3s ease;
+}
+
+.CoverContainer:hover .CoverOverlay {
+ opacity: 1;
+}
+
+.CoverEditIcon {
+ color: white;
+ font-size: 20px;
+ position: absolute;
+ top: 90%;
+ left: 95%;
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ text-align: center;
+}
+
+.dpContainer {
+ position: absolute;
+ max-width: 150px;
+ max-height: 150px;
+ top: 20px;
+ left: 20px;
+ z-index: 1;
+ border : solid;
+ border-color: white;
+}
+
+.dpImage {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.dpOverlay {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ width: 100%;
+ opacity: 0;
+ transition: .3s ease;
+}
+
+.dpContainer:hover .dpOverlay {
+ opacity: 1;
+}
+
+.dpEditIcon {
+ color: white;
+ font-size: 15px;
+ position: absolute;
+ top: 90%;
+ left: 90%;
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ text-align: center;
+}
+
+/* Toggle button */
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 35px;
+ height: 20px;
+ float: right;
+ margin-right: 10px;
+ margin-top: 40px;
+}
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 15px;
+ width: 15px;
+ left: 4px;
+ bottom: 3px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #00C000; /* #00C000 #2196F3 */
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(12px);
+ -ms-transform: translateX(12px);
+ transform: translateX(12px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 720px)
{
@@ -413,8 +988,116 @@ input[type="text"], input[type="password"], textarea, select
{
width: 100px;
}
- .Neon-input-dragDrop
+
+ .image2
+ {
+ width: 100px;
+ height: 100px;
+ left:50%;
+ z-index: 1;
+ }
+ .dpContainer {
+ width: 100px;
+ height: 100px;
+ top: 20px;
+ left: 20px;
+ }
+
+
+ h1.profile
+ {
+ margin-left: 140px;
+ font-size: 20px;
+ }
+ h4.followers
+ {
+ margin-left: 140px;
+ }
+
+ a.followProfile
+ {
+ margin-top: 30px;
+ margin-right: 20px;
+ }
+
+ .switch
+ {
+ margin-top: 30px;
+ }
+}
+
+@media screen and (max-width: 415px)
+{
+
+ div.content
+ {
+ padding:0px;
+ }
+ h1
+ {
+ font-size: 15px;
+ margin-top: 20px;
+ }
+ h4
+ {
+ font-size: 12px;
+ }
+ h1.profile /* shope owner's profile text*/
+ {
+ margin-top: 10px;
+ margin-left: 100px;
+ font-size: 15px;
+ }
+ h4.followers /* shop owner's profile number of followers text */
+ {
+ margin-left: 100px;
+ font-size: 10px;
+ }
+ h5
+ {
+ padding-right: 10px;
+ }
+
+ i.heart
+ {
+ margin-right: 10px;
+ }
+ .dpContainer {
+ width: 70px;
+ height: 70px;
+ top: 10px;
+ left: 10px;
+ }
+ .navbar input[type=text]
{
- width: 300px;
+ width: 50px;
}
-}
\ No newline at end of file
+ ::-webkit-scrollbar
+ {
+ display: none;
+ }
+
+ .navbar .search-container button
+ {
+ margin-right: 5px;
+ }
+
+ .navbar a
+ {
+ padding: 10px;
+ }
+
+ img.avatar /* icons of the shops in posts */
+ {
+ width: 50px;
+ height: 50px;
+ margin-left: 10px;
+ margin-top: 10px;
+ }
+ img.post
+ {
+ width :100%;
+ border-radius: 0px;
+ }
+
+}
diff --git a/FrontEnd/test/node_modules/zuck.js/ICON.png b/FrontEnd/test/node_modules/zuck.js/ICON.png
new file mode 100644
index 0000000..1ff2bc6
Binary files /dev/null and b/FrontEnd/test/node_modules/zuck.js/ICON.png differ
diff --git a/FrontEnd/test/node_modules/zuck.js/LICENSE b/FrontEnd/test/node_modules/zuck.js/LICENSE
new file mode 100644
index 0000000..63f9072
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Ramon Souza
+
+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.
\ No newline at end of file
diff --git a/FrontEnd/test/node_modules/zuck.js/README.md b/FrontEnd/test/node_modules/zuck.js/README.md
new file mode 100644
index 0000000..9354c92
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/README.md
@@ -0,0 +1,193 @@
+# zuck.js
+
+[](https://on.ramon82.com/2ojlR5C)
+
+## Add stories EVERYWHERE
+MWHAHAHAHA. Seriously. This script is a copy of Facebook Stories of a copy of Facebook Messenger Day of a copy of WhatsApp status of a copy of Instagram stories of a copy of Snapchat stories.
+
+You can read stories from any endpoint (JSON, Firebase, etc.) and the script will do the rest.
+
+Live demo: https://on.ramon82.com/2ojlR5C
+
+[](https://cdnjs.com/libraries/zuck.js) [](https://www.npmjs.com/package/zuck.js)
+
+
+## Features
+* Library agnostic
+* Custom themes: [Snapgram](https://rawgit.com/ramon82/zuck.js/master/index.html?skin=Snapgram), [FaceSnap](https://rawgit.com/ramon82/zuck.js/master/index.html?skin=FaceSnap), [Snapssenger](https://rawgit.com/ramon82/zuck.js/master/index.html?skin=Snapssenger) and [VemDeZAP](https://rawgit.com/ramon82/zuck.js/master/index.html?skin=VemDeZAP)
+* Desktop support (why not?)
+* A simple media viewer, with gestures and events
+* A simple API to manage your "Stories timeline"
+* Lightweight (5kb gzipped - 15kb minified)
+* 3D cube effect!
+* Item navigation based on user touch
+
+
+## How to use
+You can download this git repository or install via ```npm install zuck.js```
+
+Initialize:
+
+```js
+
+var stories = new Zuck({
+ id: '', // timeline container id or reference
+ skin: 'snapgram', // container class
+ avatars: true, // shows user photo instead of last story item preview
+ list: false, // displays a timeline instead of carousel
+ openEffect: true, // enables effect when opening story - may decrease performance
+ cubeEffect: false, // enables the 3d cube effect when sliding story - may decrease performance
+ autoFullScreen: false, // enables fullscreen on mobile browsers
+ backButton: true, // adds a back button to close the story viewer
+ backNative: false, // uses window history to enable back button on browsers/android
+ previousTap: true, // use 1/3 of the screen to navigate to previous item when tap the story
+
+ stories: [ // array of stories
+ // see stories structure example
+ ],
+
+ callbacks: {
+ 'onOpen': function(storyId, callback) { // on open story viewer
+ callback();
+ },
+
+ 'onView': function(storyId) { // on view story
+
+ },
+
+ 'onEnd': function(storyId, callback) { // on end story
+ callback();
+ },
+
+ 'onClose': function(storyId, callback) { // on close story viewer
+ callback();
+ },
+
+ 'onNavigateItem': function(storyId, nextStoryId, callback) { // on navigate item of story
+ callback();
+ },
+ },
+
+ 'language': { // if you need to translate :)
+ 'unmute': 'Touch to unmute',
+ 'keyboardTip': 'Press space to see next',
+ 'visitLink': 'Visit link',
+ 'time': {
+ 'ago':'ago',
+ 'hour':'hour',
+ 'hours':'hours',
+ 'minute':'minute',
+ 'minutes':'minutes',
+ 'fromnow': 'from now',
+ 'seconds':'seconds',
+ 'yesterday': 'yesterday',
+ 'tomorrow': 'tomorrow',
+ 'days':'days'
+ }
+ }
+});
+```
+
+Add/update a story:
+
+```js
+stories.update({item object});
+ ```
+
+Remove a story:
+
+```js
+stories.remove(storyId); // story id
+```
+
+Add/remove a story item:
+
+```js
+stories.addItem(storyId, {item object});
+stories.removeItem(storyId, itemId);
+```
+
+
+### Stories structure example
+A JSON example of the stories object:
+
+```js
+{
+ id: "", // story id
+ photo: "", // story photo (or user photo)
+ name: "", // story name (or user name)
+ link: "", // story link (useless on story generated by script)
+ lastUpdated: "", // last updated date in unix time format
+ seen: false, // set true if user has opened - if local storage is used, you don't need to care about this
+
+ items: [ // array of items
+ // story item example
+ {
+ id: "", // item id
+ type: "", // photo or video
+ length: 3, // photo timeout or video length in seconds - uses 3 seconds timeout for images if not set
+ src: "", // photo or video src
+ preview: "", // optional - item thumbnail to show in the story carousel instead of the story defined image
+ link: "", // a link to click on story
+ linkText: "", // link text
+ time: "", // optional a date to display with the story item. unix timestamp are converted to "time ago" format
+ seen: false // set true if current user was read - if local storage is used, you don't need to care about this
+ }
+ ]
+}
+```
+
+
+### Alternate call
+In your HTML:
+
+```HTML
+
+```
+
+Then in your JS:
+
+```js
+var stories = new Zuck({{element id string or element reference}});
+```
+
+
+### Tips
+- You can use with autoFullScreen option (disabled by default) to emulate an app on mobile devices.
+- If you use Ionic or some javascript that uses ```location.hash```, you should always disable the "backNative" option which can mess up your navigation.
+
+## Limitations
+On mobile browsers, video can't play with audio without a user gesture. So the script tries to play audio only when the user clicks to see the next story.
+When the story is playing automatically, the video is muted, but an alert is displayed so the user may click to turn the audio on.
+
+Stories links opens in a new window too. This behaviour occurs because most websites are blocked on iframe embedding.
+
+
+## License
+MIT
\ No newline at end of file
diff --git a/FrontEnd/test/node_modules/zuck.js/index.html b/FrontEnd/test/node_modules/zuck.js/index.html
new file mode 100644
index 0000000..e5b6439
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/index.html
@@ -0,0 +1,207 @@
+
+
+
Zuck.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This a demonstration of zuck.js javascript library.
+ Not associated with Facebook, Instagram, WhatsApp or Snapchat.
+
+
+
+
+
+ Choose your theme:
+
+
+ Snapgram (without fullscreen)
+ FaceSnap (with fullscreen)
+ VemDeZAP (timeline)
+ Snapssenger (with previews)
+
+
+
+
+
+
+
diff --git a/FrontEnd/test/node_modules/zuck.js/package.json b/FrontEnd/test/node_modules/zuck.js/package.json
new file mode 100644
index 0000000..869f189
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/package.json
@@ -0,0 +1,60 @@
+{
+ "_from": "zuck.js",
+ "_id": "zuck.js@1.2.0",
+ "_inBundle": false,
+ "_integrity": "sha512-kRZ1OT8trht73LjnWr0M9jT6c67Z1VDhDkhTYFm/s1A//U7685f8Pm2pBkcx5iF1vw5p3fq+J4PA48sck0PXlA==",
+ "_location": "/zuck.js",
+ "_phantomChildren": {},
+ "_requested": {
+ "type": "tag",
+ "registry": true,
+ "raw": "zuck.js",
+ "name": "zuck.js",
+ "escapedName": "zuck.js",
+ "rawSpec": "",
+ "saveSpec": null,
+ "fetchSpec": "latest"
+ },
+ "_requiredBy": [
+ "#USER",
+ "/"
+ ],
+ "_resolved": "https://registry.npmjs.org/zuck.js/-/zuck.js-1.2.0.tgz",
+ "_shasum": "71c7f2e7335d728752c456a87dfffc8629eca92d",
+ "_spec": "zuck.js",
+ "_where": "C:\\Hiruna\\sem 6\\co328\\sitnshop\\FrontEnd\\test",
+ "author": {
+ "name": "Ramon Souza",
+ "email": "me@ramon.codes",
+ "url": "https://ramon.codes"
+ },
+ "bugs": {
+ "url": "https://github.com/ramon82/zuck.js/issues"
+ },
+ "bundleDependencies": false,
+ "deprecated": false,
+ "description": "A javascript library that lets you add stories EVERYWHERE.",
+ "homepage": "https://ramon.codes/projects/zuck.js",
+ "keywords": [
+ "stories",
+ "story",
+ "zuck",
+ "zuckerberg",
+ "facebook",
+ "instagram",
+ "snapchat",
+ "whatsapp",
+ "slider",
+ "modal",
+ "viewer",
+ "media"
+ ],
+ "license": "MIT",
+ "main": "./zuck.js",
+ "name": "zuck.js",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/ramon82/zuck.js.git"
+ },
+ "version": "1.2.0"
+}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/facesnap.css b/FrontEnd/test/node_modules/zuck.js/skins/facesnap.css
new file mode 100644
index 0000000..fcdd69a
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/facesnap.css
@@ -0,0 +1,6 @@
+.stories.facesnap .story > a {text-decoration:none;color:#333}
+.stories.facesnap .story > a > .img {border-radius:50%;padding:2px;background:#3B5998;}
+.stories.facesnap .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.facesnap .story.seen{opacity:.5}
+.stories.facesnap .story.seen > a > .img {background:#999}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/facesnap.min.css b/FrontEnd/test/node_modules/zuck.js/skins/facesnap.min.css
new file mode 100644
index 0000000..f6b9681
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/facesnap.min.css
@@ -0,0 +1 @@
+.stories.facesnap .story>a{text-decoration:none;color:#333}.stories.facesnap .story>a>.img{border-radius:50%;padding:2px;background:#3B5998}.stories.facesnap .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.facesnap .story.seen{opacity:.5}.stories.facesnap .story.seen>a>.img{background:#999}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/snapgram.css b/FrontEnd/test/node_modules/zuck.js/skins/snapgram.css
new file mode 100644
index 0000000..7c7f1e9
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/snapgram.css
@@ -0,0 +1,7 @@
+.stories.snapgram .story > a {text-decoration:none;color:#333}
+.stories.snapgram .story > a > .img {border-radius:50%;padding:2px;background:radial-gradient(ellipse at 70% 70%,#ee583f 8%,#d92d77 42%,#bd3381 58%);}
+.stories.snapgram .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.snapgram .story.seen{opacity:.75}
+.stories.snapgram .story.seen > a > .img {background:#999}
+.stories.snapgram .story.seen > a{color:#999!important}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/snapgram.min.css b/FrontEnd/test/node_modules/zuck.js/skins/snapgram.min.css
new file mode 100644
index 0000000..2b6dea9
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/snapgram.min.css
@@ -0,0 +1 @@
+.stories.snapgram .story>a{text-decoration:none;color:#333}.stories.snapgram .story>a>.img{border-radius:50%;padding:2px;background:radial-gradient(ellipse at 70% 70%,#ee583f 8%,#d92d77 42%,#bd3381 58%)}.stories.snapgram .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.snapgram .story.seen{opacity:.75}.stories.snapgram .story.seen>a>.img{background:#999}.stories.snapgram .story.seen>a{color:#999!important}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/snapssenger.css b/FrontEnd/test/node_modules/zuck.js/skins/snapssenger.css
new file mode 100644
index 0000000..7379db9
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/snapssenger.css
@@ -0,0 +1,17 @@
+.stories.snapssenger.list .story > a {text-decoration:none;color:#333}
+.stories.snapssenger.list .story > a > .img {border-radius:50%;padding:2px;background:#0084FF;}
+.stories.snapssenger.list .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.snapssenger.list .story.seen{opacity:.75}
+.stories.snapssenger.list .story.seen > a > span{background:#999;color:#999}
+.stories.snapssenger.list .story.seen > a{color:#999!important}
+
+.stories.snapssenger.carousel .story {max-height: 100px;max-width: 100px;width: 25vw;}
+.stories.snapssenger.carousel .story > a {text-decoration:none;text-align: left; color:#fff;position: relative;max-height: 100px;}
+.stories.snapssenger.carousel .story > a > .img {height: 18vh;}
+.stories.snapssenger.carousel .story > a > .img > * {border-radius: 5px;position: absolute;}
+.stories.snapssenger.carousel .story > a > .info {top: auto;height: auto;box-sizing: border-box;position: absolute;left:0;right:0;bottom:0;padding:6px;font-weight: 700;font-size:12px;text-shadow:1px 1px 1px rgba(0,0,0,0.35), 1px 0 1px rgba(0,0,0,0.35);}
+.stories.snapssenger.carousel .story > a > .info strong {font-weight: 500;}
+.stories.snapssenger.carousel .story > a > .info .time {display: block;font-weight: 100;font-size:11px;}
+
+.stories.snapssenger .story.seen {opacity:0.5}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/snapssenger.min.css b/FrontEnd/test/node_modules/zuck.js/skins/snapssenger.min.css
new file mode 100644
index 0000000..1b62020
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/snapssenger.min.css
@@ -0,0 +1 @@
+.stories.snapssenger.list .story>a{text-decoration:none;color:#333}.stories.snapssenger.list .story>a>.img{border-radius:50%;padding:2px;background:#0084FF}.stories.snapssenger.list .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.snapssenger.list .story.seen{opacity:.75}.stories.snapssenger.list .story.seen>a>span{background:#999;color:#999}.stories.snapssenger.list .story.seen>a{color:#999!important}.stories.snapssenger.carousel .story{max-height:100px;max-width:100px;width:25vw}.stories.snapssenger.carousel .story>a{text-decoration:none;text-align:left;color:#fff;position:relative;max-height:100px}.stories.snapssenger.carousel .story>a>.img{height:18vh}.stories.snapssenger.carousel .story>a>.img>*{border-radius:5px;position:absolute}.stories.snapssenger.carousel .story>a>.info{top:auto;height:auto;box-sizing:border-box;position:absolute;left:0;right:0;bottom:0;padding:6px;font-weight:700;font-size:12px;text-shadow:1px 1px 1px rgba(0,0,0,.35),1px 0 1px rgba(0,0,0,.35)}.stories.snapssenger.carousel .story>a>.info strong{font-weight:500}.stories.snapssenger.carousel .story>a>.info .time{display:block;font-weight:100;font-size:11px}.stories.snapssenger .story.seen{opacity:.5}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/vemdezap.css b/FrontEnd/test/node_modules/zuck.js/skins/vemdezap.css
new file mode 100644
index 0000000..28bd10b
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/vemdezap.css
@@ -0,0 +1,20 @@
+/*
+ https://www.buzzfeed.com/rafaelcapanema/vem-de-zap?utm_term=.xs0yjRxwk#.wmQ3NQrlp
+
+ Aliexpress? 🇨🇳🇨🇳 vem de avião✈️✈️
+ Sedex?📦📦 vem de van 🚐
+ Pizza?🍕🍕 vem de moto 🚷🏍
+ E vc meu bb? 😉😉 VEM DE ZAP 😜😘👌👌
+*/
+
+.stories.vemdezap .story > a {text-decoration:none;color:#333}
+.stories.vemdezap .story > a > .img {border-radius:50%;padding:2px;background:#00bfa5;}
+.stories.vemdezap .story > a > .img > * {border-radius: 50%; border:3px solid #fff;}
+
+.stories.list.vemdezap .story{border-bottom:1px solid #eee;}
+.stories.list.vemdezap .story:last-child{border-bottom:0;}
+.stories.list.vemdezap .story > a > .info .time {display: inline-block;color:#999;}
+
+.stories.vemdezap .story.seem > img {opacity:.75}
+.stories.vemdezap .story.seem > a > .img {background:#999}
+.stories.vemdezap .story.seem > a{color:#999!important}
diff --git a/FrontEnd/test/node_modules/zuck.js/skins/vemdezap.min.css b/FrontEnd/test/node_modules/zuck.js/skins/vemdezap.min.css
new file mode 100644
index 0000000..ab19c57
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/skins/vemdezap.min.css
@@ -0,0 +1 @@
+.stories.vemdezap .story>a{text-decoration:none;color:#333}.stories.vemdezap .story>a>.img{border-radius:50%;padding:2px;background:#00bfa5}.stories.vemdezap .story>a>.img>*{border-radius:50%;border:3px solid #fff}.stories.list.vemdezap .story{border-bottom:1px solid #eee}.stories.list.vemdezap .story:last-child{border-bottom:0}.stories.list.vemdezap .story>a>.info .time{display:inline-block;color:#999}.stories.vemdezap .story.seem>img{opacity:.75}.stories.vemdezap .story.seem>a>.img{background:#999}.stories.vemdezap .story.seem>a{color:#999!important}
diff --git a/FrontEnd/test/node_modules/zuck.js/src/zuck.js b/FrontEnd/test/node_modules/zuck.js/src/zuck.js
new file mode 100644
index 0000000..e124c6c
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/src/zuck.js
@@ -0,0 +1,1370 @@
+/*
+ zuck.js
+ https://github.com/ramon82/zuck.js
+ MIT License
+*/
+
+export const ZuckJS = (() => {
+ let w = window;
+
+ let ZuckJS = function(timeline, options) {
+ const d = document;
+ const zuck = this;
+
+ if (typeof timeline == "string") {
+ timeline = d.getElementById(timeline);
+ }
+
+ /* core functions */
+ const query = function (qs) {
+ return d.querySelectorAll(qs)[0];
+ };
+
+ const get = function (array, what) {
+ if (array) {
+ return array[what] || "";
+ } else {
+ return "";
+ }
+ };
+
+ const each = function (arr, func) {
+ if (arr) {
+ const total = arr.length;
+
+ for (let i = 0; i < total; i++) {
+ func(i, arr[i]);
+ }
+ }
+ };
+
+ const setVendorVariable = function (ref, variable, value) {
+ const variables = [
+ variable.toLowerCase(),
+ `webkit${variable}`,
+ `MS${variable}`,
+ `o${variable}`
+ ];
+
+ each(variables, (i, val) => {
+ ref[val] = value;
+ });
+ };
+
+ const addVendorEvents = function (el, func, event) {
+ const events = [
+ event.toLowerCase(),
+ `webkit${event}`,
+ `MS${event}`,
+ `o${event}`
+ ];
+ const element = el;
+
+ each(events, (i, val) => {
+ el.addEventListener(val, func, false);
+ });
+ };
+
+ const onAnimationEnd = function (el, func) {
+ addVendorEvents(el, func, "AnimationEnd");
+ };
+
+ const onTransitionEnd = function (el, func) {
+ if (!el.transitionEndEvent) {
+ el.transitionEndEvent = true;
+
+ addVendorEvents(el, func, "TransitionEnd");
+ }
+ };
+
+ const prepend = function (parent, child) {
+ if (parent.firstChild) {
+ parent.insertBefore(child, parent.firstChild);
+ } else {
+ parent.appendChild(child);
+ }
+ };
+
+ const getElIndex = function (el) {
+ for (let i = 1; (el = el.previousElementSibling); i++) {
+ return i;
+ }
+
+ return 0;
+ };
+
+ const fullScreen = function (elem, cancel) {
+ const func = "RequestFullScreen";
+ const elFunc = "requestFullScreen"; //crappy vendor prefixes.
+
+ if (cancel) {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ }
+ } else {
+ try {
+ if (elem[elFunc]) {
+ elem[elFunc]();
+ } else if (elem[`ms${func}`]) {
+ elem[`ms${func}`]();
+ } else if (elem[`moz${func}`]) {
+ elem[`moz${func}`]();
+ } else if (elem[`webkit${func}`]) {
+ elem[`webkit${func}`]();
+ }
+ } catch (e) {}
+ }
+ };
+
+ const translate = function (element, to, duration, ease) {
+ const direction = to > 0 ? 1 : -1;
+ const to3d =
+ (Math.abs(to) / query("#zuck-modal").offsetWidth) * 90 * direction;
+
+ if (option("cubeEffect")) {
+ const scaling = to3d == 0 ? "scale(0.95)" : "scale(0.930,0.930)";
+
+ setVendorVariable(
+ query("#zuck-modal-content").style,
+ "Transform",
+ scaling
+ );
+
+ if (to3d < -90 || to3d > 90) {
+ return false;
+ }
+ }
+
+ const transform = !option("cubeEffect")
+ ? `translate3d(${to}px, 0, 0)`
+ : `rotateY(${to3d}deg)`;
+
+ if (element) {
+ setVendorVariable(element.style, "TransitionTimingFunction", ease);
+ setVendorVariable(element.style, "TransitionDuration", `${duration}ms`);
+ setVendorVariable(element.style, "Transform", transform);
+ }
+ };
+
+ const findPos = function (obj, offsetY, offsetX, stop) {
+ let curleft = 0;
+ let curtop = 0;
+
+ if (obj) {
+ if (obj.offsetParent) {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+
+ if (obj == stop) {
+ break;
+ }
+ } while ((obj = obj.offsetParent));
+ }
+
+ if (offsetY) {
+ curtop = curtop - offsetY;
+ }
+
+ if (offsetX) {
+ curleft = curleft - offsetX;
+ }
+ }
+
+ return [curleft, curtop];
+ };
+
+ const timeAgo = function (time) {
+ time = Number(time) * 1000;
+
+ const dateObj = new Date(time);
+ const dateStr = dateObj.getTime();
+ let seconds = (new Date().getTime() - dateStr) / 1000;
+
+ const language = option("language", "time");
+
+ const formats = [
+ [60, ` ${language["seconds"]}`, 1], // 60
+ [120, `1 ${language["minute"]}`, ""], // 60*2
+ [3600, ` ${language["minutes"]}`, 60], // 60*60, 60
+ [7200, `1 ${language["hour"]}`, ""], // 60*60*2
+ [86400, ` ${language["hours"]}`, 3600], // 60*60*24, 60*60
+ [172800, ` ${language["yesterday"]}`, ""], // 60*60*24*2
+ [604800, ` ${language["days"]}`, 86400]
+ ];
+
+ let currentFormat = 1;
+ if (seconds < 0) {
+ seconds = Math.abs(seconds);
+
+ currentFormat = 2;
+ }
+
+ let i = 0;
+ let format = void 0;
+ while ((format = formats[i++])) {
+ if (seconds < format[0]) {
+ if (typeof format[2] == "string") {
+ return format[currentFormat];
+ } else {
+ return Math.floor(seconds / format[2]) + format[1];
+ }
+ }
+ }
+
+ const day = dateObj.getDate();
+ const month = dateObj.getMonth();
+ const year = dateObj.getFullYear();
+
+ return `${day}/${month + 1}/${year}`;
+ };
+
+ /* options */
+ const id = timeline.id;
+
+ const optionsDefault = {
+ skin: "snapgram",
+ avatars: true,
+ stories: [],
+ backButton: true,
+ backNative: false,
+ previousTap: true,
+ autoFullScreen: false,
+ openEffect: true,
+ cubeEffect: false,
+ list: false,
+ localStorage: true,
+ callbacks: {
+ onOpen: function onOpen(storyId, callback) {
+ callback();
+ },
+ onView: function onView(storyId) {},
+ onEnd: function onEnd(storyId, callback) {
+ callback();
+ },
+ onClose: function onClose(storyId, callback) {
+ callback();
+ },
+ onNextItem: function onNextItem(storyId, nextStoryId, callback) {
+ callback();
+ },
+ onNavigateItem: function onNavigateItem(
+ storyId,
+ nextStoryId,
+ callback
+ ) {
+ callback();
+ }
+ },
+ language: {
+ unmute: "Touch to unmute",
+ keyboardTip: "Press space to see next",
+ visitLink: "Visit link",
+ time: {
+ ago: "ago",
+ hour: "hour ago",
+ hours: "hours ago",
+ minute: "minute ago",
+ minutes: "minutes ago",
+ fromnow: "from now",
+ seconds: "seconds ago",
+ yesterday: "yesterday",
+ tomorrow: "tomorrow",
+ days: "days ago"
+ }
+ }
+ };
+
+ let option = function (name, prop) {
+ const type = function (what) {
+ return typeof what !== "undefined";
+ };
+
+ if (prop) {
+ if (type(options[name])) {
+ return type(options[name][prop])
+ ? options[name][prop]
+ : optionsDefault[name][prop];
+ } else {
+ return optionsDefault[name][prop];
+ }
+ } else {
+ return type(options[name]) ? options[name] : optionsDefault[name];
+ }
+ };
+
+ /* modal */
+ const zuckModal = function () {
+ const opened = false;
+ let modalZuckContainer = query("#zuck-modal");
+
+ if (!modalZuckContainer && !w["Zuck"].hasModal) {
+ w["Zuck"].hasModal = true;
+
+ modalZuckContainer = d.createElement("div");
+ modalZuckContainer.id = "zuck-modal";
+
+ if (option("cubeEffect")) {
+ modalZuckContainer.className = "with-cube";
+ }
+
+ modalZuckContainer.innerHTML = '
';
+ modalZuckContainer.style.display = "none";
+
+ modalZuckContainer.setAttribute("tabIndex", "1");
+ modalZuckContainer.onkeyup = e => {
+ const code = e.keyCode;
+
+ if (code == 27) {
+ modal.close();
+ } else if (code == 13 || code == 32) {
+ modal.next();
+ }
+ };
+
+ if (option("openEffect")) {
+ modalZuckContainer.classList.add("with-effects");
+ }
+
+ onTransitionEnd(modalZuckContainer, () => {
+ if (modalZuckContainer.classList.contains("closed")) {
+ modalContent.innerHTML = "";
+ modalZuckContainer.style.display = "none";
+ modalZuckContainer.classList.remove("closed");
+ modalZuckContainer.classList.remove("animated");
+ }
+ });
+
+ d.body.appendChild(modalZuckContainer);
+ }
+
+ let modalContent = query("#zuck-modal-content");
+ const moveStoryItem = function (direction) {
+ const modalContainer = query("#zuck-modal");
+
+ let target = "";
+ let useless = "";
+ let transform = "0";
+ const modalSlider = query(`#zuck-modal-slider-${id}`);
+
+ const slideItems = {
+ previous: query("#zuck-modal .story-viewer.previous"),
+ next: query("#zuck-modal .story-viewer.next"),
+ viewing: query("#zuck-modal .story-viewer.viewing")
+ };
+
+ if (
+ (!slideItems["previous"] && !direction) ||
+ (!slideItems["next"] && direction)
+ ) {
+ return false;
+ }
+
+ if (!direction) {
+ target = "previous";
+ useless = "next";
+ } else {
+ target = "next";
+ useless = "previous";
+ }
+
+ const transitionTime = 600;
+ if (option("cubeEffect")) {
+ if (target == "previous") {
+ transform = modalContainer.slideWidth;
+ } else if (target == "next") {
+ transform = modalContainer.slideWidth * -1;
+ }
+ } else {
+ transform = findPos(slideItems[target]);
+ transform = transform[0] * -1;
+ }
+
+ translate(modalSlider, transform, transitionTime, null);
+
+ setTimeout(() => {
+ if (target != "" && slideItems[target] && useless != "") {
+ const currentStory = slideItems[target].getAttribute(
+ "data-story-id"
+ );
+ zuck.internalData["currentStory"] = currentStory;
+
+ const oldStory = query(`#zuck-modal .story-viewer.${useless}`);
+ if (oldStory) {
+ oldStory.parentNode.removeChild(oldStory);
+ }
+
+ if (slideItems["viewing"]) {
+ slideItems["viewing"].classList.add("stopped");
+ slideItems["viewing"].classList.add(useless);
+ slideItems["viewing"].classList.remove("viewing");
+ }
+
+ if (slideItems[target]) {
+ slideItems[target].classList.remove("stopped");
+ slideItems[target].classList.remove(target);
+ slideItems[target].classList.add("viewing");
+ }
+
+ const newStoryData = getStoryMorningGlory(target);
+ if (newStoryData) {
+ createStoryViewer(newStoryData, target);
+ }
+
+ const storyId = zuck.internalData["currentStory"];
+ let items = query(`#zuck-modal [data-story-id="${storyId}"]`);
+
+ if (items) {
+ items = items.querySelectorAll("[data-index].active");
+ const duration = items[0].firstElementChild;
+
+ zuck.data[storyId]["currentItem"] = parseInt(
+ items[0].getAttribute("data-index"),
+ 10
+ );
+
+ items[0].innerHTML = `
`;
+ onAnimationEnd(items[0].firstElementChild, () => {
+ zuck.nextItem(false);
+ });
+ }
+
+ translate(modalSlider, "0", 0, null);
+
+ if (items) {
+ playVideoItem([items[0], items[1]], true);
+ }
+
+ option("callbacks", "onView")(zuck.internalData["currentStory"]);
+ }
+ }, transitionTime + 50);
+ };
+
+ let createStoryViewer = function (
+ storyData,
+ className,
+ forcePlay
+ ) {
+ const modalContainer = query("#zuck-modal");
+ const modalSlider = query(`#zuck-modal-slider-${id}`);
+
+ let htmlItems = "";
+ let pointerItems = "";
+ const storyId = get(storyData, "id");
+ const slides = d.createElement("div");
+ const currentItem = get(storyData, "currentItem") || 0;
+ const exists = query(
+ `#zuck-modal .story-viewer[data-story-id="${storyId}"]`
+ );
+ let currentItemTime = "";
+
+ if (exists) {
+ return false;
+ }
+
+ slides.className = "slides";
+ each(get(storyData, "items"), (i, item) => {
+ if (currentItem > i) {
+ storyData["items"][i]["seen"] = true;
+ item["seen"] = true;
+ }
+
+ const length = get(item, "length");
+ const linkText = get(item, "linkText");
+ const seenClass = get(item, "seen") === true ? "seen" : "";
+ const commonAttrs = `data-index="${i}" data-item-id="${get(
+ item,
+ "id"
+ )}"`;
+
+ if (currentItem === i) {
+ currentItemTime = timeAgo(get(item, "time"));
+ }
+
+ pointerItems += `
`;
+ htmlItems += `
`;
+ });
+ slides.innerHTML = htmlItems;
+
+ const video = slides.querySelector("video");
+ const addMuted = function (video) {
+ if (video.muted) {
+ storyViewer.classList.add("muted");
+ } else {
+ storyViewer.classList.remove("muted");
+ }
+ };
+
+ if (video) {
+ video.onwaiting = e => {
+ if (video.paused) {
+ storyViewer.classList.add("paused");
+ storyViewer.classList.add("loading");
+ }
+ };
+
+ video.onplay = () => {
+ addMuted(video);
+
+ storyViewer.classList.remove("stopped");
+ storyViewer.classList.remove("paused");
+ storyViewer.classList.remove("loading");
+ };
+
+ video.onready = video.onload = video.onplaying = video.oncanplay = () => {
+ addMuted(video);
+
+ storyViewer.classList.remove("loading");
+ };
+
+ video.onvolumechange = () => {
+ addMuted(video);
+ };
+ }
+
+ let storyViewer = d.createElement("div");
+ storyViewer.className = `story-viewer muted ${className} ${
+ !forcePlay ? "stopped" : ""
+ } ${option("backButton") ? "with-back-button" : ""}`;
+ storyViewer.setAttribute("data-story-id", storyId);
+
+ const html = `
${
+ option("backButton") ? '
‹ ' : ""
+ }
${get(
+ storyData,
+ "name"
+ )} ${currentItemTime}
`;
+ storyViewer.innerHTML = html;
+
+ each(storyViewer.querySelectorAll(".close, .back"), (i, el) => {
+ el.onclick = e => {
+ e.preventDefault();
+ modal.close();
+ };
+ });
+
+ storyViewer.appendChild(slides);
+
+ if (className == "viewing") {
+ playVideoItem(
+ storyViewer.querySelectorAll(
+ `[data-index="${currentItem}"].active`
+ ),
+ false
+ );
+ }
+
+ each(
+ storyViewer.querySelectorAll(".slides-pointers [data-index] > b"),
+ (i, el) => {
+ onAnimationEnd(el, () => {
+ zuck.nextItem(false);
+ });
+ }
+ );
+
+ if (className == "previous") {
+ prepend(modalSlider, storyViewer);
+ } else {
+ modalSlider.appendChild(storyViewer);
+ }
+ };
+
+ const createStoryTouchEvents = function (
+ modalSliderElement
+ ) {
+ const modalContainer = query("#zuck-modal");
+ const enableMouseEvents = true;
+
+ const modalSlider = modalSliderElement;
+ let position = {};
+ let touchOffset = void 0;
+ let isScrolling = void 0;
+ let delta = void 0;
+ let timer = void 0;
+ let nextTimer = void 0;
+
+ const touchStart = function (event) {
+ const storyViewer = query("#zuck-modal .viewing");
+
+ if (event.target.nodeName == "A") {
+ return true;
+ } else {
+ event.preventDefault();
+ }
+
+ const touches = event.touches ? event.touches[0] : event;
+ const pos = findPos(query("#zuck-modal .story-viewer.viewing"));
+
+ modalContainer.slideWidth = query(
+ "#zuck-modal .story-viewer"
+ ).offsetWidth;
+ position = {
+ x: pos[0],
+ y: pos[1]
+ };
+
+ const pageX = touches.pageX;
+ const pageY = touches.pageY;
+
+ touchOffset = {
+ x: pageX,
+ y: pageY,
+ time: Date.now()
+ };
+
+ isScrolling = undefined;
+ delta = {};
+
+ if (enableMouseEvents) {
+ modalSlider.addEventListener("mousemove", touchMove);
+ modalSlider.addEventListener("mouseup", touchEnd);
+ modalSlider.addEventListener("mouseleave", touchEnd);
+ }
+ modalSlider.addEventListener("touchmove", touchMove);
+ modalSlider.addEventListener("touchend", touchEnd);
+
+ if (storyViewer) {
+ storyViewer.classList.add("paused");
+ }
+ pauseVideoItem();
+
+ timer = setTimeout(() => {
+ storyViewer.classList.add("longPress");
+ }, 600);
+
+ nextTimer = setTimeout(() => {
+ clearInterval(nextTimer);
+ nextTimer = false;
+ }, 250);
+ };
+
+ let touchMove = function (event) {
+ const touches = event.touches ? event.touches[0] : event;
+ const pageX = touches.pageX;
+ const pageY = touches.pageY;
+
+ if (touchOffset) {
+ delta = {
+ x: pageX - touchOffset.x,
+ y: pageY - touchOffset.y
+ };
+
+ if (typeof isScrolling === "undefined") {
+ isScrolling = !!(
+ isScrolling || Math.abs(delta.x) < Math.abs(delta.y)
+ );
+ }
+
+ if (!isScrolling && touchOffset) {
+ event.preventDefault();
+ translate(modalSlider, position.x + delta.x, 0, null);
+ }
+ }
+ };
+
+ let touchEnd = function (event) {
+ const storyViewer = query("#zuck-modal .viewing");
+ const lastTouchOffset = touchOffset;
+
+ if (delta) {
+ const slidesLength = d.querySelectorAll("#zuck-modal .story-viewer")
+ .length;
+ const duration = touchOffset
+ ? Date.now() - touchOffset.time
+ : undefined;
+ const isValid =
+ (Number(duration) < 300 && Math.abs(delta.x) > 25) ||
+ Math.abs(delta.x) > modalContainer.slideWidth / 3;
+ const direction = delta.x < 0;
+
+ const index = direction
+ ? query("#zuck-modal .story-viewer.next")
+ : query("#zuck-modal .story-viewer.previous");
+ const isOutOfBounds =
+ (direction && !index) || (!direction && !index);
+
+ if (!isScrolling) {
+ if (isValid && !isOutOfBounds) {
+ moveStoryItem(direction, true);
+ } else {
+ translate(modalSlider, position.x, 300);
+ }
+ }
+
+ touchOffset = undefined;
+
+ if (enableMouseEvents) {
+ modalSlider.removeEventListener("mousemove", touchMove);
+ modalSlider.removeEventListener("mouseup", touchEnd);
+ modalSlider.removeEventListener("mouseleave", touchEnd);
+ }
+ modalSlider.removeEventListener("touchmove", touchMove);
+ modalSlider.removeEventListener("touchend", touchEnd);
+ }
+
+ const video = zuck.internalData["currentVideoElement"];
+ if (timer) {
+ clearInterval(timer);
+ }
+
+ if (storyViewer) {
+ storyViewer.classList.remove("longPress");
+ storyViewer.classList.remove("paused");
+ }
+
+ if (nextTimer) {
+ clearInterval(nextTimer);
+ nextTimer = false;
+
+ const navigateItem = function () {
+ if (
+ lastTouchOffset.x > w.screen.width / 3 ||
+ !option("previousTap")
+ ) {
+ zuck.navigateItem("next", event);
+ } else {
+ zuck.navigateItem("previous", event);
+ }
+ };
+
+ const storyViewerViewing = query("#zuck-modal .viewing");
+ if (storyViewerViewing && video) {
+ if (storyViewerViewing.classList.contains("muted")) {
+ unmuteVideoItem(video, storyViewerViewing);
+ } else {
+ navigateItem();
+ }
+ } else {
+ navigateItem();
+
+ return false;
+ }
+ }
+ };
+
+ modalSlider.addEventListener("touchstart", touchStart);
+
+ if (enableMouseEvents) {
+ modalSlider.addEventListener("mousedown", touchStart);
+ }
+ };
+
+ return {
+ show: function show(storyId, page) {
+ const modalContainer = query("#zuck-modal");
+
+ const callback = function () {
+ modalContent.innerHTML = `
`;
+
+ const storyData = zuck.data[storyId];
+ const currentItem = storyData["currentItem"] || 0;
+ const modalSlider = query(`#zuck-modal-slider-${id}`);
+
+ createStoryTouchEvents(modalSlider);
+
+ zuck.internalData["currentStory"] = storyId;
+ storyData["currentItem"] = currentItem;
+
+ if (option("backNative")) {
+ location.hash = `#!${id}`;
+ }
+
+ const previousItemData = getStoryMorningGlory("previous");
+ if (previousItemData) {
+ createStoryViewer(previousItemData, "previous");
+ }
+
+ createStoryViewer(storyData, "viewing", true);
+
+ const nextItemData = getStoryMorningGlory("next");
+ if (nextItemData) {
+ createStoryViewer(nextItemData, "next");
+ }
+
+ if (option("autoFullScreen")) {
+ modalContainer.classList.add("fullscreen");
+ }
+
+ const tryFullScreen = function () {
+ if (
+ modalContainer.classList.contains("fullscreen") &&
+ option("autoFullScreen") &&
+ w.screen.width <= 1024
+ ) {
+ fullScreen(modalContainer);
+ }
+
+ modalContainer.focus();
+ };
+
+ if (option("openEffect")) {
+ const storyEl = query(`#${id} [data-id="${storyId}"] .img`);
+ const pos = findPos(storyEl);
+
+ modalContainer.style.marginLeft = `${pos[0] +
+ storyEl.offsetWidth / 2}px`;
+ modalContainer.style.marginTop = `${pos[1] +
+ storyEl.offsetHeight / 2}px`;
+
+ modalContainer.style.display = "block";
+
+ modalContainer.slideWidth = query(
+ "#zuck-modal .story-viewer"
+ ).offsetWidth;
+
+ setTimeout(() => {
+ modalContainer.classList.add("animated");
+ }, 10);
+
+ setTimeout(() => {
+ tryFullScreen();
+ }, 300); //because effects
+ } else {
+ modalContainer.style.display = "block";
+ modalContainer.slideWidth = query(
+ "#zuck-modal .story-viewer"
+ ).offsetWidth;
+
+ tryFullScreen();
+ }
+
+ option("callbacks", "onView")(storyId);
+ };
+
+ option("callbacks", "onOpen")(storyId, callback);
+ },
+ next: function next(unmute) {
+ const modalContainer = query("#zuck-modal");
+
+ const callback = function () {
+ const lastStory = zuck.internalData["currentStory"];
+ const lastStoryTimelineElement = query(
+ `#${id} [data-id="${lastStory}"]`
+ );
+
+ if (lastStoryTimelineElement) {
+ lastStoryTimelineElement.classList.add("seen");
+
+ zuck.data[lastStory]["seen"] = true;
+ zuck.internalData["seenItems"][lastStory] = true;
+
+ saveLocalData("seenItems", zuck.internalData["seenItems"]);
+ updateStoryseenPosition();
+ }
+
+ const stories = query("#zuck-modal .story-viewer.next");
+ if (!stories) {
+ modal.close();
+ } else {
+ moveStoryItem(true);
+ }
+ };
+
+ option("callbacks", "onEnd")(
+ zuck.internalData["currentStory"],
+ callback
+ );
+ },
+ close: function close() {
+ const modalContainer = query("#zuck-modal");
+
+ const callback = function () {
+ if (option("backNative")) {
+ location.hash = "";
+ }
+
+ fullScreen(modalContainer, true);
+
+ if (option("openEffect")) {
+ modalContainer.classList.add("closed");
+ } else {
+ modalContent.innerHTML = "";
+ modalContainer.style.display = "none";
+ }
+ };
+
+ option("callbacks", "onClose")(
+ zuck.internalData["currentStory"],
+ callback
+ );
+ }
+ };
+ };
+ let modal = new zuckModal();
+
+ /* parse functions */
+ const parseItems = function (story) {
+ const storyId = story.getAttribute("data-id");
+ const storyItems = d.querySelectorAll(
+ `#${id} [data-id="${storyId}"] .items > li`
+ );
+ const items = [];
+
+ each(storyItems, (i, el) => {
+ const a = el.firstElementChild;
+ const img = a.firstElementChild;
+
+ items.push({
+ src: a.getAttribute("href"),
+ length: a.getAttribute("data-length"),
+ type: a.getAttribute("data-type"),
+ time: a.getAttribute("data-time"),
+ link: a.getAttribute("data-link"),
+ linkText: a.getAttribute("data-linkText"),
+ preview: img.getAttribute("src")
+ });
+ });
+
+ zuck.data[storyId].items = items;
+ };
+
+ const parseStory = function (story) {
+ const storyId = story.getAttribute("data-id");
+ let seen = false;
+
+ if (zuck.internalData["seenItems"][storyId]) {
+ seen = true;
+ }
+
+ if (seen) {
+ story.classList.add("seen");
+ } else {
+ story.classList.remove("seen");
+ }
+
+ try {
+ zuck.data[storyId] = {
+ id: storyId, //story id
+ photo: story.getAttribute("data-photo"), //story photo (or user photo)
+ name: story.firstElementChild.lastElementChild.firstChild.innerText,
+ link: story.firstElementChild.getAttribute("href"),
+ lastUpdated: story.getAttribute("data-last-updated"),
+ seen: seen,
+ items: []
+ };
+ } catch (e) {
+ zuck.data[storyId] = {
+ items: []
+ };
+ }
+
+ story.onclick = e => {
+ e.preventDefault();
+
+ modal.show(storyId);
+ };
+ };
+
+ let getStoryMorningGlory = function (what) {
+ //my wife told me to stop singing Wonderwall. I SAID MAYBE.
+ const currentStory = zuck.internalData["currentStory"];
+ const whatEl = `${what}ElementSibling`;
+
+ if (currentStory) {
+ const foundStory = query(`#${id} [data-id="${currentStory}"]`)[whatEl];
+
+ if (foundStory) {
+ const storyId = foundStory.getAttribute("data-id");
+ const data = zuck.data[storyId] || false;
+
+ return data; //(get(zuck.data[storyId], 'seen')==true)?false:data;
+ }
+ }
+
+ return false;
+ };
+
+ let updateStoryseenPosition = function () {
+ each(d.querySelectorAll(`#${id} .story.seen`), (i, el) => {
+ const newData = zuck.data[el.getAttribute("data-id")];
+ const timeline = el.parentNode;
+
+ timeline.removeChild(el);
+ zuck.add(newData, true);
+ });
+ };
+
+ let playVideoItem = function (elements, unmute) {
+ const itemElement = elements[1];
+ const itemPointer = elements[0];
+ const storyViewer = itemPointer.parentNode.parentNode.parentNode;
+
+ if (!itemElement || !itemPointer) {
+ return false;
+ }
+
+ const cur = zuck.internalData["currentVideoElement"];
+ if (cur) {
+ cur.pause();
+ }
+
+ if (itemElement.getAttribute("data-type") == "video") {
+ const video = itemElement.getElementsByTagName("video")[0];
+ if (!video) {
+ zuck.internalData["currentVideoElement"] = false;
+
+ return false;
+ }
+
+ const setDuration = function () {
+ if (video.duration) {
+ setVendorVariable(
+ itemPointer.getElementsByTagName("b")[0].style,
+ "AnimationDuration",
+ `${video.duration}s`
+ );
+ }
+ };
+
+ setDuration();
+ video.addEventListener("loadedmetadata", setDuration);
+ zuck.internalData["currentVideoElement"] = video;
+
+ video.currentTime = 0;
+ video.play();
+
+ if (unmute.target) {
+ unmuteVideoItem(video, storyViewer);
+ }
+ } else {
+ zuck.internalData["currentVideoElement"] = false;
+ }
+ };
+
+ let pauseVideoItem = function () {
+ const video = zuck.internalData["currentVideoElement"];
+ if (video) {
+ try {
+ video.pause();
+ } catch (e) {}
+ }
+ };
+
+ let unmuteVideoItem = function (video, storyViewer) {
+ video.muted = false;
+ video.volume = 1.0;
+ video.removeAttribute("muted");
+ video.play();
+
+ if (video.paused) {
+ video.muted = true;
+ video.play();
+ }
+
+ if (storyViewer) {
+ storyViewer.classList.remove("paused");
+ }
+ };
+
+ /* data functions */
+ let saveLocalData = function (key, data) {
+ try {
+ if (option("localStorage")) {
+ const keyName = `zuck-${id}-${key}`;
+
+ w.localStorage[keyName] = JSON.stringify(data);
+ }
+ } catch (e) {}
+ };
+
+ const getLocalData = function (key) {
+ if (option("localStorage")) {
+ const keyName = `zuck-${id}-${key}`;
+
+ return w.localStorage[keyName]
+ ? JSON.parse(w.localStorage[keyName])
+ : false;
+ } else {
+ return false;
+ }
+ };
+
+ /* api */
+ zuck.data = {};
+ zuck.internalData = {};
+ zuck.internalData["seenItems"] = getLocalData("seenItems") || {};
+
+ zuck.add = zuck.update = (data, append) => {
+ const storyId = get(data, "id");
+ const storyEl = query(`#${id} [data-id="${storyId}"]`);
+ let html = "";
+ const items = get(data, "items");
+ let story = false;
+
+ zuck.data[storyId] = {};
+
+ if (!storyEl) {
+ story = d.createElement("div");
+ story.className = "story";
+ } else {
+ story = storyEl;
+ }
+
+ if (data["seen"] === false) {
+ zuck.internalData["seenItems"][storyId] = false;
+ saveLocalData("seenItems", zuck.internalData["seenItems"]);
+ }
+
+ story.setAttribute("data-id", storyId);
+ story.setAttribute("data-photo", get(data, "photo"));
+ story.setAttribute("data-last-updated", get(data, "lastUpdated"));
+
+ let preview = false;
+ if (items[0]) {
+ preview = items[0]["preview"] || "";
+ }
+
+ html = `
${get(
+ data,
+ "name"
+ )} ${timeAgo(
+ get(data, "lastUpdated")
+ )} `;
+ story.innerHTML = html;
+ parseStory(story);
+
+ if (!storyEl) {
+ if (append) {
+ timeline.appendChild(story);
+ } else {
+ prepend(timeline, story);
+ }
+ }
+
+ each(items, (i, item) => {
+ zuck.addItem(storyId, item, append);
+ });
+
+ if (!append) {
+ updateStoryseenPosition();
+ }
+ };
+ zuck.next = () => {
+ modal.next();
+ };
+ zuck.remove = storyId => {
+ const story = query(`#${id} > [data-id="${storyId}"]`);
+ story.parentNode.removeChild(story);
+ };
+ zuck.addItem = (storyId, data, append) => {
+ const story = query(`#${id} > [data-id="${storyId}"]`);
+ const li = d.createElement("li");
+
+ li.className = get(data, "seen") ? "seen" : "";
+ li.setAttribute("data-id", get(data, "id"));
+
+ li.innerHTML = `
`;
+
+ const el = story.querySelectorAll(".items")[0];
+ if (append) {
+ el.appendChild(li);
+ } else {
+ prepend(el, li);
+ }
+
+ parseItems(story);
+ };
+ zuck.removeItem = (storyId, itemId) => {
+ const item = query(
+ `#${id} > [data-id="${storyId}"] [data-id="${itemId}"]`
+ );
+
+ timeline.parentNode.removeChild(item);
+ };
+ zuck.navigateItem = zuck.nextItem = (direction, event) => {
+ const currentStory = zuck.internalData["currentStory"];
+ const currentItem = zuck.data[currentStory]["currentItem"];
+ const storyViewer = query(
+ `#zuck-modal .story-viewer[data-story-id="${currentStory}"]`
+ );
+ const directionNumber = direction == "previous" ? -1 : 1;
+
+ if (!storyViewer || storyViewer.touchMove == 1) {
+ return false;
+ }
+
+ const currentItemElements = storyViewer.querySelectorAll(
+ `[data-index="${currentItem}"]`
+ );
+ const currentPointer = currentItemElements[0];
+ const currentItemElement = currentItemElements[1];
+
+ const navigateItem = currentItem + directionNumber;
+ const nextItems = storyViewer.querySelectorAll(
+ `[data-index="${navigateItem}"]`
+ );
+ const nextPointer = nextItems[0];
+ const nextItem = nextItems[1];
+
+ if (storyViewer && nextPointer && nextItem) {
+ const navigateItemCallback = function () {
+ if (direction == "previous") {
+ currentPointer.classList.remove("seen");
+ currentItemElement.classList.remove("seen");
+ } else {
+ currentPointer.classList.add("seen");
+ currentItemElement.classList.add("seen");
+ }
+
+ currentPointer.classList.remove("active");
+ currentItemElement.classList.remove("active");
+
+ nextPointer.classList.remove("seen");
+ nextPointer.classList.add("active");
+
+ nextItem.classList.remove("seen");
+ nextItem.classList.add("active");
+
+ each(storyViewer.querySelectorAll(".time"), (i, el) => {
+ el.innerText = timeAgo(nextItem.getAttribute("data-time"));
+ });
+
+ zuck.data[currentStory]["currentItem"] =
+ zuck.data[currentStory]["currentItem"] + directionNumber;
+
+ playVideoItem(nextItems, event);
+ };
+
+ let callback = option("callbacks", "onNavigateItem");
+ callback = !callback
+ ? option("callbacks", "onNextItem")
+ : option("callbacks", "onNavigateItem");
+
+ callback(
+ currentStory,
+ nextItem.getAttribute("data-story-id"),
+ navigateItemCallback
+ );
+ } else if (storyViewer) {
+ if (direction != "previous") {
+ modal.next(event);
+ }
+ }
+ };
+ const init = function () {
+ if (location.hash == `#!${id}`) {
+ location.hash = "";
+ }
+
+ if (query(`#${id} .story`)) {
+ each(timeline.querySelectorAll(".story"), (i, story) => {
+ parseStory(story, true);
+ });
+ }
+
+ if (option("backNative")) {
+ w.addEventListener(
+ "popstate",
+ e => {
+ if (location.hash != `#!${id}`) {
+ location.hash = "";
+ }
+ },
+ false
+ );
+ }
+
+ each(option("stories"), (i, item) => {
+ zuck.add(item, true);
+ });
+
+ updateStoryseenPosition();
+
+ const avatars = option("avatars") ? "user-icon" : "story-preview";
+ const list = option("list") ? "list" : "carousel";
+
+ timeline.className = `stories ${avatars} ${list} ${(
+ option("skin") + ""
+ ).toLowerCase()}`;
+
+ return zuck;
+ };
+
+ return init();
+ };
+
+ /* Helpers */
+ ZuckJS.buildItem = (
+ id,
+ type,
+ length,
+ src,
+ preview,
+ link,
+ linkText,
+ seen,
+ time
+ ) => ({
+ id: id,
+ type: type,
+ length: length,
+ src: src,
+ preview: preview,
+ link: link,
+ linkText: linkText,
+ seen: seen,
+ time: time
+ });
+
+ /* Too much zuck zuck to maintain legacy */
+ w["ZuckitaDaGalera"] = w["Zuck"] = ZuckJS;
+
+ return ZuckJS;
+})();
\ No newline at end of file
diff --git a/FrontEnd/test/node_modules/zuck.js/zuck.css b/FrontEnd/test/node_modules/zuck.js/zuck.css
new file mode 100644
index 0000000..5b73627
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/zuck.css
@@ -0,0 +1,115 @@
+/*
+ zuck.js
+ https://github.com/ramon82/zuck.js
+ MIT License
+*/
+
+.stories.carousel{white-space:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;}
+.stories.carousel::-webkit-scrollbar { width: 0px;background: transparent;}
+.stories.carousel .story{display:inline-block;width:18vw;max-width:90px;margin:0 6px;}
+.stories.carousel .story:first-child{margin-left:0;}
+.stories.carousel .story:last-child{margin-right:0;}
+
+.stories.carousel .story > a {text-align:center;display:block;}
+.stories.carousel .story > a:active > .img {transform: scale(0.9);}
+.stories.carousel .story > a > .img {display:block;box-sizing:border-box;font-size:0;max-height:90px;height:18vw;overflow:hidden;transition: transform 0.2s;}
+.stories.carousel .story > a > .img > * {display:block;box-sizing:border-box;height:100%;width:100%;background-size:cover;background-position: center;}
+.stories.carousel .story > a > .info {display:inline-block;margin-top:.5em;line-height:1.2em;width:100%;overflow:hidden;text-overflow:ellipsis}
+.stories.carousel .story > a > .info strong {font-weight:300;}
+.stories.carousel .story > a > .info .time {display: none;}
+.stories.carousel .story > .items {display:none;}
+
+.stories.list{white-space:nowrap;overflow:auto;}
+.stories.list .story{display: block;width: auto;margin: 6px;padding-bottom:6px;}
+
+.stories.list .story > a {text-align:left;display:block;}
+.stories.list .story > a > .img {height:42px;width:42px;max-width:42px;margin-right: 12px;vertical-align: top;display:inline-block;box-sizing:border-box;font-size:0;overflow:hidden}
+.stories.list .story > a > .img > * {display:block;box-sizing:border-box;height:100%;width:100%;background-size:cover;background-position: center;}
+.stories.list .story > a > .info {display:inline-block;line-height:1.6em;overflow:hidden;text-overflow:ellipsis;vertical-align: top;}
+.stories.list .story > a > .info strong {font-weight:500;display: block}
+.stories.list .story > a > .info .time {display: inline-block;}
+.stories.list .story > .items {display:none;}
+
+@-webkit-keyframes zuckSlideTime {0%{max-width: 0;}100%{max-width:100%;}}
+@keyframes zuckSlideTime {0%{max-width: 0;}100%{max-width:100%;}}
+
+@-webkit-keyframes zuckLoading {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
+@keyframes zuckLoading {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
+
+#zuck-modal{outline: 0!important;overflow:hidden;position:fixed;background:rgba(0,0,0,0.75);0;z-index:100000;font-size:14px;font-family:inherit;}
+#zuck-modal-content, #zuck-modal-content .story-viewer, #zuck-modal-content .story-viewer > .slides, #zuck-modal-content .story-viewer > .slides > *{width:100vw;height:100%; top: 0; bottom: 0;position: absolute;overflow:hidden;}
+#zuck-modal * {user-select:none;outline: 0;}
+
+#zuck-modal.with-effects {transform: scale(0.01);transform-origin: top left;transition: 0.25s;position: absolute;top:0;left:0;width:100vw;height:100%; top: 0; bottom: 0;}
+#zuck-modal.with-effects.animated {transform:scale(1);border-radius: 0; margin-top:0 !important;margin-left:0 !important;}
+#zuck-modal.with-effects.closed {transform:translateY(100%);}
+
+#zuck-modal .slider {width:300vw;height: 100%; top: 0; bottom: 0;left:-100vw;position: absolute;}
+#zuck-modal .slider > * {width: 100vw;height: 100%; top: 0; bottom: 0; position: absolute;}
+#zuck-modal .slider > .previous {left:0;}
+#zuck-modal .slider > .viewing {left:100vw;}
+#zuck-modal .slider > .next {left:200vw;}
+#zuck-modal .slider.animated{-webkit-transition:-webkit-transform .25s linear;transition:-webkit-transform .25s linear;transition:transform .25s linear;transition:transform .25s linear, -webkit-transform .25s linear;}
+
+#zuck-modal.with-cube #zuck-modal-content {perspective: 1000vw;transform:scale(0.95);perspective-origin: 50% 50%;overflow: visible;transition:0.3s;}
+#zuck-modal.with-cube .slider {transform-style: preserve-3d;transform: rotateY(0deg)}
+#zuck-modal.with-cube .slider > .previous {backface-visibility: hidden;left: 100vw;transform: rotateY(270deg) translateX(-50%);transform-origin: center left;}
+#zuck-modal.with-cube .slider > .viewing {backface-visibility: hidden;left: 100vw;transform: translateZ(50vw);}
+#zuck-modal.with-cube .slider > .next {backface-visibility: hidden;left:100vw;transform: rotateY(-270deg) translateX(50%);transform-origin: top right;}
+
+#zuck-modal-content .story-viewer.paused.longPress .head,#zuck-modal-content .story-viewer.paused.longPress .slides-pointers,#zuck-modal-content .story-viewer.paused.longPress .tip{opacity:0;}
+#zuck-modal-content .story-viewer.viewing:not(.paused):not(.stopped) .slides-pointers > * > .active > b{-webkit-animation-play-state:running;animation-play-state:running;}
+#zuck-modal-content .story-viewer.next{z-index:10;}
+#zuck-modal-content .story-viewer.viewing{z-index:5;}
+#zuck-modal-content .story-viewer.previous{z-index:0;}
+#zuck-modal-content .story-viewer.muted .tip.muted, #zuck-modal-content .story-viewer.loading .head .loading {display: block}
+#zuck-modal-content .story-viewer.loading .head .right .time, #zuck-modal-content .story-viewer.loading .head .right .close {display: none}
+
+#zuck-modal-content .story-viewer .slides-pointers{display:table;table-layout:fixed;border-spacing:6px;border-collapse:separate;position:absolute;width:100vh; top: 0; bottom: 0;top:0;left:calc(50vw - 50vh);right:calc(50vw - 50vh);z-index:100020;}
+#zuck-modal-content .story-viewer .slides-pointers > *{display:table-row;}
+#zuck-modal-content .story-viewer .slides-pointers > * > *{display:table-cell;background:rgba(255,255,255,0.5);border-radius:2px;}
+#zuck-modal-content .story-viewer .slides-pointers > * > .seen{background:#fff;}
+#zuck-modal-content .story-viewer .slides-pointers > * > * > b{background:#fff;width:auto;max-width:0;height:2px;display:block;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-play-state:paused;animation-play-state:paused;border-radius:2px;}
+#zuck-modal-content .story-viewer .slides-pointers > * > .active > b{-webkit-animation-name:zuckSlideTime;animation-name:zuckSlideTime;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
+
+#zuck-modal-content .story-viewer .head{position:absolute;height:56px;left:0;right:0;line-height:56px;z-index:100010;color:#fff;font-size:14px;text-shadow:1px 1px 1px rgba(0,0,0,0.35), 1px 0 1px rgba(0,0,0,0.35);padding:0 6px;}
+#zuck-modal-content .story-viewer .head .img{vertical-align: top;background-size:cover;width:42px;height:42px;display:inline-block;margin-right:12px;border-radius:50%;vertical-align:middle;background-repeat:no-repeat;background-position:center;}
+#zuck-modal-content .story-viewer .head .img:before{content:'';display:block;width:100%;height:100%;border-radius:50%;border:1px solid #000;opacity:0.1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";box-sizing:border-box;}
+#zuck-modal-content .story-viewer .head .time{opacity:0.75;font-weight:500;font-size:13px;}
+#zuck-modal-content .story-viewer .head .left{line-height: 1 !important;display:inline-block;margin:6px 0;}
+#zuck-modal-content .story-viewer .head .left > div{display:inline-block;max-width:30vw;vertical-align:middle;}
+#zuck-modal-content .story-viewer .head .left > div > *{width:100%;display:inline-block;line-height:21px;}
+#zuck-modal-content .story-viewer .head .left > div > strong {font-weight: 500;}
+#zuck-modal-content .story-viewer .head .right{float:right;}
+#zuck-modal-content .story-viewer .head .right .close, #zuck-modal-content .story-viewer .head .back {font-size:42px;width:48px;cursor: pointer;text-align:center;}
+#zuck-modal-content .story-viewer .head .left > .back {display: none; width:24px; margin:-6px -6px 0 -6px}
+#zuck-modal-content .story-viewer .head .right .time {display:none;}
+#zuck-modal-content .story-viewer .head .loading {display:none;border-radius:50%;width:30px;height:30px;border:4px solid rgba(255,255,255,0.2);box-sizing: border-box;border-top-color:#FFF;-webkit-animation:zuckLoading 1s infinite linear;animation:zuckLoading 1s infinite linear;}
+
+#zuck-modal-content .story-viewer .head, #zuck-modal-content .story-viewer .slides-pointers, #zuck-modal-content .story-viewer .tip{-webkit-transition:opacity .5s;transition:opacity .5s;}
+
+#zuck-modal-content .story-viewer .slides .item{display:none;overflow:hidden;background:#000;}
+#zuck-modal-content .story-viewer .slides .item:before{z-index: 4;background: transparent;content:'';position: absolute;left:0;right:0;bottom:0;top:0;}
+#zuck-modal-content .story-viewer .slides .item > .media {height:100%;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:auto;}
+#zuck-modal-content .story-viewer .slides .item.active, #zuck-modal-content .story-viewer .slides .item.active .tip.link {display:block;}
+
+#zuck-modal-content .story-viewer .tip{z-index: 5; text-decoration: none;display: none;border-radius:24px;background:rgba(0,0,0,0.5);font-size:16px;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;color:#fff;text-align:center;text-transform:uppercase;font-weight:500;padding:12px 24px;}
+
+
+@media (max-width: 1024px) {
+ #zuck-modal-content .story-viewer .head{top:3px;}
+ #zuck-modal-content .story-viewer .head .loading {width: 24px;height: 24px;margin: 6px 0;}
+ #zuck-modal-content .story-viewer .head .img{width:30px;height:30px;margin-right:12px;}
+ #zuck-modal-content .story-viewer .head .left{font-size:15px;margin:15px 0;}
+ #zuck-modal-content .story-viewer .head .left > div {line-height:30px;}
+ #zuck-modal-content .story-viewer .head .right .time{display:block;white-space:nowrap;font-size:15px;margin: 15px 0;line-height: 30px}
+ #zuck-modal-content .story-viewer .head .left > .back {display: none; background: transparent;z-index: 20; visibility: visible;margin:-6px 0;position: absolute;height:42px;width:72px;line-height: 36px;text-align: left; vertical-align: top;text-shadow:none;}
+
+ #zuck-modal-content .story-viewer.with-back-button .head .left > .back {display: block;}
+ #zuck-modal-content .story-viewer.with-back-button .head .left .img {margin-left:18px}
+
+ #zuck-modal-content .story-viewer .slides-pointers {width:100vw;left:0;right:0;}
+
+ #zuck-modal-content .story-viewer .tip{font-size:14px;padding:6px 12px;}
+ #zuck-modal-content .story-viewer .head .left .time,#zuck-modal-content .story-viewer .head .right .close{display:none;}
+}
diff --git a/FrontEnd/test/node_modules/zuck.js/zuck.js b/FrontEnd/test/node_modules/zuck.js/zuck.js
new file mode 100644
index 0000000..ea17c08
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/zuck.js
@@ -0,0 +1,1420 @@
+/*
+ zuck.js
+ https://github.com/ramon82/zuck.js
+ MIT License
+*/
+
+(function (global) {
+ "use strict";
+
+ var ZuckJS = (function() {
+ var w = window;
+
+ var ZuckJS = function ZuckJS(timeline, options) {
+ var d = document;
+ var zuck = this;
+
+ if (typeof timeline == "string") {
+ timeline = d.getElementById(timeline);
+ }
+
+ /* core functions */
+ var query = function query(qs) {
+ return d.querySelectorAll(qs)[0];
+ };
+
+ var get = function get(array, what) {
+ if (array) {
+ return array[what] || "";
+ } else {
+ return "";
+ }
+ };
+
+ var each = function each(arr, func) {
+ if (arr) {
+ var total = arr.length;
+
+ for (var i = 0; i < total; i++) {
+ func(i, arr[i]);
+ }
+ }
+ };
+
+ var setVendorVariable = function setVendorVariable(ref, variable, value) {
+ var variables = [
+ variable.toLowerCase(),
+ "webkit" + variable,
+ "MS" + variable,
+ "o" + variable
+ ];
+
+ each(variables, function(i, val) {
+ ref[val] = value;
+ });
+ };
+
+ var addVendorEvents = function addVendorEvents(el, func, event) {
+ var events = [
+ event.toLowerCase(),
+ "webkit" + event,
+ "MS" + event,
+ "o" + event
+ ];
+ var element = el;
+
+ each(events, function(i, val) {
+ el.addEventListener(val, func, false);
+ });
+ };
+
+ var onAnimationEnd = function onAnimationEnd(el, func) {
+ addVendorEvents(el, func, "AnimationEnd");
+ };
+
+ var onTransitionEnd = function onTransitionEnd(el, func) {
+ if (!el.transitionEndEvent) {
+ el.transitionEndEvent = true;
+
+ addVendorEvents(el, func, "TransitionEnd");
+ }
+ };
+
+ var prepend = function prepend(parent, child) {
+ if (parent.firstChild) {
+ parent.insertBefore(child, parent.firstChild);
+ } else {
+ parent.appendChild(child);
+ }
+ };
+
+ var getElIndex = function getElIndex(el) {
+ for (var i = 1; (el = el.previousElementSibling); i++) {
+ return i;
+ }
+
+ return 0;
+ };
+
+ var fullScreen = function fullScreen(elem, cancel) {
+ var func = "RequestFullScreen";
+ var elFunc = "requestFullScreen"; //crappy vendor prefixes.
+
+ if (cancel) {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ }
+ } else {
+ try {
+ if (elem[elFunc]) {
+ elem[elFunc]();
+ } else if (elem["ms" + func]) {
+ elem["ms" + func]();
+ } else if (elem["moz" + func]) {
+ elem["moz" + func]();
+ } else if (elem["webkit" + func]) {
+ elem["webkit" + func]();
+ }
+ } catch (e) {}
+ }
+ };
+
+ var translate = function translate(element, to, duration, ease) {
+ var direction = to > 0 ? 1 : -1;
+ var to3d =
+ (Math.abs(to) / query("#zuck-modal").offsetWidth) * 90 * direction;
+
+ if (option("cubeEffect")) {
+ var scaling = to3d == 0 ? "scale(0.95)" : "scale(0.930,0.930)";
+
+ setVendorVariable(
+ query("#zuck-modal-content").style,
+ "Transform",
+ scaling
+ );
+
+ if (to3d < -90 || to3d > 90) {
+ return false;
+ }
+ }
+
+ var transform = !option("cubeEffect")
+ ? "translate3d(" + to + "px, 0, 0)"
+ : "rotateY(" + to3d + "deg)";
+
+ if (element) {
+ setVendorVariable(element.style, "TransitionTimingFunction", ease);
+ setVendorVariable(element.style, "TransitionDuration", duration + "ms");
+ setVendorVariable(element.style, "Transform", transform);
+ }
+ };
+
+ var findPos = function findPos(obj, offsetY, offsetX, stop) {
+ var curleft = 0;
+ var curtop = 0;
+
+ if (obj) {
+ if (obj.offsetParent) {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+
+ if (obj == stop) {
+ break;
+ }
+ } while ((obj = obj.offsetParent));
+ }
+
+ if (offsetY) {
+ curtop = curtop - offsetY;
+ }
+
+ if (offsetX) {
+ curleft = curleft - offsetX;
+ }
+ }
+
+ return [curleft, curtop];
+ };
+
+ var timeAgo = function timeAgo(time) {
+ time = Number(time) * 1000;
+
+ var dateObj = new Date(time);
+ var dateStr = dateObj.getTime();
+ var seconds = (new Date().getTime() - dateStr) / 1000;
+
+ var language = option("language", "time");
+
+ var formats = [
+ [60, " " + language["seconds"], 1], // 60
+ [120, "1 " + language["minute"], ""], // 60*2
+ [3600, " " + language["minutes"], 60], // 60*60, 60
+ [7200, "1 " + language["hour"], ""], // 60*60*2
+ [86400, " " + language["hours"], 3600], // 60*60*24, 60*60
+ [172800, " " + language["yesterday"], ""], // 60*60*24*2
+ [604800, " " + language["days"], 86400]
+ ];
+
+ var currentFormat = 1;
+ if (seconds < 0) {
+ seconds = Math.abs(seconds);
+
+ currentFormat = 2;
+ }
+
+ var i = 0;
+ var format = void 0;
+ while ((format = formats[i++])) {
+ if (seconds < format[0]) {
+ if (typeof format[2] == "string") {
+ return format[currentFormat];
+ } else {
+ return Math.floor(seconds / format[2]) + format[1];
+ }
+ }
+ }
+
+ var day = dateObj.getDate();
+ var month = dateObj.getMonth();
+ var year = dateObj.getFullYear();
+
+ return day + "/" + (month + 1) + "/" + year;
+ };
+
+ /* options */
+ var id = timeline.id;
+
+ var optionsDefault = {
+ skin: "snapgram",
+ avatars: true,
+ stories: [],
+ backButton: true,
+ backNative: false,
+ previousTap: true,
+ autoFullScreen: false,
+ openEffect: true,
+ cubeEffect: false,
+ list: false,
+ localStorage: true,
+ callbacks: {
+ onOpen: function onOpen(storyId, callback) {
+ callback();
+ },
+ onView: function onView(storyId) {},
+ onEnd: function onEnd(storyId, callback) {
+ callback();
+ },
+ onClose: function onClose(storyId, callback) {
+ callback();
+ },
+ onNextItem: function onNextItem(storyId, nextStoryId, callback) {
+ callback();
+ },
+ onNavigateItem: function onNavigateItem(
+ storyId,
+ nextStoryId,
+ callback
+ ) {
+ callback();
+ }
+ },
+ language: {
+ unmute: "Touch to unmute",
+ keyboardTip: "Press space to see next",
+ visitLink: "Visit link",
+ time: {
+ ago: "ago",
+ hour: "hour ago",
+ hours: "hours ago",
+ minute: "minute ago",
+ minutes: "minutes ago",
+ fromnow: "from now",
+ seconds: "seconds ago",
+ yesterday: "yesterday",
+ tomorrow: "tomorrow",
+ days: "days ago"
+ }
+ }
+ };
+
+ var option = function option(name, prop) {
+ var type = function type(what) {
+ return typeof what !== "undefined";
+ };
+
+ if (prop) {
+ if (type(options[name])) {
+ return type(options[name][prop])
+ ? options[name][prop]
+ : optionsDefault[name][prop];
+ } else {
+ return optionsDefault[name][prop];
+ }
+ } else {
+ return type(options[name]) ? options[name] : optionsDefault[name];
+ }
+ };
+
+ /* modal */
+ var zuckModal = function zuckModal() {
+ var opened = false;
+ var modalZuckContainer = query("#zuck-modal");
+
+ if (!modalZuckContainer && !w["Zuck"].hasModal) {
+ w["Zuck"].hasModal = true;
+
+ modalZuckContainer = d.createElement("div");
+ modalZuckContainer.id = "zuck-modal";
+
+ if (option("cubeEffect")) {
+ modalZuckContainer.className = "with-cube";
+ }
+
+ modalZuckContainer.innerHTML = '
';
+ modalZuckContainer.style.display = "none";
+
+ modalZuckContainer.setAttribute("tabIndex", "1");
+ modalZuckContainer.onkeyup = function(e) {
+ var code = e.keyCode;
+
+ if (code == 27) {
+ modal.close();
+ } else if (code == 13 || code == 32) {
+ modal.next();
+ }
+ };
+
+ if (option("openEffect")) {
+ modalZuckContainer.classList.add("with-effects");
+ }
+
+ onTransitionEnd(modalZuckContainer, function() {
+ if (modalZuckContainer.classList.contains("closed")) {
+ modalContent.innerHTML = "";
+ modalZuckContainer.style.display = "none";
+ modalZuckContainer.classList.remove("closed");
+ modalZuckContainer.classList.remove("animated");
+ }
+ });
+
+ d.body.appendChild(modalZuckContainer);
+ }
+
+ var modalContent = query("#zuck-modal-content");
+ var moveStoryItem = function moveStoryItem(direction) {
+ var modalContainer = query("#zuck-modal");
+
+ var target = "";
+ var useless = "";
+ var transform = "0";
+ var modalSlider = query("#zuck-modal-slider-" + id);
+
+ var slideItems = {
+ previous: query("#zuck-modal .story-viewer.previous"),
+ next: query("#zuck-modal .story-viewer.next"),
+ viewing: query("#zuck-modal .story-viewer.viewing")
+ };
+
+ if (
+ (!slideItems["previous"] && !direction) ||
+ (!slideItems["next"] && direction)
+ ) {
+ return false;
+ }
+
+ if (!direction) {
+ target = "previous";
+ useless = "next";
+ } else {
+ target = "next";
+ useless = "previous";
+ }
+
+ var transitionTime = 600;
+ if (option("cubeEffect")) {
+ if (target == "previous") {
+ transform = modalContainer.slideWidth;
+ } else if (target == "next") {
+ transform = modalContainer.slideWidth * -1;
+ }
+ } else {
+ transform = findPos(slideItems[target]);
+ transform = transform[0] * -1;
+ }
+
+ translate(modalSlider, transform, transitionTime, null);
+
+ setTimeout(function() {
+ if (target != "" && slideItems[target] && useless != "") {
+ var currentStory = slideItems[target].getAttribute("data-story-id");
+ zuck.internalData["currentStory"] = currentStory;
+
+ var oldStory = query("#zuck-modal .story-viewer." + useless);
+ if (oldStory) {
+ oldStory.parentNode.removeChild(oldStory);
+ }
+
+ if (slideItems["viewing"]) {
+ slideItems["viewing"].classList.add("stopped");
+ slideItems["viewing"].classList.add(useless);
+ slideItems["viewing"].classList.remove("viewing");
+ }
+
+ if (slideItems[target]) {
+ slideItems[target].classList.remove("stopped");
+ slideItems[target].classList.remove(target);
+ slideItems[target].classList.add("viewing");
+ }
+
+ var newStoryData = getStoryMorningGlory(target);
+ if (newStoryData) {
+ createStoryViewer(newStoryData, target);
+ }
+
+ var storyId = zuck.internalData["currentStory"];
+ var items = query('#zuck-modal [data-story-id="' + storyId + '"]');
+
+ if (items) {
+ items = items.querySelectorAll("[data-index].active");
+ var duration = items[0].firstElementChild;
+
+ zuck.data[storyId]["currentItem"] = parseInt(
+ items[0].getAttribute("data-index"),
+ 10
+ );
+
+ items[0].innerHTML =
+ '
';
+ onAnimationEnd(items[0].firstElementChild, function() {
+ zuck.nextItem(false);
+ });
+ }
+
+ translate(modalSlider, "0", 0, null);
+
+ if (items) {
+ playVideoItem([items[0], items[1]], true);
+ }
+
+ option("callbacks", "onView")(zuck.internalData["currentStory"]);
+ }
+ }, transitionTime + 50);
+ };
+
+ var createStoryViewer = function createStoryViewer(
+ storyData,
+ className,
+ forcePlay
+ ) {
+ var modalContainer = query("#zuck-modal");
+ var modalSlider = query("#zuck-modal-slider-" + id);
+
+ var htmlItems = "";
+ var pointerItems = "";
+ var storyId = get(storyData, "id");
+ var slides = d.createElement("div");
+ var currentItem = get(storyData, "currentItem") || 0;
+ var exists = query(
+ '#zuck-modal .story-viewer[data-story-id="' + storyId + '"]'
+ );
+ var currentItemTime = "";
+
+ if (exists) {
+ return false;
+ }
+
+ slides.className = "slides";
+ each(get(storyData, "items"), function(i, item) {
+ if (currentItem > i) {
+ storyData["items"][i]["seen"] = true;
+ item["seen"] = true;
+ }
+
+ var length = get(item, "length");
+ var linkText = get(item, "linkText");
+ var seenClass = get(item, "seen") === true ? "seen" : "";
+ var commonAttrs =
+ 'data-index="' + i + '" data-item-id="' + get(item, "id") + '"';
+
+ if (currentItem === i) {
+ currentItemTime = timeAgo(get(item, "time"));
+ }
+
+ pointerItems +=
+ "
';
+ htmlItems +=
+ '
";
+ });
+ slides.innerHTML = htmlItems;
+
+ var video = slides.querySelector("video");
+ var addMuted = function addMuted(video) {
+ if (video.muted) {
+ storyViewer.classList.add("muted");
+ } else {
+ storyViewer.classList.remove("muted");
+ }
+ };
+
+ if (video) {
+ video.onwaiting = function(e) {
+ if (video.paused) {
+ storyViewer.classList.add("paused");
+ storyViewer.classList.add("loading");
+ }
+ };
+
+ video.onplay = function() {
+ addMuted(video);
+
+ storyViewer.classList.remove("stopped");
+ storyViewer.classList.remove("paused");
+ storyViewer.classList.remove("loading");
+ };
+
+ video.onready = video.onload = video.onplaying = video.oncanplay = function() {
+ addMuted(video);
+
+ storyViewer.classList.remove("loading");
+ };
+
+ video.onvolumechange = function() {
+ addMuted(video);
+ };
+ }
+
+ var storyViewer = d.createElement("div");
+ storyViewer.className =
+ "story-viewer muted " +
+ className +
+ " " +
+ (!forcePlay ? "stopped" : "") +
+ " " +
+ (option("backButton") ? "with-back-button" : "");
+ storyViewer.setAttribute("data-story-id", storyId);
+
+ var html =
+ '
' +
+ (option("backButton") ? '
‹ ' : "") +
+ '
' +
+ get(storyData, "name") +
+ ' ' +
+ currentItemTime +
+ '
' +
+ currentItemTime +
+ ' × ";
+ storyViewer.innerHTML = html;
+
+ each(storyViewer.querySelectorAll(".close, .back"), function(i, el) {
+ el.onclick = function(e) {
+ e.preventDefault();
+ modal.close();
+ };
+ });
+
+ storyViewer.appendChild(slides);
+
+ if (className == "viewing") {
+ playVideoItem(
+ storyViewer.querySelectorAll(
+ '[data-index="' + currentItem + '"].active'
+ ),
+ false
+ );
+ }
+
+ each(
+ storyViewer.querySelectorAll(".slides-pointers [data-index] > b"),
+ function(i, el) {
+ onAnimationEnd(el, function() {
+ zuck.nextItem(false);
+ });
+ }
+ );
+
+ if (className == "previous") {
+ prepend(modalSlider, storyViewer);
+ } else {
+ modalSlider.appendChild(storyViewer);
+ }
+ };
+
+ var createStoryTouchEvents = function createStoryTouchEvents(
+ modalSliderElement
+ ) {
+ var modalContainer = query("#zuck-modal");
+ var enableMouseEvents = true;
+
+ var modalSlider = modalSliderElement;
+ var position = {};
+ var touchOffset = void 0;
+ var isScrolling = void 0;
+ var delta = void 0;
+ var timer = void 0;
+ var nextTimer = void 0;
+
+ var touchStart = function touchStart(event) {
+ var storyViewer = query("#zuck-modal .viewing");
+
+ if (event.target.nodeName == "A") {
+ return true;
+ } else {
+ event.preventDefault();
+ }
+
+ var touches = event.touches ? event.touches[0] : event;
+ var pos = findPos(query("#zuck-modal .story-viewer.viewing"));
+
+ modalContainer.slideWidth = query(
+ "#zuck-modal .story-viewer"
+ ).offsetWidth;
+ position = {
+ x: pos[0],
+ y: pos[1]
+ };
+
+ var pageX = touches.pageX;
+ var pageY = touches.pageY;
+
+ touchOffset = {
+ x: pageX,
+ y: pageY,
+ time: Date.now()
+ };
+
+ isScrolling = undefined;
+ delta = {};
+
+ if (enableMouseEvents) {
+ modalSlider.addEventListener("mousemove", touchMove);
+ modalSlider.addEventListener("mouseup", touchEnd);
+ modalSlider.addEventListener("mouseleave", touchEnd);
+ }
+ modalSlider.addEventListener("touchmove", touchMove);
+ modalSlider.addEventListener("touchend", touchEnd);
+
+ if (storyViewer) {
+ storyViewer.classList.add("paused");
+ }
+ pauseVideoItem();
+
+ timer = setTimeout(function() {
+ storyViewer.classList.add("longPress");
+ }, 600);
+
+ nextTimer = setTimeout(function() {
+ clearInterval(nextTimer);
+ nextTimer = false;
+ }, 250);
+ };
+
+ var touchMove = function touchMove(event) {
+ var touches = event.touches ? event.touches[0] : event;
+ var pageX = touches.pageX;
+ var pageY = touches.pageY;
+
+ if (touchOffset) {
+ delta = {
+ x: pageX - touchOffset.x,
+ y: pageY - touchOffset.y
+ };
+
+ if (typeof isScrolling === "undefined") {
+ isScrolling = !!(
+ isScrolling || Math.abs(delta.x) < Math.abs(delta.y)
+ );
+ }
+
+ if (!isScrolling && touchOffset) {
+ event.preventDefault();
+ translate(modalSlider, position.x + delta.x, 0, null);
+ }
+ }
+ };
+
+ var touchEnd = function touchEnd(event) {
+ var storyViewer = query("#zuck-modal .viewing");
+ var lastTouchOffset = touchOffset;
+
+ if (delta) {
+ var slidesLength = d.querySelectorAll("#zuck-modal .story-viewer")
+ .length;
+ var duration = touchOffset
+ ? Date.now() - touchOffset.time
+ : undefined;
+ var isValid =
+ (Number(duration) < 300 && Math.abs(delta.x) > 25) ||
+ Math.abs(delta.x) > modalContainer.slideWidth / 3;
+ var direction = delta.x < 0;
+
+ var index = direction
+ ? query("#zuck-modal .story-viewer.next")
+ : query("#zuck-modal .story-viewer.previous");
+ var isOutOfBounds = (direction && !index) || (!direction && !index);
+
+ if (!isScrolling) {
+ if (isValid && !isOutOfBounds) {
+ moveStoryItem(direction, true);
+ } else {
+ translate(modalSlider, position.x, 300);
+ }
+ }
+
+ touchOffset = undefined;
+
+ if (enableMouseEvents) {
+ modalSlider.removeEventListener("mousemove", touchMove);
+ modalSlider.removeEventListener("mouseup", touchEnd);
+ modalSlider.removeEventListener("mouseleave", touchEnd);
+ }
+ modalSlider.removeEventListener("touchmove", touchMove);
+ modalSlider.removeEventListener("touchend", touchEnd);
+ }
+
+ var video = zuck.internalData["currentVideoElement"];
+ if (timer) {
+ clearInterval(timer);
+ }
+
+ if (storyViewer) {
+ storyViewer.classList.remove("longPress");
+ storyViewer.classList.remove("paused");
+ }
+
+ if (nextTimer) {
+ clearInterval(nextTimer);
+ nextTimer = false;
+
+ var navigateItem = function navigateItem() {
+ if (
+ lastTouchOffset.x > w.screen.width / 3 ||
+ !option("previousTap")
+ ) {
+ zuck.navigateItem("next", event);
+ } else {
+ zuck.navigateItem("previous", event);
+ }
+ };
+
+ var storyViewerViewing = query("#zuck-modal .viewing");
+ if (storyViewerViewing && video) {
+ if (storyViewerViewing.classList.contains("muted")) {
+ unmuteVideoItem(video, storyViewerViewing);
+ } else {
+ navigateItem();
+ }
+ } else {
+ navigateItem();
+
+ return false;
+ }
+ }
+ };
+
+ modalSlider.addEventListener("touchstart", touchStart);
+
+ if (enableMouseEvents) {
+ modalSlider.addEventListener("mousedown", touchStart);
+ }
+ };
+
+ return {
+ show: function show(storyId, page) {
+ var modalContainer = query("#zuck-modal");
+
+ var callback = function callback() {
+ modalContent.innerHTML =
+ '
';
+
+ var storyData = zuck.data[storyId];
+ var currentItem = storyData["currentItem"] || 0;
+ var modalSlider = query("#zuck-modal-slider-" + id);
+
+ createStoryTouchEvents(modalSlider);
+
+ zuck.internalData["currentStory"] = storyId;
+ storyData["currentItem"] = currentItem;
+
+ if (option("backNative")) {
+ location.hash = "#!" + id;
+ }
+
+ var previousItemData = getStoryMorningGlory("previous");
+ if (previousItemData) {
+ createStoryViewer(previousItemData, "previous");
+ }
+
+ createStoryViewer(storyData, "viewing", true);
+
+ var nextItemData = getStoryMorningGlory("next");
+ if (nextItemData) {
+ createStoryViewer(nextItemData, "next");
+ }
+
+ if (option("autoFullScreen")) {
+ modalContainer.classList.add("fullscreen");
+ }
+
+ var tryFullScreen = function tryFullScreen() {
+ if (
+ modalContainer.classList.contains("fullscreen") &&
+ option("autoFullScreen") &&
+ w.screen.width <= 1024
+ ) {
+ fullScreen(modalContainer);
+ }
+
+ modalContainer.focus();
+ };
+
+ if (option("openEffect")) {
+ var storyEl = query(
+ "#" + id + ' [data-id="' + storyId + '"] .img'
+ );
+ var pos = findPos(storyEl);
+
+ modalContainer.style.marginLeft =
+ pos[0] + storyEl.offsetWidth / 2 + "px";
+ modalContainer.style.marginTop =
+ pos[1] + storyEl.offsetHeight / 2 + "px";
+
+ modalContainer.style.display = "block";
+
+ modalContainer.slideWidth = query(
+ "#zuck-modal .story-viewer"
+ ).offsetWidth;
+
+ setTimeout(function() {
+ modalContainer.classList.add("animated");
+ }, 10);
+
+ setTimeout(function() {
+ tryFullScreen();
+ }, 300); //because effects
+ } else {
+ modalContainer.style.display = "block";
+ modalContainer.slideWidth = query(
+ "#zuck-modal .story-viewer"
+ ).offsetWidth;
+
+ tryFullScreen();
+ }
+
+ option("callbacks", "onView")(storyId);
+ };
+
+ option("callbacks", "onOpen")(storyId, callback);
+ },
+ next: function next(unmute) {
+ var modalContainer = query("#zuck-modal");
+
+ var callback = function callback() {
+ var lastStory = zuck.internalData["currentStory"];
+ var lastStoryTimelineElement = query(
+ "#" + id + ' [data-id="' + lastStory + '"]'
+ );
+
+ if (lastStoryTimelineElement) {
+ lastStoryTimelineElement.classList.add("seen");
+
+ zuck.data[lastStory]["seen"] = true;
+ zuck.internalData["seenItems"][lastStory] = true;
+
+ saveLocalData("seenItems", zuck.internalData["seenItems"]);
+ updateStoryseenPosition();
+ }
+
+ var stories = query("#zuck-modal .story-viewer.next");
+ if (!stories) {
+ modal.close();
+ } else {
+ moveStoryItem(true);
+ }
+ };
+
+ option("callbacks", "onEnd")(
+ zuck.internalData["currentStory"],
+ callback
+ );
+ },
+ close: function close() {
+ var modalContainer = query("#zuck-modal");
+
+ var callback = function callback() {
+ if (option("backNative")) {
+ location.hash = "";
+ }
+
+ fullScreen(modalContainer, true);
+
+ if (option("openEffect")) {
+ modalContainer.classList.add("closed");
+ } else {
+ modalContent.innerHTML = "";
+ modalContainer.style.display = "none";
+ }
+ };
+
+ option("callbacks", "onClose")(
+ zuck.internalData["currentStory"],
+ callback
+ );
+ }
+ };
+ };
+ var modal = new zuckModal();
+
+ /* parse functions */
+ var parseItems = function parseItems(story) {
+ var storyId = story.getAttribute("data-id");
+ var storyItems = d.querySelectorAll(
+ "#" + id + ' [data-id="' + storyId + '"] .items > li'
+ );
+ var items = [];
+
+ each(storyItems, function(i, el) {
+ var a = el.firstElementChild;
+ var img = a.firstElementChild;
+
+ items.push({
+ src: a.getAttribute("href"),
+ length: a.getAttribute("data-length"),
+ type: a.getAttribute("data-type"),
+ time: a.getAttribute("data-time"),
+ link: a.getAttribute("data-link"),
+ linkText: a.getAttribute("data-linkText"),
+ preview: img.getAttribute("src")
+ });
+ });
+
+ zuck.data[storyId].items = items;
+ };
+
+ var parseStory = function parseStory(story) {
+ var storyId = story.getAttribute("data-id");
+ var seen = false;
+
+ if (zuck.internalData["seenItems"][storyId]) {
+ seen = true;
+ }
+
+ if (seen) {
+ story.classList.add("seen");
+ } else {
+ story.classList.remove("seen");
+ }
+
+ try {
+ zuck.data[storyId] = {
+ id: storyId, //story id
+ photo: story.getAttribute("data-photo"), //story photo (or user photo)
+ name: story.firstElementChild.lastElementChild.firstChild.innerText,
+ link: story.firstElementChild.getAttribute("href"),
+ lastUpdated: story.getAttribute("data-last-updated"),
+ seen: seen,
+ items: []
+ };
+ } catch (e) {
+ zuck.data[storyId] = {
+ items: []
+ };
+ }
+
+ story.onclick = function(e) {
+ e.preventDefault();
+
+ modal.show(storyId);
+ };
+ };
+
+ var getStoryMorningGlory = function getStoryMorningGlory(what) {
+ //my wife told me to stop singing Wonderwall. I SAID MAYBE.
+ var currentStory = zuck.internalData["currentStory"];
+ var whatEl = what + "ElementSibling";
+
+ if (currentStory) {
+ var foundStory = query("#" + id + ' [data-id="' + currentStory + '"]')[
+ whatEl
+ ];
+
+ if (foundStory) {
+ var storyId = foundStory.getAttribute("data-id");
+ var data = zuck.data[storyId] || false;
+
+ return data; //(get(zuck.data[storyId], 'seen')==true)?false:data;
+ }
+ }
+
+ return false;
+ };
+
+ var updateStoryseenPosition = function updateStoryseenPosition() {
+ each(d.querySelectorAll("#" + id + " .story.seen"), function(i, el) {
+ var newData = zuck.data[el.getAttribute("data-id")];
+ var timeline = el.parentNode;
+
+ timeline.removeChild(el);
+ zuck.add(newData, true);
+ });
+ };
+
+ var playVideoItem = function playVideoItem(elements, unmute) {
+ var itemElement = elements[1];
+ var itemPointer = elements[0];
+ var storyViewer = itemPointer.parentNode.parentNode.parentNode;
+
+ if (!itemElement || !itemPointer) {
+ return false;
+ }
+
+ var cur = zuck.internalData["currentVideoElement"];
+ if (cur) {
+ cur.pause();
+ }
+
+ if (itemElement.getAttribute("data-type") == "video") {
+ var video = itemElement.getElementsByTagName("video")[0];
+ if (!video) {
+ zuck.internalData["currentVideoElement"] = false;
+
+ return false;
+ }
+
+ var setDuration = function setDuration() {
+ if (video.duration) {
+ setVendorVariable(
+ itemPointer.getElementsByTagName("b")[0].style,
+ "AnimationDuration",
+ video.duration + "s"
+ );
+ }
+ };
+
+ setDuration();
+ video.addEventListener("loadedmetadata", setDuration);
+ zuck.internalData["currentVideoElement"] = video;
+
+ video.currentTime = 0;
+ video.play();
+
+ if (unmute.target) {
+ unmuteVideoItem(video, storyViewer);
+ }
+ } else {
+ zuck.internalData["currentVideoElement"] = false;
+ }
+ };
+
+ var pauseVideoItem = function pauseVideoItem() {
+ var video = zuck.internalData["currentVideoElement"];
+ if (video) {
+ try {
+ video.pause();
+ } catch (e) {}
+ }
+ };
+
+ var unmuteVideoItem = function unmuteVideoItem(video, storyViewer) {
+ video.muted = false;
+ video.volume = 1.0;
+ video.removeAttribute("muted");
+ video.play();
+
+ if (video.paused) {
+ video.muted = true;
+ video.play();
+ }
+
+ if (storyViewer) {
+ storyViewer.classList.remove("paused");
+ }
+ };
+
+ /* data functions */
+ var saveLocalData = function saveLocalData(key, data) {
+ try {
+ if (option("localStorage")) {
+ var keyName = "zuck-" + id + "-" + key;
+
+ w.localStorage[keyName] = JSON.stringify(data);
+ }
+ } catch (e) {}
+ };
+
+ var getLocalData = function getLocalData(key) {
+ if (option("localStorage")) {
+ var keyName = "zuck-" + id + "-" + key;
+
+ return w.localStorage[keyName]
+ ? JSON.parse(w.localStorage[keyName])
+ : false;
+ } else {
+ return false;
+ }
+ };
+
+ /* api */
+ zuck.data = {};
+ zuck.internalData = {};
+ zuck.internalData["seenItems"] = getLocalData("seenItems") || {};
+
+ zuck.add = zuck.update = function(data, append) {
+ var storyId = get(data, "id");
+ var storyEl = query("#" + id + ' [data-id="' + storyId + '"]');
+ var html = "";
+ var items = get(data, "items");
+ var story = false;
+
+ zuck.data[storyId] = {};
+
+ if (!storyEl) {
+ story = d.createElement("div");
+ story.className = "story";
+ } else {
+ story = storyEl;
+ }
+
+ if (data["seen"] === false) {
+ zuck.internalData["seenItems"][storyId] = false;
+ saveLocalData("seenItems", zuck.internalData["seenItems"]);
+ }
+
+ story.setAttribute("data-id", storyId);
+ story.setAttribute("data-photo", get(data, "photo"));
+ story.setAttribute("data-last-updated", get(data, "lastUpdated"));
+
+ var preview = false;
+ if (items[0]) {
+ preview = items[0]["preview"] || "";
+ }
+
+ html =
+ '
' +
+ get(data, "name") +
+ ' ' +
+ timeAgo(get(data, "lastUpdated")) +
+ ' ';
+ story.innerHTML = html;
+ parseStory(story);
+
+ if (!storyEl) {
+ if (append) {
+ timeline.appendChild(story);
+ } else {
+ prepend(timeline, story);
+ }
+ }
+
+ each(items, function(i, item) {
+ zuck.addItem(storyId, item, append);
+ });
+
+ if (!append) {
+ updateStoryseenPosition();
+ }
+ };
+ zuck.next = function() {
+ modal.next();
+ };
+ zuck.remove = function(storyId) {
+ var story = query("#" + id + ' > [data-id="' + storyId + '"]');
+ story.parentNode.removeChild(story);
+ };
+ zuck.addItem = function(storyId, data, append) {
+ var story = query("#" + id + ' > [data-id="' + storyId + '"]');
+ var li = d.createElement("li");
+
+ li.className = get(data, "seen") ? "seen" : "";
+ li.setAttribute("data-id", get(data, "id"));
+
+ li.innerHTML =
+ '
';
+
+ var el = story.querySelectorAll(".items")[0];
+ if (append) {
+ el.appendChild(li);
+ } else {
+ prepend(el, li);
+ }
+
+ parseItems(story);
+ };
+ zuck.removeItem = function(storyId, itemId) {
+ var item = query(
+ "#" + id + ' > [data-id="' + storyId + '"] [data-id="' + itemId + '"]'
+ );
+
+ timeline.parentNode.removeChild(item);
+ };
+ zuck.navigateItem = zuck.nextItem = function(direction, event) {
+ var currentStory = zuck.internalData["currentStory"];
+ var currentItem = zuck.data[currentStory]["currentItem"];
+ var storyViewer = query(
+ '#zuck-modal .story-viewer[data-story-id="' + currentStory + '"]'
+ );
+ var directionNumber = direction == "previous" ? -1 : 1;
+
+ if (!storyViewer || storyViewer.touchMove == 1) {
+ return false;
+ }
+
+ var currentItemElements = storyViewer.querySelectorAll(
+ '[data-index="' + currentItem + '"]'
+ );
+ var currentPointer = currentItemElements[0];
+ var currentItemElement = currentItemElements[1];
+
+ var navigateItem = currentItem + directionNumber;
+ var nextItems = storyViewer.querySelectorAll(
+ '[data-index="' + navigateItem + '"]'
+ );
+ var nextPointer = nextItems[0];
+ var nextItem = nextItems[1];
+
+ if (storyViewer && nextPointer && nextItem) {
+ var navigateItemCallback = function navigateItemCallback() {
+ if (direction == "previous") {
+ currentPointer.classList.remove("seen");
+ currentItemElement.classList.remove("seen");
+ } else {
+ currentPointer.classList.add("seen");
+ currentItemElement.classList.add("seen");
+ }
+
+ currentPointer.classList.remove("active");
+ currentItemElement.classList.remove("active");
+
+ nextPointer.classList.remove("seen");
+ nextPointer.classList.add("active");
+
+ nextItem.classList.remove("seen");
+ nextItem.classList.add("active");
+
+ each(storyViewer.querySelectorAll(".time"), function(i, el) {
+ el.innerText = timeAgo(nextItem.getAttribute("data-time"));
+ });
+
+ zuck.data[currentStory]["currentItem"] =
+ zuck.data[currentStory]["currentItem"] + directionNumber;
+
+ playVideoItem(nextItems, event);
+ };
+
+ var callback = option("callbacks", "onNavigateItem");
+ callback = !callback
+ ? option("callbacks", "onNextItem")
+ : option("callbacks", "onNavigateItem");
+
+ callback(
+ currentStory,
+ nextItem.getAttribute("data-story-id"),
+ navigateItemCallback
+ );
+ } else if (storyViewer) {
+ if (direction != "previous") {
+ modal.next(event);
+ }
+ }
+ };
+ var init = function init() {
+ if (location.hash == "#!" + id) {
+ location.hash = "";
+ }
+
+ if (query("#" + id + " .story")) {
+ each(timeline.querySelectorAll(".story"), function(i, story) {
+ parseStory(story, true);
+ });
+ }
+
+ if (option("backNative")) {
+ w.addEventListener(
+ "popstate",
+ function(e) {
+ if (location.hash != "#!" + id) {
+ location.hash = "";
+ }
+ },
+ false
+ );
+ }
+
+ each(option("stories"), function(i, item) {
+ zuck.add(item, true);
+ });
+
+ updateStoryseenPosition();
+
+ var avatars = option("avatars") ? "user-icon" : "story-preview";
+ var list = option("list") ? "list" : "carousel";
+
+ timeline.className =
+ "stories " +
+ avatars +
+ " " +
+ list +
+ " " +
+ (option("skin") + "").toLowerCase();
+
+ return zuck;
+ };
+
+ return init();
+ };
+
+ /* Helpers */
+ ZuckJS.buildItem = function(
+ id,
+ type,
+ length,
+ src,
+ preview,
+ link,
+ linkText,
+ seen,
+ time
+ ) {
+ return {
+ id: id,
+ type: type,
+ length: length,
+ src: src,
+ preview: preview,
+ link: link,
+ linkText: linkText,
+ seen: seen,
+ time: time
+ };
+ };
+
+ /* Too much zuck zuck to maintain legacy */
+ w["ZuckitaDaGalera"] = w["Zuck"] = ZuckJS;
+
+ return ZuckJS;
+ })();
+
+ // AMD support
+ if (typeof define === 'function' && define.amd) {
+ define(function () { return ZuckJS; });
+ // CommonJS and Node.js module support.
+ } else if (typeof exports !== 'undefined') {
+ // Support Node.js specific `module.exports` (which can be a function)
+ if (typeof module !== 'undefined' && module.exports) {
+ exports = module.exports = ZuckJS;
+ }
+ // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function)
+ exports.ZuckJS = ZuckJS;
+ } else {
+ global.ZuckJS = ZuckJS;
+ }
+})(this);
diff --git a/FrontEnd/test/node_modules/zuck.js/zuck.min.css b/FrontEnd/test/node_modules/zuck.js/zuck.min.css
new file mode 100644
index 0000000..f145abe
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/zuck.min.css
@@ -0,0 +1,2 @@
+/* zuck.js - https://github.com/ramon82/zuck.js - MIT License */
+.stories.carousel{white-space:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch}.stories.carousel::-webkit-scrollbar{width:0;background:0 0}.stories.carousel .story>a>.img>*,.stories.list .story>a>.img>*{background-size:cover;background-position:center;box-sizing:border-box}.stories.carousel .story{display:inline-block;width:18vw;max-width:90px;margin:0 6px}.stories.carousel .story:first-child{margin-left:0}.stories.carousel .story:last-child{margin-right:0}.stories.carousel .story>a{text-align:center;display:block}.stories.carousel .story>a:active>.img{transform:scale(.9)}.stories.carousel .story>a>.img{display:block;box-sizing:border-box;font-size:0;max-height:90px;height:18vw;overflow:hidden;transition:transform .2s}.stories.carousel .story>a>.img>*{display:block;height:100%;width:100%}.stories.carousel .story>a>.info{display:inline-block;margin-top:.5em;line-height:1.2em;width:100%;overflow:hidden;text-overflow:ellipsis}.stories.carousel .story>a>.info strong{font-weight:300}.stories.carousel .story>.items,.stories.carousel .story>a>.info .time{display:none}.stories.list{white-space:nowrap;overflow:auto}.stories.list .story{display:block;width:auto;margin:6px;padding-bottom:6px}.stories.list .story>a{text-align:left;display:block}.stories.list .story>a>.img{height:42px;width:42px;max-width:42px;margin-right:12px;vertical-align:top;display:inline-block;box-sizing:border-box;font-size:0;overflow:hidden}.stories.list .story>a>.img>*{display:block;height:100%;width:100%}.stories.list .story>a>.info{display:inline-block;line-height:1.6em;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.stories.list .story>a>.info strong{font-weight:500;display:block}.stories.list .story>a>.info .time{display:inline-block}.stories.list .story>.items{display:none}@-webkit-keyframes zuckSlideTime{0%{max-width:0}100%{max-width:100%}}@keyframes zuckSlideTime{0%{max-width:0}100%{max-width:100%}}@-webkit-keyframes zuckLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes zuckLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}#zuck-modal{outline:0!important;overflow:hidden;position:fixed;background:rgba(0,0,0,.75);z-index:100000;font-size:14px;font-family:inherit}#zuck-modal-content,#zuck-modal-content .story-viewer,#zuck-modal-content .story-viewer>.slides,#zuck-modal-content .story-viewer>.slides>*{width:100vw;height:100%;top:0;bottom:0;position:absolute;overflow:hidden}#zuck-modal *{user-select:none;outline:0}#zuck-modal.with-effects{transform:scale(.01);transform-origin:top left;transition:.25s;position:absolute;left:0;width:100vw;height:100%;top:0;bottom:0}#zuck-modal.with-effects.animated{transform:scale(1);border-radius:0;margin-top:0!important;margin-left:0!important}#zuck-modal.with-effects.closed{transform:translateY(100%)}#zuck-modal .slider{width:300vw;height:100%;top:0;bottom:0;left:-100vw;position:absolute}#zuck-modal .slider>*{width:100vw;height:100%;top:0;bottom:0;position:absolute}#zuck-modal .slider>.previous{left:0}#zuck-modal .slider>.viewing{left:100vw}#zuck-modal .slider>.next{left:200vw}#zuck-modal .slider.animated{-webkit-transition:-webkit-transform .25s linear;transition:-webkit-transform .25s linear;transition:transform .25s linear;transition:transform .25s linear,-webkit-transform .25s linear}#zuck-modal.with-cube #zuck-modal-content{perspective:1000vw;transform:scale(.95);perspective-origin:50% 50%;overflow:visible;transition:.3s}#zuck-modal.with-cube .slider{transform-style:preserve-3d;transform:rotateY(0)}#zuck-modal.with-cube .slider>.previous{backface-visibility:hidden;left:100vw;transform:rotateY(270deg) translateX(-50%);transform-origin:center left}#zuck-modal.with-cube .slider>.viewing{backface-visibility:hidden;left:100vw;transform:translateZ(50vw)}#zuck-modal.with-cube .slider>.next{backface-visibility:hidden;left:100vw;transform:rotateY(-270deg) translateX(50%);transform-origin:top right}#zuck-modal-content .story-viewer.paused.longPress .head,#zuck-modal-content .story-viewer.paused.longPress .slides-pointers,#zuck-modal-content .story-viewer.paused.longPress .tip{opacity:0}#zuck-modal-content .story-viewer.viewing:not(.paused):not(.stopped) .slides-pointers>*>.active>b{-webkit-animation-play-state:running;animation-play-state:running}#zuck-modal-content .story-viewer.next{z-index:10}#zuck-modal-content .story-viewer.viewing{z-index:5}#zuck-modal-content .story-viewer.previous{z-index:0}#zuck-modal-content .story-viewer.loading .head .loading,#zuck-modal-content .story-viewer.muted .tip.muted{display:block}#zuck-modal-content .story-viewer.loading .head .right .close,#zuck-modal-content .story-viewer.loading .head .right .time{display:none}#zuck-modal-content .story-viewer .slides-pointers{display:table;table-layout:fixed;border-spacing:6px;border-collapse:separate;position:absolute;width:100vh;bottom:0;top:0;left:calc(50vw - 50vh);right:calc(50vw - 50vh);z-index:100020}#zuck-modal-content .story-viewer .slides-pointers>*{display:table-row}#zuck-modal-content .story-viewer .slides-pointers>*>*{display:table-cell;background:rgba(255,255,255,.5);border-radius:2px}#zuck-modal-content .story-viewer .slides-pointers>*>.seen{background:#fff}#zuck-modal-content .story-viewer .slides-pointers>*>*>b{background:#fff;width:auto;max-width:0;height:2px;display:block;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-play-state:paused;animation-play-state:paused;border-radius:2px}#zuck-modal-content .story-viewer .slides-pointers>*>.active>b{-webkit-animation-name:zuckSlideTime;animation-name:zuckSlideTime;-webkit-animation-timing-function:linear;animation-timing-function:linear}#zuck-modal-content .story-viewer .head{position:absolute;height:56px;left:0;right:0;line-height:56px;z-index:100010;color:#fff;font-size:14px;text-shadow:1px 1px 1px rgba(0,0,0,.35),1px 0 1px rgba(0,0,0,.35);padding:0 6px}#zuck-modal-content .story-viewer .head .img{background-size:cover;width:42px;height:42px;display:inline-block;margin-right:12px;border-radius:50%;vertical-align:middle;background-repeat:no-repeat;background-position:center}#zuck-modal-content .story-viewer .head .img:before{content:'';display:block;width:100%;height:100%;border-radius:50%;border:1px solid #000;opacity:.1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";box-sizing:border-box}#zuck-modal-content .story-viewer .head .time{opacity:.75;font-weight:500;font-size:13px}#zuck-modal-content .story-viewer .head .left{line-height:1!important;display:inline-block;margin:6px 0}#zuck-modal-content .story-viewer .head .left>div{display:inline-block;max-width:30vw;vertical-align:middle}#zuck-modal-content .story-viewer .head .left>div>*{width:100%;display:inline-block;line-height:21px}#zuck-modal-content .story-viewer .head .left>div>strong{font-weight:500}#zuck-modal-content .story-viewer .head .right{float:right}#zuck-modal-content .story-viewer .head .back,#zuck-modal-content .story-viewer .head .right .close{font-size:42px;width:48px;cursor:pointer;text-align:center}#zuck-modal-content .story-viewer .head .left>.back{display:none;width:24px;margin:-6px -6px 0}#zuck-modal-content .story-viewer .head .right .time{display:none}#zuck-modal-content .story-viewer .head .loading{display:none;border-radius:50%;width:30px;height:30px;border:4px solid rgba(255,255,255,.2);box-sizing:border-box;border-top-color:#FFF;-webkit-animation:zuckLoading 1s infinite linear;animation:zuckLoading 1s infinite linear}#zuck-modal-content .story-viewer .head,#zuck-modal-content .story-viewer .slides-pointers,#zuck-modal-content .story-viewer .tip{-webkit-transition:opacity .5s;transition:opacity .5s}#zuck-modal-content .story-viewer .slides .item{display:none;overflow:hidden;background:#000}#zuck-modal-content .story-viewer .slides .item:before{z-index:4;background:0 0;content:'';position:absolute;left:0;right:0;bottom:0;top:0}#zuck-modal-content .story-viewer .slides .item>.media{height:100%;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:auto}#zuck-modal-content .story-viewer .slides .item.active,#zuck-modal-content .story-viewer .slides .item.active .tip.link{display:block}#zuck-modal-content .story-viewer .tip{text-decoration:none;display:none;border-radius:24px;background:rgba(0,0,0,.5);font-size:16px;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;color:#fff;text-align:center;text-transform:uppercase;font-weight:500;padding:12px 24px}@media (max-width:1024px){#zuck-modal-content .story-viewer .head{top:3px}#zuck-modal-content .story-viewer .head .loading{width:24px;height:24px;margin:6px 0}#zuck-modal-content .story-viewer .head .img{width:30px;height:30px;margin-right:12px}#zuck-modal-content .story-viewer .head .left{font-size:15px;margin:15px 0}#zuck-modal-content .story-viewer .head .left>div{line-height:30px}#zuck-modal-content .story-viewer .head .right .time{display:block;white-space:nowrap;font-size:15px;margin:15px 0;line-height:30px}#zuck-modal-content .story-viewer .head .left>.back{display:none;background:0 0;z-index:20;visibility:visible;margin:-6px 0;position:absolute;height:42px;width:72px;line-height:36px;text-align:left;vertical-align:top;text-shadow:none}#zuck-modal-content .story-viewer.with-back-button .head .left>.back{display:block}#zuck-modal-content .story-viewer.with-back-button .head .left .img{margin-left:18px}#zuck-modal-content .story-viewer .slides-pointers{width:100vw;left:0;right:0}#zuck-modal-content .story-viewer .tip{font-size:14px;padding:6px 12px}#zuck-modal-content .story-viewer .head .left .time,#zuck-modal-content .story-viewer .head .right .close{display:none}}
diff --git a/FrontEnd/test/node_modules/zuck.js/zuck.min.js b/FrontEnd/test/node_modules/zuck.js/zuck.min.js
new file mode 100644
index 0000000..605c6c8
--- /dev/null
+++ b/FrontEnd/test/node_modules/zuck.js/zuck.min.js
@@ -0,0 +1,2 @@
+/* zuck.js - https://github.com/ramon82/zuck.js - MIT License */
+"use strict";(function(b){"use strict";var c=function(){var f=window,g=function(j,k){var l=document,m=this;"string"==typeof j&&(j=l.getElementById(j));var n=function(R){return l.querySelectorAll(R)[0]},o=function(R,S){return R?R[S]||"":""},p=function(R,S){if(R)for(var T=R.length,U=0;U
W||90U&&(U=Math.abs(U),X=2);for(var Z,Y=0;Z=W[Y++];)if(U 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
- 
- 
+