📜 End-Time Prophetic Timeline Web App System Design & Requirements Document Project Owner: Anthony Goldson Ministry: Bible Teachers International Source Doctrine: When Will the Church Be Raptured? by Apostle Mary Banks
🎯 Project Purpose To build a professional-quality, touchscreen-friendly web application that presents the timeline of end-time events—specifically the Seven Trumpet Judgments and the Seven Vial Judgments—as taught by Apostle Mary Banks. This timeline will offer a layered visual and educational experience that combines scriptures, sermon excerpts, videos, and custom visuals to teach and reinforce prophetic truth.
🧱 System Architecture Overview 💻 Target Hardware Primary Display: Touchscreen monitor (connected to Lenovo desktop)
Operating System: Windows 10/11
Web Browser: Chrome/Edge preferred
Interaction Mode: Full touchscreen input
⚙️ Stack Recommendations Frontend: React + TailwindCSS (for modern visuals and flexibility)
Backend (optional for dynamic content): Node.js or Firebase
Database (optional for content storage): Firestore, MongoDB, or local JSON-based state
Deployment: Static hosting (Netlify, Vercel) or dynamic (Render, Firebase)
📑 Core Features & Modules
- Main Timeline View Horizontal Scroll-Based Timeline (Touch/Drag Friendly)
Events appear in biblical order:
7 Trumpet Judgments
7 Vial Judgments
Each timeline "event node" will include:
Title (e.g., “First Trumpet – Hail and Fire”)
Summary description
Related scripture (click to expand full KJV passage)
A toggle to open:
Sub-timeline (for deeper breakdowns)
Visuals (images/illustrations)
Video (sermon clip from Apostle Mary Banks)
Audio summary
- Sub-Timelines Each Trumpet/Vial Judgment opens a micro-timeline:
Show "intra-event" details (e.g., actions by angels, symbolic meanings, side prophecies)
Duration indicators (e.g., "5 months of torment")
- Touchscreen UX Enhancements Large hitboxes for touch navigation
Swipe/drag interaction
Tap-to-expand/collapse cards
On-screen virtual back/home buttons
Custom pinch-to-zoom (optional)
- Searchable Scripture & Teaching Database Search by:
Keyword (e.g., “Wrath,” “Sealing,” “Rapture”)
Trumpet/Vial number
Scripture reference (e.g., Rev. 9:1)
- Multimedia Integration Embedded videos (YouTube or locally hosted)
Audio explanations (from BTI teachings)
Dynamic illustrations/images
Stylized animated transitions (subtle but futuristic)
- Admin/Editor Mode (Optional Phase 2) Upload/change teaching content
Add new events or edit existing timeline items
Upload media assets
Visual theme customizer (colors, background, fonts)
🎨 Design Guidelines Look & Feel Futuristic and reverent (inspired by Tony Stark interfaces but scripturally themed)
Semi-transparent dark overlays with glowing highlights
White/gold/blue accent color palette
Soft motion transitions
Scripture-centered layout; never overly gamified or distracting
Font & Text Easy-to-read fonts (e.g., Inter, Open Sans, or DM Serif Display for headers)
Font size adaptable for large displays
KJV version used exclusively
🧠 Content Requirements Source Material (To Be Parsed & Integrated) “When Will the Church Be Raptured?” Ebook (PDF now uploaded)
YouTube clips and full sermons from Bible Teachers International
Internal documents or transcriptions from Mary Banks' teachings
Needed Media Assets Timeline illustration backgrounds
Icons for events (e.g., trumpet, vial, angel, cloud)
Teaching visuals (charts, maps, diagrams)
Voiceover or summary audio clips
🧰 Developer Toolkits & Plugins Video Embeds: YouTube API or HTML5 player
Touch Controls: Hammer.js or React-use-gesture
Timeline Library (optional base): Vis.js, Timeline.js, or custom React component
CMS Integration (Optional): Sanity.io or Strapi (for dynamic updates)
please see attached for the image of the events for the timeline as well as a sketch for the possible design
Loading...
Hey i love what you did but i had something different in mind for the visuals and design. It shouldn’t look like a website but it should look like a futuristic teaching tool. I wanted it to have AI created pictures to signify the devastation of each event like for instance the first trumpet to show hail fire but very graphic and realistic as if it were an event that actually happened i wanted it to look so real to the point where it would grab people's attention while the timeline is being taught. I want the design to be more futuristic. And also I would like for the controls of this web app to be compatible with all kinds of controllers and bluetooth devices like xbox controllers, MIDI’s, Keyboard and Mouse, and all kinds of Bluetooth devices. So with that being said i would like for each main event like each trumpet and vials to have that realistic graphic picture showing up and i want all of these to be on a real timeline but without specific dates because dates are not mention because no man knows the hour or day this will happen but i would like for you to make the timeline look like a timeline but with the endurance of how long each event last. Whenever I click on each main event I would like a cool animated transition to go into each event's sub event within the timeline bringing in that futuristic look to it. I don’t want it to look like a boring website but I want it to look like the future AI that no one has seen before. You’ve seen the graphics we’ve had at our conferences and in our youtube page so I want you to put in graphics that are top notch like what hailuo ai is doing and all the other cool graphic design models out there. This is initially how I want you to modify the design. Keep all of the same information but just change the design to how I'm envisioning it. Yeah i don’t want any basic type of design i would like a futuristic AI tony stark type of design. I need you to use parallax scrolling effects and other similar features to enhance the design.
Loading...