28.10.2026 Нам исполнился год! | Переезд

05.10.2026 Новый дизайн - какой он?

18.08.2026 [событие] Шесть граней (организационная)

2026, мистика, 18+
Kindred Spirits

Kindred Spirits

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Kindred Spirits » Блоги » Органайзер Курта Даймлера

Органайзер Курта Даймлера

Страница: 1

Сообщений 1 страница 3 из 3

1

  • Автор: Kurt Daimler
  • Участник
  • Kurt Daimler
  • Курт Даймлер, 18

    $$$

  • Сообщений: 475
  • Уважение: +388
  • Деньги: 810
  • Игровые посты: 0
  • Последний визит:
    05-11-2026 23:10:56
  • Two bodies, one soul

[html]<style>
.phone-demo {
    width: 360px;
    height: 760px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    border-radius: 48px;
    background: #000;

    border: 5px solid #171717;

    box-shadow:
        0 18px 45px rgba(0,0,0,.38),
        inset 0 0 0 1px rgba(255,255,255,.08);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: #fff;
}

.phone-demo * {
    box-sizing: border-box;
}

.phone-demo .island {
    position: absolute;
    z-index: 20;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 125px;
    height: 34px;
    background: #000;
    border-radius: 20px;
}

.phone-demo .screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* -------------------- ЭКРАН БЛОКИРОВКИ -------------------- */

.phone-demo .lock-screen {
    align-items: center;
    justify-content: center;
    padding-top: 0;
    background-image: url("https://upforme.ru/uploads/001c/82/f2/211/414718.png");
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.phone-demo .time {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 78px;
    font-weight: 300;
    letter-spacing: -4px;
    line-height: 1;

    font-variant-numeric: tabular-nums;

    text-shadow: 0 3px 15px rgba(0,0,0,.35);
}

.phone-demo .date {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0,0,0,.3);
}

.phone-demo .hint {
    position: absolute;
    bottom: 75px;
    font-size: 14px;
    opacity: .9;
    animation: phonePulse 2s infinite;
}

@keyframes phonePulse {
    0%,100% {
        opacity: .55;
    }
    50% {
        opacity: 1;
    }
}

/* -------------------- PIN -------------------- */

.phone-demo .pin-screen {
    display: none;
    align-items: center;
    padding-top: 100px;
    background: #111;
}

.phone-demo .pin-title {
    font-size: 25px;
    font-weight: 600;
}

.phone-demo .pin-subtitle {
    margin-top: 8px;
    font-size: 14px;
    color: #aaa;
}

.phone-demo .dots {
    display: flex;
    gap: 13px;
    margin-top: 25px;
}

.phone-demo .dot {
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.phone-demo .dot.active {
    background: #fff;
}

.phone-demo .keypad {
    width: 245px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 38px;
}

.phone-demo .key {
    width: 68px;
    height: 68px;
    border: none;
    border-radius: 50%;
    background: #292929;
    color: #fff;
    font-size: 27px;
    cursor: pointer;
    transition: .12s;
}

.phone-demo .key:hover {
    background: #3a3a3a;
}

.phone-demo .key:active {
    transform: scale(.9);
    background: #555;
}

.phone-demo .key.empty {
    visibility: hidden;
}

.phone-demo .error {
    margin-top: 20px;
    font-size: 14px;
    color: #ff453a;
    opacity: 0;
    transition: .2s;
}

.phone-demo .error.show {
    opacity: 1;
}

/* -------------------- РАЗБЛОКИРОВАННЫЙ ЭКРАН -------------------- */

.phone-demo .unlocked {
    display: none;
    align-items: flex-start;
    justify-content: flex-start;

    /* НОВЫЙ ФОН */
    background-image: url("https://upforme.ru/uploads/001c/82/f2/211/600122.jpg");
    background-size: cover;
    background-position: center;
}

/* -------------------- ИКОНКИ -------------------- */

.phone-demo .app-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 23px 10px;
    padding: 70px 18px 0;
    box-sizing: border-box;
    align-content: start;
}

.phone-demo .app {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.phone-demo #musicApp {
    cursor: pointer;
}

.phone-demo .app-icon {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 5px 15px rgba(0,0,0,.18);
    transition: transform .12s;
}

.phone-demo .app:active .app-icon {
    transform: scale(.88);
}

.phone-demo .app-name {
    margin-top: 7px;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,.7);
}

/* Иконка часов */

.phone-demo .clock-icon {
    position: relative;
    background: #fff;
}

.phone-demo .clock-icon:before {
    content: "";
    width: 39px;
    height: 39px;
    border: 3px solid #111;
    border-radius: 50%;
    position: absolute;
}

.phone-demo .clock-icon:after {
    content: "";
    width: 3px;
    height: 15px;
    background: #111;
    position: absolute;
    top: 15px;
    left: 27px;
    transform-origin: bottom;
    transform: rotate(35deg);
    border-radius: 3px;
}

/* Камера */

.phone-demo .camera-icon {
    background: linear-gradient(145deg,#222,#666);
}

/* Заметки */

.phone-demo .notes-icon {
    background: #ffe66d;
}

/* Файлы */

.phone-demo .files-icon {
    background: #65b8ff;
}

/* Органайзер */

.phone-demo .organizer-icon {
    background: #ff6b81;
}

/* -------------------- DOCK -------------------- */

.phone-demo .dock {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 48px;
    height: 82px;
    border-radius: 28px;
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.phone-demo .dock .app-icon {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    font-size: 27px;
}

.phone-demo .home-bar {
    position: absolute;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%);
    width: 125px;
    height: 5px;
    border-radius: 10px;
    background: rgba(255,255,255,.95);
}

.phone-demo .lock-again {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
}

/* -------------------- ОРГАНАЙЗЕР -------------------- */

.phone-demo .organizer-screen {
    display: none;
    background: #f5f5f7;
    color: #111;
}

.phone-demo .organizer-header {
    height: 90px;
    padding: 45px 18px 0;
    display: flex;
    align-items: center;
    position: relative;
}

.phone-demo .organizer-back {
    border: none;
    background: none;
    color: #007aff;
    font-size: 17px;
    cursor: pointer;
    padding: 0;
}

.phone-demo .organizer-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
}

.phone-demo .organizer-content {
    padding: 28px 20px 70px;
    overflow-y: auto;
}

.phone-demo .organizer-date {
    color: #888;
    font-size: 14px;
    margin-bottom: 6px;
}

.phone-demo .organizer-big-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.phone-demo .organizer-card {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

.phone-demo .event-time {
    color: #007aff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.phone-demo .event-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.phone-demo .event-description {
    font-size: 13px;
    color: #777;
    line-height: 1.4;
}

/* -------------------- ЗАМЕТКИ -------------------- */

.phone-demo .notes-screen {
    display: none;
    background: #f5f5f7;
    color: #111;
}

.phone-demo .notes-header {
    height: 90px;
    padding: 45px 18px 0;
    display: flex;
    align-items: center;
    position: relative;
}

.phone-demo .notes-back {
    border: none;
    background: none;
    color: #007aff;
    font-size: 17px;
    cursor: pointer;
    padding: 0;
}

.phone-demo .notes-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
}

.phone-demo .notes-list {
    padding: 25px 18px 70px;
    overflow-y: auto;
}

.phone-demo .note-link {
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 18px;
    padding: 17px;
    margin-bottom: 12px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    transition: transform .12s;
}

.phone-demo .note-link:active {
    transform: scale(.98);
}

.phone-demo .note-link-title {
    font-size: 17px;
    font-weight: 600;
    color: #111;
    margin-bottom: 5px;
}

.phone-demo .note-link-preview {
    font-size: 13px;
    color: #777;
    line-height: 1.4;
}

/* -------------------- ПРОСМОТР ЗАМЕТКИ -------------------- */

.phone-demo .note-view-screen {
    display: none;
    background: #f5f5f7;
    color: #111;
}

.phone-demo .note-view-header {
    height: 90px;
    padding: 45px 18px 0;
    display: flex;
    align-items: center;
}

.phone-demo .note-view-back {
    border: none;
    background: none;
    color: #007aff;
    font-size: 17px;
    cursor: pointer;
    padding: 0;
}

.phone-demo .note-view-content {
    padding: 28px 20px 70px;
    overflow-y: auto;
}

.phone-demo .note-view-title {
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 20px;
}

.phone-demo .note-view-text {
    font-size: 16px;
    line-height: 1.6;
    white-space: pre-line;
    color: #333;
}

/* -------------------- АНИМАЦИЯ РАЗБЛОКИРОВКИ -------------------- */

.phone-demo.unlocking {
    animation: unlockAnimation .4s ease;
}

@keyframes unlockAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.025);
    }
    100% {
        transform: scale(1);
    }
}

/* -------------------- МОБИЛЬНАЯ ВЕРСИЯ -------------------- */

@media (max-width: 400px) {
    .phone-demo .app-grid {
        gap: 18px 6px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* -------------------- МУЗЫКА -------------------- */

.phone-demo .music-screen {
    display: none;
    background: #1f2425;
    color: #fff;
}

.phone-demo .music-screen:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 34%, rgba(22,26,27,.12) 48%, #202526 78%, #202526 100%);
    pointer-events: none;
    z-index: 0;
}

.phone-demo .music-topbar {
    position: relative;
    z-index: 5;
    height: 72px;
    padding: 38px 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}

.phone-demo .music-back {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.phone-demo .music-top-actions {
    display: flex;
    gap: 8px;
}

.phone-demo .music-action {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 25px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.phone-demo .music-scroll {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 122px;
}

.phone-demo .music-scroll::-webkit-scrollbar {
    display: none;
}

.phone-demo .music-art {
    width: 272px;
    height: 272px;
    margin: 18px auto 0;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #eef0f2 0%, #e9ecef 62%, #a8abad 100%);
    box-shadow: 0 18px 34px rgba(0,0,0,.27);
}

.phone-demo .music-art:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.38));
}

.phone-demo .music-star {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%,-50%);
    width: 168px;
    height: 168px;
    background: #ff1d3d;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 80% 94%, 50% 70%, 20% 94%, 32% 56%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 12px 13px rgba(0,0,0,.16));
}

.phone-demo .music-hero {
    padding: 18px 18px 0;
}

.phone-demo .music-playlist-title {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.15;
}

.phone-demo .music-playlist-artist {
    margin-top: 7px;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255,255,255,.96);
}

.phone-demo .music-main-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 17px;
}

.phone-demo .music-round {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.11);
    color: #fff;
    font-size: 23px;
    cursor: pointer;
}

.phone-demo .music-play-big {
    flex: 1;
    height: 54px;
    border: 0;
    border-radius: 28px;
    background: #fff;
    color: #1c2021;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.phone-demo .music-track-list {
    margin-top: 20px;
    padding: 0 18px;
}

.phone-demo .music-track {
    min-height: 61px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.phone-demo .music-track:last-child {
    border-bottom: 1px solid rgba(255,255,255,.16);
}

.phone-demo .music-track-star {
    width: 19px;
    flex: 0 0 19px;
    color: rgba(255,255,255,.72);
    font-size: 16px;
}

.phone-demo .music-track-info {
    min-width: 0;
    flex: 1;
}

.phone-demo .music-track-title {
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-demo .music-track-artist {
    margin-top: 4px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-demo .music-more {
    width: 26px;
    text-align: center;
    color: rgba(255,255,255,.72);
    font-size: 18px;
}

.phone-demo .music-bottom {
    position: absolute;
    z-index: 8;
    left: 14px;
    right: 14px;
    bottom: 43px;
    height: 74px;
    border-radius: 38px;
    background: rgba(38,43,44,.92);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 12px 25px rgba(0,0,0,.28);
    display: flex;
    align-items: center;
    padding: 0 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.phone-demo .music-mini-art {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    background: linear-gradient(180deg,#eef0f2 0%,#b1b4b6 100%);
    position: relative;
    overflow: hidden;
    flex: 0 0 48px;
}

.phone-demo .music-mini-art:before {
    content: "";
    position: absolute;
    width: 29px;
    height: 29px;
    left: 9px;
    top: 9px;
    background: #ff1d3d;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 80% 94%, 50% 70%, 20% 94%, 32% 56%, 2% 35%, 39% 35%);
}

.phone-demo .music-mini-info {
    min-width: 0;
    flex: 1;
    margin-left: 11px;
}

.phone-demo .music-mini-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-demo .music-mini-artist {
    margin-top: 3px;
    font-size: 11px;
    color: rgba(255,255,255,.58);
}

.phone-demo .music-mini-play {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 25px;
    width: 35px;
    cursor: pointer;
}

.phone-demo .music-nav {
    position: absolute;
    z-index: 9;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 54px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    align-items: center;
    color: rgba(255,255,255,.78);
    background: rgba(34,39,40,.96);
}

.phone-demo .music-nav-item {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 1.05;
}

.phone-demo .music-nav-icon {
    display: block;
    font-size: 21px;
    margin-bottom: 3px;
}

.phone-demo .music-nav-item.active {
    color: #ff5870;
}

@media (max-width: 400px) {
    .phone-demo .music-art {
        width: 250px;
        height: 250px;
    }

    .phone-demo .music-star {
        width: 154px;
        height: 154px;
    }
}

</style>

<div class="phone-demo" id="phoneDemo">

    <div class="island"></div>

    <!-- ЭКРАН БЛОКИРОВКИ -->

    <div class="screen lock-screen" id="phoneLock">
        <div class="time" id="phoneTime">12:00</div>
        <div class="date">Сегодня</div>
        <div class="hint">Нажмите, чтобы разблокировать</div>
    </div>

    <!-- PIN -->

    <div class="screen pin-screen" id="phonePin">

        <div class="pin-title">Введите код</div>
        <div class="pin-subtitle">Введите 4-значный код</div>

        <div class="dots">
            <div class="dot" id="dot1"></div>
            <div class="dot" id="dot2"></div>
            <div class="dot" id="dot3"></div>
            <div class="dot" id="dot4"></div>
        </div>

        <div class="keypad">

            <button class="key" data-num="1">1</button>
            <button class="key" data-num="2">2</button>
            <button class="key" data-num="3">3</button>

            <button class="key" data-num="4">4</button>
            <button class="key" data-num="5">5</button>
            <button class="key" data-num="6">6</button>

            <button class="key" data-num="7">7</button>
            <button class="key" data-num="8">8</button>
            <button class="key" data-num="9">9</button>

            <button class="key empty"></button>
            <button class="key" data-num="0">0</button>
            <button class="key" id="phoneDelete">⌫</button>

        </div>

        <div class="error" id="phoneError">Неверный код</div>

    </div>

    <!-- ГЛАВНЫЙ ЭКРАН -->

    <div class="screen unlocked" id="phoneUnlocked">

        <div class="app-grid">

            <div class="app">
                <div class="app-icon clock-icon"></div>
                <div class="app-name">Часы</div>
            </div>

            <div class="app">
                <div class="app-icon camera-icon">📷</div>
                <div class="app-name">Камера</div>
            </div>

            <div class="app" id="notesApp">
                <div class="app-icon notes-icon">📝</div>
                <div class="app-name">Заметки</div>
            </div>

            <div class="app">
                <div class="app-icon files-icon">📁</div>
                <div class="app-name">Файлы</div>
            </div>

            <div class="app" id="organizerApp">
                <div class="app-icon organizer-icon">📅</div>
                <div class="app-name">Органайзер</div>
            </div>

        </div>

        <div class="dock">
            <div class="app-icon">☎️</div>
            <div class="app-icon">💬</div>
            <div class="app-icon">🌐</div>
            <div class="app-icon" id="musicApp">🎵</div>
        </div>

        <div class="home-bar"></div>

        <button class="lock-again" id="phoneLockAgain">🔒</button>

    </div>

    <!-- ОРГАНАЙЗЕР -->

    <div class="screen organizer-screen" id="organizerScreen">

        <div class="organizer-header">
            <button class="organizer-back" id="organizerBack">‹ Назад</button>
            <div class="organizer-title">Органайзер</div>
        </div>

        <div class="organizer-content">

            <div class="organizer-date">История</div>
            <div class="organizer-big-title">Важные события</div>

            <div class="organizer-card">
                <div class="event-time">07.09.2025</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=834">Причина нашей ненависти</a></div>
                <div class="event-description">
                    Как мы познакомились.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">11.09.2025</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=841">А можно было просто пройти мимо?</a></div>
                <div class="event-description">
                    Встреча в библиотеке, вернул рубашку.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">05.10.2025</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=850">С Днём Рождения</a></div>
                <div class="event-description">
                    Соблазнила меня пьяненькая прямо в комнате.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">07.10.2025</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=880">Среди разбросанных страниц</a></div>
                <div class="event-description">
                    Стычка в коридоре, первый разговор после той ночи.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">08.10.2025</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=885">И что ему надо на этот раз?</a></div>
                <div class="event-description">
                    Разговор в спортивной кладовке, разрыв сшивки.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">13.10.2025</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=891">4 дня спустя</a></div>
                <div class="event-description">
                    Разговор на лестнице, наш окончательный и бесповоротный разрыв с Косичкой.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">14.11.2025</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=905">Доклад с пристрастием</a></div>
                <div class="event-description">
                    Едем собирать инфу для доклада по Скверне в DYS для девочек.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">20.01.2026</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=906">Take me to Сhurch</a></div>
                <div class="event-description">
                    Разговор по душам с деканшей ведьмаков.
                </div>
            </div>

            <div class="organizer-card">
                <div class="event-time">14.02.2026</div>
                <div class="event-title"><a href="https://kindredspirits.ru/viewtopic.php?id=898">Месть и притяжение</a></div>
                <div class="event-description">
                    Я напился, она воспользовалась.
                </div>
            </div>

        </div>

        <div class="home-bar"></div>

    </div>

    <!-- МУЗЫКА -->

    <div class="screen music-screen" id="musicScreen">

        <div class="music-topbar">
            <button class="music-back" id="musicBack" aria-label="Назад">‹</button>
            <div class="music-top-actions">
                <button class="music-action" aria-label="Поделиться">⇧</button>
                <button class="music-action" aria-label="Ещё">•••</button>
            </div>
        </div>

        <div class="music-scroll">

            <div class="music-art" aria-hidden="true">
                <div class="music-star"></div>
            </div>

            <div class="music-hero">
                <div class="music-playlist-title">Favourite Songs ★</div>
                <div class="music-playlist-artist">Kurt Daimler</div>

                <div class="music-main-controls">
                    <button class="music-round" aria-label="Перемешать">⌘</button>
                    <button class="music-play-big" id="musicPlayBig">▶&nbsp;&nbsp; Play</button>
                    <button class="music-round" aria-label="Скачать">↓</button>
                </div>
            </div>

            <div class="music-track-list">
                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info">
                       <div class="music-track-title"><a href="https://youtu.be/c8zq4kAn_O0?si=m2LjO0b40b-PU2W_" target="_blank" rel="noopener">back to friends</a></div>
                          <div class="music-track-artist">
                             sombr
                          </div>
                       </div>
                    <div class="music-more">•••</div>
                </div>
                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info"><div class="music-track-title"><a href="https://www.youtube.com/watch?v=MYSVMgRr6pw" target="_blank" rel="noopener">Take Me To Church</a></div><div class="music-track-artist">Hozier</div></div>
                    <div class="music-more">•••</div>
                </div>
                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info"><div class="music-track-title"><a href="https://youtu.be/HZnNt9nnEhw?si=xPILyqXnM-QJMgA7" target="_blank" rel="noopener">HONEY (ARE U COMING?)</a></div><div class="music-track-artist">Måneskin</div></div>
                    <div class="music-more">•••</div>
                </div>
                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info"><div class="music-track-title"><a href="https://youtu.be/0-7IHOXkiV8?si=rzCZdpgeZEgdEQqZ" target="_blank" rel="noopener">Way Down We Go</a></div><div class="music-track-artist">KALEO</div></div>
                    <div class="music-more">•••</div>
                </div>
                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info"><div class="music-track-title"><a href="https://youtu.be/OhqUMFj51X0?si=nsHAQYXzVnJUHYOz" target="_blank" rel="noopener">Écoute chérie</a></div><div class="music-track-artist">Vendredi sur Mer</div></div>
                    <div class="music-more">•••</div>
                </div>
                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info"><div class="music-track-title"><a href="https://youtu.be/jd-qI62gNJM?si=bvUOKWu9CvFZvIfH" target="_blank" rel="noopener">Wicked Game</a></div><div class="music-track-artist">Chris Isaak</div></div>
                    <div class="music-more">•••</div>
                </div>

                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info"><div class="music-track-title"><a href="https://youtu.be/GX7f1Btk1yM?si=60ZqfDy3eKK1kMPP" target="_blank" rel="noopener">War Of Hearts</a></div><div class="music-track-artist">RUELLE</div></div>
                    <div class="music-more">•••</div>
                </div>

                <div class="music-track">
                    <div class="music-track-star">★</div>
                    <div class="music-track-info"><div class="music-track-title"><a href="https://youtu.be/MEiVnNNpJLA?si=ixP8Yw1i5NuAb_sx" target="_blank" rel="noopener">Doubt</a></div><div class="music-track-artist">twenty one pilots</div></div>
                    <div class="music-more">•••</div>
                </div>
            </div>

        </div>

        <div class="music-bottom">
            <div class="music-mini-art"></div>
            <div class="music-mini-info">
                <div class="music-mini-title">back to friends</div>
                <div class="music-mini-artist">sombr</div>
            </div>
            <button class="music-mini-play" id="musicMiniPlay" aria-label="Воспроизвести">▶</button>
        </div>

        <div class="music-nav">
            <button class="music-nav-item active"><span class="music-nav-icon">⌂</span>Home</button>
            <button class="music-nav-item"><span class="music-nav-icon">▦</span>New</button>
            <button class="music-nav-item"><span class="music-nav-icon">◉</span>Radio</button>
            <button class="music-nav-item"><span class="music-nav-icon">▣</span>Library</button>
            <button class="music-nav-item"><span class="music-nav-icon">⌕</span>Search</button>
        </div>

        <div class="home-bar"></div>

    </div>

    <!-- СПИСОК ЗАМЕТОК -->

    <div class="screen notes-screen" id="notesScreen">

        <div class="notes-header">
            <button class="notes-back" id="notesBack">‹ Назад</button>
            <div class="notes-title">Заметки</div>
        </div>

        <div class="notes-list">

            <button class="note-link" data-note="1">
                <div class="note-link-title">Важные мысли</div>
                <div class="note-link-preview">
                    Несколько мыслей, которые стоит не забыть...
                </div>
            </button>

            <button class="note-link" data-note="2">
                <div class="note-link-title">Пропавшие преподы</div>
                <div class="note-link-preview">
                    Данные о директоре и бывших деканах...
                </div>
            </button>

            <button class="note-link" data-note="3">
                <div class="note-link-title">Сильвия</div>
                <div class="note-link-preview">
                    Мой фамильяр по сшивке
                </div>
            </button>

            <button class="note-link" data-note="4">
                <div class="note-link-title">kleine Zopf</div>
                <div class="note-link-preview">
                    Мой фамильяр
                </div>
            </button>

            <button class="note-link" data-note="5">
                <div class="note-link-title">Одногруппники</div>
                <div class="note-link-preview">
                    Которые не бесят
                </div>
            </button>

            <button class="note-link" data-note="6">
                <div class="note-link-title">Шефтларн</div>
                <div class="note-link-preview">
                    Друзья и знакомые
                </div>
            </button>

        </div>

        <div class="home-bar"></div>

    </div>

    <!-- ОТКРЫТАЯ ЗАМЕТКА -->

    <div class="screen note-view-screen" id="noteViewScreen">

        <div class="note-view-header">
            <button class="note-view-back" id="noteViewBack">‹ Заметки</button>
        </div>

        <div class="note-view-content">

            <div class="note-view-title" id="noteViewTitle">
                Название
            </div>

            <div class="note-view-text" id="noteViewText">
                Текст заметки
            </div>

        </div>

        <div class="home-bar"></div>

    </div>

</div>

<script>
(function () {

    var correctPin = "0510";
    var enteredPin = "";

    var phone = document.getElementById("phoneDemo");

    var lockScreen = document.getElementById("phoneLock");
    var pinScreen = document.getElementById("phonePin");
    var unlockedScreen = document.getElementById("phoneUnlocked");

    var organizerScreen = document.getElementById("organizerScreen");
    var notesScreen = document.getElementById("notesScreen");
    var noteViewScreen = document.getElementById("noteViewScreen");
    var musicScreen = document.getElementById("musicScreen");

    var organizerApp = document.getElementById("organizerApp");
    var organizerBack = document.getElementById("organizerBack");

    var notesApp = document.getElementById("notesApp");
    var notesBack = document.getElementById("notesBack");
    var noteViewBack = document.getElementById("noteViewBack");
    var musicApp = document.getElementById("musicApp");
    var musicBack = document.getElementById("musicBack");

    var error = document.getElementById("phoneError");
    var deleteButton = document.getElementById("phoneDelete");
    var lockAgain = document.getElementById("phoneLockAgain");

    var time = document.getElementById("phoneTime");

    var noteViewTitle = document.getElementById("noteViewTitle");
    var noteViewText = document.getElementById("noteViewText");

    var dots = [
        document.getElementById("dot1"),
        document.getElementById("dot2"),
        document.getElementById("dot3"),
        document.getElementById("dot4")
    ];

    /* -------------------- ВРЕМЯ -------------------- */

    function updateTime() {

        var now = new Date();

        var hours = String(now.getHours()).padStart(2, "0");
        var minutes = String(now.getMinutes()).padStart(2, "0");

        time.textContent = hours + ":" + minutes;
    }

    updateTime();
    setInterval(updateTime, 1000);

    /* -------------------- БЛОКИРОВКА → PIN -------------------- */

    lockScreen.onclick = function () {

        lockScreen.style.display = "none";
        pinScreen.style.display = "flex";

        enteredPin = "";

        updateDots();

        error.classList.remove("show");
    };

    /* -------------------- ЦИФРЫ PIN -------------------- */

    var keys = document.querySelectorAll(
        ".phone-demo .key[data-num]"
    );

    keys.forEach(function (key) {

        key.onclick = function () {

            if (enteredPin.length >= 4) return;

            enteredPin += key.getAttribute("data-num");

            updateDots();

            error.classList.remove("show");

            if (enteredPin.length === 4) {

                setTimeout(function () {

                    if (enteredPin === correctPin) {

                        unlock();

                    } else {

                        wrongPin();

                    }

                }, 200);

            }

        };

    });

    /* -------------------- ТОЧКИ PIN -------------------- */

    function updateDots() {

        dots.forEach(function (dot, index) {

            if (index < enteredPin.length) {

                dot.classList.add("active");

            } else {

                dot.classList.remove("active");

            }

        });

    }

    /* -------------------- УДАЛЕНИЕ ЦИФРЫ -------------------- */

    deleteButton.onclick = function () {

        enteredPin = enteredPin.slice(0, -1);

        updateDots();

        error.classList.remove("show");

    };

    /* -------------------- НЕВЕРНЫЙ PIN -------------------- */

    function wrongPin() {

        error.classList.add("show");

        enteredPin = "";

        updateDots();

        phone.animate(
            [
                { transform: "translateX(0)" },
                { transform: "translateX(-8px)" },
                { transform: "translateX(8px)" },
                { transform: "translateX(-6px)" },
                { transform: "translateX(6px)" },
                { transform: "translateX(0)" }
            ],
            {
                duration: 300
            }
        );

    }

    /* -------------------- РАЗБЛОКИРОВКА -------------------- */

    function unlock() {

        phone.classList.add("unlocking");

        setTimeout(function () {

            pinScreen.style.display = "none";
            unlockedScreen.style.display = "flex";

            phone.classList.remove("unlocking");

        }, 400);

    }

    /* -------------------- ОРГАНАЙЗЕР -------------------- */

    organizerApp.onclick = function () {

        unlockedScreen.style.display = "none";
        organizerScreen.style.display = "flex";

    };

    organizerBack.onclick = function () {

        organizerScreen.style.display = "none";
        unlockedScreen.style.display = "flex";

    };

    /* -------------------- МУЗЫКА -------------------- */

    musicApp.onclick = function () {

        unlockedScreen.style.display = "none";
        musicScreen.style.display = "flex";

    };

    musicBack.onclick = function () {

        musicScreen.style.display = "none";
        unlockedScreen.style.display = "flex";

    };

    var musicPlayBig = document.getElementById("musicPlayBig");
    var musicMiniPlay = document.getElementById("musicMiniPlay");
    var musicPlaying = false;

    function toggleMusicVisual() {
        musicPlaying = !musicPlaying;
        musicPlayBig.innerHTML = musicPlaying ? "❚❚&nbsp;&nbsp; Pause" : "▶&nbsp;&nbsp; Play";
        musicMiniPlay.textContent = musicPlaying ? "❚❚" : "▶";
    }

    musicPlayBig.onclick = toggleMusicVisual;
    musicMiniPlay.onclick = toggleMusicVisual;

    /* -------------------- ЗАМЕТКИ -------------------- */

    notesApp.onclick = function () {

        unlockedScreen.style.display = "none";
        notesScreen.style.display = "flex";

    };

    notesBack.onclick = function () {

        notesScreen.style.display = "none";
        unlockedScreen.style.display = "flex";

    };

    /* -------------------- СОДЕРЖИМОЕ ЗАМЕТОК -------------------- */

    var notes = {

        "1": {
            title: "Важные мысли",
            text:
               "Иногда самые интересные идеи появляются совершенно неожиданно.\n\n" +
               "Стоит записывать их сразу, чтобы потом можно было спокойно вернуться к ним и посмотреть, что из этого получится.\n\n" +
               "Подарок Сильв на ДР: набор флакончиков для зелий.\n" +
               "Заказать: \"Twix\".\n" +
               "Мой номер комнаты: 214."
},

        "2": {
            title: "Пропавшие преподы",
            text:
                "Директор Альберт Эдвардс.\n" +
                "Чуть больше 70 лет.\n" +
                "Директором стал к концу 2002 года.\n" +
           "По большей части среди студентов и коллег запомнился как большой пофигист. Преподавал обряды и ритуалистику вместе с историей и обществом.\n" +
                "В целом он гордился тем, что директор, но основную работу за него делали другие.\n" +
                "Дар - телепатия или смежные ментальные способности.\n\n" +
                "Малкольм Рид, декан фамильяров.\n" +
                "Мужчина лет 40.\n" +
                "Преподавал расширенные возможности формы.\n" +
                "Превращался в вепря.\n" +
                "Со стороны щуплый, мягкий, заикался, но когда дело доходило до учёбы проявлял строгость. Даже икота отступала. Пожалуй он знал своё дело и очень умело обращался.\n" +
                "И по какой-то причине был очень предан директору.\n\n" +
                "Окада Такуми, декан ведьм и ведьмаков\n" +
                "Японец.\n" +
                "Преподавал Базовые заклинания.\n" +
                "Закрытый. Строгий. Справедливый. Нравился девчонкам. Всегда в отглаженном чёрном костюме.\n" +
                "Особенности дара: подчинял растения, мог заставить их расцвести или наоборот увянуть."
        },

        "3": {
            title: "Сильвия",
            text:
                "Полное имя: Сильвия Розенштайн;\n" +
                "21 год, 4й курс, фамильяр;\n" +
                "Родной город: Гамбург, Германия;\n" +
                "Звериная форма: белый лебедь, как символ Гамбурга;\n\n" +
                "Первая сшивка: 09.09.2025;\n" +
                "Разрыв: 08.10.2025;\n" +
                "Вторая сшивка: 13.10.2025."
        },

       "4": {
            title: "kleine Zopf",
            text:
                "Полное имя: Вэланна Марроу;\n" +
                "18 лет, 1й курс, фамильяр;\n" +
                "Дата рождения: 05.10.2007;\n" +
                "Родной город: Питтсфилд. Массачусетс, США;\n" +
                "Звериная форма: речная выдра;\n" +
                "Лучший друг: Ульрих Ван Хааллен, 18 лет, ведьмак;\n" +
                "Любимые конфеты: с ликёром."
        },

       "5": {
            title: "Одногруппники",
            text:
                "Квентин: 18 лет, ведьмак;\n" +
                "Джимми: 18 лет, ведьмак. "
               
        },

       "6": {
            title: "Шефтларн",
            text:
                "Фердинанд Лоренцо Блюменталь, Ферди: 18 лет;\n" +
                "Алоиз: 18 лет;\n" +
                "мистер Шульц: всеми любимый учитель литературы. "
               
        }

    };

    /* -------------------- ОТКРЫТИЕ ЗАМЕТКИ -------------------- */

    var noteLinks = document.querySelectorAll(
        ".phone-demo .note-link"
    );

    noteLinks.forEach(function (link) {

        link.onclick = function () {

            var noteId = link.getAttribute("data-note");

            var selectedNote = notes[noteId];

            if (!selectedNote) return;

            noteViewTitle.textContent = selectedNote.title;
            noteViewText.textContent = selectedNote.text;

            notesScreen.style.display = "none";
            noteViewScreen.style.display = "flex";

        };

    });

    /* -------------------- НАЗАД ИЗ ЗАМЕТКИ -------------------- */

    noteViewBack.onclick = function () {

        noteViewScreen.style.display = "none";
        notesScreen.style.display = "flex";

    };

    /* -------------------- ЗАБЛОКИРОВАТЬ ТЕЛЕФОН -------------------- */

    lockAgain.onclick = function () {

        unlockedScreen.style.display = "none";
        organizerScreen.style.display = "none";
        notesScreen.style.display = "none";
        noteViewScreen.style.display = "none";
        musicScreen.style.display = "none";

        lockScreen.style.display = "flex";

        enteredPin = "";

        updateDots();

    };

})();
</script>
[/html]

Отредактировано Kurt Daimler (29-09-2026 06:31:00)

+4

2

  • Автор: Kurt Daimler
  • Участник
  • Kurt Daimler
  • Курт Даймлер, 18

    $$$

  • Сообщений: 475
  • Уважение: +388
  • Деньги: 810
  • Игровые посты: 0
  • Последний визит:
    05-11-2026 23:10:56
  • Two bodies, one soul

ПОЗНАЁМ КУРТА

I часть
II часть
III часть

Отредактировано Kurt Daimler (26-10-2026 05:04:47)

+4

3

  • Автор: Kurt Daimler
  • Участник
  • Kurt Daimler
  • Курт Даймлер, 18

    $$$

  • Сообщений: 475
  • Уважение: +388
  • Деньги: 810
  • Игровые посты: 0
  • Последний визит:
    05-11-2026 23:10:56
  • Two bodies, one soul

Учим немецкий вместе с Куртом.

Scheiße!
Fahr zur Hölle!
Du bist krank
Kneipentour
Alles Gute zum Geburtstag!
Immer einen harten Schwanz und dicke Taschen!
Prost!
Ich liebe dich, meine kleine Zopf.
Du siehst so schön aus, wenn du sauer bist.
Du erregst mich. Du, ganz und gar.
Dann bin ich am Arsch!
Was machst du nur mit mir?
Ich dreh gleich durch

Отредактировано Kurt Daimler (26-09-2026 00:00:59)

+2

Страница: 1

Вы здесь » Kindred Spirits » Блоги » Органайзер Курта Даймлера

Рейтинг форумов | Создать форум бесплатно