https://playnest-studio.itch.io
Oyunlar-için-site
https://sites.google.com/view/enes-studio/ana-sayfa
sa
gel
at kodu
bekle knk
VideoTube - Video Paylaşım Platformu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f9f9f9;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
color: #ff0000;
font-size: 1.5rem;
font-weight: bold;
}
.logo span {
margin-left: 0.5rem;
}
.search-container {
flex: 0 1 40%;
}
.search-form {
display: flex;
height: 40px;
}
.search-input {
flex: 1;
padding: 0 1rem;
border: 1px solid #ccc;
border-right: none;
border-radius: 2px 0 0 2px;
font-size: 1rem;
}
.search-button {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 0 2px 2px 0;
padding: 0 1.5rem;
cursor: pointer;
}
.user-actions {
display: flex;
align-items: center;
gap: 1.5rem;
}
.upload-btn, .login-btn {
display: flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 0.9rem;
}
.upload-btn {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 2px;
padding: 0.5rem 1rem;
}
.login-btn {
color: #065fd4;
font-weight: bold;
}
main {
display: flex;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.sidebar {
width: 240px;
padding-right: 1.5rem;
}
.menu {
list-style: none;
}
.menu li {
margin-bottom: 1rem;
}
.menu a {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
padding: 0.7rem;
border-radius: 10px;
}
.menu a:hover {
background-color: #f2f2f2;
}
.menu a i {
margin-right: 1rem;
}
.videos-container {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.video-card {
cursor: pointer;
transition: transform 0.3s;
}
.video-card:hover {
transform: translateY(-5px);
}
.thumbnail {
position: relative;
width: 100%;
height: 140px;
background-color: #ddd;
border-radius: 12px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.duration {
position: absolute;
bottom: 5px;
right: 5px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-size: 0.8rem;
padding: 2px 4px;
border-radius: 3px;
}
.video-info {
display: flex;
gap: 0.7rem;
}
.channel-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ddd;
overflow: hidden;
}
.channel-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-details {
flex: 1;
}
.video-title {
font-weight: 500;
margin-bottom: 0.3rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.channel-name, .video-meta {
font-size: 0.8rem;
color: #606060;
}
.upload-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background-color: white;
border-radius: 8px;
padding: 2rem;
width: 500px;
max-width: 90%;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.modal-title {
font-size: 1.3rem;
font-weight: 500;
}
.close-modal {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.upload-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.form-group label {
font-weight: 500;
}
.form-control {
padding: 0.7rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
textarea.form-control {
min-height: 100px;
resize: vertical;
}
.file-upload {
border: 2px dashed #ccc;
padding: 2rem;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
.file-upload:hover {
border-color: #065fd4;
}
.submit-btn {
padding: 0.7rem 1rem;
background-color: #ff0000;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
margin-top: 1rem;
}
.submit-btn:hover {
background-color: #cc0000;
}
/* Responsive adjustments */
@media (max-width: 1000px) {
main {
flex-direction: column;
}
.sidebar {
width: 100%;
margin-bottom: 2rem;
padding-right: 0;
}
.menu {
display: flex;
overflow-x: auto;
gap: 1rem;
padding-bottom: 1rem;
}
.menu li {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
header {
padding: 1rem;
}
.logo span {
display: none;
}
.search-container {
flex: 0 1 60%;
}
main {
padding: 1rem;
}
.videos-container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 500px) {
.search-container {
display: none;
}
.videos-container {
grid-template-columns: 1fr;
}
}
10:28
15:42
8:16
22:05
13:47
18:32
7:55
11:23
<script>
// Modal işlevselliği
const uploadBtn = document.getElementById('uploadBtn');
const uploadModal = document.getElementById('uploadModal');
const closeModal = document.getElementById('closeModal');
const fileUpload = document.getElementById('fileUpload');
const videoFileInput = document.getElementById('videoFile');
uploadBtn.addEventListener('click', () => {
uploadModal.style.display = 'flex';
});
closeModal.addEventListener('click', () => {
uploadModal.style.display = 'none';
});
window.addEventListener('click', (e) => {
if (e.target === uploadModal) {
uploadModal.style.display = 'none';
}
});
fileUpload.addEventListener('click', () => {
videoFileInput.click();
});
videoFileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
const fileName = e.target.files[0].name;
fileUpload.innerHTML = `
VideoTube
Video Yükle
Giriş Yap
Ana Sayfa
Abonelikler
İzleme Geçmişi
Beğenilen Videolar
Web Geliştirme İçin HTML ve CSS Dersleri - Başlangıç Seviyesi
Web Akademi
1.2M görüntüleme • 3 hafta önce
JavaScript ile Dinamik Web Sayfaları Oluşturma
Kod Ustası
850K görüntüleme • 1 ay önce
Responsive Tasarım İpuçları: Mobil Dostu Web Siteleri
Tasarım Lab
422K görüntüleme • 2 hafta önce
React.js ile Modern Web Uygulamaları Geliştirme
Frontend Dünyası
1.5M görüntüleme • 2 ay önce
Node.js ile Backend Geliştirme: Express.js Temelleri
Server Uzmanı
720K görüntüleme • 3 hafta önce
CSS Grid ve Flexbox: Modern Sayfa Düzenleri
CSS Uzmanı
930K görüntüleme • 1 ay önce
Git ve GitHub Kullanımı: Versiyon Kontrolü
Dev Tools
512K görüntüleme • 2 hafta önce
SQL Veritabanı: CRUD İşlemleri ve İlişkisel Tablolar
Veri Yönetimi
380K görüntüleme • 3 hafta önce
Video Yükle
×
Video Dosyası
Video dosyanızı sürükleyin veya seçmek için tıklayın
Video Başlığı
Açıklama
Etiketler
Kategori
Kategori seçin
Eğitim
Eğlence
Müzik
Teknoloji
Oyun
Spor
Yükle
${fileName}
`; } }); // Video kartları için tıklama işlevselliği const videoCards = document.querySelectorAll('.video-card'); videoCards.forEach(card => { card.addEventListener('click', () => { alert('Bu örnekte video oynatma sayfası henüz eklenmedi.'); }); }); </script>bi dk
yenisini atıyom
VideoTube - Video Paylaşım Platformu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f9f9f9;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
color: #ff0000;
font-size: 1.5rem;
font-weight: bold;
}
.logo span {
margin-left: 0.5rem;
}
.search-container {
flex: 0 1 40%;
}
.search-form {
display: flex;
height: 40px;
}
.search-input {
flex: 1;
padding: 0 1rem;
border: 1px solid #ccc;
border-right: none;
border-radius: 2px 0 0 2px;
font-size: 1rem;
}
.search-button {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 0 2px 2px 0;
padding: 0 1.5rem;
cursor: pointer;
}
.user-actions {
display: flex;
align-items: center;
gap: 1.5rem;
}
.upload-btn, .login-btn {
display: flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 0.9rem;
}
.upload-btn {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 2px;
padding: 0.5rem 1rem;
}
.login-btn {
color: #065fd4;
font-weight: bold;
}
main {
display: flex;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.sidebar {
width: 240px;
padding-right: 1.5rem;
}
.menu {
list-style: none;
}
.menu li {
margin-bottom: 1rem;
}
.menu a {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
padding: 0.7rem;
border-radius: 10px;
}
.menu a:hover {
background-color: #f2f2f2;
}
.menu a i {
margin-right: 1rem;
}
.videos-container {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.video-card {
cursor: pointer;
transition: transform 0.3s;
}
.video-card:hover {
transform: translateY(-5px);
}
.thumbnail {
position: relative;
width: 100%;
height: 140px;
background-color: #ddd;
border-radius: 12px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.duration {
position: absolute;
bottom: 5px;
right: 5px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-size: 0.8rem;
padding: 2px 4px;
border-radius: 3px;
}
.video-info {
display: flex;
gap: 0.7rem;
}
.channel-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ddd;
overflow: hidden;
}
.channel-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-details {
flex: 1;
}
.video-title {
font-weight: 500;
margin-bottom: 0.3rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.channel-name, .video-meta {
font-size: 0.8rem;
color: #606060;
}
.upload-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background-color: white;
border-radius: 8px;
padding: 2rem;
width: 500px;
max-width: 90%;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.modal-title {
font-size: 1.3rem;
font-weight: 500;
}
.close-modal {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.upload-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.form-group label {
font-weight: 500;
}
.form-control {
padding: 0.7rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
textarea.form-control {
min-height: 100px;
resize: vertical;
}
.file-upload {
border: 2px dashed #ccc;
padding: 2rem;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
.file-upload:hover {
border-color: #065fd4;
}
.submit-btn {
padding: 0.7rem 1rem;
background-color: #ff0000;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
margin-top: 1rem;
}
.submit-btn:hover {
background-color: #cc0000;
}
/* Responsive adjustments */
@media (max-width: 1000px) {
main {
flex-direction: column;
}
.sidebar {
width: 100%;
margin-bottom: 2rem;
padding-right: 0;
}
.menu {
display: flex;
overflow-x: auto;
gap: 1rem;
padding-bottom: 1rem;
}
.menu li {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
header {
padding: 1rem;
}
.logo span {
display: none;
}
.search-container {
flex: 0 1 60%;
}
main {
padding: 1rem;
}
.videos-container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 500px) {
.search-container {
display: none;
}
.videos-container {
grid-template-columns: 1fr;
}
}
10:28
15:42
8:16
22:05
13:47
18:32
7:55
11:23
<script>
// Modal işlevselliği
const uploadBtn = document.getElementById('uploadBtn');
const uploadModal = document.getElementById('uploadModal');
const closeModal = document.getElementById('closeModal');
const fileUpload = document.getElementById('fileUpload');
const videoFileInput = document.getElementById('videoFile');
uploadBtn.addEventListener('click', () => {
uploadModal.style.display = 'flex';
});
closeModal.addEventListener('click', () => {
uploadModal.style.display = 'none';
});
window.addEventListener('click', (e) => {
if (e.target === uploadModal) {
uploadModal.style.display = 'none';
}
});
fileUpload.addEventListener('click', () => {
videoFileInput.click();
});
videoFileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
const fileName = e.target.files[0].name;
fileUpload.innerHTML = `
VideoTube
Video Yükle
Giriş Yap
Ana Sayfa
Abonelikler
İzleme Geçmişi
Beğenilen Videolar
Web Geliştirme İçin HTML ve CSS Dersleri - Başlangıç Seviyesi
Web Akademi
1.2M görüntüleme • 3 hafta önce
JavaScript ile Dinamik Web Sayfaları Oluşturma
Kod Ustası
850K görüntüleme • 1 ay önce
Responsive Tasarım İpuçları: Mobil Dostu Web Siteleri
Tasarım Lab
422K görüntüleme • 2 hafta önce
React.js ile Modern Web Uygulamaları Geliştirme
Frontend Dünyası
1.5M görüntüleme • 2 ay önce
Node.js ile Backend Geliştirme: Express.js Temelleri
Server Uzmanı
720K görüntüleme • 3 hafta önce
CSS Grid ve Flexbox: Modern Sayfa Düzenleri
CSS Uzmanı
930K görüntüleme • 1 ay önce
Git ve GitHub Kullanımı: Versiyon Kontrolü
Dev Tools
512K görüntüleme • 2 hafta önce
SQL Veritabanı: CRUD İşlemleri ve İlişkisel Tablolar
Veri Yönetimi
380K görüntüleme • 3 hafta önce
Video Yükle
×
Video Dosyası
Video dosyanızı sürükleyin veya seçmek için tıklayın
Video Başlığı
Açıklama
Etiketler
Kategori
Kategori seçin
Eğitim
Eğlence
Müzik
Teknoloji
Oyun
Spor
Yükle
${fileName}
`; } }); // Video kartları için tıklama işlevselliği const videoCards = document.querySelectorAll('.video-card'); videoCards.forEach(card => { card.addEventListener('click', () => { alert('Bu örnekte video oynatma sayfası henüz eklenmedi.'); }); }); </script>atıyom siteye
at dene
çalışcakmı
attım
çalısmıyo
çalısmıyo
bekle bi dk
https://claude.site/artifacts/0d0a6b16-b18c-4dc7-90f0-5559c1de7255
baksana şuna
böyle mi olcaktı
ayn
göründümü
video sayfası
göründü
ama sitede olmadı
ama sitede olmadı
yanlıs kod
chat gel
tm
bu kanala erişim yetkin yok diyo
nası
l
tekrar dene
aga
bi dk
