Web arayüzü geliştirme yardım(taktik ihtiyacı)

Bu çalışma ile Pablo Picassonun tahtını salladın :katil2:
 
Omega dedi ki:
Ben canlandırıyorumda Timur cum önemli olan @nt nin canlandırması:katil1:
Genişletmek için tıklayın...

Öğrenme süreci böyle oluyor işte. Her tarafında ağaç görüyorsun ve kayboluyorsun. Ancak geri çekilip uzaktan bakınca aslında küçük bir ormanın içinde olduğunu farkediyorsun.

Ben faydaya odaklanıyorum, bir an önce komponentleri girmek ve listeleyebilmek istiyorum. Ama @nt de keyif alabileceği ve uğraştığı zamana değecek kadar iyi görünen bir sonuç istiyor :)
 
taydin dedi ki:
Ben faydaya odaklanıyorum, bir an önce komponentleri girmek ve listeleyebilmek istiyorum. Ama @nt de keyif alabileceği ve uğraştığı zamana değecek kadar iyi görünen bir sonuç istiyor :)
Genişletmek için tıklayın...
İşte bunun içinde klavye başında yada havyanın dumanını çektiğin onlarca yüzlerce saat gerekiyor..
Sonuca ulaşmak içinde asla yılmamak gerekiyor.
Gençler ,bu işlere yeni başlayanlar burada yazılmış bir cümlenin belki onlarca saat uğraşmak bile öğreneilemeyecek değerde olduğunu anlamaları gerekir.
İşte o yüzden Mevlana:
"Ne kadar bilirsen bil söylediklerin karşıdakinin anlayabildiği kadardır"
buyurmuş
*Önemli not:
@nt bu sözün sizinle bir ilgisi kesinlikle yok .Bu herkez için geçerlidir
 
nt dedi ki:
@Omega havya ne alaka abi css den anlıyorsan bana yardımcı olurmusun sayfayı ikiye bölmek istiyorum T atmak istiyorum sayfaya
mevlanaya saygımız var ne dediyse doğrudur.
Genişletmek için tıklayın...
@nt havya orada hardware ile ilgilenenleri anlatmak için kullandım.Hani burası aynı zamanda elektronikle alakalı ya elektronikte' de hayva ile devreler yapılıyorya o bakımdan
CCS de anlamıyorum ben bu tür konularda bu işleri yapan programlar kullanıyorum.İşimi görüyor.CCS,PHP benim ilgi alanım değil
Sorry
 
  • Beğen
Reactions: nt
T atmaktan kasıt nedir anlamadım ama ekrani iki bağımsız bölüme ayırmak için HTML'de div kullanılır. CSS ile de iki div'in yan yana konumlanmasını sağlarsın ( display: inline; veya display: inline-block; )

1704536398206.png
 
Şurada virgül yok, o yüzden CSS uygulanmıyor muhtemelen

1704539108954.png
 
  • Sevgi
Reactions: nt
Her butonun ayrı ayrı css kodu var. Gir içine padding filan ver yanlara. Daha da iyisi bunların hepsini kapsayan bir div var ise oradan tek komut ile hepsini aynı yapabilirsin diye düşünüyorum.

Sen varya denizi geçip derede boğulan cinslerdensin. Herhalde yaptığın işin çok zor olduğunu düşündüğün için basit şeylere odaklanamıyorsun. Veritabanını, phyton kodlamalarını bitirip bir kutuya genişlik verememek nedir yav? :katil2:
 
  • Haha
Reactions: nt
nt dedi ki:
CSS,HTML,JS: 
{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <title>OpenStockMate - Giriş Sayfası</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;

        }
        body {
            background: url('/home/n/Desktop/3.jpg') no-repeat center center fixed;
            background-size: cover;
            position: center;

        }
       
        .container {
            display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin-top: 80px;
        }
       
        .form {
            background-color: #ffffffe1;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            width: 400px;
        }
       
        .form-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
       
        .form-group {
            margin-bottom: 20px;
        }
       
        .form-group label {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
       
        .form-group input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
       
        .form-group .password-group {
            position: relative;
        }

        .form-group .password-group input {
            width: calc(100% - 30px);
        }

        .form-group .password-group .password-toggle {
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .form-group input[type="submit"] {
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
       
        .form-group input[type="submit"]:hover {
            background-color: #555;
        }
       
        .form-group .form-text {
            font-size: 14px;
            color: #888;
            margin-top: 5px;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #343a40;
            color: #fff;
            padding: 10px;
            text-align: center;
            }
            .header {
                position: fixed;
    top: 0;
    width: 100%;
    background-color: #343a40;
    color: #fff;
    padding: 10px;
    text-align: center;
}
       
    </style>
</head>
<body>
    <header>
        <div>
        <nav>
            <a class="navbar-brand" href="{% url 'home' %}">
                <img class="logo" src="/home/n/Desktop/logo.png" alt="OpenStockMate Logo" height="60">
            </a>
        </nav>
        </div>
    <div class="container">
        <form class="form" action="{% url 'login' %}" method="POST" onsubmit="return validateForm()">
            {% csrf_token %}
            <h2 class="form-title">Kullanıcı Girişi</h2>
            <div class="form-group">
                <label for="username">Kullanıcı Adı veya E-posta:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Şifre:</label>
                <div class="password-group">
                    <input type="password" id="password" name="password" required>
                    <span class="password-toggle" onclick="togglePasswordVisibility()">&#128584;</span>
                </div>
            </div>
            <div class="form-group">
                <input type="submit" value="Giriş Yap">
                <p class="form-text">Hesabınız yok mu? <a href="{% url 'register' %}">Kaydol</a></p>
            </div>
        </form>
    </div>
    <footer class="footer">
        <p>&copy;2023@mekatronik.org - Open Stock Mate - Komponent envanter uygulaması.</p>
    </footer>
</body>
</html>

    <script>
        function togglePasswordVisibility() {
            var passwordField = document.getElementById('password');
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
            } else {
                passwordField.type = 'password';
            }
        }
        function validateForm() {
            var usernameField = document.getElementById('username');
            var passwordField = document.getElementById('password');

            if (usernameField.value.trim() === '' || passwordField.value.trim() === '') {
            alert('Kullanıcı adı ve şifre boş olamaz.');
            return false;
    }

            if (passwordField.value.trim().length < 6) {
            alert('Şifre en az 6 karakter olmalıdır.');
            return false;
    }

    return true;
}
document.addEventListener("visibilitychange", function() {
            if (document.visibilityState === 'hidden') {
                document.title = "Nerdesin Geri dön :(";
                document.classList.add("blink");
            } else {
                document.title = "";
                footerText.classList.remove("blink");
               
            }
        });
    </script>
Genişletmek için tıklayın...
Header ı kapatmamışsın. </header>
 
  • Haha
Reactions: nt
min-height: 100vh; Bunu ilk defa gördüm. Ne işe yaradığını tam anlayamadım.
Ya background resminin yüksekliğini container a göre ayarlıyor, yada container ın yüksekliğini background resmine göre ayarlıyor.
İksinden biri sayfaya göre büyük olduğunda scroll çubuğunun çıkmasına neden oluyor. Benim tahminim resim büyük, container da resme uyuyor. Eğer min-height: 100vh; bunu min-height: 80%; bununla değiştirirsek scroll çubuğu kayboluyor.

HTML: 
.container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin-top: 80px;
        }

HTML: 
.container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80%;
            margin-top: 80px;
        }
 
  • Sevgi
Reactions: nt
nt dedi ki:
başka sekmeye geçince sayfa sana nerdesin diye soruyor :)

28571 eklentisine bak
Genişletmek için tıklayın...
Konuşurken kulaklarımız alışsa da yazılırken gözümüze batıyor. Gerek web sitelerinde olsun, gerek gazete, gerek bir reklam broşürü...
Eğer yazılı bir yerlerde "yazım yanlışı" varsa direk göze batıyor.
 
Ben o maymunu input içine almıştım. Neden yine dışarıda?
 
  • Haha
Reactions: nt
nt dedi ki:
usta senin dosyaları açamadım.
Sana zahmet kodu yapıştır burdan alıyım :)
Genişletmek için tıklayın...
Html li notpad de bile açabilirsin. Açamıyorsan bırak bu işleri pyhton a dön geri. Tembel teneke.

Eve geçince atarım kodu.
 
  • Beğen
Reactions: nt
Mail adresi isteyeceksin, o mail database de kayıtlı ise şifre sıfırlama linki göndereceksin.
 
  • Beğen
Reactions: nt
başta @taydin, sen olmasan ne faradayı bilirdim, ne matematikde ilerlerdim. ;) Geri dönüp bakınca, gerçekten büyük bir ilerleme kaydettim.

Ayrıca @Gokrtl sanada yardımlarından ve sabrından dolayı de teşekkür etmek istiyorum.

Hepinizin katkılarıyla, bu açık kaynaklı proje üzerindeki çalışmalarımız daha anlamlı ve başarılı hale geliyor.

Her birinizin yardımı ve SABRI benim için değerli.

Teşekkürler!
 
nt dedi ki:
başta @taydin, sen olmasan ne faradayı bilirdim, ne matematikde ilerlerdim. ;) Geri dönüp bakınca, gerçekten büyük bir ilerleme kaydettim.

Ayrıca @Gokrtl sanada yardımlarından ve sabrından dolayı de teşekkür etmek istiyorum.

Hepinizin katkılarıyla, bu açık kaynaklı proje üzerindeki çalışmalarımız daha anlamlı ve başarılı hale geliyor.

Her birinizin yardımı ve SABRI benim için değerli.

Teşekkürler!
Genişletmek için tıklayın...
Hee, beni de zopaynan dov. Buldun tabi kucuk, dov bakalim. :kuskun1:
 
  • Haha
Reactions: nt
Djangoyu kurdum, komponent çekmecesi de klavyenin yanında, bekliyorum :cheeky4:
 
  • Beğen
Reactions: nt
Cevaplamak için giriş yap veya kayıt ol.

Çevrimiçi personel

Çevrimiçi üyeler

Toplam: 180 (üye: 16, misafir: 164)
Robotlar: 150

Forum istatistikleri

Konular
6,977
Mesajlar
119,203
Üyeler
2,834
Son üye
Tulpar

Bu sayfayı paylaş

Son kaynaklar

Son profil mesajları

hakan8470
hakan8470 wrote on Dede's profile.
1717172721760.png
Dedecim bu gul mu karanfil mi? Gerci ne farkeder onu da anlamam. Gerci bunun anlamini da bilmem :gulus2:
•••
L
Lyewor_ wrote on hakan8470's profile.
Takip edilmeye başlanmışım :D ❤️
•••
Hüsnü03
Hüsnü03
Merhaba elektronik tutsakları...
•••
L
Lyewor_ wrote on taydin's profile.
Merhabalar. Elektrik laboratuvarınız varsa bunun hakkında bir konunuz var mı acaba? Sizin laboratuvarınızı merak ettim de :)
•••
L
Lyewor_ wrote on taydin's profile.
Merhabalar forumda yeniyim! Bir sorum olacaktı lcr meterler hakkında. Hem bobini ölçen hemde bobin direnci ölçen bir lcr meter var mı acaba?
•••
Back
Top