Interactive Virtual Online Infant of Prague Chaplet

index.html

<div style="text-align:left;margin-top:10%">
<center><i>Instructions: Click on the red beads as you pray the Chaplet.</i><br><br></center>
 <input name="rate" id="r1" value="Divine Infant Jesus, I adore Your Cross,and I accept all the crosses You will be pleased to send me Adorable Trinity, I offer You for the glory of the Holy Name of God all the adorations of the Sacred Heart of the Holy Infant Jesus."  hidden="" type="radio"> 
 <label for="r1" class="radio"><span></span>Divine Infant Jesus, I adore Your Cross,and I accept all the crosses You will be pleased to send me Adorable Trinity, I offer You for the glory of the Holy Name of God all the adorations of the Sacred Heart of the Holy Infant Jesus.</label>
    <br><br><b>The three Our Fathers are said in honour of the Holy Family.</b><br><br>
    <p>
 <input name="rate" id="r2" value="Our Father. And the Word was made flesh, and dwelt among us" hidden="" type="radio"> 
 <label for="r2" class="radio"><span></span><b><a href="#openModal1">Our Father</a></b> And the Word was made flesh, and dwelt among us.

  <div id="openModal1" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Our Father</h2>
    
    <p>Our Father who art in heaven,
Hallowed be thy name.
Thy kingdom come.
Thy will be done
on earth as it is in heaven.
Give us this day our daily bread,
and forgive us our trespasses,
as we forgive those who trespass against us,
and lead us not into temptation,
but deliver us from evil.</p>
</div>
</div></label> 
    
    <p>
 <input name="rate" id="r3" value="Our Father. And the Word was made flesh, and dwelt among us" hidden="" type="radio"> 
 <label for="r3" class="radio"><span></span><b>Our Father.</b> And the Word was made flesh, and dwelt among us.</label>            
    
    <p>
 <input name="rate" id="r4" value="Our Father. And the Word was made flesh, and dwelt among us"  hidden="" type="radio"> 
 <label for="r4" class="radio"><span></span><b>Our Father.</b> And the Word was made flesh, and dwelt among us.</label> 
 <br><br><p>
   <i>The twelve Hail Marys are said in memory of the Sacred Infancy of Jesus.</i>
  <br><br>
    <p>
 <input name="rate" id="r5" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r5" class="radio"><span></span><b><a href="#openModal2">Hail Mary</a></b> And the Word was made flesh, and dwelt among us.</label> 

    <div id="openModal2" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Hail Mary</h2>
    
    <p>Hail Mary, full of grace,
the Lord is with thee;
blessed art thou amongst women,
and blessed is the fruit of thy womb, Jesus.
Holy Mary, Mother of God,
pray for us sinners,
now and at the hour of our death. Amen.</p>
</div>
</div></label>      
   <p>
 <input name="rate" id="r6" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r6" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label> 
        
    <p>
 <input name="rate" id="r7" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r7" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label> 
    
    <p>
 <input name="rate" id="r8" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r8" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label> 
        
    <p>
 <input name="rate" id="r9" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r9" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label> 
         
    <p>
 <input name="rate" id="r10" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r10" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label>   
        
    <p>
 <input name="rate" id="r11" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r11" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label>    
        
    <p>
 <input name="rate" id="r12" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r12" class="radio"><span></span><b>Hail Mary.</b>And the Word was made flesh, and dwelt among us.</label> 
            
    <p>
 <input name="rate" id="r13" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r13" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label> 
     
    <p>
 <input name="rate" id="r14" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r14" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label>     
    
    <p>
 <input name="rate" id="r15" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r15" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label> 
        
    <p>
 <input name="rate" id="r16" value="Hail Mary. And the Word was made flesh, and dwelt among us." hidden="" type="radio"> 
 <label for="r16" class="radio"><span></span><b>Hail Mary.</b> And the Word was made flesh, and dwelt among us.</label> 
      <br><br>     
    <p><i>Final prayer:</i><br><br>
    <p>
 <input name="rate" id="r17" value=" Holy Infant Jesus, bless and protect us!" hidden="" type="radio"> 
 <label for="r17" class="radio"><span></span> Holy Infant Jesus, bless and protect us!</label> 
     <p><br><br>

<!-- Please do not remove the below items-->
Interactive Infant of Prague Chaplet originally published by <a href="http://www.gotomary.com">Go to Mary</a>. To see more free code and for other Catholic information please see <a href="http://www.gotomary.com">Go to Mary</a>.

<style>


input[type="radio"] {
 display: none;
} 
/** %[Object] Radio buttons */ 
/*------------------------------------*/ 
@-webkit-keyframes pulse {

 0% {
  width: .7em;
  height: .7em;
  margin: .4em;
 }

 50% {
  width: 1.1em;
  height: 1.1em;
  margin: .2em;
 }

 100% {
  width: .9em;
  height: .9em;
  margin: .3em;
 };
}

@-moz-keyframes pulse {

 0% {
  width: .7em;
  height: .7em;
  margin: .4em;
 }

 50% {
  width: 1.1em;
  height: 1.1em;
  margin: .2em;
 }

 100% {
  width: .9em;
  height: .9em;
  margin: .3em;
 };
}

@-o-keyframes pulse {

 0% {
  width: .7em;
  height: .7em;
  margin: .4em;
 }

 50% {
  width: 1.1em;
  height: 1.1em;
  margin: .2em;
 }

 100% {
  width: .9em;
  height: .9em;
  margin: .3em;
 };
}

@keyframes pulse {

 0% {
  width: .7em;
  height: .7em;
  margin: .4em;
 }

 50% {
  width: 1.1em;
  height: 1.1em;
  margin: .2em;
 }

 100% {
  width: .9em;
  height: .9em;
  margin: .3em;
 };
}

.radio {
 color: #798188;
 cursor: pointer;
 margin-left: .5em;
 display: inline-block;
}

.radio, 
.radio span:before {
 -webkit-transition: .25s ease;
 -moz-transition: .25s ease;
 -ms-transition: .25s ease;
 -o-transition: .25s ease;
 transition: .25s ease;
}

.radio span {
 width: 1.5em;
 height: 1.5em;
 margin-right: .5em;
 border-radius: 3em;
 background: #990000;
 vertical-align: top;
 display: inline-block;
}

.radio span:before {
 content: '';
 width: .7em;
 height: .7em;
 margin: .4em;
 border-radius: 3em;
 display: inline-block;
 background-color: rgba(255,255,255,1);
}

.radio:hover span:before {
 background-color: rgba(255,255,255, .9);
} 

/*------------------------------------*/ 

input[type="radio"]:checked + .radio {
 color: #cc0000;
}

input[type="radio"]:checked + .radio span:before {
 background-color: #ff4d4d;
 width: .9em;
 height: .9em;
 margin: .3em;
 -webkit-animation: pulse .25s;
 -moz-animation: pulse .25s;
 -o-animation: pulse .25s;
 animation: pulse .25s;
} 



.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
overflow: auto;
width: 100%;
height: 100%;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { background: #00d9ff; }

</style>