Skip to content

Commit

Permalink
Merge pull request #11 from BolajiAyodeji/BolajiAyodeji-patch-1
Browse files Browse the repository at this point in the history 
Modified UI
@BolajiAyodeji
BolajiAyodeji authored Oct 31, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
2 parents d4ec1fa + 35f9787 commit f3a008a
Showing 4 changed files with 229 additions and 71 deletions.
108 changes: 103 additions & 5 deletions css/app.css
View file
Original file line number Diff line number Diff line change
@@ -6,6 +6,19 @@ body {

* {
box-sizing: border-box;
border: 1px;
}

h2,
h3,
h4,
h5,
h6 {
color: #fff;
}

a {
text-decoration: none;
}

header {
@@ -37,9 +50,14 @@ svg {
}
}

.container {
margin: 0;
width: 100%
}

.ml1 {
font-weight: 200;
font-size: 1.1em;
font-size: 0.9em;
}

.ml1 .letter {
@@ -103,7 +121,7 @@ svg {
.shareButton {
overflow: hidden;
margin: 0 auto;
padding-top: 75px;
padding-top: 10px;
}

.shareButton iframe {
@@ -125,7 +143,8 @@ svg {
box-shadow: 0 0 0 3.0px #e9ecef;
}

#userInput input, #userInput select {
#userInput input,
#userInput select {
height: 60px;
}

@@ -161,10 +180,89 @@ svg {

#userInput button[type='reset']:hover {
box-shadow: inset 0 0 0 2px #e9ecef;
background:#11cdef;
background: #11cdef;
color: #000;
}

footer {
padding-top: 0;
background: #000;
position: relative;
padding-top: 40px;
padding-bottom: 20px
}

footer h2 {
color: #fff;
}

footer h3 {
color: #fff;
}

.footer-link {
margin: 0;
padding: 0;
}

.footer-link li {
display: block;
list-style: none;
margin: 5px 10px 5px 0;
}

footer p,
footer span,
.footer-link li a {
color: #fff;
}

.footer-link li a:hover {
color: #2dce89;
}

.copyright-text p,
.footer-bottom .phone-contact p {
font-size: 14px;
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 5em;
padding-top: 3em;
}

.footer-bottom .phone-contact,
.footer-bottom .social-icon {
display: inline-block;
vertical-align: top;
}

.footer-bottom .phone-contact span {
font-weight: 500;
display: inline-block;
margin-left: 10px;
}

.social-icon {
position: relative;
padding: 0;
margin: 0;
}

.social-icon li {
display: inline-block;
list-style: none;
}

.social-icon li a {
border-radius: 100px;
color: #d9d9d9;
font-size: 15px;
text-decoration: none;
position: relative;
margin: 5px 10px;
}

.social-icon li a:hover {
color: #2dce89;
}
Binary file added img/MIT-License-transparent.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
188 changes: 123 additions & 65 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -26,17 +26,19 @@

<!-- Google Knowledge Graph card -->
<script type='application/ld+json'>
{
"@context": "http://www.schema.org",
"@type": "NettyFinder",
"name": "NettyFinder",
"url": "https://bolajiayodeji.github.io/netty-finder",
"logo": "https://bolajiayodeji.github.io/netty-finder/img/logo.png",
"description": "This script checks a Nigerian Telephone number and detects which network it belongs to."
}
</script>
{
"@context": "http://www.schema.org",
"@type": "NettyFinder",
"name": "NettyFinder",
"url": "https://bolajiayodeji.github.io/netty-finder",
"logo": "https://bolajiayodeji.github.io/netty-finder/img/logo.png",
"description": "This script checks a Nigerian Telephone number and detects which network it belongs to."
}
</script>
<!--Bootstrap CDN-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--FontAwesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<!--Main Stylesheet-->
<link rel="stylesheet" type="text/css" media="screen" href="css/app.css" />
<!--logo-->
@@ -46,55 +48,48 @@
<body>
<header>
<h1>NettyFinder 🚀</h1>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon class="svg--sm" fill="white" points="0,0 30,100 65,21 90,100 100,75 100,100 0,100" />
<polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0,100" />
<polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0,100"
/>
</svg>
</header>

<div class="col-md-12 col-sm-12">
<div class="container">

<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">
This script checks a Nigerian <img src="https://cdn3.iconfinder.com/data/icons/world-flags-square-vol-2/48/Nigeria-512.png"
class="flag" alt="Nigeria Flag">
Telephone number and detects which network it belongs to.
</span>
<span class="line line2"></span>
</span>
</h1>
</div>
</div>
<hr />

<section id="userInput">
<div class="container">
<div class="row">
<br /><br />
<div class="col-md-6">
<div class="alert alert-danger text-center" role="alert">
Enter number without (+234), e.g 08109445504
</div>
</div>

<div class="col-md-6">
<div class="alert alert-danger text-center" role="alert">
Number must be 11 digits and not less than or greather than
</div>
</div>

<div class="col-md-6 col-sm-6">

<!-- NettyFinder Form -->
<form>
<br /><br /><br />
<br />
<br />
<br />
<div class="form-group">
<div class="col-md-12">
<div class="alert alert-danger text-center" role="alert">
<p class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">
This script checks a Nigerian
<img src="https://cdn3.iconfinder.com/data/icons/world-flags-square-vol-2/48/Nigeria-512.png"
class="flag" alt="Nigeria Flag"> Telephone number and detects which network it belongs to.
</span>
<span class="line line2"></span>
</span>
</p>
</div>
</div>

<div class="col-md-12">
<div class="alert alert-danger text-center" role="alert">
Enter number without [+234] e.g 08109445504
</div>
</div>
<div class="col-md-12 col-sm-12">
<input type="text" name="telephone" class="form-control" placeholder="Enter Telephone number"
id="cf-name">
<input type="text" name="telephone" class="form-control" placeholder="Enter Telephone number" id="cf-name">
</div>
<div class="col-md-3 col-sm-3">
<button type="button" class="form-control" onclick="compute(form)">Submit</button>
@@ -104,8 +99,7 @@ <h1 class="ml1">
</div>

<div class="col-md-12 col-sm-12">
<input id="result" type="text" name="nettyResult" class="form-control" placeholder="NettyFinder Result"
readonly>
<input id="result" type="text" name="nettyResult" class="form-control" placeholder="NettyFinder Result" readonly>
</div>
</div>
</form>
@@ -115,35 +109,99 @@ <h1 class="ml1">

<div class="col-md-6 col-sm-6">
<div class="container">
<div class="shareButton">
<a href="https://twitter.com/intent/tweet?&ref_src=twsrc%5Etfw" class="twitter-mention-button"
data-size="large" data-text="Hello there! I just tried out #NettyFinder and it got the network of my Nigerian Telephone number right. Some cool app developed by @iambolajiayo, check it out https://bolajiayodeji.github.io/netty-finder/"
data-show-count="false">Tweet to @iambolajiayo</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
&nbsp;&nbsp;
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbolajiayodeji.github.io%2Fnetty-finder%2F&layout=button_count&size=large&mobile_iframe=true&appId=1638690196224226&width=84&height=28"
width="90" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media"></iframe>
<img src="img/logo.png" class="img-responsive" alt="nettyfinder spaceship">
</div>
</div>
</div>
</div>
</div>
</section>



<!-- FOOTER -->
<footer>
<div style="background-color:#ddd;" role="alert">
<hr>
<p class="text-center">Developed by; <a href="https://bolajiayodeji.github.io" target="_blank">Bolaji
Ayodeji</a></p>
<p class="mb-0 text-center">Source code: <a href="https://github.com/BolajiAyodeji/netty-finder" target="_blank">Github</a>
|| <a href="https://codepen.io/iambolajiayo/pen/xyBVGx" target="_blank">Codepen</a></p>
<div class="container">
<div class="row">

<div class="col-md-6 col-sm-12">
<div class="footer-thumb ">
<h4>
Made with
<i class="fas fa-heart"></i> by
<a href="https://bolajiayodeji.github.io">Bolaji Ayodeji</a> and
<a href="https://github.com/BolajiAyodeji/netty-finder/graphs/contributors">this awesome people</a>
</p>
</div>
</div>

<div class=" col-md-4 col-sm-12 ">
<div class="footer-thumb">
<div class="shareButton">
<a href="https://twitter.com/intent/tweet?&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-size="large" data-text="Hello there! I just tried out #NettyFinder and it got the network of my Nigerian Telephone number right. Some cool app developed by @iambolajiayo, check it out https://bolajiayodeji.github.io/netty-finder/"
data-show-count="false">Tweet to @iambolajiayo</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
&nbsp;&nbsp;
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbolajiayodeji.github.io%2Fnetty-finder%2F&layout=button_count&size=large&mobile_iframe=true&appId=1638690196224226&width=84&height=28" width="90" height="28" style="border:none;overflow:hidden"
scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
</div>

<div class="col-md-2 col-sm-12 ">
<div class="footer-thumb ">
<a class="github-button " href="https://github.com/BolajiAyodeji/netty-finder " data-icon="octicon-star " data-size="large " data-show-count="true " aria-label="Star BolajiAyodeji/netty-finder on GitHub ">Star</a>
<a class="github-button " href="https://github.com/BolajiAyodeji/netty-finder/fork " data-icon="octicon-repo-forked " data-size="large " data-show-count="true " aria-label="Fork BolajiAyodeji/netty-finder on GitHub ">Fork</a>
<a class="github-button" href="https://github.com/BolajiAyodeji/netty-finder/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch BolajiAyodeji/netty-finder on GitHub">Watch</a>
</div>
</div>
</div>



<div class="col-md-12 col-sm-12 ">
<div class="footer-bottom ">
<div class="col-md-6 col-sm-5 ">
<div class="copyright-text ">
<p>Copyright &copy;
<script>
document.write(new Date().getFullYear());
</script>
</p>
</div>
</div>

<ul class="social-icon ">
<li>
<a href="https://facebook.com/iambolajiayo " class="fab fa-facebook-square " attr="facebook icon "></a>
</li>
<li>
<a href="https://twitter.com/iambolajiayo " class="fab fa-twitter "></a>
</li>
<li>
<a href="https://instagram.com/iambolajiayo " class="fab fa-instagram "></a>
</li>
<li>
<a href="https://linkedin/in/iambolajiayo " class="fab fa-linkedin "></a>
</li>
<li>
<a href="https://github.com/bolajiayodeji " class="fab fa-github "></a>
</li>
<li>
<a href="https://codepen.io/iambolajiayo " class="fab fa-codepen "></a>
</li>
</ul>
</div>
</div>
</div>

</div>
</div>
</footer>

<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="js/app.js"></script>
<script src="js/jquery.js "></script>
<script async defer src="https://buttons.github.io/buttons.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js "></script>
<script src="js/app.js "></script>
</body>

</html>
4 changes: 3 additions & 1 deletion js/app.js
View file
Original file line number Diff line number Diff line change
@@ -7,7 +7,9 @@
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({ loop: true })
anime.timeline({
loop: true
})
.add({
targets: '.ml1 .letter',
scale: [0.3, 1],

0 comments on commit f3a008a

Please sign in to comment.