HTMX এবং JavaScript উভয়ই ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে, তবে তাদের কাজ করার পদ্ধতি এবং উদ্দেশ্য ভিন্ন। HTMX একটি HTML-ভিত্তিক লাইব্রেরি যা AJAX কল, DOM আপডেট এবং অন্যান্য ইন্টারঅ্যাকশন সহজতর করে, যখন JavaScript একটি পূর্ণাঙ্গ স্ক্রিপ্টিং ভাষা যা ক্লায়েন্ট-সাইড ফাংশনালিটি প্রদান করে। নিচে HTMX এবং JavaScript এর সংযোগ, পার্থক্য, এবং ব্যবহার নিয়ে আলোচনা করা হলো।
HTMX হল একটি JavaScript লাইব্রেরি যা HTML মার্কআপের মাধ্যমে AJAX, CSS Transitions, WebSockets, এবং Server-Sent Events ইত্যাদি ব্যবহার করে। HTMX ব্যবহার করে ডেভেলপাররা HTML ট্যাগগুলির মাধ্যমে সরাসরি ইন্টারঅ্যাকশন তৈরি করতে পারেন।
<button hx-get="/load-data" hx-target="#data-container">Load Data</button>
<div id="data-container"></div>
/load-data URL থেকে ডেটা লোড হবে এবং #data-container এ সন্নিবেশ হবে।JavaScript হল একটি স্ক্রিপ্টিং ভাষা যা ওয়েব পৃষ্ঠায় ইন্টারঅ্যাকশন, DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং এবং AJAX কল পরিচালনার জন্য ব্যবহৃত হয়। এটি ক্লায়েন্ট-সাইড লজিক তৈরি করতে ব্যাপকভাবে ব্যবহৃত হয়।
document.getElementById('loadButton').addEventListener('click', function() {
fetch('/load-data')
.then(response => response.text())
.then(data => {
document.getElementById('data-container').innerHTML = data;
});
});
/load-data URL থেকে ডেটা লোড হবে এবং #data-container এ সন্নিবেশ হবে।HTMX এর hx-on attribute ব্যবহার করে JavaScript ইভেন্ট হ্যান্ডলিং করা যায়। উদাহরণস্বরূপ:
<button hx-get="/load-data" hx-target="#data-container" hx-on="htmx:afterSwap: alert('Content loaded!')">Load Data</button>
<div id="data-container"></div>
HTMX কাস্টমাইজ করার জন্য JavaScript ব্যবহার করা যেতে পারে:
document.addEventListener('htmx:beforeSwap', function(event) {
if (event.detail.target.id === 'data-container') {
console.log('About to update data container');
}
});
htmx:beforeSwap ইভেন্টের মাধ্যমে ডেটা আপডেট হওয়ার আগে কিছু কাস্টম লজিক সম্পাদন করা হচ্ছে।| বৈশিষ্ট্য | HTMX | JavaScript |
|---|---|---|
| ফোকাস | HTML মার্কআপের মাধ্যমে AJAX কল | স্ক্রিপ্টিং ভাষা, জটিল লজিক |
| সহজতা | কোডিং কম, দ্রুত ইন্টিগ্রেশন | কোডিং বেশি, কিন্তু আরও লচকতা |
| ইভেন্ট হ্যান্ডলিং | HTMX ইভেন্টের মাধ্যমে | JavaScript ইভেন্টের মাধ্যমে |
| সার্ভার ইন্টিগ্রেশন | HTMX সহজ করে | AJAX ও Fetch API ব্যবহার করে |
HTMX এবং JavaScript একসাথে ব্যবহার করে আপনি উন্নত এবং কার্যকরী ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন যা ব্যবহারকারীদের জন্য একটি সমৃদ্ধ অভিজ্ঞতা প্রদান করে।
HTMX এবং JavaScript একসাথে ব্যবহার করা সম্ভব এবং কার্যকরীও। HTMX একটি HTML Attribute-Based লাইব্রেরি, যা AJAX রিকোয়েস্ট, Content Update, এবং Real-Time Data লোডের মতো কাজগুলি সরাসরি HTML এর মাধ্যমে সম্পন্ন করতে দেয়। তবে কখনো কখনো JavaScript ব্যবহার করে HTMX এর কিছু ফিচার আরও উন্নত বা কাস্টমাইজড করা প্রয়োজন হতে পারে।
নিচে কিছু সাধারণ উদাহরণ এবং কৌশল নিয়ে আলোচনা করা হলো, যেখানে HTMX এবং JavaScript একসাথে ব্যবহার করা হয়:
HTMX এর hx-get বা hx-post Attributes দিয়ে সরাসরি AJAX কল করা যায়। তবে কখনো কখনো JavaScript ইভেন্টের মাধ্যমে HTMX রিকোয়েস্ট ট্রিগার করা প্রয়োজন হতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript and HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Load Content using JavaScript Event</h2>
<button id="loadButton">Load Content</button>
<div id="content">Content will be loaded here...</div>
<script>
document.getElementById('loadButton').addEventListener('click', function() {
htmx.ajax('GET', '/fetch-content', { target: '#content' });
});
</script>
</body>
</html>
htmx.ajax: HTMX এর htmx.ajax ফাংশনটি JavaScript দিয়ে AJAX কল করতে দেয়। এখানে 'GET' মেথড এবং /fetch-content URL ব্যবহার করা হয়েছে।target: '#content': রেসপন্স #content div এ রেন্ডার হবে।HTMX বিভিন্ন ইভেন্ট যেমন htmx:configRequest, htmx:beforeOnLoad, htmx:afterSwap ইত্যাদি সমর্থন করে। HTMX এর এই ইভেন্টগুলো JavaScript দিয়ে শোনা যায় এবং নির্দিষ্ট কাজ করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Event Listener</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Load Content and Show Message</h2>
<button hx-get="/load-data" hx-target="#content">Load Content</button>
<div id="content">Content will be loaded here...</div>
<script>
document.body.addEventListener('htmx:afterSwap', function(event) {
if (event.detail.target.id === 'content') {
alert('Content loaded successfully!');
}
});
</script>
</body>
</html>
htmx:afterSwap: এই ইভেন্টটি তখনই ট্রিগার হয় যখন HTMX AJAX রিকোয়েস্টের পরে নতুন কন্টেন্ট টার্গেট এলিমেন্টে যোগ করা হয়।event.detail.target.id === 'content': #content div আপডেট হলে একটি অ্যালার্ট দেখানো হয়।HTMX এর htmx:configRequest ইভেন্ট ব্যবহার করে HTMX রিকোয়েস্ট কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, AJAX কলের সাথে কাস্টম হেডার যোগ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Request Customization</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Custom Header with HTMX Request</h2>
<button hx-get="/get-info" hx-target="#response">Get Information</button>
<div id="response">Information will appear here...</div>
<script>
document.body.addEventListener('htmx:configRequest', function(event) {
event.detail.headers['Authorization'] = 'Bearer my-token';
});
</script>
</body>
</html>
htmx:configRequest: HTMX রিকোয়েস্ট কনফিগার করার ইভেন্ট। এখানে, রিকোয়েস্টে Authorization হেডার যোগ করা হয়েছে।event.detail.headers['Authorization']: AJAX রিকোয়েস্টে কাস্টম হেডার যোগ করতে ব্যবহৃত।HTMX এর মাধ্যমে কন্টেন্ট লোড করার পরে JavaScript দিয়ে কন্টেন্টের ট্রানজিশন বা এনিমেশন যোগ করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX with Animation</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<style>
.fade-in {
opacity: 0;
transition: opacity 0.5s;
}
.fade-in.show {
opacity: 1;
}
</style>
</head>
<body>
<h2>Load Content with Fade-In Animation</h2>
<button hx-get="/fetch-data" hx-target="#animated-content" hx-swap="innerHTML">Load Content</button>
<div id="animated-content" class="fade-in">This content will be replaced.</div>
<script>
document.body.addEventListener('htmx:afterSwap', function(event) {
if (event.detail.target.id === 'animated-content') {
event.detail.target.classList.add('show');
}
});
</script>
</body>
</html>
fade-in এবং show ক্লাস: CSS opacity এবং transition ব্যবহার করে ফেড-ইন ইফেক্ট তৈরি করা হয়েছে।htmx:afterSwap ইভেন্ট: #animated-content এলিমেন্ট আপডেট হওয়ার পর, show ক্লাস যোগ করে ফেড-ইন এফেক্ট দেখানো হয়েছে।HTMX এবং JavaScript একসাথে ব্যবহার করে ডেভেলপাররা HTML Attribute-Based Approach এবং JavaScript এর ইভেন্ট ম্যানেজমেন্ট ও কাস্টমাইজেশন সুবিধা একত্রে পেতে পারেন। এটি HTMX এর সিম্পল HTML Attributes ব্যবহার করে উন্নত AJAX কল তৈরি করা এবং JavaScript দিয়ে DOM ম্যানিপুলেশন ও কন্টেন্ট এনিমেশন যোগ করার জন্য উপযুক্ত সমাধান।
HTMX একটি শক্তিশালী লাইব্রেরি যা HTML মার্কআপের মাধ্যমে AJAX কল এবং DOM আপডেট করার সুবিধা দেয়। এর সাথে, আপনি JavaScript ব্যবহার করে কাস্টম ইভেন্ট হ্যান্ডলিং করতে পারেন। এটি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করতে সহায়ক।
নিচে HTMX এর মাধ্যমে কাস্টম JavaScript ইভেন্ট হ্যান্ডলিং এর একটি উদাহরণ দেয়া হলো যেখানে আমরা একটি To-Do List অ্যাপ তৈরি করব। এখানে, ব্যবহারকারী একটি টাস্ক যোগ করার জন্য একটি ফর্ম ব্যবহার করবেন, এবং আমরা HTMX ইভেন্টগুলি পরিচালনা করার জন্য JavaScript ব্যবহার করব।
প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Custom Event Handling</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
</head>
<body>
<h1>My To-Do List</h1>
<form id="task-form" hx-post="/add-task" hx-target="#task-list" hx-swap="beforeend">
<input type="text" name="task" placeholder="Add a new task" required>
<button type="submit">Add Task</button>
</form>
<h2>Tasks</h2>
<ul id="task-list">
<!-- New tasks will be added here -->
</ul>
<script>
// Custom event handler for form submission
document.getElementById('task-form').addEventListener('htmx:beforeRequest', function(event) {
console.log('Preparing to submit task:', event.target.task.value);
});
document.addEventListener('htmx:afterSwap', function(event) {
if (event.detail.target.id === 'task-list') {
const newTaskItem = event.detail.elt.querySelector('li:last-child');
alert('New task added: ' + newTaskItem.innerText); // Alert the new task
}
});
</script>
</body>
</html>
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string, request
app = Flask(__name__)
tasks = []
@app.route('/')
def index():
return render_template_string(open('index.html').read())
@app.route('/add-task', methods=['POST'])
def add_task():
task = request.form['task']
tasks.append(task)
return f'<li>{task}</li>' # Return new task as a list item
if __name__ == '__main__':
app.run(debug=True)
python app.py
http://127.0.0.1:5000/ URL এ যান।#task-list এ যুক্ত হচ্ছে এবং কাস্টম ইভেন্টগুলি কিভাবে কাজ করছে।HTMX এবং JavaScript একসাথে ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করতে পারেন।
HTMX এ hx-on Attribute ব্যবহার করে নির্দিষ্ট ইভেন্টে JavaScript ফাংশন কল করা যায়। hx-on মূলত JavaScript ইভেন্ট হ্যান্ডলিং সহজ করতে HTMX এ অন্তর্ভুক্ত করা হয়েছে। এটি HTMX এর ইভেন্টে JavaScript এর সাথে ইন্টারঅ্যাক্ট করতে দেয় এবং এর মাধ্যমে সরাসরি HTML থেকে JavaScript ফাংশন ট্রিগার করা যায়।
নিচে hx-on Attribute এবং JavaScript ফাংশন কল করার কিছু উদাহরণ দেখানো হলো।
hx-on ব্যবহার করে Button ক্লিক ইভেন্টে JavaScript ফাংশন কল করা<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// JavaScript ফাংশন যা কল হবে
function showAlert() {
alert("Button clicked!");
}
</script>
</head>
<body>
<h2>Click the button to trigger JavaScript function</h2>
<!-- hx-on ব্যবহার করে click ইভেন্টে JavaScript ফাংশন কল করা -->
<button hx-on="click: showAlert()">Click Me</button>
</body>
</html>
hx-on="click: showAlert()": এখানে click ইভেন্টের জন্য hx-on Attribute ব্যবহার করা হয়েছে। ক্লিক করলে showAlert() ফাংশনটি কল হবে।showAlert(): JavaScript ফাংশনটি একটি অ্যালার্ট দেখাবে।hx-on ব্যবহার করে ফর্ম ইনপুটে JavaScript ফাংশন কল করাফর্ম ইনপুটে পরিবর্তন হলে (onchange ইভেন্ট) JavaScript ফাংশন কল করতে hx-on ব্যবহার করা যেতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on Form Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// ইনপুট মান প্রদর্শনের জন্য JavaScript ফাংশন
function displayValue(event) {
alert("Entered value: " + event.target.value);
}
</script>
</head>
<body>
<h2>Enter something in the input field</h2>
<!-- onchange ইভেন্টে JavaScript ফাংশন কল করা -->
<input type="text" hx-on="change: displayValue(event)" placeholder="Type something...">
</body>
</html>
hx-on="change: displayValue(event)": এখানে change ইভেন্টের জন্য hx-on Attribute ব্যবহার করা হয়েছে। ইনপুটের মান পরিবর্তন হলে displayValue(event) ফাংশনটি কল হবে।displayValue(event): JavaScript ফাংশনটি event.target.value এর মাধ্যমে ইনপুটের মান নিয়ে অ্যালার্ট দেখাবে।hx-on ব্যবহার করে মাউস ওভার ইভেন্টে JavaScript ফাংশন কল করামাউস ওভার (mouseover) ইভেন্টে JavaScript ফাংশন কল করেও কিছু ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করা সম্ভব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on Mouseover Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// Background color পরিবর্তনের জন্য ফাংশন
function changeBackgroundColor(event) {
event.target.style.backgroundColor = "lightblue";
}
function resetBackgroundColor(event) {
event.target.style.backgroundColor = "";
}
</script>
</head>
<body>
<h2>Hover over the box</h2>
<!-- Mouseover এবং mouseout ইভেন্টে JavaScript ফাংশন কল করা -->
<div
hx-on="mouseover: changeBackgroundColor(event); mouseout: resetBackgroundColor(event)"
style="width: 200px; height: 100px; border: 1px solid #ddd; text-align: center; padding-top: 40px;">
Hover over me
</div>
</body>
</html>
hx-on="mouseover: changeBackgroundColor(event); mouseout: resetBackgroundColor(event)": mouseover ইভেন্টে changeBackgroundColor এবং mouseout ইভেন্টে resetBackgroundColor ফাংশন কল করা হয়েছে।changeBackgroundColor(event): mouseover ইভেন্টে বক্সের ব্যাকগ্রাউন্ড কালার পরিবর্তন করে।resetBackgroundColor(event): mouseout ইভেন্টে ব্যাকগ্রাউন্ড কালার পূর্বের অবস্থায় ফিরিয়ে আনে।hx-on এবং HTMX এর AJAX রিকোয়েস্টের সমন্বয়JavaScript ফাংশনের সাথে HTMX এর AJAX রিকোয়েস্ট এর ব্যবহার একটি উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX hx-on with AJAX Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script>
// ডেটা লোড করার সময় একটি মেসেজ দেখানোর ফাংশন
function showLoadingMessage() {
document.getElementById("loading-message").style.display = "block";
}
function hideLoadingMessage() {
document.getElementById("loading-message").style.display = "none";
}
</script>
</head>
<body>
<h2>Load Data with AJAX and Show Loading Message</h2>
<!-- ক্লিক করলে showLoadingMessage() ফাংশন কল হবে, এবং AJAX রিকোয়েস্ট চালু হবে -->
<button
hx-get="/fetch-data"
hx-target="#content"
hx-swap="innerHTML"
hx-on="htmx:send: showLoadingMessage(); htmx:afterSwap: hideLoadingMessage();">
Load Data
</button>
<div id="loading-message" style="display: none; color: red;">Loading data...</div>
<div id="content">Data will be displayed here...</div>
</body>
</html>
hx-on="htmx:send: showLoadingMessage(); htmx:afterSwap: hideLoadingMessage();": htmx:send ইভেন্টে showLoadingMessage() ফাংশন এবং htmx:afterSwap ইভেন্টে hideLoadingMessage() ফাংশন কল করা হয়েছে।showLoadingMessage(): AJAX কল শুরু হলে এটি লোডিং মেসেজ প্রদর্শন করে।hideLoadingMessage(): AJAX রেসপন্স এসে HTML এ যোগ করার পর লোডিং মেসেজ লুকিয়ে রাখে।hx-on Attribute ব্যবহার করে HTMX এবং JavaScript এর সমন্বয়hx-on Attribute দিয়ে HTMX এর বিভিন্ন ইভেন্টে JavaScript ফাংশন কল করা যায়, যা ইন্টারঅ্যাকশন সহজ করে।hx-on Attribute HTMX এবং JavaScript একসাথে ব্যবহার করে ইন্টারঅ্যাকটিভ এবং রেসপন্সিভ ইন্টারফেস তৈরি করা সহজ করে তোলে। এটি সরাসরি HTML থেকে JavaScript ফাংশন কল করার সুযোগ দেয় এবং একাধিক ইভেন্ট পরিচালনা করে HTMX এর AJAX রিকোয়েস্ট এবং UI ইন্টারঅ্যাকশন উন্নত করে।
HTMX এবং JavaScript একত্রে ব্যবহার করে আপনি ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন। HTMX AJAX কলের মাধ্যমে HTML মার্কআপের মাধ্যমে কার্যকরী কাজ করে, যখন JavaScript ব্যবহার করে আপনি কাস্টম লজিক এবং ইভেন্ট হ্যান্ডলিং যোগ করতে পারেন।
নিচে একটি উদাহরণ দেয়া হলো যেখানে HTMX এবং JavaScript একত্রে কাজ করছে। আমরা একটি সরল To-Do List অ্যাপ তৈরি করব, যেখানে ব্যবহারকারী একটি টাস্ক যোগ করবেন এবং JavaScript ব্যবহার করে কিছু কাস্টম লজিক যোগ করা হবে।
প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript and HTMX Integration</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
<style>
body {
font-family: Arial, sans-serif;
}
.task {
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;
margin-bottom: 5px;
transition: transform 0.3s ease; /* CSS Transition */
}
</style>
</head>
<body>
<h1>My To-Do List</h1>
<form id="task-form" hx-post="/add-task" hx-target="#task-list" hx-swap="beforeend">
<input type="text" name="task" placeholder="Add a new task" required>
<button type="submit">Add Task</button>
</form>
<h2>Tasks</h2>
<div id="task-list">
<!-- New tasks will be added here -->
</div>
<script>
// Custom event handler for form submission
document.getElementById('task-form').addEventListener('submit', function(event) {
// Prevent default form submission
event.preventDefault();
// Log the task being added
console.log('Adding task:', this.task.value);
// Submit the form using HTMX
htmx.trigger(this, 'htmx:submit'); // Trigger HTMX to handle submission
});
document.addEventListener('htmx:afterSwap', function(event) {
// Custom logic after HTMX swap
if (event.detail.target.id === 'task-list') {
const newTaskItem = event.detail.elt.querySelector('.task:last-child');
newTaskItem.style.transform = 'scale(1.1)'; // Scale up effect
setTimeout(() => {
newTaskItem.style.transform = 'scale(1)'; // Scale back to normal
}, 300); // After 300 ms
}
});
</script>
</body>
</html>
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string, request
app = Flask(__name__)
tasks = []
@app.route('/')
def index():
return render_template_string(open('index.html').read())
@app.route('/add-task', methods=['POST'])
def add_task():
task = request.form['task']
tasks.append(task)
return f'<div class="task">{task}</div>' # Return new task as a div
if __name__ == '__main__':
app.run(debug=True)
python app.py
http://127.0.0.1:5000/ URL এ যান।#task-list এ যুক্ত হচ্ছে এবং JavaScript ব্যবহার করে কিছু অ্যানিমেশন ঘটছে।HTMX এবং JavaScript এর এই সংমিশ্রণ আপনাকে উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে সক্ষম করে, যা ওয়েব অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত গুরুত্বপূর্ণ।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
