Skip to content

Commit a9ab5f2

Browse files
BrunildaDostiBrunildaDosti
committed
fix arrow animation on updater
1 parent bda1e50 commit a9ab5f2

File tree

3 files changed

+94
-107
lines changed

3 files changed

+94
-107
lines changed

‎images/square.png‎

-6.27 KB
Binary file not shown.

‎images/square.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎index.php‎

Lines changed: 72 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1041,23 +1041,8 @@ function replaceNewUpdater()
10411041
margin-top: 50px;
10421042
}
10431043

1044-
/*button {*/
1045-
/*background-color: #21AE8A;*/
1046-
/*color: white;*/
1047-
/*font-size: 12px;*/
1048-
/*text-transform: uppercase;*/
1049-
/*border: none;*/
1050-
/*width: 80px;*/
1051-
/*height: 27px;*/
1052-
/*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.14);*/
1053-
/*border-radius: 3px;*/
1054-
/*font-family: Montserrat;*/
1055-
/*font-weight: 600;*/
1056-
/*}*/
1057-
10581044
button.right {
10591045
background-color: #21AE8A;
1060-
10611046
color: white;
10621047
border-radius: 5px;
10631048
height: 40px;
@@ -1067,6 +1052,8 @@ function replaceNewUpdater()
10671052
text-transform: uppercase;
10681053
margin-top: 20px;
10691054
border: none;
1055+
font-family: "Montserrat", SemiBold;
1056+
font-weight:600;
10701057
}
10711058

10721059
button:disabled {
@@ -1160,7 +1147,7 @@ function replaceNewUpdater()
11601147
color: #8C8C8C;
11611148
font-size: 20px;
11621149
text-align: center;
1163-
margin-bottom: 94px;
1150+
margin-bottom: 50px;
11641151
cursor: pointer;
11651152
}
11661153

@@ -1182,9 +1169,9 @@ function replaceNewUpdater()
11821169
}
11831170

11841171
#steps {
1185-
width: 70%;
1172+
width: 64%;
11861173
margin: auto;
1187-
padding-bottom: 54px;
1174+
padding-bottom: 27px;
11881175
}
11891176

11901177
#first-step {
@@ -1215,7 +1202,7 @@ function replaceNewUpdater()
12151202
.step-image svg {
12161203
width: 50%;
12171204
padding-top: 32%;
1218-
padding-left: 25%;
1205+
padding-left: 24%;
12191206
}
12201207

12211208
.active {
@@ -1281,25 +1268,30 @@ function replaceNewUpdater()
12811268

12821269
ul li {
12831270
color: #8A9798;
1284-
font-size: 12px;
1285-
font-family: "Source Sans Pro", Light;
12861271
margin-bottom: 8px;
12871272
display: flex;
1273+
font-size: 14px;
1274+
}
1275+
1276+
#pointsList span {
1277+
font-family: 'Source Sans Pro', Light;
12881278
}
12891279

12901280
li.final {
12911281
color: #4B8CCA;
1292-
font-family: Montserrat, Regular;
1282+
font-family: Montserrat, Sans-Serif;
12931283
font-size: 24px;
1294-
letter-spacing: 2px;
1284+
letter-spacing: 0.3px;
12951285
margin-bottom: 9px;
12961286
}
12971287

1298-
li.migrate {
1288+
li.migrate a {
12991289
color: #253746;
1300-
font-family: 'Montserrat', SemiBold;
1290+
font-family: Montserrat, SemiBold;
13011291
font-size: 18px;
1292+
letter-spacing: 0.3px;
13021293
margin-bottom: 20px;
1294+
text-decoration: none;
13031295
}
13041296

13051297
#success-message {
@@ -1339,27 +1331,11 @@ function replaceNewUpdater()
13391331
box-shadow: none;
13401332
}
13411333

1342-
/*#left {*/
1343-
/*!*float: left;*!*/
1344-
/*!*width: 60%;*!*/
1345-
/*margin-top: 28px;*/
1346-
/*}*/
1347-
1348-
/*#right {*/
1349-
/*overflow: hidden*/
1350-
/*}*/
1351-
1352-
13531334
#sqr {
1354-
width: 193px;
1355-
height: 155px;
1356-
/*border: 2px dashed #4B8CCA;*/
1357-
/*margin-top: 35px;*/
1358-
/*background: #F5F8FC;*/
1359-
background-image: url(images/square.png);
1335+
width:225px;
1336+
height:180px;
1337+
background-image: url(images/square.svg);
13601338
background-repeat: no-repeat;
1361-
margin-top: 28px;
1362-
13631339
}
13641340

13651341
#triangle_down {
@@ -1381,6 +1357,7 @@ function replaceNewUpdater()
13811357
font-size: 12px;
13821358
font-weight: 600;
13831359
cursor: pointer;
1360+
font-family: "Montserrat", SemiBold;
13841361
}
13851362

13861363
#database-upgrade.right {
@@ -1389,50 +1366,6 @@ function replaceNewUpdater()
13891366
padding: 1px 10px;
13901367
}
13911368

1392-
/*.rotate {*/
1393-
/*-moz-transition: all 1s linear;*/
1394-
/*-webkit-transition: all 1s linear;*/
1395-
/*transition: all 1s linear;*/
1396-
1397-
/*}*/
1398-
.rotate {
1399-
-moz-transition: all 1.5s ease-out;
1400-
-webkit-transition: all 1.5s ease-out;
1401-
transition: all 1.5s ease-out;
1402-
1403-
}
1404-
1405-
.rotate.down {
1406-
-moz-transform: rotate(180deg);
1407-
-webkit-transform: rotate(180deg);
1408-
transform: rotate(180deg);
1409-
transition: all 1.5s ease-out;
1410-
}
1411-
1412-
.arrow-up {
1413-
width: 21px;
1414-
height: 12px;
1415-
background-image: url(images/arrow_up.png);
1416-
background-repeat: no-repeat;
1417-
margin: 0 auto;
1418-
}
1419-
1420-
.arrow-down {
1421-
width: 21px;
1422-
height: 12px;
1423-
background-image: url(images/arrow_down.png);
1424-
background-repeat: no-repeat;
1425-
margin: 0 auto;
1426-
}
1427-
1428-
/*.arrow-down {*/
1429-
/*width: 0;*/
1430-
/*height: 0;*/
1431-
/*border-left: 8px solid transparent;*/
1432-
/*border-right: 8px solid transparent;*/
1433-
/*border-top: 8px solid #fff;*/
1434-
/*margin: 0 auto;*/
1435-
/*}*/
14361369
.listItems {
14371370
background-image: url('images/check.svg');
14381371
background-repeat: no-repeat;
@@ -1451,16 +1384,17 @@ function replaceNewUpdater()
14511384
color: rgb(75, 140, 202);
14521385
font-weight: 500;
14531386
font-size: 10px;
1454-
margin-left: 22px;
1455-
margin-top: 9px;
1387+
margin-left: 23px;
1388+
margin-top: 29px;
14561389
font-family: "Source Sans Pro", Regular;
14571390
}
14581391

14591392
p.messages {
14601393
text-align: center;
14611394
color: #253746;
1462-
margin-top: 10px;
1463-
font-size: 12px;
1395+
margin-top: 35px;
1396+
font-size: 14px;
1397+
font-family: 'Source Sans Pro', Light;
14641398
}
14651399

14661400
p.price {
@@ -1475,8 +1409,9 @@ function replaceNewUpdater()
14751409
p.subscribers {
14761410
text-align: center;
14771411
margin-top: 14px;
1478-
font-size: 10px;
1479-
font-family: 'Montserrat', Regular;
1412+
margin-bottom: 10px;
1413+
font-size: 12px;
1414+
font-family: 'Source Sans Pro', Regular;
14801415
}
14811416

14821417
#wrap {
@@ -1489,6 +1424,7 @@ function replaceNewUpdater()
14891424
margin-top: 3px;
14901425
margin-right: 50px;
14911426
padding: 20px 15px;
1427+
width: 498px;
14921428
}
14931429

14941430
#right {
@@ -1502,14 +1438,31 @@ function replaceNewUpdater()
15021438
}
15031439
p.paidSupport {
15041440
color: #8A9798;
1505-
font-size: 13px;
1506-
margin-top: 10px;
1441+
font-size: 14px;
1442+
margin-top: 14px;
1443+
font-family: 'Source Sans Pro', Light;
1444+
15071445
}
15081446
a.support {
15091447
color: #4b8cca;
15101448
text-decoration: none;
15111449
}
1450+
svg.performUpdate {
1451+
padding-top: 39%;
1452+
padding-left: 28%;
1453+
}
15121454

1455+
#arrowdown {
1456+
width: 21px;
1457+
height: 12px;
1458+
background-image: url(images/arrow_down.png);
1459+
background-repeat: no-repeat;
1460+
margin: 0 auto;
1461+
-moz-transition: all 1.5s ease-out;
1462+
-webkit-transition: all 1.5s ease-out;
1463+
-o-transition: all 1.5s ease-out;
1464+
transition: all 1.5s ease-out;
1465+
}
15131466
</style>
15141467
</head>
15151468
<body>
@@ -1724,10 +1677,9 @@ function replaceNewUpdater()
17241677

17251678
<!-- Info updater section -->
17261679
<div class="outer">
1727-
<button class="info-footer">
1728-
<div class="arrow-down rotate"></div>
1680+
<button class="info-footer" id="button">
1681+
<div id="arrowdown"></div>
17291682
</button>
1730-
17311683
<div class="inner">
17321684
<div id="wrap">
17331685
<div id="left">
@@ -1779,14 +1731,13 @@ function replaceNewUpdater()
17791731
</div>
17801732
<div id="right">
17811733
<div id="sqr">
1782-
<div class="container">
1734+
<div class="container" style="margin-left: 22px;">
17831735
<p class="greatValue">Great value</p>
17841736
<br>
17851737
<p class="messages">9000 messages</p><br>
17861738
<p class="price">Price $1</p>
17871739
<p class="subscribers">3000 Subscribers</p>
1788-
<br>
1789-
<input type="button" onclick="window.open('https://phplist.com/chooseplan')" value="Book"
1740+
<input type="button" onclick="window.open('https://www.phplist.com/register?utm_source=self-hosted-updater')" value="Book"
17901741
style="width: 90px;height: 30px; border: 1px dashed #21AE8A; background: #fff; margin: 0 auto;"
17911742
class="book"/>
17921743
</div>
@@ -1799,18 +1750,32 @@ class="book"/>
17991750
</div><!-- .outer -->
18001751

18011752
<script type="text/javascript" src="../admin/js/jquery-3.3.1.min.js"></script>
1753+
1754+
<!-- script for arrow animation -->
1755+
<script type="text/javascript">
1756+
var rotated = false;
1757+
1758+
document.getElementById('button').onclick = function() {
1759+
var div = document.getElementById('arrowdown'),
1760+
deg = rotated ? 0 : 180;
1761+
1762+
div.style.webkitTransform = 'rotate('+deg+'deg)';
1763+
div.style.mozTransform = 'rotate('+deg+'deg)';
1764+
div.style.msTransform = 'rotate('+deg+'deg)';
1765+
div.style.oTransform = 'rotate('+deg+'deg)';
1766+
div.style.transform = 'preserve-3d('+deg+'deg)';
1767+
1768+
rotated = !rotated;
1769+
}
1770+
</script>
1771+
<!-- script for slideToggle -->
18021772
<script type="text/javascript">
18031773
$('.outer button').on("click", function () {
18041774
$('.inner').slideToggle(1000, function () {
18051775
$('.inner p').show(100);
18061776
});
18071777
});
18081778
</script>
1809-
<script type="text/javascript">
1810-
$(".rotate").click(function () {
1811-
$(this).toggleClass("down");
1812-
})
1813-
</script>
18141779
<script type="text/javascript">
18151780
$("#center").addClass("cutomMinHeight");
18161781
$(".fixed").addClass("cutomMinHeight");

0 commit comments

Comments
 (0)