Dijital Saat Tasarımı //Eagleweb #2

Eagleweb

Kıdemli Üye
8 May 2021
2,120
1,151
localhost/e8
Merhaba,
Dostlar, Bilişim de, yazılımı öğrenmek için bol bol kod incelemeniz gerekmektedir. Bunun için bugün dijital saat tasarımı yapacağım Haydi Başlayalım ;

Dostlar, Öncelikle hareket barındıran web site tabanlı her uygulamada JS vardır, bunun yanında ben saatimi web sitesinde gözükmesini istediğim için, HTML Ve CSS Kullandım Kodlar ve son görünüm aşağıdaki gibidir ayrıca virus total linki de Aşağıda bulunmakta...



logo.png



HTML Görünüm Kodu


bb470fi.PNG
HTML:
<div class="clock">
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">:</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">:</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
</div>




CSS İçerik Kodu

89iqlnu.PNG

CSS:
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg: hsl(var(--hue),10%,90%);
    --fg: hsl(var(--hue),10%,10%);
    --primary: hsl(var(--hue),90%,55%);
    --shadow: hsl(var(--hue),90%,35%);
    font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body {
    background: var(--bg);
    color: var(--fg);
    font: 1em/1.5 Spartan, sans-serif;
    height: 100vh;
    display: grid;
    place-items: center;
}
.clock {
    background-color: var(--primary);
    background-image: linear-gradient(-45deg,hsla(var(--hue),10%,10%,0),hsla(var(--hue),10%,10%,0.2));
    border-radius: 0.25rem;
    box-shadow: 0 0 0 0.1rem hsla(var(--hue),10%,10%,0.2) inset;
    color: hsl(var(--hue),10%,100%);
    display: flex;
    justify-content: center;
    font-size: 2em;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}
.clock__digit {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-shadow:
        0 0 0 var(--shadow),
        0 0 0 var(--shadow),
        1px 1px 0 var(--shadow),
        2px 2px 0 var(--shadow),
        3px 3px 0 var(--shadow),
        3px 3px 0 var(--shadow),
        4px 4px 0 var(--shadow);
    width: 1ch;
}
.clock__digit:not(:nth-child(3n)) {
    margin-top: 0.25rem;
}
.clock__digit--bounce {
    animation: bounce 0.5s ease-in;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),10%,10%);
        --fg: hsl(var(--hue),10%,90%);
    }
}

/* Animations */
@keyframes bounce {
    from, to {
        animation-timing-function: ease-in;
        text-shadow:
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            1px 1px 0 var(--shadow),
            2px 2px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            4px 4px 0 var(--shadow);
        transform: translate(0,0);
    }
    33% {
        animation-timing-function: ease-out;
        text-shadow:
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            1px 1px 0 var(--shadow);
        transform: translate(4px,4px);
    }
    67% {
        animation-timing-function: ease-in;
        text-shadow:
            1px 1px 0 var(--shadow),
            2px 2px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            4px 4px 0 var(--shadow),
            5px 5px 0 var(--shadow),
            6px 6px 0 var(--shadow);
        transform: translate(-2px,-2px);
    }
}



JS Hareket Kodu


5yv04bd.PNG


JavaScript:
window.addEventListener("DOMContentLoaded",() => {
    const clock = new BouncyEmbossedClock(".clock");
});

class BouncyEmbossedClock {
    constructor(el) {
        this.el = document.querySelector(el);
        this.els = this.el ? this.el.querySelectorAll(".clock__digit") : [];
        this.digits = [];
        this.to = null;
        this.dto = [
            [null,null,null],
            [null,null,null],
            [null,null],
            [null,null,null],
            [null,null,null],
            [null,null],
            [null,null,null],
            [null,null,null],
        ];
        this.staticUpdate();
        this.update();
    }
    getTime() {
        const time = new Date();
        const hms = [
            time.getHours(),
            time.getMinutes(),
            time.getSeconds()
        ];

        return hms.map(u => u < 10 ? `0${u}` : `${u}`).join(":").split("");   
    }
    staticUpdate() {
        if (this.els) {
            this.digits = this.getTime();
            this.digits.forEach((d,i) => {
                this.els[i].textContent = d;
            });
        }
    }
    update() {
        if (this.els) {
            // get the time
            const display = this.getTime();
            const bounce = "clock__digit--bounce";
            const baseDelay = 350;
            const delayDec = 50;

            // display the digits
            display.forEach((d,i) => {
                if (+d > +this.digits[i] || +d === 0 && +this.digits[i] !== 0) {
                    const colonElCL = display[i + 1] === ":" ? this.els[i + 1].classList : null;
                    const el = this.els[i];
                    const timeout = baseDelay - delayDec * i;

                    this.dto[i].forEach(t => {
                        clearTimeout(t);
                    });

                    // run the animation
                    this.dto[i][0] = setTimeout(() => {
                        el.classList.add(bounce);
                    }, timeout);

                    // show the next digit
                    this.dto[i][1] = setTimeout(() => {
                        el.textContent = d;
                    }, timeout + 167);

                    // kill the animation
                    this.dto[i][2] = setTimeout(() => {
                        el.classList.remove(bounce);
                    }, timeout + 500);

                    // colon animation (if applicable)
                    if (colonElCL) {
                        this.dto[i + 1].forEach(t => {
                            clearTimeout(t);
                        });

                        this.dto[i + 1][0] = setTimeout(() => {
                             colonElCL.add(bounce);
                        }, timeout - delayDec);

                        this.dto[i + 1][1] = setTimeout(() => {
                             colonElCL.remove(bounce);
                        }, (timeout - delayDec) + 500);
                    }
                }

                this.digits[i] = d;
            });

            // loop
            clearTimeout(this.to);
            this.to = setTimeout(this.update.bind(this),1e3);
        }
    }
}

GÖRÜNÜMÜ
is6640o.PNG



İNDİRME LİNKİ = Dijital_Saat_ugulamsai_eagleweb.zip dosyasını indir - download

VİRUS TOTAL VİRÜS TARAMA SONUCU LİNKİ = VirusTotal (09ba81db98b983d4064b952e2d42afdc4e3ad274b9b04de2dd7d8035e9e40c6f )
 

Phoenix.py

Katılımcı Üye
9 Tem 2021
568
292
THT
Merhaba,
Dostlar, Bilişim de, yazılımı öğrenmek için bol bol kod incelemeniz gerekmektedir. Bunun için bugün dijital saat tasarımı yapacağım Haydi Başlayalım ;

Dostlar, Öncelikle hareket barındıran web site tabanlı her uygulamada JS vardır, bunun yanında ben saatimi web sitesinde gözükmesini istediğim için, HTML Ve CSS Kullandım Kodlar ve son görünüm aşağıdaki gibidir ayrıca virus total linki de Aşağıda bulunmakta...



logo.png



HTML Görünüm Kodu


bb470fi.PNG
HTML:
<div class="clock">
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">:</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">:</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
</div>




CSS İçerik Kodu

89iqlnu.PNG

CSS:
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg: hsl(var(--hue),10%,90%);
    --fg: hsl(var(--hue),10%,10%);
    --primary: hsl(var(--hue),90%,55%);
    --shadow: hsl(var(--hue),90%,35%);
    font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body {
    background: var(--bg);
    color: var(--fg);
    font: 1em/1.5 Spartan, sans-serif;
    height: 100vh;
    display: grid;
    place-items: center;
}
.clock {
    background-color: var(--primary);
    background-image: linear-gradient(-45deg,hsla(var(--hue),10%,10%,0),hsla(var(--hue),10%,10%,0.2));
    border-radius: 0.25rem;
    box-shadow: 0 0 0 0.1rem hsla(var(--hue),10%,10%,0.2) inset;
    color: hsl(var(--hue),10%,100%);
    display: flex;
    justify-content: center;
    font-size: 2em;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}
.clock__digit {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-shadow:
        0 0 0 var(--shadow),
        0 0 0 var(--shadow),
        1px 1px 0 var(--shadow),
        2px 2px 0 var(--shadow),
        3px 3px 0 var(--shadow),
        3px 3px 0 var(--shadow),
        4px 4px 0 var(--shadow);
    width: 1ch;
}
.clock__digit:not(:nth-child(3n)) {
    margin-top: 0.25rem;
}
.clock__digit--bounce {
    animation: bounce 0.5s ease-in;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),10%,10%);
        --fg: hsl(var(--hue),10%,90%);
    }
}

/* Animations */
@keyframes bounce {
    from, to {
        animation-timing-function: ease-in;
        text-shadow:
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            1px 1px 0 var(--shadow),
            2px 2px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            4px 4px 0 var(--shadow);
        transform: translate(0,0);
    }
    33% {
        animation-timing-function: ease-out;
        text-shadow:
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            1px 1px 0 var(--shadow);
        transform: translate(4px,4px);
    }
    67% {
        animation-timing-function: ease-in;
        text-shadow:
            1px 1px 0 var(--shadow),
            2px 2px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            4px 4px 0 var(--shadow),
            5px 5px 0 var(--shadow),
            6px 6px 0 var(--shadow);
        transform: translate(-2px,-2px);
    }
}



JS Hareket Kodu


5yv04bd.PNG


JavaScript:
window.addEventListener("DOMContentLoaded",() => {
    const clock = new BouncyEmbossedClock(".clock");
});

class BouncyEmbossedClock {
    constructor(el) {
        this.el = document.querySelector(el);
        this.els = this.el ? this.el.querySelectorAll(".clock__digit") : [];
        this.digits = [];
        this.to = null;
        this.dto = [
            [null,null,null],
            [null,null,null],
            [null,null],
            [null,null,null],
            [null,null,null],
            [null,null],
            [null,null,null],
            [null,null,null],
        ];
        this.staticUpdate();
        this.update();
    }
    getTime() {
        const time = new Date();
        const hms = [
            time.getHours(),
            time.getMinutes(),
            time.getSeconds()
        ];

        return hms.map(u => u < 10 ? `0${u}` : `${u}`).join(":").split("");  
    }
    staticUpdate() {
        if (this.els) {
            this.digits = this.getTime();
            this.digits.forEach((d,i) => {
                this.els[i].textContent = d;
            });
        }
    }
    update() {
        if (this.els) {
            // get the time
            const display = this.getTime();
            const bounce = "clock__digit--bounce";
            const baseDelay = 350;
            const delayDec = 50;

            // display the digits
            display.forEach((d,i) => {
                if (+d > +this.digits[i] || +d === 0 && +this.digits[i] !== 0) {
                    const colonElCL = display[i + 1] === ":" ? this.els[i + 1].classList : null;
                    const el = this.els[i];
                    const timeout = baseDelay - delayDec * i;

                    this.dto[i].forEach(t => {
                        clearTimeout(t);
                    });

                    // run the animation
                    this.dto[i][0] = setTimeout(() => {
                        el.classList.add(bounce);
                    }, timeout);

                    // show the next digit
                    this.dto[i][1] = setTimeout(() => {
                        el.textContent = d;
                    }, timeout + 167);

                    // kill the animation
                    this.dto[i][2] = setTimeout(() => {
                        el.classList.remove(bounce);
                    }, timeout + 500);

                    // colon animation (if applicable)
                    if (colonElCL) {
                        this.dto[i + 1].forEach(t => {
                            clearTimeout(t);
                        });

                        this.dto[i + 1][0] = setTimeout(() => {
                             colonElCL.add(bounce);
                        }, timeout - delayDec);

                        this.dto[i + 1][1] = setTimeout(() => {
                             colonElCL.remove(bounce);
                        }, (timeout - delayDec) + 500);
                    }
                }

                this.digits[i] = d;
            });

            // loop
            clearTimeout(this.to);
            this.to = setTimeout(this.update.bind(this),1e3);
        }
    }
}

GÖRÜNÜMÜ
is6640o.PNG



İNDİRME LİNKİ = Dijital_Saat_ugulamsai_eagleweb.zip dosyasını indir - download

VİRUS TOTAL VİRÜS TARAMA SONUCU LİNKİ = VirusTotal (09ba81db98b983d4064b952e2d42afdc4e3ad274b9b04de2dd7d8035e9e40c6f )
Elinize sağlık hocam. :)
 

'The Wolf

Kıdemli Üye
22 Nis 2021
4,043
2,565
Tanrı dağı
Merhaba,
Dostlar, Bilişim de, yazılımı öğrenmek için bol bol kod incelemeniz gerekmektedir. Bunun için bugün dijital saat tasarımı yapacağım Haydi Başlayalım ;

Dostlar, Öncelikle hareket barındıran web site tabanlı her uygulamada JS vardır, bunun yanında ben saatimi web sitesinde gözükmesini istediğim için, HTML Ve CSS Kullandım Kodlar ve son görünüm aşağıdaki gibidir ayrıca virus total linki de Aşağıda bulunmakta...



logo.png



HTML Görünüm Kodu


bb470fi.PNG
HTML:
<div class="clock">
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">:</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">:</span>
    <span class="clock__digit">0</span>
    <span class="clock__digit">0</span>
</div>




CSS İçerik Kodu

89iqlnu.PNG

CSS:
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg: hsl(var(--hue),10%,90%);
    --fg: hsl(var(--hue),10%,10%);
    --primary: hsl(var(--hue),90%,55%);
    --shadow: hsl(var(--hue),90%,35%);
    font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body {
    background: var(--bg);
    color: var(--fg);
    font: 1em/1.5 Spartan, sans-serif;
    height: 100vh;
    display: grid;
    place-items: center;
}
.clock {
    background-color: var(--primary);
    background-image: linear-gradient(-45deg,hsla(var(--hue),10%,10%,0),hsla(var(--hue),10%,10%,0.2));
    border-radius: 0.25rem;
    box-shadow: 0 0 0 0.1rem hsla(var(--hue),10%,10%,0.2) inset;
    color: hsl(var(--hue),10%,100%);
    display: flex;
    justify-content: center;
    font-size: 2em;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}
.clock__digit {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-shadow:
        0 0 0 var(--shadow),
        0 0 0 var(--shadow),
        1px 1px 0 var(--shadow),
        2px 2px 0 var(--shadow),
        3px 3px 0 var(--shadow),
        3px 3px 0 var(--shadow),
        4px 4px 0 var(--shadow);
    width: 1ch;
}
.clock__digit:not(:nth-child(3n)) {
    margin-top: 0.25rem;
}
.clock__digit--bounce {
    animation: bounce 0.5s ease-in;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),10%,10%);
        --fg: hsl(var(--hue),10%,90%);
    }
}

/* Animations */
@keyframes bounce {
    from, to {
        animation-timing-function: ease-in;
        text-shadow:
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            1px 1px 0 var(--shadow),
            2px 2px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            4px 4px 0 var(--shadow);
        transform: translate(0,0);
    }
    33% {
        animation-timing-function: ease-out;
        text-shadow:
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            0 0 0 var(--shadow),
            1px 1px 0 var(--shadow);
        transform: translate(4px,4px);
    }
    67% {
        animation-timing-function: ease-in;
        text-shadow:
            1px 1px 0 var(--shadow),
            2px 2px 0 var(--shadow),
            3px 3px 0 var(--shadow),
            4px 4px 0 var(--shadow),
            5px 5px 0 var(--shadow),
            6px 6px 0 var(--shadow);
        transform: translate(-2px,-2px);
    }
}



JS Hareket Kodu


5yv04bd.PNG


JavaScript:
window.addEventListener("DOMContentLoaded",() => {
    const clock = new BouncyEmbossedClock(".clock");
});

class BouncyEmbossedClock {
    constructor(el) {
        this.el = document.querySelector(el);
        this.els = this.el ? this.el.querySelectorAll(".clock__digit") : [];
        this.digits = [];
        this.to = null;
        this.dto = [
            [null,null,null],
            [null,null,null],
            [null,null],
            [null,null,null],
            [null,null,null],
            [null,null],
            [null,null,null],
            [null,null,null],
        ];
        this.staticUpdate();
        this.update();
    }
    getTime() {
        const time = new Date();
        const hms = [
            time.getHours(),
            time.getMinutes(),
            time.getSeconds()
        ];

        return hms.map(u => u < 10 ? `0${u}` : `${u}`).join(":").split("");  
    }
    staticUpdate() {
        if (this.els) {
            this.digits = this.getTime();
            this.digits.forEach((d,i) => {
                this.els[i].textContent = d;
            });
        }
    }
    update() {
        if (this.els) {
            // get the time
            const display = this.getTime();
            const bounce = "clock__digit--bounce";
            const baseDelay = 350;
            const delayDec = 50;

            // display the digits
            display.forEach((d,i) => {
                if (+d > +this.digits[i] || +d === 0 && +this.digits[i] !== 0) {
                    const colonElCL = display[i + 1] === ":" ? this.els[i + 1].classList : null;
                    const el = this.els[i];
                    const timeout = baseDelay - delayDec * i;

                    this.dto[i].forEach(t => {
                        clearTimeout(t);
                    });

                    // run the animation
                    this.dto[i][0] = setTimeout(() => {
                        el.classList.add(bounce);
                    }, timeout);

                    // show the next digit
                    this.dto[i][1] = setTimeout(() => {
                        el.textContent = d;
                    }, timeout + 167);

                    // kill the animation
                    this.dto[i][2] = setTimeout(() => {
                        el.classList.remove(bounce);
                    }, timeout + 500);

                    // colon animation (if applicable)
                    if (colonElCL) {
                        this.dto[i + 1].forEach(t => {
                            clearTimeout(t);
                        });

                        this.dto[i + 1][0] = setTimeout(() => {
                             colonElCL.add(bounce);
                        }, timeout - delayDec);

                        this.dto[i + 1][1] = setTimeout(() => {
                             colonElCL.remove(bounce);
                        }, (timeout - delayDec) + 500);
                    }
                }

                this.digits[i] = d;
            });

            // loop
            clearTimeout(this.to);
            this.to = setTimeout(this.update.bind(this),1e3);
        }
    }
}

GÖRÜNÜMÜ
is6640o.PNG



İNDİRME LİNKİ = Dijital_Saat_ugulamsai_eagleweb.zip dosyasını indir - download

VİRUS TOTAL VİRÜS TARAMA SONUCU LİNKİ = VirusTotal (09ba81db98b983d4064b952e2d42afdc4e3ad274b9b04de2dd7d8035e9e40c6f )
Eline Sağlık.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.