i removed

This commit is contained in:
tripathyr 2019-06-10 20:10:45 +05:30
parent 3e3e34a7a6
commit 019a275b3d
4 changed files with 634 additions and 46 deletions

View File

@ -36,7 +36,7 @@ a:focus {
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
fill: red;
}
.view {

599
css/test.html Normal file
View File

@ -0,0 +1,599 @@
<style>
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
color: #393a3e;
background: lavender;
}
a {
text-decoration: none;
color: #000;
outline: none;
}
a:hover,
a:focus {
color: #1d48f3;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: red;
}
.view {
position: relative;
display: flex;
justify-content: flex-end;
overflow: hidden;
height: 100vh;
margin: 0 0 0 215px;
}
.content {
z-index: 1;
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 25px 50px;
background: url(../img/bg_lavender.jpg) no-repeat top left;
background-size: auto 100%;
}
.deco__text {
font-size: 0.8em;
line-height: 1;
margin: 0;
color: #bcb8e8;
}
/* Header */
.codrops-header {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 100%;
text-align: right;
}
.codrops-header__info {
font-family: 'Playfair Display', serif;
font-size: 2.5em;
font-weight: 700;
/*font-style: italic;*/
position: relative;
max-width: 400px;
margin: auto;
}
.codrops-header__info::after {
font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
font-size: 8em;
font-weight: bold;
font-style: normal;
position: absolute;
z-index: -1;
top: 0%;
right: 52.5%;
letter-spacing: -0.05em;
color: #fff;
}
.codrops-header__deco {
font-size: 2em;
line-height: 1;
padding: 1em 0;
color: #1d48f3;
writing-mode: vertical-rl;
}
.codrops-header__title {
font-size: 8.5em;
line-height: 0.8;
margin: 0 -7px 0;
padding: 0;
}
.codrops-header__tagline {
width: 50%;
margin: 0 0 0 auto;
padding: 0;
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
white-space: nowrap;
}
.codrops-icon {
display: block;
}
.codrops-icon:last-child {
margin: 0 0 0 2em;
}
.btn {
border: none;
background: none;
}
.btn:focus {
outline: none;
}
.btn--back {
font-size: 1.5em;
position: absolute;
z-index: 1002;
top: 1em;
right: 1em;
opacity: 0;
color: #1d48f3;
}
.btn--menu {
font-size: 0.85em;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
display: none;
margin: 10px 0 0 6px;
}
.btn--menu-active .icon--menu,
.icon--cross {
display: none;
}
.btn--menu-active .icon--cross {
display: block;
}
/* Demo links */
.demos {
display: flex;
align-items: center;
margin: 2em 0 0 auto;
}
.demos__text {
font-size: 0.8em;
display: block;
margin: 0 2em 0 0;
color: #bcb8e8;
}
.demo {
position: relative;
display: block;
margin: 0 0 0 1.5em;
}
.demo:hover,
.demo:focus {
outline: none;
}
.demo--current {
pointer-events: none;
color: #fff;
}
.demo--current::before {
content: '';
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -17px 0 0 -16px;
border-radius: 50%;
background: #1d48f3;
}
/* Content */
.tabscontent {
pointer-events: none;
}
.tabscontent__item {
position: fixed;
z-index: 1001;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
height: 100vh;
opacity: 0;
}
.tabscontent__item--current,
.tabscontent__item--current ~ .btn--back {
pointer-events: auto;
}
.poster {
position: relative;
height: 80vh;
margin: 10vh auto;
padding: 0 50px;
pointer-events: none;
}
.poster__img {
position: relative;
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
.poster__caption {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
padding: 0 50px;
}
.poster__box {
position: absolute;
top: -50px;
left: 0;
width: 50%;
height: 40%;
border: 10px solid;
}
.poster__number {
font-size: 5em;
font-weight: bold;
line-height: 0.7;
position: absolute;
bottom: 0;
left: calc(100% - 50px + 5px);
color: lavender;
}
.poster__title {
font-size: 6em;
line-height: 0.7;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0 0 -0.25em 0.15em;
text-indent: -0.75em;
}
.poster__deco {
font-size: 2em;
line-height: 1;
margin: 0 -1.25em 0 auto;
color: #1d48f3;
writing-mode: vertical-rl;
}
.column {
width: 30vw;
}
.column__title {
color: #ff764b;
}
.column__text {
font-size: 2em;
font-weight: normal;
margin: 0;
color: #fff4d7;
}
/* Individual demos */
.demo-2 {
background: #fff4d7;
}
.demo-2 .view {
margin-left: 150px;
}
.demo-2 .content {
background-image: url(../img/bg_yellow.jpg);
}
.demo-2 .codrops-header__info::after {
color: #fff;
}
.demo-2 .codrops-header__deco,
.demo-2 a:hover,
.demo-2 a:focus {
color: #ff764b;
}
.demo-2 .deco__text,
.demo-2 .demos__text {
color: #d8c184;
}
.demo-2 .demo--current::before {
background: #ff764b;
}
.demo-2 .btn--back {
color: #ff764b;
}
.demo-3 {
color: #fc0;
background: #2a3137;
}
.demo-3 a {
color: #fff;
}
.demo-3 a:hover,
.demo-3 a:focus,
.demo-3 .btn--menu:hover {
color: #fc0;
}
.demo-3 .view {
margin: 0;
padding: 5vw 5vw calc(10vw + 1em);
}
.demo-3 .content {
padding: 0;
}
.demo-3 .codrops-header {
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: calc(100% + 3.25em);
text-align: left;
}
.demo-3 .codrops-header__title {
font-family: 'Poppins', sans-serif;
font-size: 7em;
line-height: 0.6;
margin: auto 0 0 -40px;
padding: 0.2em 0 0 0;
}
.demo-3 .codrops-header__tagline {
font-size: 1.5em;
margin: 0.25em 0 0 -0.3em;
}
.demo-3 .btn--menu {
font-size: 1em;
top: auto;
bottom: 0;
left: 50%;
display: block;
margin: 0 -0.75em 1em;
color: #fbf9fa;
}
.demo-3 .content {
background: url(../img/img4.jpg) no-repeat 50% 20%;
background-size: cover;
}
.demo-3 .codrops-links {
align-self: flex-end;
margin: 1.5em 1.5em auto;
}
.demo-3 .demos {
margin: 1em 0 0;
}
.demo-3 .demo:first-child {
margin: 0;
}
.demo-3 .demo.demo--current {
color: #2a3137;
}
.demo-3 .demo--current::before {
background: #fc0;
}
.demo-3 .btn--back {
color: #6c7d8c;
top: 0.5em;
right: 0.5em;
}
.demo-3 .btn--back .icon {
transform: rotate(-90deg);
}
.demo-3 .codrops-header__deco {
font-size: 2.25em;
position: absolute;
right: -0.575em;
bottom: 2em;
color: #fc0;
}
.demo-3 .codrops-header::after {
content: '03';
font-size: 5em;
font-weight: bold;
position: absolute;
top: 0;
left: -40px;
color: #fff;
}
.box {
position: relative;
width: 40vw;
min-width: 300px;
height: calc(90vh - 120px);
margin-top: 40px;
background-size: cover;
background-position: 50% 0;
}
.box__title {
font-size: 6em;
position: absolute;
bottom: 0;
left: -1em;
margin: 0;
color: #fff;
}
.tabscontent__item:first-child .box {
background-image: url(../img/portrait1.jpg);
}
.tabscontent__item:nth-child(2) .box {
background-image: url(../img/portrait2.jpg);
}
.tabscontent__item:nth-child(3) .box {
background-image: url(../img/portrait3.jpg);
}
@media screen and (max-width: 40em) {
.view {
overflow: auto;
height: auto;
min-height: calc(100vh - 69px);
margin: 0;
}
.demo-3 .view {
height: calc(100vh - 69px);
}
.content {
flex-direction: column;
padding: 10px;
}
.codrops-header__info {
font-size: 1.15em;
}
.deco__text,
.demos__text {
display: none;
}
.codrops-links {
margin: 0 0 1em;
}
.codrops-icon {
font-size: 1em;
}
.codrops-header__deco {
font-size: 1.25em;
}
.codrops-header__title {
font-size: 5.5em;
margin: 0 -4px;
}
.codrops-header__tagline {
width: auto;
}
.demos {
align-items: flex-start;
margin-top: 1em;
}
.codrops-header__info::after {
font-size: 7em;
}
.poster__box {
top: -20px;
left: 30px;
width: 30%;
height: 30%;
border: 7px solid;
}
.poster__deco {
font-size: 1em;
}
.poster__number {
font-size: 2em;
left: calc(100% - 90px);
}
.poster__title {
font-size: 3em;
}
.btn--back {
top: 0;
right: 0;
}
.btn--menu {
display: block;
}
.demo-2 .btn--menu {
position: relative;
margin: 0 2em 0 0;
}
.demo-2 .tabscontent__item {
font-size: 0.575em;
flex-direction: column;
}
.column__title {
margin: 1em 0 0;
}
.demo-3 .codrops-header__title {
font-size: 2em;
margin: 0;
}
.demo-3 .codrops-header__tagline {
font-size: 1em;
margin-left: 0;
}
.demo-3 .codrops-header::after {
font-size: 3em;
left: 10px;
}
.demo-3 .codrops-header__deco {
font-size: 0.85em;
}
}
</style>
<div class="btn--back">Hello</div>

View File

@ -7,7 +7,6 @@
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Ranchi Mall" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
@ -81,14 +80,8 @@
</head>
<body class="demo-2">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<symbol id="icon-caret" viewBox="0 0 24 24">
<title>caret</title>
<polygon points="15.7,16.6 11.1,12 15.7,7.4 14.3,6 8.3,12 14.3,18"/>
@ -109,12 +102,11 @@
</div>
<header class="codrops-header">
<div class="codrops-links">
<button class="btn btn--menu">
<button class="btn btn--menu" style="background-color: pink">
<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
</button>
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/StackMotionHoverEffects/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=30460" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<p id="contractText" class="codrops-header__info"></p>
<nav class="demos">
@ -142,6 +134,9 @@
</div>
</nav>
<div class="tabscontent">
<div class="tabscontent__item">
<!-- This is where the code for webwallet will be up -->
</div>
<div class="tabscontent__item">
<div class="column">
<h3 class="column__title">03/09/2017</h3>
@ -160,9 +155,6 @@
<h4 class="column__text">energetic</h4>
</div>
</div>
<div class="tabscontent__item">
<!-- This is where the code for webwallet will be up -->
</div>
<div class="tabscontent__item">
<!-- Token Tracking -->
<div id='token_column1' class="column">
@ -198,21 +190,12 @@
</div>
<div id='contract_column2' class="column">
<h3 class="column__title">Enter Address/Contract name</h3>
<div>
<div id="contract_form">
<input type="text" id='addressName' name="addressName">
<button type="submit" id='addressName_submit'>Submit</button>
</div>
<!--<form name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id='addressName' name="vivek">
<input type="submit" value="Submit">
</form>
<input class="form-control" id="contractAddInput" length="34" name="address" placeholder="Enter FLO address" required="" type="text" value="">
<h4 class="column__text">saponification</h4>
<h4 class="column__text">velocity</h4>
<h4 class="column__text">ionization</h4>
<h4 class="column__text">geocentric</h4>
<h4 class="column__text">magnitude</h4>-->
<div id="data_output"></div>
</div>
</div>
<button class="btn btn--back"><svg class="icon icon--caret"><use xlink:href="#icon-caret"></use></svg></button>
@ -224,12 +207,13 @@
<script src="js/demo2.js"></script>
<script>
const contractForm = {
var contractForm = {
addressName: document.getElementById('addressName'),
submit: document.getElementById('addressName_submit')
};
contractForm.submit.addEventListener('click', () => {
console.log('button press');
contractForm['addressName'] = document.getElementById('addressName');
@ -240,10 +224,11 @@
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getparticipantdetails?floaddress=${contractForm["addressName"].value}`)
.then(response => response.json())
.then((data) => {
console.log(data);
contractDetailColumn = document.getElementById('contract_column2');
//console.log(data);
contractDetailColumn = document.getElementById('data_output');
contractDetailColumn.innerHTML = "";
// Check which type of address it is
// debugger;
if (data['result']=='ok' && data['type']=='participant'){
for (i = 0; i < data['participatedContracts'].length; i++) {
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['participatedContracts'][i]['contractName'] +'</h4>' ;
@ -253,12 +238,12 @@
}
}
else if (data['result']=='ok' && data['type']=='contract'){
for (i = 0; i < data['contractInfo'].length; i++) {
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['contractInfo'][i]['contractName'] +'</h4>' ;
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['contractInfo'][i]['contractAddress'] +'</h4>' ;
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Type:'+ data['contractInfo'][i]['contractType'] +'</h4>' ;
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['contractInfo'][i]['expiryTime'] +'</h4><br>' ;
}
/*for (i = 0; i < data['contractInfo'].length; i++) {*/
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['contractInfo']['contractName'] +'</h4>' ;
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['contractInfo']['contractAddress'] +'</h4>' ;
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Type:'+ data['contractInfo']['contractType'] +'</h4>' ;
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['contractInfo']['expiryTime'] +'</h4><br>' ;
/*}*/
}
else if (data['result'] == 'error'){
alert("error");
@ -273,7 +258,7 @@
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getsmartContractlist?contractName=${contractForm["addressName"].value}`)
.then(response => response.json())
.then((data) => {
console.log(data);
//console.log(data);
contractDetailColumn = document.getElementById('contract_column2');
if (data['smartContracts'].length == 1){
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['smartContracts'][0]['contractName'] +'</h4>' ;
@ -294,7 +279,7 @@
});
const tokenForm = {
var tokenForm = {
tokenName: document.getElementById('tokenName'),
submit: document.getElementById('tokenName_submit')
};
@ -304,13 +289,13 @@
tokenForm['tokenName'] = document.getElementById('tokenName');
// Find out if it is a contract name or FLO address
console.log(tokenForm['tokenName'].value);
//console.log(tokenForm['tokenName'].value);
if (tokenForm['tokenName'].value.slice(0,1) == 'F' && tokenForm['tokenName'].value.length == 34){
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/gettokeninfo?floaddress=${tokenForm["tokenName"].value}`)
.then(response => response.json())
.then((data) => {
console.log(data);
//console.log(data);
contractDetailColumn = document.getElementById('contract_column2');
// Check which type of address it is
@ -343,7 +328,7 @@
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/gettokeninfo?token=${tokenForm["tokenName"].value}`)
.then(response => response.json())
.then((data) => {
console.log(data);
//console.log(data);
tokenDetailColumn = document.getElementById('token_column2');
tokenDetailColumn.innerHTML = tokenDetailColumn.innerHTML + '<h4 class="column__text">Token name: '+ data['token'] +'</h4>' ;
@ -432,10 +417,10 @@
}
}
var es = new EventSource('https://ranchimallflo.duckdns.org/sse');
/* var es = new EventSource('https://ranchimallflo.duckdns.org/sse');
es.onmessage = function (event) {
console.log(event.data);
};
};*/
</script>
</body>
</html>

View File

@ -138,9 +138,11 @@
}
this.isAnimating = true;
// Update current value (index of the current tab).
this.current = this.DOM.tabs.indexOf(tab);
var bounds = tab.getBoundingClientRect(),
currentDimensions = { left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height },
self = this;
@ -302,7 +304,7 @@
this.DOM.el.classList.remove('tabsnav--hidden');
// Animate bars.
// Animate bars
anime.remove(this.DOM.bars);
var animeBars = {
targets: this.DOM.bars,
@ -344,6 +346,8 @@
this.isVisible = false;
console.log(this.DOM);
this.DOM.bars.forEach(function(bar) {
// Set transform origin.
bar.style.transformOrigin = '50% 50%';