HTML5 Not Defteri yapalım.

Özellikler:

9:16 Mobil Uyumlu Çerçeve: Masaüstünde şık bir telefon görünümünde (9:16), mobilde ise tam ekran uyumlu çalışır.
Çevrimdışı ve Yerel Depolama: Harici sunucu gerektirmez, tüm notlar tarayıcınızın localStorage alanında güvenle saklanır.
Değiştirilebilir Temalar: Modern Karanlık, Pastel Aydınlık, Cyberpunk Neon ve Pastel Pembe olmak üzere 4 farklı tema seçeneğine sahiptir.
Anlık Arama: Başlık, içerik veya etiketlerde eş zamanlı (real-time) arama yapabilirsiniz.
Resim ve Sembol Desteği: Notlarınıza cihazınızdan görsel ekleyebilir (Base64 olarak kaydedilir) veya hızlı sembol/emoji çubuğunu kullanabilirsiniz.
Görünüm Modu Toggle Butonu: Header kısmında en üst sağda görünüm değiştirici simgesi.
Liste (Kompakt) Görünümü: Notlar tek satır halinde minimal özet, başlık, etiket ve ikonuyla listelenir.
Ayrıntılı Görünüm: Not metinlerinin tamamı, eklenen büyük görseller, kategoriler ve detaylı tarihler görünür.
Tercih Hatırlama: Seçtiğiniz görünüm modu localStorage üzerine kaydedilir, sayfayı yenilediğinizde aynı görünümle devam eder.

Cepten Notlar - Mobil Not Defteri

📝

Cepten Notlar

0 Not

Not Düzenle

Başlık

Etiket / Kategori

Hızlı Sembol & Emoji Ekle

Not İçeriği

Görsel Ekle

İşlem başarılı

<!DOCTYPE html>

<head>

<title>Cepten Notlar - Mobil Not Defteri</title>

tailwind.config = {

darkMode: 'class',

theme: {

extend: {

colors: {

themeDark: { bg: '#0f172a', card: '#1e293b', text: '#f8fafc', primary: '#3b82f6', border: '#334155' },

themeLight: { bg: '#f1f5f9', card: '#ffffff', text: '#0f172a', primary: '#2563eb', border: '#e2e8f0' },

themeCyber: { bg: '#05050a', card: '#121124', text: '#00ffcc', primary: '#ff007f', border: '#2a265f' },

themePastel: { bg: '#fdf4f5', card: '#ffffff', text: '#4a4046', primary: '#d97706', border: '#f5d0d6' }

}

</script>

<style>

/* 9:16 Responsive Container Constraints for desktop, full screen on mobile */

@media (min-width: 640px) {

.phone-frame {

width: 100%;

max-width: 420px;

height: 85vh;

max-height: 840px;

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);

border-radius: 2.5rem;

border: 8px solid #1e293b;

overflow: hidden;

}

@media (max-width: 639px) {

.phone-frame {

width: 100vw;

height: 100vh;

border-radius: 0;

}

/* Custom Scrollbar */

::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: rgba(150,150,150,0.3); border-radius: 10px; }

</style>

</head>

<div>

<h1 class="font-bold text-base leading-tight tracking-tight" id="appTitle">Cepten Notlar</h1>

</div>

</button>

</button>

</div>

</header>

</span>

<input type="text" id="searchInput" oninput="filterNotes()" placeholder="Notlarda ara (başlık, içerik, etiket)..."

class="w-full pl-9 pr-4 py-2 rounded-xl text-sm border outline-none transition duration-200 bg-opacity-50">

</div>

</div>

<p class="text-sm font-medium">Henüz not bulunmuyor.</p>

<p class="text-xs mt-1">Sağ üstteki "+" butonuna basarak ilk notunuzu ekleyin!</p>

</div>

</button>

<h2 class="font-bold text-sm" id="editorTitleText">Not Düzenle</h2>

<button onclick="saveNote()" class="px-4 py-1.5 rounded-xl text-sm font-semibold text-white transition shadow-sm" id="saveNoteBtn">Kaydet</button>

</div>

<div>

<label class="block text-xs font-semibold mb-1 opacity-80 uppercase tracking-wider">Başlık</label>

</div>

<div>

<label class="block text-xs font-semibold mb-1 opacity-80 uppercase tracking-wider">Etiket / Kategori</label>

</div>

<div>

<label class="block text-xs font-semibold mb-1 opacity-80 uppercase tracking-wider">Hızlı Sembol & Emoji Ekle</label>

</div>

<label class="block text-xs font-semibold mb-1 opacity-80 uppercase tracking-wider">Not İçeriği</label>

</div>

<div>

<label class="block text-xs font-semibold mb-1 opacity-80 uppercase tracking-wider">Görsel Ekle</label>

</div>

<h3 class="font-bold text-sm">Tema Seçin</h3>

<button onclick="toggleThemeModal()" class="text-xs opacity-70 hover:opacity-100 font-bold px-2 py-1">✕ Kapat</button>

</div>

<span class="flex items-center space-x-2"><span>🌙</span><span>Modern Karanlık</span></span>

</button>

<span class="flex items-center space-x-2"><span>☀️</span><span>Pastel Aydınlık</span></span>

</button>

<span class="flex items-center space-x-2"><span>⚡</span><span>Cyberpunk Neon</span></span>

</button>

<span class="flex items-center space-x-2"><span>🌸</span><span>Pastel Pembe</span></span>

</button>

</div>

İşlem başarılı

</div>

// Uygulama Durumu (State)

let notes = JSON.parse(localStorage.getItem('cepten_notes') || '[]');

let currentTheme = localStorage.getItem('cepten_theme') || 'dark';

let editingNoteId = null;

let currentImageBase64 = '';

// Sayfa Yüklendiğinde Çalışacaklar

window.onload = function() {

setTheme(currentTheme);

renderNotes();

};

// Tema Yönetimi

function setTheme(themeName) {

currentTheme = themeName;

localStorage.setItem('cepten_theme', themeName);

const body = document.getElementById('bodyTag');

const container = document.getElementById('appContainer');

const header = document.getElementById('headerEl');

const searchBar = document.getElementById('searchBarEl');

const searchInput = document.getElementById('searchInput');

const editorScreen = document.getElementById('editorScreen');

const editorHeader = document.getElementById('editorHeader');

const noteTitleInput = document.getElementById('noteTitleInput');

const noteCategoryInput = document.getElementById('noteCategoryInput');

const noteContentInput = document.getElementById('noteContentInput');

const themeModalContent = document.getElementById('themeModalContent');

const addBtn = document.getElementById('addBtn');

const saveNoteBtn = document.getElementById('saveNoteBtn');

// Sınıfları Temizle

container.className = "phone-frame flex flex-col relative transition-colors duration-300 shadow-2xl";

let themeConfig = {};

if (themeName === 'dark') {

themeConfig = { bg: '#0f172a', card: '#1e293b', text: '#f8fafc', primary: '#3b82f6', border: '#334155', inputBg: '#0f172a' };

} else if (themeName === 'light') {

themeConfig = { bg: '#e2e8f0', card: '#f8fafc', text: '#0f172a', primary: '#2563eb', border: '#cbd5e1', inputBg: '#ffffff' };

} else if (themeName === 'cyber') {

themeConfig = { bg: '#05050a', card: '#121124', text: '#00ffcc', primary: '#ff007f', border: '#2a265f', inputBg: '#05050a' };

} else if (themeName === 'pastel') {

themeConfig = { bg: '#fce7f0', card: '#ffffff', text: '#4a4046', primary: '#d97706', border: '#f5d0d6', inputBg: '#fff5f7' };

}

container.style.backgroundColor = themeConfig.bg;

container.style.color = themeConfig.text;

editorScreen.style.backgroundColor = themeConfig.bg;

editorScreen.style.color = themeConfig.text;

header.style.borderColor = themeConfig.border;

searchBar.style.borderColor = themeConfig.border;

editorHeader.style.borderColor = themeConfig.border;

themeModalContent.style.backgroundColor = themeConfig.card;

themeModalContent.style.borderColor = themeConfig.border;

searchInput.style.backgroundColor = themeConfig.inputBg;

searchInput.style.borderColor = themeConfig.border;

searchInput.style.color = themeConfig.text;

noteTitleInput.style.backgroundColor = themeConfig.inputBg;

noteTitleInput.style.borderColor = themeConfig.border;

noteTitleInput.style.color = themeConfig.text;

noteCategoryInput.style.backgroundColor = themeConfig.inputBg;

noteCategoryInput.style.borderColor = themeConfig.border;

noteCategoryInput.style.color = themeConfig.text;

noteContentInput.style.backgroundColor = themeConfig.inputBg;

noteContentInput.style.borderColor = themeConfig.border;

noteContentInput.style.color = themeConfig.text;

addBtn.style.backgroundColor = themeConfig.primary;

saveNoteBtn.style.backgroundColor = themeConfig.primary;

document.getElementById('themeModal').classList.add('hidden');

renderNotes();

}

function toggleThemeModal() {

const modal = document.getElementById('themeModal');

modal.classList.toggle('hidden');

}

// Not Listeleme & Filtreleme

function renderNotes(filterText = '') {

const container = document.getElementById('notesListContainer');

const emptyState = document.getElementById('emptyState');

const countBadge = document.getElementById('noteCountBadge');

container.innerHTML = '';

const filtered = notes.filter(n => {

const text = filterText.toLowerCase();

return n.title.toLowerCase().includes(text) ||

n.content.toLowerCase().includes(text) ||

(n.category && n.category.toLowerCase().includes(text));

});

countBadge.innerText = `${notes.length} Not`;

if (filtered.length === 0) {

emptyState.classList.remove('hidden');

return;

} else {

emptyState.classList.add('hidden');

}

// Kart stilleri temaya göre ayarlanır

let cardBg = '#1e293b', cardBorder = '#334155', badgeBg = '#334155';

if (currentTheme === 'light') { cardBg = '#ffffff'; cardBorder = '#e2e8f0'; badgeBg = '#e2e8f0'; }

else if (currentTheme === 'cyber') { cardBg = '#121124'; cardBorder = '#2a265f'; badgeBg = '#2a265f'; }

else if (currentTheme === 'pastel') { cardBg = '#ffffff'; cardBorder = '#f5d0d6'; badgeBg = '#fae1e6'; }

filtered.sort((a, b) => b.date - a.date).forEach(note => {

const dateStr = new Date(note.date).toLocaleDateString('tr-TR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });

const card = document.createElement('div');

card.className = "p-4 rounded-2xl border transition-all duration-200 hover:scale-[1.01] shadow-sm flex flex-col space-y-2 relative group";

card.style.backgroundColor = cardBg;

card.style.borderColor = cardBorder;

let imageHtml = '';

if (note.image) {

imageHtml = `<div class="mt-2"><img src="${note.image}" class="w-full h-28 object-cover rounded-xl border opacity-90" alt="Not Görseli"></div>`;

}

card.innerHTML = `

<h3 class="font-bold text-sm line-clamp-1 pr-6">${escapeHtml(note.title || 'Başlıksız Not')}</h3>

</div>

${note.category ? `<span class="self-start px-2 py-0.5 rounded-md text-[10px] font-semibold uppercase tracking-wider" style="background-color: ${badgeBg}; opacity: 0.9;">${escapeHtml(note.category)}</span>` : ''}

<p class="text-xs opacity-80 line-clamp-2 whitespace-pre-wrap">${escapeHtml(note.content)}</p>

${imageHtml}

<span>${dateStr}</span>

</div>

container.appendChild(card);

});

}

function filterNotes() {

const query = document.getElementById('searchInput').value;

renderNotes(query);

}

// CRUD İşlemleri

function openEditor(noteId = null) {

editingNoteId = noteId;

currentImageBase64 = '';

document.getElementById('imagePreviewContainer').classList.add('hidden');

document.getElementById('imageUploadInput').value = '';

const titleInput = document.getElementById('noteTitleInput');

const categoryInput = document.getElementById('noteCategoryInput');

const contentInput = document.getElementById('noteContentInput');

const editorTitleText = document.getElementById('editorTitleText');

if (noteId) {

const note = notes.find(n => n.id === noteId);

if (note) {

titleInput.value = note.title;

categoryInput.value = note.category || '';

contentInput.value = note.content;

if (note.image) {

currentImageBase64 = note.image;

document.getElementById('noteImagePreview').src = note.image;

document.getElementById('imagePreviewContainer').classList.remove('hidden');

}

editorTitleText.innerText = 'Notu Düzenle';

}

} else {

titleInput.value = '';

categoryInput.value = '';

contentInput.value = '';

editorTitleText.innerText = 'Yeni Not Ekle';

}

document.getElementById('editorScreen').style.transform = 'translateY(0)';

}

function closeEditor() {

document.getElementById('editorScreen').style.transform = 'translateY(100%)';

editingNoteId = null;

}

function saveNote() {

const title = document.getElementById('noteTitleInput').value.trim();

const category = document.getElementById('noteCategoryInput').value.trim();

const content = document.getElementById('noteContentInput').value.trim();

if (!title && !content) {

showToast('Lütfen en az başlık veya içerik girin!');

return;

}

if (editingNoteId) {

const index = notes.findIndex(n => n.id === editingNoteId);

if (index !== -1) {

notes[index].title = title;

notes[index].category = category;

notes[index].content = content;

notes[index].image = currentImageBase64;

notes[index].date = Date.now();

}

showToast('Not güncellendi!');

} else {

const newNote = {

id: '_' + Math.random().toString(36).substr(2, 9),

title: title,

category: category,

content: content,

image: currentImageBase64,

date: Date.now()

};

notes.push(newNote);

showToast('Not eklendi!');

}

localStorage.setItem('cepten_notes', JSON.stringify(notes));

closeEditor();

renderNotes();

}

function editNote(id) {

openEditor(id);

}

function deleteNote(id) {

if (confirm('Bu notu silmek istediğinize emin misiniz?')) {

notes = notes.filter(n => n.id !== id);

localStorage.setItem('cepten_notes', JSON.stringify(notes));

renderNotes();

showToast('Not silindi.');

}

// Resim Yükleme (Base64)

function handleImageUpload(event) {

const file = event.target.files[0];

if (!file) return;

const reader = new FileReader();

reader.onload = function(e) {

currentImageBase64 = e.target.result;

document.getElementById('noteImagePreview').src = currentImageBase64;

document.getElementById('imagePreviewContainer').classList.remove('hidden');

};

reader.readAsDataURL(file);

}

function removeImage() {

currentImageBase64 = '';

document.getElementById('imageUploadInput').value = '';

document.getElementById('imagePreviewContainer').classList.add('hidden');

}

// Sembol / Emoji Ekleme

function insertSymbol(symbol) {

const textarea = document.getElementById('noteContentInput');

const start = textarea.selectionStart;

const end = textarea.selectionEnd;

const text = textarea.value;

textarea.value = text.substring(0, start) + symbol + text.substring(end);

textarea.selectionStart = textarea.selectionEnd = start + symbol.length;

textarea.focus();

}

// Bildirim Kutusu (Toast)

function showToast(message) {

const toast = document.getElementById('toast');

toast.innerText = message;

toast.classList.remove('opacity-0');

toast.classList.add('opacity-100');

setTimeout(() => {

toast.classList.remove('opacity-100');

toast.classList.add('opacity-0');

}, 2000);

}

// Güvenlik / XSS Engelleyici

function escapeHtml(str) {

return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");

}

</script>

</body>

</html>

ÖNEMLİ NOT:

Kodun en üst tarafında yer alan:

<script src="https://cdn.tailwindcss.com"></script>

satırı internete bağımlı çalışır.

tailwindcss.js

dosyasını internetten indirip html dosyasının yanına koyup satırı şu şekilde değiştirirseniz:

<script src="tailwindcss.js"></script>

tamamen localde çalışırsınız.

Kodla Gitsin

14 Ekim 2026 Çarşamba

HTML5 Not Defteri

Cepten Notlar

Not Düzenle

Tema Seçin

Hiç yorum yok:

Yorum Gönder