BOOTSTRA.386: тема для Bootstrap в духе 1980-х

    Оказывается, некоторые темы для Bootstrap — это маленькие произведения искусства. В рамках надвигающейся пятницы хотелось бы рассказать об одной из таких тем.

    Крис МакКензи — явно один из тех, кто скучает по старым добрым временам DOS, EGA/VGA и Turbo Vision, иначе он вряд ли бы решился сделать что-то подобное. Так что если вы успели устать от засилья плоского дизайна, то добро пожаловать в мир BOOTSTRA.386!

    Осторожно: будьте готовы к острому приступу ностальгии. Единственное, чего не хватает для полного погружения — так это навигации с клавиатуры, ну и курсора в виде прямоугольного блока.

    image

    Кстати, автор не забыл сделать для своей темы еще и отличный постер, стилизованный под рекламу из 80-ых:

    image

    Демо, Репозиторий.
    Share post

    Comments 45

      +32
      Это!!! Восхитительно!!! Пойду ковыряться! Спасибо, большое Автору поста
        +2
        Было бы еще прикольнее, если бы оно детектило консольные браузеры вроде lynx и осуществляло вывод аутентичным образом.
        +7
        В Borland TurboVision, на интерфейс которой похож этот дизайн, была анимация кнопок при нажатии, если мне не изменяет память.
        +5
        До сих пор студенты программируют на TurboPascal с таким интерфейсом
          +6
          Да. при том, что давно есть Free Pascal с таким же интерфейсом и простые, но всё же более современные IDE :-(.
            +4
            Студентам нужно учиться программировать, а это от интерфейса не зависит
              +2
              Да. Но Free Pascal изначально свободный. Не помню, чтобы открывали TP — значит, нарушение закона имеет место. Или я ошибаюсь?

              Free Pascal продвинутее, он кроссплатформенный и работает на 32 и 64 разрядных машинах.

              Потому не понимаю, зачем ставят этот древний компилятор.

              Насчёт IDE — согласен. Но интерфейс Turbo Pascal устарел. Я из-за непривычности работал с ним медленнее. То сохранил не туда, то ещё что-то. Пустая трата времени на ненужную войну с интерфейсом.
                0
                FPC хорош, да. Но его GUI сильно недоработан. Не функционируют многие горячие клавиши, которые работают в TP, в т.ч. даже Ctrl+стрелки навигации.
                Буфер обмена так и не научился класть и брать фрагменты текста, пользуясь системным буфером, в результате даже просто вставить код из другого места, находясь в IDE FPC, получается долговато (как минимум, запускать другой редактор, notepad/gedit, к примеру).
                А ещё — то, как он работает с файлами настройки IDE и компилятора. Да, при том, что в главном файле проекта (dpr/pp) находится код, это делается не столь очевидно и просто, как, к примеру, в проектах Visual Studio, но всё равно решаемо. Тут же — из какого каталога запустил fp, оттуда он и возьмёт .cfg/.dsk
                Возвращаясь к предыдущей теме — консольный интерфейс в стиле Turbo Vision может быть очень удобен, но его надо серьёзно дорабатывать.
                0
                Поэтому их надо заставлять программировать в среде, которую они с трудом найдут и запустят?
            +2
            И надо бы CSS свойство добавить (курсор прямоугольный) cursor: url('файл_курсора')
              0
              Это не то, курсор должен перемещаться строго на 1 клетку. А так он будет попиксельно двигаться, как в любом GUI.
                +7
                Можете добавить в консоль:
                код
                w= 10;
                h=20;
                b = document.getElementsByTagName('body')[0];
                b.style.cursor = 'none'
                
                var d = document.createElement('div');
                d.id = 'nicecursor';
                b.appendChild(d);
                a = document.getElementById('nicecursor');
                a.style.position = 'absolute';
                a.style.top='10px';
                a.style.left='10px';
                a.style.width=w+'px';
                a.style.height=h+'px';
                a.style.backgroundColor='white';
                
                b.onmousemove = function(e){
                	a.style.left = e.pageX - e.pageX % w   +'px';
                	a.style.top = e.pageY - e.pageY % h +'px';
                	
                }

                  +9
                  Забыл добавить прокликивание
                  Код
                  w= 10;
                  h=20;
                  b = document.getElementsByTagName('body')[0];
                  b.style.cursor = 'none'
                  
                  d = document.createElement('div');
                  d.id = 'nicecursor';
                  b.appendChild(d);
                  a = document.getElementById('nicecursor');
                  a.style.position = 'absolute';
                  a.style.top='10px';
                  a.style.left='10px';
                  a.style.width=w+'px';
                  a.style.height=h+'px';
                  a.style.backgroundColor='white';
                  a.style.pointerEvents='none';
                  
                  b.onmousemove = function(e){
                  	a.style.left = e.pageX - e.pageX % w   +'px';
                  	a.style.top = e.pageY - e.pageY % h +'px';
                  	
                  }

            +4
            Пойду забахаю корпоративный портал в этом стиле. Руководство будет в восторге… надеюсь ))))))
            • UFO just landed and posted this here
                +1
                Какого харда? Дискетки! Да так, чтоб сердце замирало: «А вдруг не прочитается?» )
                +4
                Иногда думаешь, какое бы занятие поприкольнее себе найти, чтобы сделать и все сказали «вот это дааа» (или, на худой конец, «возьми мои деньги»). А тут раз и…
                  +3
                  Разве цвет #555555 можно было фоном ставить?
                  Там же 4ый бит установлен, который для текста — яркость, а для фона — мигание.
                    +1
                    Поясните для не понимающих, в чем беда? Ну цвет и цвет.
                      +3
                      en.wikipedia.org/wiki/VGA-compatible_text_mode

                      Вы, видимо, не застали ситуаций, когда в одной книжке упоминается 16 цветов, в другой — моргание символа, в какой-нибудь библиотеке выделена специальная функция, не связанная с представлением цвета, а на компьютере может работать и так, и так.
                      +2
                      Переключалось. Либо дополнительные 8 ярких цветов для фона, либо мигание.
                        0
                        как много я потерял!
                      0
                      Классно! 8-) Спасибо! :)
                        +3
                        Местами косяки. Но в целом мимими.
                          +3
                          я бы сказал «тема из 90-ых», в 80-х в ходу был монохром
                            +3
                            Документация к проекту прекрасна!
                            github.com/kristopolous/BOOTSTRA.386/wiki
                              +16
                              Скорее BOOTSTR~.386 :)
                                0
                                а еще скорее 286. эта ностальгическая тема для Bootstrap 2. хех ;(
                                  0
                                  BOOTSTRA.386 — умещается в 8.3, всё норм
                                  +5
                                  Нужны еще радиобаттоны и чекбоксы в виде (.) и [x] соответственно.
                                    +1
                                    На полный экран смотрится восхитительно, мышку бы еше.
                                      0
                                      margin для кнопок при кликах иногда сдвигает соседний справа или снизу элемент на 1 символ. Кто-нибудь помнит, было ли так в оригинале?
                                        0
                                        Воухохо! Какая настальгия нахлынула. Вспоминаются времена турбобейсика, турбо паскаля и прочих нортон командеров. Круто.
                                          +1
                                          Love it!
                                            +3
                                            Показалось, что даже диалапный хэндшейк услышал)
                                              0
                                              Текст хорошо, менюшки — просто потрясающе, а вот формы лучше с этой темой не делать.
                                                0
                                                Дайте две!
                                                  +1
                                                  Жаль не на третьем бутстрапе
                                                    0
                                                    На чьем-то сайте видел js, имитирующий подергивание и пропадание некоторых букв, как на ЭЛТ-терминале. Думаю, он частично подошел бы сюда.
                                                      +2
                                                      Офигенно!
                                                      (ставит в крон смену дизайна на 1 апреля 2015)
                                                        0
                                                        Поворчу: шрифт чудовищно размыт.
                                                        Видел лучшую реализацию, попробую найти.

                                                      Only users with full accounts can post comments. Log in, please.