Spaces:
Running
Running
Create an app called "DingDong" which shows videos by interest and allows the user to create personal videos. Make the basic framework identical to Tiktok. Make this app designed specifically for videos discussing religions, having religious conferences, having religious seminars, having religious services, religious education, religious talks, religious speakers, celebrities who speak about religions, politicians who speak about religions, interconnection of different religions, religious education, religious study, and rediscovering religion. Make it possible for users to record videos or audio of themselves praying, and for the words they pray to be heard by the app, transcribed from audio to text, and saved in the memory of that user's profile. Allow the option of creating a "reflection journal" using the audio/video data which has been converted to text, and to have an ai bot or tool which can summarize what they journaled about if requested. Allow this text data to be processed through data cleaning, Natural Language Processing, sentiment analysis, semantic analysis, vector embeddings (if needed), and a multimodal ai agent model chatbot. Allow this chatbot to provide humor or encouragement to the user after the user inputs new journal data by recording video/audio of themselves and converting the video/audio to text data. Use LLMs, VLMs, and LWMs as needed. Make this app usable by both iphones and android phones. allow the option to change ai bot comments from humor to encouraging to dark-humor to goal-guidance to calmness. Create video categories such as "Reflections", "Philosophy","Togetherness","Official Service","Ceremonies","Museums","Faith Sharing", "Vocations/Our Journeys", and others according to videos the users continue to upload. - Initial Deployment
Browse files- README.md +7 -5
- discover.html +123 -0
- index.html +263 -18
- profile.html +134 -0
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: faith-app-1
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: gray
|
| 5 |
+
colorTo: green
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
discover.html
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Discover - DingDong</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<style>
|
| 11 |
+
.search-bar {
|
| 12 |
+
background: rgba(255,255,255,0.1);
|
| 13 |
+
backdrop-filter: blur(5px);
|
| 14 |
+
}
|
| 15 |
+
.category-card {
|
| 16 |
+
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
|
| 17 |
+
}
|
| 18 |
+
</style>
|
| 19 |
+
</head>
|
| 20 |
+
<body class="bg-black text-white">
|
| 21 |
+
<div class="px-4 py-3 sticky top-0 bg-black z-10">
|
| 22 |
+
<div class="search-bar rounded-full px-4 py-2 flex items-center">
|
| 23 |
+
<i data-feather="search" class="text-gray-400 mr-2" width="18"></i>
|
| 24 |
+
<input type="text" placeholder="Search faiths, prayers, topics..." class="bg-transparent w-full text-white placeholder-gray-400 focus:outline-none">
|
| 25 |
+
</div>
|
| 26 |
+
</div>
|
| 27 |
+
|
| 28 |
+
<div class="px-4 mb-4">
|
| 29 |
+
<h2 class="text-xl font-bold mb-3">Trending Topics</h2>
|
| 30 |
+
<div class="flex overflow-x-auto gap-3 pb-2">
|
| 31 |
+
<div class="flex-shrink-0 bg-gray-800 px-3 py-1 rounded-full">#InterfaithDialogue</div>
|
| 32 |
+
<div class="flex-shrink-0 bg-gray-800 px-3 py-1 rounded-full">#RamadanReflections</div>
|
| 33 |
+
<div class="flex-shrink-0 bg-gray-800 px-3 py-1 rounded-full">#LentenJourney</div>
|
| 34 |
+
<div class="flex-shrink-0 bg-gray-800 px-3 py-1 rounded-full">#MindfulPrayer</div>
|
| 35 |
+
<div class="flex-shrink-0 bg-gray-800 px-3 py-1 rounded-full">#SacredArt</div>
|
| 36 |
+
<div class="flex-shrink-0 bg-gray-800 px-3 py-1 rounded-full">#SpiritualAwakening</div>
|
| 37 |
+
</div>
|
| 38 |
+
</div>
|
| 39 |
+
|
| 40 |
+
<div class="px-4 mb-6">
|
| 41 |
+
<h2 class="text-xl font-bold mb-3">Categories</h2>
|
| 42 |
+
<div class="grid grid-cols-2 gap-3">
|
| 43 |
+
<div class="category-card rounded-xl h-40 relative overflow-hidden">
|
| 44 |
+
<img src="http://static.photos/religion/640x360/21" class="w-full h-full object-cover">
|
| 45 |
+
<div class="absolute bottom-0 left-0 p-3 w-full">
|
| 46 |
+
<h3 class="font-bold">Reflections</h3>
|
| 47 |
+
<p class="text-xs">Personal spiritual insights</p>
|
| 48 |
+
</div>
|
| 49 |
+
</div>
|
| 50 |
+
<div class="category-card rounded-xl h-40 relative overflow-hidden">
|
| 51 |
+
<img src="http://static.photos/religion/640x360/22" class="w-full h-full object-cover">
|
| 52 |
+
<div class="absolute bottom-0 left-0 p-3 w-full">
|
| 53 |
+
<h3 class="font-bold">Philosophy</h3>
|
| 54 |
+
<p class="text-xs">Deep theological discussions</p>
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
<div class="category-card rounded-xl h-40 relative overflow-hidden">
|
| 58 |
+
<img src="http://static.photos/religion/640x360/23" class="w-full h-full object-cover">
|
| 59 |
+
<div class="absolute bottom-0 left-0 p-3 w-full">
|
| 60 |
+
<h3 class="font-bold">Togetherness</h3>
|
| 61 |
+
<p class="text-xs">Community worship</p>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
<div class="category-card rounded-xl h-40 relative overflow-hidden">
|
| 65 |
+
<img src="http://static.photos/religion/640x360/24" class="w-full h-full object-cover">
|
| 66 |
+
<div class="absolute bottom-0 left-0 p-3 w-full">
|
| 67 |
+
<h3 class="font-bold">Official Service</h3>
|
| 68 |
+
<p class="text-xs">Religious ceremonies</p>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
|
| 74 |
+
<div class="px-4 mb-20">
|
| 75 |
+
<h2 class="text-xl font-bold mb-3">Recommended Creators</h2>
|
| 76 |
+
<div class="flex overflow-x-auto gap-4 pb-4">
|
| 77 |
+
<div class="flex-shrink-0 text-center">
|
| 78 |
+
<div class="w-16 h-16 rounded-full bg-gray-800 overflow-hidden mx-auto mb-1">
|
| 79 |
+
<img src="http://static.photos/people/200x200/11" class="w-full h-full object-cover">
|
| 80 |
+
</div>
|
| 81 |
+
<span class="text-xs">@BuddhistMonk</span>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="flex-shrink-0 text-center">
|
| 84 |
+
<div class="w-16 h-16 rounded-full bg-gray-800 overflow-hidden mx-auto mb-1 border-2 border-green-500">
|
| 85 |
+
<img src="http://static.photos/people/200x200/12" class="w-full h-full object-cover">
|
| 86 |
+
</div>
|
| 87 |
+
<span class="text-xs">@RabbiCohen</span>
|
| 88 |
+
</div>
|
| 89 |
+
<div class="flex-shrink-0 text-center">
|
| 90 |
+
<div class="w-16 h-16 rounded-full bg-gray-800 overflow-hidden mx-auto mb-1">
|
| 91 |
+
<img src="http://static.photos/people/200x200/13" class="w-full h-full object-cover">
|
| 92 |
+
</div>
|
| 93 |
+
<span class="text-xs">@ImamAhmed</span>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="flex-shrink-0 text-center">
|
| 96 |
+
<div class="w-16 h-16 rounded-full bg-gray-800 overflow-hidden mx-auto mb-1">
|
| 97 |
+
<img src="http://static.photos/people/200x200/14" class="w-full h-full object-cover">
|
| 98 |
+
</div>
|
| 99 |
+
<span class="text-xs">@SisterMary</span>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="flex-shrink-0 text-center">
|
| 102 |
+
<div class="w-16 h-16 rounded-full bg-gray-800 overflow-hidden mx-auto mb-1">
|
| 103 |
+
<img src="http://static.photos/people/200x200/15" class="w-full h-full object-cover">
|
| 104 |
+
</div>
|
| 105 |
+
<span class="text-xs">@HinduGuru</span>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
|
| 110 |
+
<!-- Bottom Navigation -->
|
| 111 |
+
<div class="fixed bottom-0 w-full bg-gray-900 flex justify-around py-3">
|
| 112 |
+
<i data-feather="home" class="text-gray-500"></i>
|
| 113 |
+
<i data-feather="search" class="text-white"></i>
|
| 114 |
+
<i data-feather="plus-circle" class="text-green-500"></i>
|
| 115 |
+
<i data-feather="book" class="text-gray-500"></i>
|
| 116 |
+
<i data-feather="user" class="text-gray-500"></i>
|
| 117 |
+
</div>
|
| 118 |
+
|
| 119 |
+
<script>
|
| 120 |
+
feather.replace();
|
| 121 |
+
</script>
|
| 122 |
+
</body>
|
| 123 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,264 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>DingDong - Spiritual Video Platform</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
|
| 10 |
+
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 12 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 13 |
+
<style>
|
| 14 |
+
.video-container {
|
| 15 |
+
height: 100vh;
|
| 16 |
+
width: 100%;
|
| 17 |
+
position: relative;
|
| 18 |
+
overflow: hidden;
|
| 19 |
+
}
|
| 20 |
+
.video-player {
|
| 21 |
+
width: 100%;
|
| 22 |
+
height: 100%;
|
| 23 |
+
object-fit: cover;
|
| 24 |
+
}
|
| 25 |
+
.side-buttons {
|
| 26 |
+
position: absolute;
|
| 27 |
+
right: 16px;
|
| 28 |
+
bottom: 120px;
|
| 29 |
+
display: flex;
|
| 30 |
+
flex-direction: column;
|
| 31 |
+
align-items: center;
|
| 32 |
+
gap: 20px;
|
| 33 |
+
}
|
| 34 |
+
.bottom-nav {
|
| 35 |
+
position: fixed;
|
| 36 |
+
bottom: 0;
|
| 37 |
+
width: 100%;
|
| 38 |
+
background: rgba(0,0,0,0.8);
|
| 39 |
+
backdrop-filter: blur(10px);
|
| 40 |
+
padding: 12px 0;
|
| 41 |
+
display: flex;
|
| 42 |
+
justify-content: space-around;
|
| 43 |
+
z-index: 100;
|
| 44 |
+
}
|
| 45 |
+
.category-tabs {
|
| 46 |
+
position: fixed;
|
| 47 |
+
top: 0;
|
| 48 |
+
width: 100%;
|
| 49 |
+
background: rgba(0,0,0,0.8);
|
| 50 |
+
backdrop-filter: blur(10px);
|
| 51 |
+
padding: 12px 0;
|
| 52 |
+
display: flex;
|
| 53 |
+
overflow-x: auto;
|
| 54 |
+
z-index: 100;
|
| 55 |
+
}
|
| 56 |
+
.journal-entry {
|
| 57 |
+
background: rgba(255,255,255,0.1);
|
| 58 |
+
backdrop-filter: blur(5px);
|
| 59 |
+
border-radius: 12px;
|
| 60 |
+
padding: 16px;
|
| 61 |
+
margin-bottom: 16px;
|
| 62 |
+
}
|
| 63 |
+
.ai-response {
|
| 64 |
+
background: rgba(0,128,0,0.2);
|
| 65 |
+
border-left: 4px solid green;
|
| 66 |
+
padding: 12px;
|
| 67 |
+
border-radius: 0 8px 8px 0;
|
| 68 |
+
margin-top: 8px;
|
| 69 |
+
}
|
| 70 |
+
</style>
|
| 71 |
+
</head>
|
| 72 |
+
<body class="bg-black text-white">
|
| 73 |
+
<!-- Category Tabs -->
|
| 74 |
+
<div class="category-tabs">
|
| 75 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full bg-white text-black mx-1">For You</div>
|
| 76 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Reflections</div>
|
| 77 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Philosophy</div>
|
| 78 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Togetherness</div>
|
| 79 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Official Service</div>
|
| 80 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Ceremonies</div>
|
| 81 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Museums</div>
|
| 82 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Faith Sharing</div>
|
| 83 |
+
<div class="px-4 py-2 text-sm font-medium rounded-full mx-1">Journeys</div>
|
| 84 |
+
</div>
|
| 85 |
+
|
| 86 |
+
<!-- Video Feed -->
|
| 87 |
+
<div class="video-container">
|
| 88 |
+
<video class="video-player" autoplay loop muted>
|
| 89 |
+
<source src="http://static.photos/religion/640x360/1" type="video/mp4">
|
| 90 |
+
</video>
|
| 91 |
+
<div class="absolute bottom-0 left-0 p-4 w-3/4">
|
| 92 |
+
<h3 class="font-bold text-lg">Finding Peace in Prayer</h3>
|
| 93 |
+
<p class="text-sm">@spiritualguide • 1.2M views</p>
|
| 94 |
+
<p class="text-sm mt-2">"The most powerful prayer is one that comes from the heart"</p>
|
| 95 |
+
</div>
|
| 96 |
+
<div class="side-buttons">
|
| 97 |
+
<div class="flex flex-col items-center">
|
| 98 |
+
<div class="bg-white bg-opacity-20 rounded-full p-3">
|
| 99 |
+
<i data-feather="heart" class="text-white"></i>
|
| 100 |
+
</div>
|
| 101 |
+
<span class="text-xs mt-1">24.5K</span>
|
| 102 |
+
</div>
|
| 103 |
+
<div class="flex flex-col items-center">
|
| 104 |
+
<div class="bg-white bg-opacity-20 rounded-full p-3">
|
| 105 |
+
<i data-feather="message-circle" class="text-white"></i>
|
| 106 |
+
</div>
|
| 107 |
+
<span class="text-xs mt-1">1.2K</span>
|
| 108 |
+
</div>
|
| 109 |
+
<div class="flex flex-col items-center">
|
| 110 |
+
<div class="bg-white bg-opacity-20 rounded-full p-3">
|
| 111 |
+
<i data-feather="share-2" class="text-white"></i>
|
| 112 |
+
</div>
|
| 113 |
+
<span class="text-xs mt-1">Share</span>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="flex flex-col items-center">
|
| 116 |
+
<div class="bg-white bg-opacity-20 rounded-full p-3">
|
| 117 |
+
<i data-feather="bookmark" class="text-white"></i>
|
| 118 |
+
</div>
|
| 119 |
+
<span class="text-xs mt-1">Save</span>
|
| 120 |
+
</div>
|
| 121 |
+
<div class="flex flex-col items-center">
|
| 122 |
+
<div class="bg-white bg-opacity-20 rounded-full p-3">
|
| 123 |
+
<i data-feather="rotate-cw" class="text-white"></i>
|
| 124 |
+
</div>
|
| 125 |
+
<span class="text-xs mt-1">Remix</div>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
|
| 130 |
+
<!-- Bottom Navigation -->
|
| 131 |
+
<div class="bottom-nav">
|
| 132 |
+
<div class="flex flex-col items-center">
|
| 133 |
+
<i data-feather="home" class="text-white"></i>
|
| 134 |
+
<span class="text-xs mt-1">Home</span>
|
| 135 |
+
</div>
|
| 136 |
+
<div class="flex flex-col items-center">
|
| 137 |
+
<i data-feather="search" class="text-white"></i>
|
| 138 |
+
<span class="text-xs mt-1">Discover</span>
|
| 139 |
+
</div>
|
| 140 |
+
<div class="flex flex-col items-center">
|
| 141 |
+
<div class="bg-green-500 rounded-full p-3 -mt-6">
|
| 142 |
+
<i data-feather="plus" class="text-white"></i>
|
| 143 |
+
</div>
|
| 144 |
+
<span class="text-xs mt-1">Create</span>
|
| 145 |
+
</div>
|
| 146 |
+
<div class="flex flex-col items-center">
|
| 147 |
+
<i data-feather="book" class="text-white"></i>
|
| 148 |
+
<span class="text-xs mt-1">Journal</span>
|
| 149 |
+
</div>
|
| 150 |
+
<div class="flex flex-col items-center">
|
| 151 |
+
<i data-feather="user" class="text-white"></i>
|
| 152 |
+
<span class="text-xs mt-1">Profile</span>
|
| 153 |
+
</div>
|
| 154 |
+
</div>
|
| 155 |
+
|
| 156 |
+
<!-- Create Modal (hidden by default) -->
|
| 157 |
+
<div id="createModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center p-4">
|
| 158 |
+
<div class="w-full max-w-md bg-gray-900 rounded-xl p-6">
|
| 159 |
+
<div class="flex justify-between items-center mb-4">
|
| 160 |
+
<h2 class="text-xl font-bold">Create Content</h2>
|
| 161 |
+
<button onclick="document.getElementById('createModal').classList.add('hidden')">
|
| 162 |
+
<i data-feather="x" class="text-white"></i>
|
| 163 |
+
</button>
|
| 164 |
+
</div>
|
| 165 |
+
<div class="grid grid-cols-2 gap-4">
|
| 166 |
+
<button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
|
| 167 |
+
<i data-feather="video" class="text-white mb-2"></i>
|
| 168 |
+
<span>Record Video</span>
|
| 169 |
+
</button>
|
| 170 |
+
<button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
|
| 171 |
+
<i data-feather="mic" class="text-white mb-2"></i>
|
| 172 |
+
<span>Record Prayer</span>
|
| 173 |
+
</button>
|
| 174 |
+
<button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
|
| 175 |
+
<i data-feather="upload" class="text-white mb-2"></i>
|
| 176 |
+
<span>Upload Video</span>
|
| 177 |
+
</button>
|
| 178 |
+
<button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
|
| 179 |
+
<i data-feather="edit" class="text-white mb-2"></i>
|
| 180 |
+
<span>Write Reflection</span>
|
| 181 |
+
</button>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
|
| 186 |
+
<!-- Journal Modal (hidden by default) -->
|
| 187 |
+
<div id="journalModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-start p-4 overflow-y-auto">
|
| 188 |
+
<div class="w-full max-w-md bg-gray-900 rounded-xl p-6 mb-20">
|
| 189 |
+
<div class="flex justify-between items-center mb-4">
|
| 190 |
+
<h2 class="text-xl font-bold">Spiritual Journal</h2>
|
| 191 |
+
<button onclick="document.getElementById('journalModal').classList.add('hidden')">
|
| 192 |
+
<i data-feather="x" class="text-white"></i>
|
| 193 |
+
</button>
|
| 194 |
+
</div>
|
| 195 |
+
|
| 196 |
+
<div class="mb-6">
|
| 197 |
+
<div class="flex justify-between items-center mb-2">
|
| 198 |
+
<h3 class="font-medium">Today's Reflection</h3>
|
| 199 |
+
<button class="bg-green-600 px-3 py-1 rounded-full text-sm">New Entry</button>
|
| 200 |
+
</div>
|
| 201 |
+
<div class="journal-entry">
|
| 202 |
+
<p class="text-sm">"Today I prayed for guidance in my career path. I feel uncertain but trust that the divine will show me the way..."</p>
|
| 203 |
+
<div class="ai-response">
|
| 204 |
+
<p class="text-xs italic">Your AI Companion: I sense your uncertainty but also your strong faith. Remember that every journey begins with a single step of faith. What small action can you take today toward your goals?</p>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
<div class="journal-entry">
|
| 208 |
+
<p class="text-sm">"Attended a beautiful interfaith dialogue today. The Sikh speaker's words about service really resonated with me..."</p>
|
| 209 |
+
<div class="ai-response">
|
| 210 |
+
<p class="text-xs italic">Your AI Companion: How wonderful to find connection across traditions! Service is indeed a universal language. Maybe you could volunteer at a local shelter this weekend?</p>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
</div>
|
| 214 |
+
|
| 215 |
+
<div class="mb-6">
|
| 216 |
+
<h3 class="font-medium mb-2">AI Companion Style</h3>
|
| 217 |
+
<div class="grid grid-cols-3 gap-2">
|
| 218 |
+
<button class="bg-blue-600 px-2 py-1 rounded-full text-xs">Encouraging</button>
|
| 219 |
+
<button class="bg-purple-600 px-2 py-1 rounded-full text-xs">Humorous</button>
|
| 220 |
+
<button class="bg-gray-700 px-2 py-1 rounded-full text-xs">Dark Humor</button>
|
| 221 |
+
<button class="bg-yellow-600 px-2 py-1 rounded-full text-xs">Goal Guidance</button>
|
| 222 |
+
<button class="bg-teal-600 px-2 py-1 rounded-full text-xs">Calmness</button>
|
| 223 |
+
<button class="bg-pink-600 px-2 py-1 rounded-full text-xs">Compassionate</button>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
|
| 227 |
+
<div>
|
| 228 |
+
<h3 class="font-medium mb-2">Monthly Insights</h3>
|
| 229 |
+
<div class="bg-gray-800 rounded-lg p-4">
|
| 230 |
+
<p class="text-sm mb-2">Your prayer topics this month:</p>
|
| 231 |
+
<div class="flex flex-wrap gap-2">
|
| 232 |
+
<span class="bg-gray-700 px-2 py-1 rounded-full text-xs">Guidance (14)</span>
|
| 233 |
+
<span class="bg-gray-700 px-2 py-1 rounded-full text-xs">Gratitude (9)</span>
|
| 234 |
+
<span class="bg-gray-700 px-2 py-1 rounded-full text-xs">Family (7)</span>
|
| 235 |
+
<span class="bg-gray-700 px-2 py-1 rounded-full text-xs">Peace (6)</span>
|
| 236 |
+
</div>
|
| 237 |
+
<button class="mt-3 text-green-400 text-sm flex items-center">
|
| 238 |
+
<i data-feather="bar-chart-2" class="mr-1" width="14"></i> View Full Analysis
|
| 239 |
+
</button>
|
| 240 |
+
</div>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
</div>
|
| 244 |
+
|
| 245 |
+
<script>
|
| 246 |
+
AOS.init();
|
| 247 |
+
feather.replace();
|
| 248 |
+
|
| 249 |
+
// Simulate navigation
|
| 250 |
+
document.querySelector('.bottom-nav div:nth-child(3)').addEventListener('click', function() {
|
| 251 |
+
document.getElementById('createModal').classList.remove('hidden');
|
| 252 |
+
});
|
| 253 |
+
|
| 254 |
+
document.querySelector('.bottom-nav div:nth-child(4)').addEventListener('click', function() {
|
| 255 |
+
document.getElementById('journalModal').classList.remove('hidden');
|
| 256 |
+
});
|
| 257 |
+
|
| 258 |
+
// Simulate recording prayer
|
| 259 |
+
document.querySelector('#createModal button:nth-child(2)').addEventListener('click', function() {
|
| 260 |
+
alert("Recording prayer audio... Speak clearly. When finished, your words will be transcribed and saved to your journal.");
|
| 261 |
+
});
|
| 262 |
+
</script>
|
| 263 |
+
</body>
|
| 264 |
</html>
|
profile.html
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>My Profile - DingDong</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<style>
|
| 11 |
+
.profile-header {
|
| 12 |
+
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url('http://static.photos/religion/1200x630/5');
|
| 13 |
+
background-size: cover;
|
| 14 |
+
background-position: center;
|
| 15 |
+
}
|
| 16 |
+
.tab-active {
|
| 17 |
+
border-bottom: 2px solid white;
|
| 18 |
+
}
|
| 19 |
+
</style>
|
| 20 |
+
</head>
|
| 21 |
+
<body class="bg-black text-white">
|
| 22 |
+
<div class="profile-header pt-16 pb-8 px-4">
|
| 23 |
+
<div class="flex items-center justify-between mb-6">
|
| 24 |
+
<div class="flex items-center">
|
| 25 |
+
<div class="w-20 h-20 rounded-full bg-gray-700 overflow-hidden border-2 border-white">
|
| 26 |
+
<img src="http://static.photos/people/200x200/10" class="w-full h-full object-cover">
|
| 27 |
+
</div>
|
| 28 |
+
<div class="ml-4">
|
| 29 |
+
<h1 class="text-xl font-bold">@spiritualjourney</h1>
|
| 30 |
+
<p class="text-sm text-gray-300">Interfaith Explorer</p>
|
| 31 |
+
</div>
|
| 32 |
+
</div>
|
| 33 |
+
<button class="bg-white text-black px-4 py-1 rounded-full text-sm font-medium">Edit</button>
|
| 34 |
+
</div>
|
| 35 |
+
|
| 36 |
+
<div class="flex justify-around text-center mb-6">
|
| 37 |
+
<div>
|
| 38 |
+
<div class="text-lg font-bold">142</div>
|
| 39 |
+
<div class="text-xs text-gray-300">Following</div>
|
| 40 |
+
</div>
|
| 41 |
+
<div>
|
| 42 |
+
<div class="text-lg font-bold">8.7K</div>
|
| 43 |
+
<div class="text-xs text-gray-300">Followers</div>
|
| 44 |
+
</div>
|
| 45 |
+
<div>
|
| 46 |
+
<div class="text-lg font-bold">324</div>
|
| 47 |
+
<div class="text-xs text-gray-300">Prayers</div>
|
| 48 |
+
</div>
|
| 49 |
+
</div>
|
| 50 |
+
|
| 51 |
+
<div class="text-sm">
|
| 52 |
+
<p>Sharing my spiritual journey across traditions. Catholic background exploring Buddhism, Sufism, and Indigenous wisdom.</p>
|
| 53 |
+
<div class="flex mt-2">
|
| 54 |
+
<i data-feather="map-pin" width="14" class="mr-1"></i>
|
| 55 |
+
<span class="text-xs text-gray-300">Global • Joined Sep 2023</span>
|
| 56 |
+
</div>
|
| 57 |
+
</div>
|
| 58 |
+
</div>
|
| 59 |
+
|
| 60 |
+
<div class="flex border-b border-gray-800 px-4">
|
| 61 |
+
<div class="flex-1 text-center py-3 tab-active">
|
| 62 |
+
<i data-feather="video" width="18" class="mx-auto"></i>
|
| 63 |
+
</div>
|
| 64 |
+
<div class="flex-1 text-center py-3 text-gray-500">
|
| 65 |
+
<i data-feather="lock" width="18" class="mx-auto"></i>
|
| 66 |
+
</div>
|
| 67 |
+
<div class="flex-1 text-center py-3 text-gray-500">
|
| 68 |
+
<i data-feather="heart" width="18" class="mx-auto"></i>
|
| 69 |
+
</div>
|
| 70 |
+
<div class="flex-1 text-center py-3 text-gray-500">
|
| 71 |
+
<i data-feather="bookmark" width="18" class="mx-auto"></i>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
|
| 75 |
+
<div class="grid grid-cols-3 gap-px bg-gray-800">
|
| 76 |
+
<!-- Video grid items -->
|
| 77 |
+
<div class="aspect-square bg-gray-900 relative">
|
| 78 |
+
<img src="http://static.photos/religion/640x360/15" class="w-full h-full object-cover">
|
| 79 |
+
<div class="absolute bottom-1 left-1 flex items-center">
|
| 80 |
+
<i data-feather="play" width="12" class="text-white mr-1"></i>
|
| 81 |
+
<span class="text-xs">24.5K</span>
|
| 82 |
+
</div>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="aspect-square bg-gray-900 relative">
|
| 85 |
+
<img src="http://static.photos/religion/640x360/16" class="w-full h-full object-cover">
|
| 86 |
+
<div class="absolute bottom-1 left-1 flex items-center">
|
| 87 |
+
<i data-feather="play" width="12" class="text-white mr-1"></i>
|
| 88 |
+
<span class="text-xs">18.2K</span>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
<div class="aspect-square bg-gray-900 relative">
|
| 92 |
+
<img src="http://static.photos/religion/640x360/17" class="w-full h-full object-cover">
|
| 93 |
+
<div class="absolute bottom-1 left-1 flex items-center">
|
| 94 |
+
<i data-feather="play" width="12" class="text-white mr-1"></i>
|
| 95 |
+
<span class="text-xs">9.7K</span>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="aspect-square bg-gray-900 relative">
|
| 99 |
+
<img src="http://static.photos/religion/640x360/18" class="w-full h-full object-cover">
|
| 100 |
+
<div class="absolute bottom-1 left-1 flex items-center">
|
| 101 |
+
<i data-feather="play" width="12" class="text-white mr-1"></i>
|
| 102 |
+
<span class="text-xs">7.3K</span>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="aspect-square bg-gray-900 relative">
|
| 106 |
+
<img src="http://static.photos/religion/640x360/19" class="w-full h-full object-cover">
|
| 107 |
+
<div class="absolute bottom-1 left-1 flex items-center">
|
| 108 |
+
<i data-feather="play" width="12" class="text-white mr-1"></i>
|
| 109 |
+
<span class="text-xs">5.1K</span>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="aspect-square bg-gray-900 relative">
|
| 113 |
+
<img src="http://static.photos/religion/640x360/20" class="w-full h-full object-cover">
|
| 114 |
+
<div class="absolute bottom-1 left-1 flex items-center">
|
| 115 |
+
<i data-feather="play" width="12" class="text-white mr-1"></i>
|
| 116 |
+
<span class="text-xs">3.8K</span>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
</div>
|
| 120 |
+
|
| 121 |
+
<!-- Bottom Navigation -->
|
| 122 |
+
<div class="fixed bottom-0 w-full bg-gray-900 flex justify-around py-3">
|
| 123 |
+
<i data-feather="home" class="text-gray-500"></i>
|
| 124 |
+
<i data-feather="search" class="text-gray-500"></i>
|
| 125 |
+
<i data-feather="plus-circle" class="text-green-500"></i>
|
| 126 |
+
<i data-feather="book" class="text-gray-500"></i>
|
| 127 |
+
<i data-feather="user" class="text-white"></i>
|
| 128 |
+
</div>
|
| 129 |
+
|
| 130 |
+
<script>
|
| 131 |
+
feather.replace();
|
| 132 |
+
</script>
|
| 133 |
+
</body>
|
| 134 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
Create an app called "DingDong" which shows videos by interest and allows the user to create personal videos. Make the basic framework identical to Tiktok. Make this app designed specifically for videos discussing religions, having religious conferences, having religious seminars, having religious services, religious education, religious talks, religious speakers, celebrities who speak about religions, politicians who speak about religions, interconnection of different religions, religious education, religious study, and rediscovering religion. Make it possible for users to record videos or audio of themselves praying, and for the words they pray to be heard by the app, transcribed from audio to text, and saved in the memory of that user's profile. Allow the option of creating a "reflection journal" using the audio/video data which has been converted to text, and to have an ai bot or tool which can summarize what they journaled about if requested. Allow this text data to be processed through data cleaning, Natural Language Processing, sentiment analysis, semantic analysis, vector embeddings (if needed), and a multimodal ai agent model chatbot. Allow this chatbot to provide humor or encouragement to the user after the user inputs new journal data by recording video/audio of themselves and converting the video/audio to text data. Use LLMs, VLMs, and LWMs as needed. Make this app usable by both iphones and android phones. allow the option to change ai bot comments from humor to encouraging to dark-humor to goal-guidance to calmness. Create video categories such as "Reflections", "Philosophy","Togetherness","Official Service","Ceremonies","Museums","Faith Sharing", "Vocations/Our Journeys", and others according to videos the users continue to upload.
|