<!doctype html>
<html lang="mr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Quotes Recycler List</title>
<style>
:root{
--bg:#f7f7fb; --card:#ffffff; --muted:#666;
--accent:#ff8a65;
}
body{
margin:0; font-family: "Helvetica Neue", Arial, sans-serif;
background:var(--bg); color:#222; -webkit-font-smoothing:antialiased;
}
header{
padding:18px 20px; background:linear-gradient(90deg,#fff 0%, #f1f4ff 100%);
box-shadow:0 1px 0 rgba(0,0,0,0.04);
}
header h1{margin:0; font-size:20px;}
.container{max-width:1100px; margin:22px auto; padding:0 16px;}
/* grid */
.grid{display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:16px;}
.card{
background:var(--card); border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(10,10,20,0.06);
display:flex; flex-direction:column; min-height:200px;
}
.thumb{height:140px; background-size:cover; background-position:center;}
.card-body{padding:12px; display:flex; flex-direction:column; gap:8px; flex:1;}
.title{font-weight:700; font-size:16px;}
.excerpt{font-size:13px; color:var(--muted); line-height:1.25; white-space:pre-line;}
.card-footer{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.btn{
border:0; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600;
background:var(--accent); color:#fff;
}
.count{font-size:12px; color:var(--muted); background:#f2f4ff; padding:6px 8px; border-radius:8px;}
/* modal */
.modal-backdrop{position:fixed; inset:0; display:none; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; padding:20px; z-index:60;}
.modal{background:#fff; border-radius:12px; max-width:720px; width:100%; max-height:80vh; overflow:auto; padding:14px;}
.modal header{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.modal h2{margin:0; font-size:18px;}
.close-btn{background:#eee; border-radius:8px; padding:6px 8px; cursor:pointer;}
.quotes-list{margin-top:12px; display:grid; gap:8px;}
.quote-item{padding:10px; border-radius:8px; background:#fbfbff; border:1px solid #f0f0ff; font-size:14px; white-space:pre-line;}
@media (max-width:480px){
header h1{font-size:16px}
.thumb{height:120px}
}
</style>
</head>
<body>
<header>
<h1>Quotes Recycler — Image + Text (From uploaded JSON)</h1>
</header>
<main class="container">
<p style="color:var(--muted); margin:8px 0 18px 0;">
खालील यादी तुमच्या JSON मधून (uploaded file) तयार केली आहे. प्रत्येक कार्डवर क्लिक करून सर्व quotes पाहू शकता.
</p>
<div id="list" class="grid"></div>
</main>
<!-- modal -->
<div id="backdrop" class="modal-backdrop" role="dialog" aria-modal="true">
<div class="modal" role="document">
<header>
<h2 id="modal-title">Category</h2>
<div style="display:flex; gap:8px; align-items:center;">
<div id="modal-count" class="count">0 quotes</div>
<button id="close" class="close-btn">Close</button>
</div>
</header>
<div id="quotes" class="quotes-list"></div>
</div>
</div>
<script>
// ====== JSON data from your uploaded file (quotes_categories.json). Source: uploaded file.
const DATA = {
"Categories": {
"Life": {
"image": "https://cdn.pixabay.com/photo/2014/08/25/14/12/pansy-427139_1280.png",
"data": {
"1": "Life is a journey, not a race.\nEnjoy every step with grace.",
"2": "Every sunrise brings new hope.\nLive each day with a wider scope.",
"3": "Life is short, spread love.\nShine bright like stars above.",
"4": "Happiness lies in little things.\nNot in riches that time brings.",
"5": "Live simply, dream big.\nGratitude is life’s true gig.",
"6": "Life teaches through every pain.\nNo sunshine without the rain.",
"7": "Don’t wait for tomorrow’s light.\nToday itself can make it bright.",
"8": "Life is precious, handle with care.\nSmile often, spread it everywhere.",
"9": "In life, balance is the key.\nBe the best version of ‘me’.",
"10": "Every end is a new start.\nKeep hope alive in your heart."
}
},
"Motivation": {
"image": "https://cdn.pixabay.com/photo/2017/08/18/08/31/flowers-2654192_1280.png",
"data": {
"1": "Push harder when it gets tough.\nWinners never say enough.",
"2": "Dreams demand a sleepless night.\nWork hard till it feels right.",
"3": "Don’t quit when you are tired.\nStop only when inspired.",
"4": "Your struggle builds your strength.\nSuccess comes at great length.",
"5": "Fall seven times, rise again.\nEvery loss is someone’s gain.",
"6": "Small steps bring big change.\nStay focused, don’t rearrange.",
"7": "Your limits are in your mind.\nBreak them and success you’ll find.",
"8": "Efforts never go in vain.\nHard work always leaves a gain.",
"9": "Turn your can’ts into cans.\nAnd dreams into future plans.",
"10": "Motivation is your inner fire.\nFeed it daily, rise higher."
}
},
"Sad": {
"image": "https://cdn.pixabay.com/photo/2016/07/14/16/16/flowers-corner-1517055_1280.png",
"data": {
"1": "Tears speak what words can’t say.\nSilent hearts break every day.",
"2": "Smiles hide a thousand pains.\nYet broken souls still remain.",
"3": "Sometimes silence is the loudest cry.\nEyes reveal what lips deny.",
"4": "Sadness teaches us to grow.\nThrough the hurt we come to know.",
"5": "Broken hearts still beat on.\nDarkest nights lead to dawn.",
"6": "Behind every smile is a scar.\nMemories chase us from afar.",
"7": "Pain writes the deepest song.\nBut heals the soul all along.",
"8": "Crying is not weakness shown.\nIt’s strength in being alone.",
"9": "Sadness makes love feel real.\nOnly wounds teach us to heal.",
"10": "Lonely nights are hard to bear.\nBut hope whispers someone cares."
}
},
"Love": {
"image": "https://cdn.pixabay.com/photo/2016/05/29/19/43/rose-1423681_1280.png",
"data": {
"1": "Love is a promise from the soul.\nIt makes the broken heart whole.",
"2": "In your eyes, I see my home.\nWith you, I’ll never roam.",
"3": "Love is felt, not just said.\nIt’s in the tears we’ve shed.",
"4": "Every heartbeat calls your name.\nLife without you feels the same.",
"5": "Love makes ordinary days shine.\nWith you, all moments are divine.",
"6": "Two souls, one heart beat.\nThat’s where true love meets.",
"7": "Love begins with a gentle smile.\nAnd stays forever, mile by mile.",
"8": "When I hold your hand tight.\nThe world feels just right.",
"9": "Love is the language of the heart.\nNo distance can keep us apart.",
"10": "In love, forever feels small.\nBecause with you, I want it all."
}
},
"Success": {
"image": "https://cdn.pixabay.com/photo/2016/08/02/13/40/sun-flower-1563432_1280.png",
"data": {
"1": "Success is a mountain high.\nClimb with courage, touch the sky.",
"2": "Hard work is the secret door.\nThat opens to success galore.",
"3": "Success is not given, it’s earned.\nThrough the lessons we have learned.",
"4": "Failure is a stepping stone.\nSuccess is built on your own.",
"5": "Success starts with a strong will.\nAnd grows with every skill.",
"6": "Success shines when you don’t quit.\nEven storms can’t stop your grit.",
"7": "Behind every win is sweat.\nEfforts never make regret.",
"8": "Success is patience in disguise.\nKeep faith, time will rise.",
"9": "Victory belongs to the brave.\nNot to those who misbehave.",
"10": "Success is a journey untold.\nMade of courage, pure and bold."
}
},
"Friendship": {
"image": "https://cdn.pixabay.com/photo/2022/09/18/21/51/sunflower-7464119_1280.png",
"data": {
"1": "Friendship is life’s sweetest song.\nWith true friends, you can’t go wrong.",
"2": "Friends share both smiles and tears.\nStanding strong through the years.",
"3": "A friend makes the dark days bright.\nAnd turns wrong into right.",
"4": "Friendship is a bond of trust.\nA connection that’s a must.",
"5": "True friends never let you fall.\nThey pick you up and stand tall.",
"6": "Friendship makes the heart strong.\nIt’s a melody lifelong.",
"7": "A good friend is a rare find.\nA treasure of the kind.",
"8": "Friendship heals when we are weak.\nIt’s the comfort that we seek.",
"9": "Distance cannot break the tie.\nTrue friends never say goodbye.",
"10": "Friendship is love without end.\nA blessing to call a friend."
}
},
"Positive": {
"image": "https://cdn.pixabay.com/photo/2023/04/22/15/10/woman-7943924_1280.png",
"data": {
"1": "Be positive in every way.\nDark nights bring brighter day.",
"2": "A smile is the best start.\nIt heals every broken heart.",
"3": "Positive thoughts light the soul.\nThey make broken lives whole.",
"4": "Stay kind in what you do.\nThe universe returns it too.",
"5": "Every problem hides a key.\nPositivity sets you free.",
"6": "When you choose joy inside.\nEven sadness will subside.",
"7": "A positive mind sees more.\nOpens life’s hidden door.",
"8": "Hope is a shining flame.\nIt turns losses into gain.",
"9": "Positive energy spreads fast.\nMaking happiness truly last.",
"10": "Think good, feel good, be strong.\nWith positivity, nothing’s wrong."
}
},
"Attitude": {
"image": "https://cdn.pixabay.com/photo/2023/02/14/16/01/rose-7789965_1280.png",
"data": {
"1": "My attitude is my style.\nIt makes me walk an extra mile.",
"2": "I bend for none, I stand tall.\nThat’s my attitude after all.",
"3": "Confidence is my crown.\nNo one can pull me down.",
"4": "I’m not rude, I’m just real.\nAttitude is how I deal.",
"5": "My vibe is my power.\nI shine like a blooming flower.",
"6": "Don’t mistake my silence.\nIt’s my strongest defiance.",
"7": "I’m fire, not a flame.\nRespect me, play the game.",
"8": "Attitude makes me strong.\nEven when things go wrong.",
"9": "I don’t chase, I attract.\nThat’s my attitude in fact.",
"10": "My life, my rule, my say.\nThat’s my attitude every day."
}
},
"Wisdom": {
"image": "https://cdn.pixabay.com/photo/2022/01/29/10/09/magnolia-6976983_1280.png",
"data": {
"1": "Wisdom grows in silent minds.\nTruth is what the wise one finds.",
"2": "Knowledge speaks, wisdom listens.\nLife shines with inner visions.",
"3": "A wise man speaks less.\nBut his words carry success.",
"4": "Wisdom is the light of life.\nIt ends confusion and strife.",
"5": "Books give knowledge you see.\nBut wisdom sets the spirit free.",
"6": "Wisdom comes with time.\nIt makes life truly sublime.",
"7": "The wise learn from the past.\nTheir lessons forever last.",
"8": "Wisdom is patience at heart.\nIt’s life’s greatest art.",
"9": "True wisdom is kind and fair.\nIt teaches us how to care.",
"10": "Wisdom guides, ego blinds.\nChoose the path that truly shines."
}
},
"Self-Respect": {
"image": "https://cdn.pixabay.com/photo/2022/01/23/13/55/rosette-6960913_1280.png",
"data": {
"1": "Respect yourself to be free.\nThat’s the power of dignity.",
"2": "Self-respect is a crown.\nNever let it fall down.",
"3": "Value yourself first.\nThat quenches life’s thirst.",
"4": "Respect is earned, not asked.\nBe real, not masked.",
"5": "Self-respect builds inner peace.\nIt makes self-doubt cease.",
"6": "When you respect your soul.\nLife feels perfectly whole.",
"7": "Respect yourself and say no.\nThat’s the strength you show.",
"8": "Dignity is silent strength.\nIt goes to any length.",
"9": "Without respect, love can’t last.\nBuild it strong, build it fast.",
"10": "Respect starts from within.\nThat’s the true way to win."
}
}
}
};
// ===== render list =====
const listEl = document.getElementById('list');
function renderList(obj){
const cats = obj.Categories || {};
Object.keys(cats).forEach(catName => {
const cat = cats[catName];
const image = cat.image || '';
// take first quote as excerpt
const dataObj = cat.data || {};
const firstKey = Object.keys(dataObj)[0];
const excerpt = firstKey ? dataObj[firstKey] : '';
const total = Object.keys(dataObj).length;
const card = document.createElement('article');
card.className = 'card';
const thumb = document.createElement('div');
thumb.className = 'thumb';
thumb.style.backgroundImage = `url('${image}')`;
const body = document.createElement('div');
body.className = 'card-body';
const t = document.createElement('div');
t.className = 'title';
t.textContent = catName;
const ex = document.createElement('div');
ex.className = 'excerpt';
ex.textContent = excerpt;
const footer = document.createElement('div');
footer.className = 'card-footer';
const count = document.createElement('div');
count.className = 'count';
count.textContent = `${total} quotes`;
const btn = document.createElement('button');
btn.className = 'btn';
btn.textContent = 'View';
btn.addEventListener('click', () => openModal(catName, dataObj));
footer.appendChild(count);
footer.appendChild(btn);
body.appendChild(t);
body.appendChild(ex);
body.appendChild(footer);
card.appendChild(thumb);
card.appendChild(body);
listEl.appendChild(card);
});
}
// ===== modal logic =====
const backdrop = document.getElementById('backdrop');
const modalTitle = document.getElementById('modal-title');
const modalCount = document.getElementById('modal-count');
const quotesEl = document.getElementById('quotes');
const closeBtn = document.getElementById('close');
function openModal(catName, dataObj){
modalTitle.textContent = catName;
const keys = Object.keys(dataObj || {});
modalCount.textContent = `${keys.length} quotes`;
quotesEl.innerHTML = '';
keys.forEach(k => {
const q = document.createElement('div');
q.className = 'quote-item';
q.textContent = dataObj[k];
quotesEl.appendChild(q);
});
backdrop.style.display = 'flex';
}
function closeModal(){
backdrop.style.display = 'none';
}
closeBtn.addEventListener('click', closeModal);
backdrop.addEventListener('click', (e) => {
if(e.target === backdrop) closeModal();
});
// ESC to close
window.addEventListener('keydown', (e) => { if(e.key === 'Escape') closeModal(); });
// Initialize
renderList(DATA);
</script>
</body>
</html>
