File size: 5,861 Bytes
98feb93 be3690e 98feb93 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-Talk Journal | QuantumCode</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/self-talk-recorder.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.gradient-text {
background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.glass-card {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
}
.entry-card {
transition: all 0.3s ease;
border: 1px solid transparent;
}
.entry-card:hover {
transform: translateY(-3px);
border-color: #7c3aed;
}
</style>
</head>
<body class="min-h-screen">
<nav class="px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="cpu" class="text-indigo-500"></i>
<span class="text-xl font-bold gradient-text">QuantumCode</span>
</div>
<div class="flex items-center space-x-2">
<a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
<i data-feather="globe" class="w-4 h-4 mr-1"></i>
<span id="currentLang">EN</span>
</a>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
<a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
<a href="self-talk-journal.html" class="text-indigo-400">Self-Talk Journal</a>
<a href="gamequest.html" class="hover:text-indigo-400 transition-colors">GameQuest</a>
</div>
</nav>
<main class="container mx-auto px-4 py-16">
<section class="max-w-6xl mx-auto mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-6">
<span class="gradient-text">Self-Talk Journal</span>
</h1>
<p class="text-xl text-slate-300 mb-10">
Record and reflect on your daily self-talk patterns to build confidence and awareness.
</p>
<div class="glass-card p-8 mb-10">
<self-talk-recorder></self-talk-recorder>
</div>
<h2 class="text-3xl font-bold gradient-text mb-6">Past Entries</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="entriesContainer">
<!-- Entries will be loaded here -->
</div>
</section>
</main>
<script>
// Load entries from storage
async function loadEntries() {
// In a real app, this would fetch from your backend/API
const mockEntries = [
{
id: '1',
date: '2023-06-15',
duration: '1:02',
thumbnail: 'http://static.photos/people/320x240/1',
mood: 'Confident'
},
{
id: '2',
date: '2023-06-14',
duration: '0:58',
thumbnail: 'http://static.photos/people/320x240/2',
mood: 'Thoughtful'
},
{
id: '3',
date: '2023-06-13',
duration: '1:05',
thumbnail: 'http://static.photos/people/320x240/3',
mood: 'Nervous'
}
];
const container = document.getElementById('entriesContainer');
container.innerHTML = mockEntries.map(entry => `
<div class="glass-card entry-card p-6 cursor-pointer">
<div class="relative pb-[56.25%] mb-4 overflow-hidden rounded-lg">
<img src="${entry.thumbnail}" alt="Entry thumbnail" class="absolute h-full w-full object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3">
<div class="text-white font-medium">${entry.duration}</div>
</div>
</div>
<div class="flex justify-between items-center">
<div>
<h3 class="font-bold">${entry.date}</h3>
<p class="text-sm text-slate-400">${entry.mood}</p>
</div>
<button class="text-indigo-400 hover:text-indigo-300">
<i data-feather="play"></i>
</button>
</div>
</div>
`).join('');
feather.replace();
}
loadEntries();
// Set initial language
document.getElementById('currentLang').textContent =
document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';
feather.replace();
</script>
</body>
</html> |