Difference between revisions of "Team:Sydney Australia/Hexagon"

Line 1: Line 1:
 +
{{:Team:Sydney_Australia/Templates/NavBar}}
 
<html>
 
<html>
 
<head>
 
<head>
−
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">
  
−
<script>
+
<script type="text/javascript" src="https://use.fontawesome.com/2967839f93.js"></script>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
  
−
$(document).ready(function(){
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
−
$('.chat[data-chat=person2]').addClass('active-chat');
+
<script>
−
$('.person[data-chat=person2]').addClass('active');
+
−
 
+
−
$('.left .person').mousedown(function(){
+
−
    if ($(this).hasClass('.active')) {
+
−
        return false;
+
−
    } else {
+
−
        var findChat = $(this).attr('data-chat');
+
−
        var personName = $(this).find('.name').text();
+
−
        $('.right .top .name').html(personName);
+
−
        $('.chat').removeClass('active-chat');
+
−
        $('.left .person').removeClass('active');
+
−
        $(this).addClass('active');
+
−
        $('.chat[data-chat = '+findChat+']').addClass('active-chat');
+
−
    }
+
−
});
+
−
    });
+
 
</script>
 
</script>
 
<style>
 
<style>
−
/**
 
−
  Coded by /u/j0be in scss.
 
−
  See scss source here -> https://codepen.io/j0be/pen/MKRVyN
 
−
*/
 
  
−
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600); *, *:before, *:after { box-sizing: border-box; } body { background-color: #f8f8f8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; background-image: url("https://s17.postimg.org/fr01hfe33/image.jpg"); background-size: cover; background-repeat: none; } .wrapper { position: relative; left: 50%; width: 1000px; height: 800px; transform: translate(-50%, 0); } .container { position: relative; top: 50%; left: 50%; width: 80%; height: 75%; background-color: #fff; transform: translate(-50%, -50%); } .container .left { float: left; width: 37.6%; height: 100%; border: 1px solid #e6e6e6; background-color: #fff; } .container .left .top { position: relative; width: 100%; height: 96px; padding: 29px; } .container .left .top:after { position: absolute; bottom: 0; left: 50%; display: block; width: 80%; height: 1px; content: ''; background-color: #e6e6e6; transform: translate(-50%, 0); } .container .left input { float: left; width: 188px; height: 42px; padding: 0 15px; border: 1px solid #e6e6e6; background-color: #eceff1; border-radius: 21px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } .container .left input:focus { outline: none; } .container .left a.search { display: block; float: left; width: 42px; height: 42px; margin-left: 10px; border: 1px solid #e6e6e6; background-color: #00b0ff; background-image: url("https://s11.postimg.org/dpuahewmn/name_type.png"); background-repeat: no-repeat; background-position: top 12px left 14px; border-radius: 50%; } .container .left .people { margin-left: -1px; border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; width: calc(100% + 2px); } .container .left .people .person { position: relative; width: 100%; padding: 12px 10% 16px; cursor: pointer; background-color: #fff; } .container .left .people .person:after { position: absolute; bottom: 0; left: 50%; display: block; width: 80%; height: 1px; content: ''; background-color: #e6e6e6; transform: translate(-50%, 0); } .container .left .people .person img { float: left; width: 40px; height: 40px; margin-right: 12px; border-radius: 50%; } .container .left .people .person .name { font-size: 14px; line-height: 22px; color: #1a1a1a; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; } .container .left .people .person .time { font-size: 14px; position: absolute; top: 16px; right: 10%; padding: 0 0 5px 5px; color: #999; background-color: #fff; } .container .left .people .person .preview { font-size: 14px; display: inline-block; overflow: hidden !important; width: 70%; white-space: nowrap; text-overflow: ellipsis; color: #999; } .container .left .people .person.active, .container .left .people .person:hover { margin-top: -1px; margin-left: -1px; padding-top: 13px; border: 0; background-color: #00b0ff; width: calc(100% + 2px); padding-left: calc(10% + 1px); } .container .left .people .person.active span, .container .left .people .person:hover span { color: #fff; background: transparent; } .container .left .people .person.active:after, .container .left .people .person:hover:after { display: none; } .container .right { position: relative; float: left; width: 62.4%; height: 100%; } .container .right .top { width: 100%; height: 47px; padding: 15px 29px; background-color: #eceff1; } .container .right .top span { font-size: 15px; color: #999; } .container .right .top span .name { color: #1a1a1a; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; } .container .right .chat { position: relative; display: none; overflow: hidden; padding: 0 35px 92px; border-width: 1px 1px 1px 0; border-style: solid; border-color: #e6e6e6; height: calc(100% - 48px); justify-content: flex-end; flex-direction: column; } .container .right .chat.active-chat { display: block; display: flex; } .container .right .chat.active-chat .bubble { -moz-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); -o-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); -webkit-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); } .container .right .chat.active-chat .bubble:nth-of-type(1) { -moz-animation-duration: 0.15s; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; } .container .right .chat.active-chat .bubble:nth-of-type(2) { -moz-animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } .container .right .chat.active-chat .bubble:nth-of-type(3) { -moz-animation-duration: 0.45s; -webkit-animation-duration: 0.45s; animation-duration: 0.45s; } .container .right .chat.active-chat .bubble:nth-of-type(4) { -moz-animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } .container .right .chat.active-chat .bubble:nth-of-type(5) { -moz-animation-duration: 0.75s; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } .container .right .chat.active-chat .bubble:nth-of-type(6) { -moz-animation-duration: 0.9s; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; } .container .right .chat.active-chat .bubble:nth-of-type(7) { -moz-animation-duration: 1.05s; -webkit-animation-duration: 1.05s; animation-duration: 1.05s; } .container .right .chat.active-chat .bubble:nth-of-type(8) { -moz-animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } .container .right .chat.active-chat .bubble:nth-of-type(9) { -moz-animation-duration: 1.35s; -webkit-animation-duration: 1.35s; animation-duration: 1.35s; } .container .right .chat.active-chat .bubble:nth-of-type(10) { -moz-animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .container .right .write { position: absolute; bottom: 29px; left: 30px; height: 42px; padding-left: 8px; border: 1px solid #e6e6e6; background-color: #eceff1; width: calc(100% - 58px); border-radius: 5px; } .container .right .write input { font-size: 16px; float: left; width: 347px; height: 40px; padding: 0 10px; color: #1a1a1a; border: 0; outline: none; background-color: #eceff1; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } .container .right .write .write-link.attach:before { display: inline-block; float: left; width: 20px; height: 42px; content: ''; background-image: url("https://s1.postimg.org/s5gfy283f/attachemnt.png"); background-repeat: no-repeat; background-position: center; } .container .right .write .write-link.smiley:before { display: inline-block; float: left; width: 20px; height: 42px; content: ''; background-image: url("https://s14.postimg.org/q2ug83h7h/smiley.png"); background-repeat: no-repeat; background-position: center; } .container .right .write .write-link.send:before { display: inline-block; float: left; width: 20px; height: 42px; margin-left: 11px; content: ''; background-image: url("https://s30.postimg.org/nz9dho0pp/send.png"); background-repeat: no-repeat; background-position: center; } .container .right .bubble { font-size: 16px; position: relative; display: inline-block; clear: both; margin-bottom: 8px; padding: 13px 14px; vertical-align: top; border-radius: 5px; } .container .right .bubble:before { position: absolute; top: 19px; display: block; width: 8px; height: 6px; content: '\00a0'; transform: rotate(29deg) skew(-35deg); } .container .right .bubble.you { float: left; color: #fff; background-color: #00b0ff; align-self: flex-start; -moz-animation-name: slideFromLeft; -webkit-animation-name: slideFromLeft; animation-name: slideFromLeft; } .container .right .bubble.you:before { left: -3px; background-color: #00b0ff; } .container .right .bubble.me { float: right; color: #1a1a1a; background-color: #eceff1; align-self: flex-end; -moz-animation-name: slideFromRight; -webkit-animation-name: slideFromRight; animation-name: slideFromRight; } .container .right .bubble.me:before { right: -3px; background-color: #eceff1; } .container .right .conversation-start { position: relative; width: 100%; margin-bottom: 27px; text-align: center; } .container .right .conversation-start span { font-size: 14px; display: inline-block; color: #999; } .container .right .conversation-start span:before, .container .right .conversation-start span:after { position: absolute; top: 10px; display: inline-block; width: 30%; height: 1px; content: ''; background-color: #e6e6e6; } .container .right .conversation-start span:before { left: 0; } .container .right .conversation-start span:after { right: 0; } @keyframes slideFromLeft { 0% { margin-left: -200px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } @-webkit-keyframes slideFromLeft { 0% { margin-left: -200px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } @keyframes slideFromRight { 0% { margin-right: -200px; opacity: 0; } 100% { margin-right: 0; opacity: 1; } } @-webkit-keyframes slideFromRight { 0% { margin-right: -200px; opacity: 0; } 100% { margin-right: 0; opacity: 1; } }  
+
.arrow-right {
 +
  width: 0;  
 +
  height: 0;  
 +
  border-top: 40px solid transparent;
 +
  border-bottom: 40px solid transparent;
 +
  position:relative;
 +
  bottom:15px;
 +
 
 +
 
 +
}
 +
.yncm-arrow {border-left: 40px solid #fadda2;}
 +
.his-arrow {border-left: 40px solid #a396c6;}
 +
.tev-arrow {border-left: 40px solid #f1ccf0;}
 +
.winsulin-arrow {border-left: 40px solid #b0dfb3;}
 +
 
 +
.construct:after {
 +
margin-top:50px;margin-left:50px;margin-right:50px;
 +
position: absolute;  
 +
top:4%;  
 +
display: inline-block;  
 +
left:0;
 +
right:0;
 +
height: 3px;  
 +
content: '';  
 +
background-color: #3e3f3f;  
 +
z-index:-1;
 +
}
 +
.element {
 +
height:50px;
 +
display:inline-block;
 +
text-align: center;
 +
vertical-align: middle;
 +
line-height: 50px;  
 +
font-family:'Quicksand' ;
 +
font-size:2vw;
 +
color:#3e3f3f;  
 +
}
 +
 
 +
.BB-prefix, .BB-suffix { width:10%;background-color:#e7e6e6;}
 +
.rbs {width:20%;background-color:#eaa1a8;}
 +
.yncm {width:25%; background-color:#fadda2;}
 +
.his {width:10%;background-color:#a396c6;}
 +
.tev {width:10%;background-color:#f1ccf0;}
 +
.winsulin {width:25%;background-color:#b0dfb3;}
 +
.divider {width:2%;
 +
height:50px;
 +
display:inline-block;
 +
text-align: center;
 +
vertical-align: middle;
 +
line-height: 50px;  
 +
font-family:'Quicksand';  
 +
font-size: 3.75vw;   }
 +
 +
 +
.construct {
 +
width:100%;
 +
display:flex;
 +
flex-direction:row;
 +
flex-wrap:nowrap;
 +
justify-content:space-evenly
 +
align-items:center;
 +
align-content:stretch;
 +
}
 +
 
 +
 
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="wrapper">
 
−
    <div class="container">
 
−
        <div class="left">
 
−
            <div class="top">
 
−
                <input type="text" />
 
−
                <a href="javascript:;" class="search"></a>
 
−
            </div>
 
−
            <ul class="people">
 
−
                <li class="person" data-chat="person1">
 
−
                    <img src="https://s13.postimg.org/ih41k9tqr/img1.jpg" alt="" />
 
−
                    <span class="name">Thomas Bangalter</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">I was wondering...</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person2">
 
−
                    <img src="https://s3.postimg.org/yf86x7z1r/img2.jpg" alt="" />
 
−
                    <span class="name">Dog Woofson</span>
 
−
                    <span class="time">1:44 PM</span>
 
−
                    <span class="preview">I've forgotten how it felt before</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person3">
 
−
                    <img src="https://s3.postimg.org/h9q4sm433/img3.jpg" alt="" />
 
−
                    <span class="name">Louis CK</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">But we’re probably gonna need a new carpet.</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person4">
 
−
                    <img src="https://s3.postimg.org/quect8isv/img4.jpg" alt="" />
 
−
                    <span class="name">Bo Jackson</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">It’s not that bad...</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person5">
 
−
                    <img src="https://s16.postimg.org/ete1l89z5/img5.jpg" alt="" />
 
−
                    <span class="name">Michael Jordan</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">Wasup for the third time like is
 
−
you bling bitch</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person6">
 
−
                    <img src="https://s30.postimg.org/kwi7e42rh/img6.jpg" alt="" />
 
−
                    <span class="name">Drake</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">howdoyoudoaspace</span>
 
−
                </li>
 
−
            </ul>
 
−
        </div>
 
−
        <div class="right">
 
−
            <div class="top"><span>To: <span class="name">Dog Woofson</span></span></div>
 
−
            <div class="chat" data-chat="person1">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 6:48 AM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Hello,
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    it's me.
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I was wondering...
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person2">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 5:38 PM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Hello, can you hear me?
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I'm in California dreaming
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    ... about who we used to be.
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Are you serious?
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    When we were younger and free...
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I've forgotten how it felt before
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person3">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 3:38 AM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Hey human!
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Umm... Someone took a shit in the hallway.
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    ... what.
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Are you serious?
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I mean...
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    It’s not that bad...
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    But we’re probably gonna need a new carpet.
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person4">
 
−
                <div class="conversation-start">
 
−
                    <span>Yesterday, 4:20 PM</span>
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Hey human!
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Umm... Someone took a shit in the hallway.
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    ... what.
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Are you serious?
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    I mean...
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    It’s not that bad...
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person5">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 6:28 AM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Wasup
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Wasup
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Wasup for the third time like is <br />you blind bitch
 
−
                </div>
 
  
−
            </div>
+
<div class="row" style="margin-top:50px;margin-left:50px;margin-right:50px;">
−
            <div class="chat" data-chat="person6">
+
 
−
                <div class="conversation-start">
+
<div class="construct">
−
                    <span>Monday, 1:27 PM</span>
+
<div class="BB-prefix element">
−
                </div>
+
BB prefix
−
                <div class="bubble you">
+
</div>
−
                    So, how's your new phone?
+
<div class="divider"></div>
−
                </div>
+
<div class="rbs element">RBS
−
                <div class="bubble you">
+
</div>
−
                    You finally have a smartphone :D
+
<div class="divider"></div>
−
                </div>
+
<div class="yncm element">
−
                <div class="bubble me">
+
YNCM Tag
−
                    Drake?
+
</div>
−
                </div>
+
<div class="yncm-arrow arrow-right"></div>
−
                <div class="bubble me">
+
<div class="divider"></div>
−
                    Why aren't you answering?
+
<div class="his element">
−
                </div>
+
His Tag
−
                <div class="bubble you">
+
</div>
−
                    howdoyoudoaspace
+
<div class="his-arrow arrow-right"></div>
−
                </div>
+
<div class="divider"></div>
−
            </div>
+
<div class="tev element">
−
            <div class="write">
+
TEV
−
                <a href="javascript:;" class="write-link attach"></a>
+
</div>
−
                <input type="text" />
+
<div class="tev-arrow arrow-right"></div>
−
                <a href="javascript:;" class="write-link smiley"></a>
+
<div class="divider"></div>
−
                <a href="javascript:;" class="write-link send"></a>
+
<div class="winsulin element">
−
            </div>
+
Winsulin
−
        </div>
+
</div>
−
    </div>
+
<div class="winsulin-arrow arrow-right"></div>
 +
<div class="divider"></div>
 +
<div class="BB-suffix element">
 +
BB suffix
 +
</div>
 +
<div class="arrow-right"></div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>
−
{{:Team:Sydney_Australia/templates/Footer}}
 

Revision as of 03:47, 29 October 2017

BB prefix
RBS
YNCM Tag
His Tag
TEV
Winsulin
BB suffix