diff --git a/front/css/party.css b/front/css/party.css
new file mode 100644
index 0000000..48a9e24
--- /dev/null
+++ b/front/css/party.css
@@ -0,0 +1,231 @@
+* {box-sizing: border-box;}
+
+@font-face {
+ font-family: 'Futura_Condenced-Normal';
+ src: url('../font/Futura_Condenced-Normal.eot');
+ src: local('../font/Futura_Condenced-Normal'),
+ url('../font/Futura_Condenced-Normal.eot?#iefix') format('embedded-opentype'),
+ url('../font/Futura_Condenced-Normal.woff') format('woff'),
+ url('../font/Futura_Condenced-Normal.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+body, html {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+.wrap {
+ position: relative;
+ width: 560px;
+ margin: 0 auto;
+}
+
+
+/* Пати */
+.group-list {
+ width: 280px;
+ list-style: none;
+ position: absolute;
+ top: 0; right: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.group-memeber {
+ margin-bottom: 10px;
+}
+
+.group-memeber .head-line {
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ text-align: right;
+ cursor: pointer;
+ margin-bottom: 5px;
+}
+
+.group-memeber .leader-icon svg {
+ display: none;
+ width: 22px;
+ height: 22px;
+ margin-left: 5px;
+ color: #fff;
+}
+
+.group-memeber.leader .leader-icon svg {
+ display: inline-block;
+}
+
+.group-memeber .nickname {
+ color: #FEFEFE;
+ font-family: Arial;
+ font-size: 15pt;
+ opacity: 0.7;
+ transition: opacity 0.3s;
+ flex-grow: 1;
+}
+
+.group-memeber:hover .nickname {
+ opacity: 1;
+}
+
+.group-memeber .heal-line,
+.group-memeber .heal-line .value {
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 2% 100%);
+}
+
+.group-memeber .mana-line,
+.group-memeber .mana-line .value {
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 1% 100%);
+}
+
+.group-memeber .heal-line {
+ background: rgba(43, 42, 41, 0.7);
+ height: 18px;
+ padding: 1px 1px;
+ overflow: hidden;
+
+ margin-bottom: 2px;
+}
+.group-memeber .heal-line .value {
+ display: inline-block;
+ width: 100%;
+ height: 15px;
+ background: url(../images/party/heal.jpg) no-repeat;
+ background-size: 100% 100%;
+ transition: width ease 0.6s;
+}
+
+.group-memeber .mana-line {
+ background: rgba(43, 42, 41, 0.7);
+ height: 8px;
+ padding: 1px 1px;
+ overflow: hidden;
+ margin-left: 6px;
+}
+.group-memeber .mana-line .value {
+ display: inline-block;
+ width: 100%;
+ height: 5px;
+ background: url(../images/party/mana.jpg) no-repeat;
+ background-size: 100% 100%;
+ transition: width ease 0.6s;
+}
+
+
+
+
+
+/* Выпадающие меню */
+.group-menu {
+ display: none;
+ width: 280px;
+ list-style: none;
+ padding: 0;
+ padding-right: 20px;
+ margin: 0;
+ position: absolute;
+ top: 0; left: 0;
+ animation: fadein 0.5s;
+}
+
+.group-item {
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ cursor: pointer;
+}
+
+.group-item .group-title {
+ position: relative;
+ text-transform: uppercase;
+ font-family: 'Futura_Condenced-Normal';
+ font-size: 15px;
+ color: #000;
+ padding: 5px 10px;
+ flex-grow: 1;
+
+ left: 0;
+
+ transition-property: color, left;
+ transition-duration: 0.5s, 0.5s;
+}
+
+.group-item .group-title span {
+ position: relative;
+ z-index: 1;
+}
+
+.group-item .group-title:before {
+ content: '';
+ position: absolute;
+ z-index: 0;
+ top: 0; bottom: 0;
+ left: 0; right: 0;
+ transition: opacity 0.5s;
+ background: linear-gradient(to right, rgba(254, 254, 254, 1), rgba(255, 255, 255, 0));
+}
+
+.group-item .group-title:after {
+ content: '';
+ position: absolute;
+ z-index: 0;
+ top: 0; bottom: 0;
+ left: 0; right: 0;
+ opacity: 0;
+ transition: opacity 0.5s;
+ background: linear-gradient(to right, rgba(31, 27, 32, 1), rgba(31, 27, 32, 0));
+}
+
+.group-item .group-title svg {
+ opacity: 0;
+ position: absolute;
+ top: 6px; right: 0;
+ color: #fff;
+ width: 15px;
+ height: 15px;
+ transition: opacity 0.5s;
+}
+
+.group-item:hover .group-title {
+ color: #fff;
+ left: -15px;
+}
+.group-item:hover .group-title:before {opacity: 0;}
+.group-item:hover .group-title:after {opacity: 1;}
+.group-item:hover .group-title svg {opacity: 1;}
+
+
+
+.group-item .group-icon {
+ width: 27px;
+ height: 27px;
+ padding: 6px;
+ transition: background 0.5s;
+ background: rgba(254, 254, 254, 0.8);
+}
+
+.group-item .group-icon svg {
+ width: 15px;
+ height: 15px;
+ color: #000;
+}
+
+.group-item:hover .group-icon {
+ background: rgba(31, 27, 32, 0.8);
+}
+
+.group-item:hover .group-icon svg {
+ color: #fff;
+}
+
+
+/* Анимации */
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
\ No newline at end of file
diff --git a/front/images/party/heal.jpg b/front/images/party/heal.jpg
new file mode 100644
index 0000000..673e551
Binary files /dev/null and b/front/images/party/heal.jpg differ
diff --git a/front/images/party/mana.jpg b/front/images/party/mana.jpg
new file mode 100644
index 0000000..6f31681
Binary files /dev/null and b/front/images/party/mana.jpg differ
diff --git a/front/js/party.js b/front/js/party.js
new file mode 100644
index 0000000..8eec615
--- /dev/null
+++ b/front/js/party.js
@@ -0,0 +1,102 @@
+var menu = (function(){
+ document.addEventListener('click', function(e) {
+ if (e.target.getAttribute('class') == 'nickname') {
+ let menu = document.querySelector('.group-menu');
+ let top = e.target.closest('.group-memeber').getBoundingClientRect().top;
+
+ menu.style.display = 'none';
+ menu.style.top = top;
+ menu.style.display = 'block';
+
+ menu.addEventListener('mouseleave', close, false);
+ }
+ }, false);
+
+ function close() {
+ let item = document.querySelector('.group-menu');
+ item.style.display = 'none';
+ item.removeEventListener('mouseleave', close);
+ }
+
+ return {
+ close: close,
+ };
+})();
+
+var group = (function(menu){
+ var current = [];
+
+ function update(newGroup) {
+ menu.close();
+
+ if (newGroup.length < current.length) {
+ document.querySelector('.group-list').innerHTML = '';
+ }
+
+ for (var i = 0; i < newGroup.length; i++) {
+ updateItem(i, newGroup[i], current[i]);
+ }
+
+ current = newGroup;
+ }
+
+ function updateItem(id, item, old) {
+ let object = getObject(id);
+
+ let notHaveOld = (old == undefined);
+
+ if (checkСhanges('name', item, old)) {
+ object.querySelector('.nickname').innerHTML = item['name'];
+ }
+
+ if (checkСhanges('heal', item, old)) {
+ object.querySelector('.heal-line .value').style.width = item['heal'] + '%';
+ }
+
+ if (checkСhanges('mana', item, old)) {
+ object.querySelector('.mana-line .value').style.width = item['mana'] + '%';
+ }
+
+ if (item['isLeader'] != undefined && item['isLeader']) {
+ object.setAttribute('class', 'group-memeber leader');
+ } else {
+ object.setAttribute('class', 'group-memeber');
+ }
+ }
+
+ function checkСhanges(key, item, old) {
+ return (old == undefined) || (item[key] != old[key]);
+ }
+
+ function getObject(id) {
+ let objects = document.querySelectorAll('.group-memeber');
+
+ if (objects.length == 0 || objects[id] == undefined) {
+ // создаём новый по шаблону
+ let object = document.createElement('div');
+ object.setAttribute('class', 'group-memeber');
+ object.innerHTML = '' +
+ '' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '
' +
+ '' +
+ '';
+
+ document.querySelector('.group-list').appendChild(object);
+
+ return object;
+ }
+
+ return objects[id];
+ }
+
+ return {
+ current: current,
+ update: update,
+ };
+})(menu);
diff --git a/front/party.html b/front/party.html
new file mode 100644
index 0000000..a360a7d
--- /dev/null
+++ b/front/party.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+