Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created June 3, 2021 12:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/ac1722e30f64dc0b39c67c25bdc9958b to your computer and use it in GitHub Desktop.
Save CodeMyUI/ac1722e30f64dc0b39c67c25bdc9958b to your computer and use it in GitHub Desktop.
Download ZIP
Select Text And Share
Raw
index.html
<div id="article-cover">
<div id="app-title">Select and share</div>
<div id="article-content">
<article id="article">
<header>The 25 Most Read Bible Verses</header>
<section>
<h1>Jeremiah 29:11</h1>
<p><b>11</b> For I know the plans I have for you," declares the LORD, "plans to prosper you and not to harm you, plans to give you hope and a future.</p>
</section>
<section>
<h1>Psalm 23</h1>
<p><b>1</b> The LORD is my shepherd, I lack nothing. <b>2</b> He makes me lie down in green pastures, he leads me beside quiet waters, <b>3</b> he refreshes my soul. He guides me along the right paths for his name’s sake. <b>4</b> Even though I walk through the darkest valley, I will fear no evil, for you are with me; your rod and your staff, they comfort me. <b>5</b> You prepare a table before me in the presence of my enemies. You anoint my head with oil; my cup overflows. <b>6</b> Surely your goodness and love will follow me all the days of my life, and I will dwell in the house of the LORD forever.</p>
</section>
<section>
<h1>1 Corinthians 13:4-8</h1>
<p><b>4</b> Love is patient, love is kind. It does not envy, it does not boast, it is not proud. <b>5</b> It does not dishonor others, it is not self-seeking, it is not easily angered, it keeps no record of wrongs. <b>6</b> Love does not delight in evil but rejoices with the truth. <b>7</b> It always protects, always trusts, always hopes, always perseveres. <b>8</b> Love never fails. But where there are prophecies, they will cease; where there are tongues, they will be stilled; where there is knowledge, it will pass away.</p>
</section>
<section>
<h1>Philippians 4:13</h1>
<p><b>13</b> I can do all this through him who gives me strength.</p>
</section>
<section>
<h1>John 3:16</h1>
<p><b>16</b> For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.</p>
</section>
<section>
<h1>Romans 8:28</h1>
<p><b>28</b> And we know that in all things God works for the good of those who love him, who have been called according to his purpose.</p>
</section>
<section>
<h1>Isaiah 41:10</h1>
<p><b>10</b> So do not fear, for I am with you; do not be dismayed, for I am your God. I will strengthen you and help you; I will uphold you with my righteous right hand.</p>
</section>
<section>
<h1>Proverbs 3:5-6</h1>
<p><b>5</b> Trust in the LORD with all your heart and lean not on your own understanding; <b>6</b> in all your ways submit to him, and he will make your paths straight.</p>
</section>
<section>
<h1>Psalm 46:1</h1>
<p><b>1</b> God is our refuge and strength, an ever-present help in trouble.</p>
</section>
<section>
<h1>Galatians 5:22-23</h1>
<p><b>22</b> But the fruit of the Spirit is love, joy, peace, forbearance, kindness, goodness, faithfulness, <b>23</b> gentleness and self-control. Against such things there is no law.</p>
</section>
<section>
<h1>Hebrews 11:1</h1>
<p><b>1</b> Now faith is confidence in what we hope for and assurance about what we do not see.</p>
</section>
<section>
<h1>2 Timothy 1:7</h1>
<p><b>7</b> For the Spirit God gave us does not make us timid, but gives us power, love and self-discipline.</p>
</section>
<section>
<h1>1 Corinthians 10:13</h1>
<p><b>13</b> No temptation has overtaken you except what is common to mankind. And God is faithful; he will not let you be tempted beyond what you can bear. But when you are tempted, he will also provide a way out so that you can endure it.</p>
</section>
<section>
<h1>Proverbs 22:6</h1>
<p><b>6</b> Start children off on the way they should go, and even when they are old they will not turn from it.</p>
</section>
<section>
<h1>Isaiah 40:31</h1>
<p><b>31</b> but those who hope in the LORD will renew their strength. They will soar on wings like eagles; they will run and not grow weary, they will walk and not be faint.</p>
</section>
<section>
<h1>Joshua 1:9</h1>
<p><b>9</b> Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the LORD your God will be with you wherever you go.</p>
</section>
<section>
<h1>Philippians 4:6</h1>
<p><b>6</b> Do not be anxious about anything, but in every situation, by prayer and petition, with thanksgiving, present your requests to God.</p>
</section>
<section>
<h1>Hebrews 12:2</h1>
<p><b>2</b> fixing our eyes on Jesus, the pioneer and perfecter of faith. For the joy set before him he endured the cross, scorning its shame, and sat down at the right hand of the throne of God.</p>
</section>
<section>
<h1>John 10:10</h1>
<p><b>10</b> The thief comes only to steal and kill and destroy; I have come that they may have life, and have it to the full.</p>
</section>
<section>
<h1>Zephaniah 3:17</h1>
<p><b>17</b> The LORD your God is with you, the Mighty Warrior who saves. He will take great delight in you; in his love he will no longer rebuke you, but will rejoice over you with singing.</p>
</section>
<section>
<h1>2 Corinthians 5:17</h1>
<p><b>17</b> Therefore, if anyone is in Christ, the new creation has come: The old has gone, the new is here!</p>
</section>
<section>
<h1>James 5:16</h1>
<p><b>16</b> Therefore confess your sins to each other and pray for each other so that you may be healed. The prayer of a righteous person is powerful and effective.</p>
</section>
<section>
<h1>Deuteronomy 31:6</h1>
<p><b>6</b> Be strong and courageous. Do not be afraid or terrified because of them, for the LORD your God goes with you; he will never leave you nor forsake you.</p>
</section>
<section>
<h1>1 Corinthians 16:13</h1>
<p><b>13</b> Be on your guard; stand firm in the faith; be courageous; be strong.</p>
</section>
<section>
<h1>Matthew 11:28</h1>
<p><b>28</b> Come to me, all you who are weary and burdened, and I will give you rest.</p>
</section>
</article>
<div id="source">
Source <a target="_blank" href="https://www.biblestudytools.com/topical-verses/the-25-most-read-bible-verses/">www.biblestudytools.com</a>
</div>
</div>
</div>
<div id="share-box-cover">
<div id="share-box">
<div id="share-links">
<a class="share-btn" target="_blank" id="share-twitter" title="Share on Twitter" tabindex="0"><i class="fab fa-twitter"></i></a>
<a class="share-btn" target="_blank" id="share-whatsapp" title="Share on WhatsApp"><i class="fab fa-whatsapp"></i></a>
<a class="share-btn" target="_blank" id="share-telegram" title="Share on Telegram"><i class="fab fa-telegram"></i></a>
<a class="share-btn" id="share-email" title="Share via Email"><i class="fas fa-envelope"></i></a>
</div>
<div id="selected-text" class="telegram">For I know the plans I have for you," declares the LORD, "plans to prosper you and not to harm you, plans to give you hope and a future.</div>
</div>
<div id="close-share-box"><i class="fas fa-times"></i></div>
</div>
Raw
script.js
$(function()
{
var body = $('body'), articleCover = $('#article-cover'), shareBox = $('#share-box-cover'), shareBtn = $('.share-btn'), selectedTextBox = $('#selected-text'), closeShareBoxBtn = $('#close-share-box'),
twitterShareBtn = $('#share-twitter'), whatsappSharBtn = $('#share-whatsapp'), telegramShareBtn = $('#share-telegram'), emailShareBtn = $('#share-email');
function _void()
{
articleCover.removeClass('faded');
shareBox.removeClass('active');
body.removeClass('ovh');
shareBtn.removeAttr('href');
selectedTextBox.text('');
}
function makeLinks(text)
{
text = encodeURIComponent(text);
url = window.location.href;
twitterShareBtn.attr('href','https://twitter.com/intent/tweet?text='+text);
whatsappSharBtn.attr('href','https://api.whatsapp.com/send?text='+text);
telegramShareBtn.attr('href','https://telegram.me/share/url?url='+url+'&text='+text);
emailShareBtn.attr('href','mailto:?body='+text);
}
function getSelectionText()
{
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
if( text.trim().length > 0 )
{
articleCover.addClass('faded');
shareBox.addClass('active');
body.addClass('ovh');
selectedTextBox.text(text);
makeLinks(text);
}
else
_void();
}
$('#article').on('mouseup',getSelectionText);
closeShareBoxBtn.on('click',_void);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
select-text-and-share.markdown
Raw
style.css
*
{
outline: none;
}
html, body
{
height: 100%;
}
body
{
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Montserrat', sans-serif, Arial, Helvetica, sans-serif;
background-color: #f9f9f9;
}
body.ovh
{
overflow: hidden;
}
#article-cover
{
position: relative;
max-width: 800px;
margin: 100px auto;
background-color: #fff;
}
#article-cover.faded
{
filter: blur(5px);
}
#app-title
{
position: absolute;
top: -15px;
font-size: 14px;
background: #F44336;
background: linear-gradient(130deg,#F44336,#FFEB3B);
color: #fff;
padding: 6px 9px;
left: 60px;
box-shadow: 0px 10px 20px -5px #ebcbcc;
}
#article-content
{
padding: 60px;
}
article header
{
font-size: 30px;
text-align: center;
font-weight: bold;
color: #272726;
margin-bottom: 50px;
}
article h1
{
margin: 0 0 20px 0;
display: inline-block;
color: #f44336;
padding: 10px 0;
border-bottom: 1px solid #fee7e5;
}
article p
{
font-size: 17px;
line-height: 32px;
margin: 0 0 40px 0;
color: #272726;
}
article p b
{
color: #edb50d;
margin-right: 5px;
}
#source
{
font-size: 14px;
color: #ababab;
text-align: center;
border-top: 1px solid #f1f1f1;
padding-top: 20px;
}
#source a
{
color: #F44336;
text-decoration: none;
margin-left: 5px;
}
#share-box-cover
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: none;
}
#share-box-cover.active
{
display: block;
}
#share-box-cover:before
{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
opacity: 0.7;
z-index: 1;
}
#share-box
{
position: absolute;
top: 50%;
right: 0;
left: 0;
max-width: 600px;
height: 240px;
margin: 0 auto;
transform: translateY(-50%);
border-radius: 2px;
overflow: hidden;
box-shadow: 0 10px 20px -3px #bdbdbd;
z-index: 2;
}
#share-links
{
position: absolute;
width: 60px;
}
.share-btn
{
display: block;
width: 40px;
height: 40px;
background-color: #F44336;
padding: 10px;
cursor: pointer;
text-decoration: none;
}
.share-btn i
{
font-size: 30px;
color: #fff;
display: block;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#share-twitter i, #share-email i
{
font-size: 26px;
}
#selected-text
{
margin-left: 60px;
padding: 20px;
color: #fff;
font-size: 14px;
line-height: 24px;
overflow-y: auto;
height: 200px;
background: #343434;
}
#close-share-box
{
position: fixed;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
color: #929292;
z-index: 2;
font-size: 20px;
line-height: 1;
}
Raw
styles
<link href="https://use.fontawesome.com/releases/v5.7.1/css/solid.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.1/css/brands.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.1/css/fontawesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment