Empower Heroes

• 

  Iframe Element with 360 curved-image

Inspiration

Web VR, The Contributor (newspaper), FaithUnity (newspaper), Room In The Inn (mission).

What it does

Educates Youth on Ways to Serve Their Homeless Community.

How I built it

Here's an open-source look at my HTML, JS, and A-Frame Engine:

<!DOCTYPE html>

        <!-- Chose not to use Animation Properties to control curved image.

< a-animation attribute="rotation" dur="10000" fill="forwards" to="0 180 0" repeat="indefinite">
-->

<!-- NIGHT TIME IMAGE - Donate to Homeless by volunteering with 'Room In The Inn' -->

<!-- ROOM IN THE INN (RITI) Testamonial -- appears if Image is clicked -->     

   <!-- LINK to 'Room In the Inn' - - Volunteer Page -->
   <h4 style="color:#00f">
   <a href="http://www.roomintheinn.org/shine-your-light/who-we-serve-how-you-help"> 
       ROOM IN THE INN
   </a>
   </h4>

<b style="color:#683; font-size:32px;">
 How do Volunteers know about Room In the Inn?
</b>

<p> <!-- Volunteer Testamonial for 'Room In The Inn' -->
<i style="color:#653; font-size:24px;">
I was asked thru my Sunday School class if I would consider staying the night with the "Room In The Inn" this week. I said "Yes" not completely knowing what was needed of me.  I was told what time and where to show up, and I did.  

<p> When I got there the men had already eaten supper, showered, and were washing / drying their clothes.  Some of the men were in the kitchen / tv room enjoying conversation and fellowship with each other and members of our church.  Around 9:00-9:30 we all strted to bed down for the night.  Some were finishing their clothes. 

<p> We all settled down around 10:00 and announced lights out.  Morning came soon.  Lunches were ready having been packed the night before.  We loaded the bus and I volunteered to take the men back downtown.  When we arrived at the mission, most of the men thanked me and went inside to eat breakfast.    

- Doug Old (3/11/2017)

     <hr>
   <b style="font-size:18px; color:#653;"> - - Member of Parkway Baptist Church - - </b>

    <p style="font-size:24px;color:#653;"> If you feel called to support "Room In the Inn" @
    <a href="http://www.parkwaybc.net/"> Parkway Baptist </a>
    , your service helps encourage, feed, and shelter men in our homeless community. 
    </p>

<!-- iFrame for Contributor Vendor Locations -->
<iframe src="http://www.thecontributor.org/our-vendors" id="CONTRIBUTOR" style="visibility:visible; width:400px; height: 550px; border:3px dotted #8c5; padding:0px; position:absolute; left:50px; top:50px;">
</iframe>

<!-- X box to Close Contributor Vendor Locations or Room In The Inn Testamonials -->
<div id="Close" style="visibility:visible; font-size:40px; width:42px; height:38px; position:absolute; left:460px; top:50px; background-color:#f00; color:#fff; text-align:center; font-family:helvetica;padding:16px;" onclick="CloseAll();" ontouchstart="xContributor();"> X </div>

<!-- MISSION STATEMENT for 'Empowering Heroes' Webpage -->

EMPOWER HEROES

|

EDUCATING YOUTH IN WAYS OF SERVING THEIR HOMELESS COMMUNITY

<!-- JavaScript Controls for User Interactions -->

function Contributor(){ /* Variable for 'Contributor Vendors' element */ var Vendors = document.getElementById("CONTRIBUTOR"); Vendors.style.visibility='visible'; /* Variable for the 'Close' [X] element */ var X = document.getElementById("Close"); X.style.visibility='visible'; } function RITI(){ /* Variable for 'Room in the Inn' element */ var RITI = document.getElementById('RITI'); RITI.style.visibility='visible'; /* Variable for the 'Close' [X] element */ var X = document.getElementById("Close"); X.style.visibility='visible'; } function CloseAll(){ /* Variable for 'Contributor Vendors' element */ var Vendors = document.getElementById("CONTRIBUTOR"); Vendors.style.visibility='hidden'; /* Variable for the 'Close' [X] element */ var X = document.getElementById("Close"); X.style.visibility='hidden'; /* Variable for 'Room in the Inn' element */ var RITI = document.getElementById('RITI'); RITI.style.visibility='hidden'; }

Challenges I ran into

The A-Frame Engine only runs on Firefox web browsers.

Accomplishments that I'm proud of

Developing Ministry App for Youth Groups, and Giving Honor to Veteran David Hernandez

What I learned

A-Frame Engines allow user interaction with inline JS Event Handlers.

What's next for Empower Heroes

Once the webpage is published, our team hopes churches will enjoy using it as an online resource for Youth Ministry.

Built With

• a-frame
• html
• javascript
• photoshop
• web-vr