PlimPlim JunyTony Amigos
About this app
PlimPlim JunyTony Amigos - A fun app to connect with friends.
PlimPlim JunyTony Amigos Welcome to PlimPlim JunyTony Amigos Connect with your friends and have fun! Friend Requests John Doe Accept Jane Smith Accept Users John Doe Send Friend Request Jane Smith Send Friend Request Send Message John Doe Hello! How are you? Jane Smith I'm good, thanks! How about you? Send
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>PlimPlim JunyTony Amigos</title>
<meta name="description" content="PlimPlim JunyTony Amigos - A fun app to connect with friends.">
<meta name="keywords" content="PlimPlim, JunyTony, Amigos, connect, friends">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Function to handle friend request
function handleFriendRequest(requestId) {
// Remove the friend request from the UI
$('#request-' + requestId).remove();
// Show notification
$('#notifications').append('<li><i class="fa fa-user-plus"></i> Friend request accepted!</li>');
}
// Function to handle sending a friend request
function sendFriendRequest(userId) {
// Show notification
$('#notifications').append('<li><i class="fa fa-user-plus"></i> Friend request sent!</li>');
}
// Function to handle sending a message
function sendMessage(userId, message) {
// Show notification
$('#notifications').append('<li><i class="fa fa-envelope"></i> Message sent: ' + message + '</li>');
}
// Event listener for friend request accept button
$('.friend-request-accept').on('click', function() {
var requestId = $(this).data('request-id');
handleFriendRequest(requestId);
});
// Event listener for send friend request button
$('.send-friend-request').on('click', function() {
var userId = $(this).data('user-id');
sendFriendRequest(userId);
});
// Event listener for send message button
$('.send-message').on('click', function() {
var userId = $(this).data('user-id');
var message = $(this).prev('.message-input').val();
sendMessage(userId, message);
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.card {
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
padding: 20px;
margin-bottom: 20px;
}
.card-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.card-text {
color: #777777;
margin-bottom: 20px;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary:active,
.btn-primary:focus {
background-color: #0062cc;
border-color: #005cbf;
}
.notifications {
list-style-type: none;
padding: 0;
margin-bottom: 20px;
}
.notifications li {
margin-bottom: 10px;
}
.notifications .fa {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="card">
<h2 class="card-title">Welcome to PlimPlim JunyTony Amigos</h2>
<p class="card-text">Connect with your friends and have fun!</p>
</div>
<div class="card">
<h3 class="card-title">Friend Requests</h3>
<div id="friend-requests">
<div class="friend-request">
<p class="friend-request-name">John Doe</p>
<button class="btn btn-primary friend-request-accept" data-request-id="1">Accept</button>
</div>
<div class="friend-request">
<p class="friend-request-name">Jane Smith</p>
<button class="btn btn-primary friend-request-accept" data-request-id="2">Accept</button>
</div>
</div>
</div>
<div class="card">
<h3 class="card-title">Users</h3>
<div id="users">
<div class="user">
<p class="user-name">John Doe</p>
<button class="btn btn-primary send-friend-request" data-user-id="1">Send Friend Request</button>
</div>
<div class="user">
<p class="user-name">Jane Smith</p>
<button class="btn btn-primary send-friend-request" data-user-id="2">Send Friend Request</button>
</div>
</div>
</div>
<div class="card">
<h3 class="card-title">Send Message</h3>
<div id="messages">
<div class="message">
<p class="message-sender">John Doe</p>
<p class="message-content">Hello! How are you?</p>
</div>
<div class="message">
<p class="message-sender">Jane Smith</p>
<p class="message-content">I'm good, thanks! How about you?</p>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control message-input" placeholder="Type your message...">
<button class="btn btn-primary send-message" data-user-id="1">Send</button>
</div>
</div>
<ul id="notifications" class="notifications"></ul>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!