Bootstrap 3 – Login form

Bootstrap 3 - Login Form
От известно време се каня да променя логин формата за админ панела на проектите, които правя. Направих една форма, която не знам дали ще ползвам, но ще ми е полезна като отправна точка. За да си помогна за стиловете използвах Less (език за стилови множества или CSS) и GUI-то SimpLESS – портабъл е и работи доста леко за разлика от други подобни.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// 		MIXINS
//  ==========================================
.rounded-corners (@radius1: 5px, @radius2: 5px, @radius3: 5px, @radius4: 5px) { 
	-webkit-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-moz-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-ms-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-o-border-radius: @radius1 @radius2 @radius3 @radius4; 
	border-radius: @radius1 @radius2 @radius3 @radius4; 
}
 
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
 
.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
 
 
 
// 		Colors
//  ==========================================
@silver_light: #edf1f2;
@silver_white: #f7f8fa;
@silver_dark: #eef7fc;
@silver_border: #c3d5d9;
@grey: #8f8f8f;
@blue_dark: #76ccea;
@blue_light: #badff2;
 
 
// 		Styles
//  ==========================================
body {
	background-color: @silver_light;
}
 
.container.lf{
	width: 322px;
	color: @grey;
	a {color: @grey;}
 
		.logf {
			margin-top: 50px;
			.rounded-corners(5px, 5px, 5px, 5px);
			.drop-shadow(0px, 0px, 6px, 2px, 0.05);
		}
 
		.lfhead, .lfbody, .lffooter{
			border: 1px solid @silver_border;
			background-color: @silver_white;
			min-height: 20px;
			// line-height: 15px;
		}
 
		.lfhead {
			border-bottom: 0;
			.rounded-corners(5px, 5px, 0, 0);
		}
 
		.lfbody {
			border-top: 0;
			border-bottom: 0;
 
			.input-group-addon {
				color: @grey;
			}
			 .form-control:focus {
			 	.drop-shadow(0px, 0px, 6px, 2px, 0.05);
			 	border-color: @blue_dark;
			 }
		}
 
		.lffooter {
			background-color: @silver_dark;
			.rounded-corners(0, 0, 5px, 5px);
			padding-top: 16px;
 
			.text-left {
				padding-top: 8px;
			}
 
			label {
				font-weight: normal;
				color: @grey;
			}
 
			input[type='button'], input[type='reset'], input[type='submit'] {
				.rounded-corners(18px, 18px, 18px, 18px);
				border-color: @blue_dark;
				.gradient(@blue_light, @blue_dark);
				font-weight: bold;
				.drop-shadow(0px, 1px, 2px, 1px, 0.10);
				text-shadow: 1px 1px @blue_dark;
 
				&:hover {
					.gradient(@blue_dark, @blue_light);
				}
			}
		}
 
	.lflinks {
		padding-top: 8px;
	}
 
}

HTML кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="container lf">
   <div class="row logf text-center">
      <form action="" method="post" >
         <div class="col-xs-12 lfhead">
         </div>
         <div class="col-xs-12 lfbody">
            <div class="form-group">
               <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input id="email" type="email" class="form-control" name="email" value="" tabindex="1" placeholder="Email Address">
               </div>
            </div>
            <div class="form-group">
               <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                  <input id="password" type="password" class="form-control" name="password" value="" tabindex="2" placeholder="Password">                    
               </div>
            </div>
         </div>
         <div class="col-xs-12 lffooter">
            <div class="col-xs-6">
               <div class="form-group text-left">
                  <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                  <label for="remember"> Remember Me</label>
               </div>
            </div>
            <div class="col-xs-6">
               <div class="form-group text-right">
                  <input type="submit" name="login-submit" tabindex="4" class="btn btn-primary" value="Login">
               </div>
            </div>
         </div>
      </form>
   </div>
   <div class="row lflinks">
      <div class="col-xs-6 text-left"><a href="">Register</a></div>
      <div class="col-xs-6 text-right"><a href="">Forgot password</a></div>
   </div>
</div>

Останалото форматиране си идва от Bootstrap 3.
Демо на страницата: BS3 Login Form
Download: bs3-login_form.zip

Макро на семенца от глухарче и водни капки

Gallery

This gallery contains 4 photos.

Фото експеримент с макро пръстени – 5cm. Тяло – Samsung NX3000 Обектив – Asahi Pentax M 1:1.7 50mm Бленда – 2.8-4.5 Адаптер за обектива – някакъв китайски PK-NX Постановка – на терасата с камъни и глухарчета, които домъкнахме с дъщеря … Continue reading

Банско 2017, хотел Регнум

Gallery

This gallery contains 60 photos.

Това лято през август посетихме Банско. И почивката ни съвпадна с Банско Джаз Фест. Банско + джаз = идеална комбинация! А за доброто ни настроение допълнително се погрижиха домакините от хотел Регнум – един наистина чудесен хотел с доста удобства, … Continue reading

Beelink GT1 Ultimate – бюджетен TV бокс

Преди време се бях заиграл с едно TV Box устройство Beelink X2, което за времето си ме впечатли с възможностите и цената. И реших да следя марката. Скоро Beelink пуснаха на пазара друго устройство, което също впечатли с цената и възможностите – Beelink GT1 Ultimate. Закупих го от Gearbest, когато беше в pre-order промоция и с точките, които дават от този магазин за редовни клиенти ми излезе $51. В момента на писане на статията цената също е добра:
Beelink GT1 Ultimate WiFi Android TV Box – EU PLUG – Цена: $76.99

Параметрите на този семпъл, бюджетен Android TV-плеър са:
GPU: ARM Mali-T820MP3
System: Android 6.0
CPU: Amlogic S912
Core: 2.0GHz,Octa Core
RAM: 3G RAM
RAM Type: DDR4
ROM: 32G
Support 5.1 Surround Sound Output: Yes
H.265 and VP9-10 Profile-2 decoding
Dual Band WiFi: 2.4G plus 5.8G
1000M LAN
Bluetooth: Bluetooth4.0
Power Supply: Charge Adapter
Interface: DC 5V,HDMI,LAN,Micro SD Card Slot,SPDIF,USB2.0
Language: Multi-language
HDMI Version: 2.0

ТВ боксчето пристигна в стилна малка кутийка и беше добре опаковано.

Beelink GT1 Ultimate

Beelink GT1 Ultimate

На по-долните снимки могат да се видят изходите и разположението им по кутийката:

Beelink GT1 Ultimate

Beelink GT1 Ultimate

Комплект включва:

  • Beelink GT1 Ultimate
  • Задаптер за захранване
  • HDMI кабел
  • Дистанционно
  • Книжка с инструкции

Beelink GT1 Ultimate

Джаджата е наистина малка и пасна идеално под Samsung телевизора ми.

Beelink GT1 Ultimate

Beelink GT1 Ultimate

Устройството е с инсталиран Android 6.0. При първоначално стартиране предлага конфигуриране, което става сравнително бързо. Тук му вързах безжична мишка, че с дистанционните много се изнервям. Поддържа си Google Play. Началния екран изглежда простичко, а работата с устройството е доста интуитивна, особено за Android потребители.

Beelink GT1 Ultimate - Home screen

Инсталирах малко игрици и други apps, както и Antutu за да му направя бенчмарк. Резултата от около 40 000 точки не е впечатляващ, но бива:

Beelink GT1 Ultimate - Antutu Benchmark

Устройството пристига без инсталирано Kodi и се наложи сам да си го инсталирам. Качих му версия на Kodi 17.1.

Beelink GT1 Ultimate - Kodi

Kodi се държи стабилно. Забелязах, че има плъгини, които не се поддържат от тази версия, но не бяха от важните за мен. Закачих си SuperRepo и през него си добавих 1Channel.

Игрите за мишка вървят прекрасно. Важно е да се отбележи, че повечето игри за Android не са предвидени за докосване в единична точка, а си търсят разпознаване на пръст. Ако искате да играете на подобно устройство, ще трябва да се примирите с ограничения избор игрици. Устройството поддържа Bluetooth 4.0 и може да се използва гейм контролер, без никакво забавяне. Контролерите вървят с приложение-емулатор, което значително подобрява набора игрици. Може да се използва и телефон, вързан към bluetooth-a на бокса, който да емулира контролер. Последното го пробвах през WiFi и Bluetooth и работи, но трябва внимателно да се избере приложение, което да прави връзката. За това ще пиша по-късно. Важното за дъщеря ми беше Angry Birds и Benji bananas поне да вървят. Е, вървят:

Beelink GT1 Ultimate - games

WiFi антената на устройството е слабичка и е добре рутера да е наблизо. Аз реших проблема още преди време с евтин WiFi усилвател – Xiaomi Mi WiFi 300M Amplifier 2. Вързвам го към външна батерия и си го разнасям където ми е кеф:

Xiaomi Mi WiFi 300M Amplifier 2

WiFi усилвателя е с USB-захранване и може да се върже към зарядно, бучнато в контакт. Работи доста добре и позволява разделяне или наследяване на името от WiFi рутера. Аз си го наследявам, че не ми се сменя избора на WiFi на различните устройства.

За сега не откривам нещо да ме дразни. За 32″-вия ми Samsung, който е с резолюция 1920 x 1080, картината е наистина чудесна. Като понатрупам повечко впечатления, може да допълня статията.

Папиемаше пингвин – направи си сам

Папиемаше пингвин
Обичам почивните дни! И никога не са ми достатъчни. Но пък все се намира време да направим някоя щуротия с дъщеря ми. Последния ни проект беше да си направим готина фигурка от папиемаше. Направихме бърз ресърч в интернет и решихме, че най-лесно и готино ще ни се получи пингвин.

Необходими материали за изработване на папиемаше:

  • Малък балон
  • Ножица
  • Вестник
  • Съд с вода
  • Лепило C200 или друго за хартия
  • Съд за лепилото – може и пластмасов капак
  • Боички

Папиемаше пингвин - необходими материали

Първо нарязахме вестника на лентички, които накиснахме в съда с вода. След това започнахме да облепяме балона с мокрите лентички.
Папиемаше пингвин

Папиемаше пингвин

След като налепихме първоначалния слой, започнахме да лепим следващите слоеве лентички от вестник, като този път ги накисвахме в лепилото, докато се получи хартиен слой с дебелина около 2-3 мм.

Папиемаше пингвин - облепен балон

Оставихме балона да изсъхне напълно и да се втвърди. След това нарисувахме украсата на пингвина с молив и боядисахме по формите с боичките. След това изрязахме малки парчета хартия за ръцете и клюна. Краката ги направихме от навити на ролка лентички. И се получи тази прелест 🙂 :

Папиемаше пингвин

Папиемаше пингвин

Папиемаше пингвин

Забавлението с папиемаше е изключително. Дъщеря ми се почувства като скулптор, а моята награда е удоволствието, което и доставих. Ако не сте пробвали папиемашето с децата си, ви го препоръчвам!

Гледане на български телевизии (БНТ, bTV, Nova…) под Android с XMTV Player

Android XMTV Player - гледане на български телевизии
Испириран от интереса към плеара ми за гледане на български телевизии, реших да дам и някои идеи за хората, които нямат под ръка компютър и могат да гледат стриймове на мобилния си телефон с Android. За целта е необходимо да се инсталира плеър, който може да плейва rtmp-стриймове. Може би най-популярния и простичък подобен плеър за Android към момента е XMTV Player. Има само едно неудобство, че не се инсталира през Google Play, а ръчно. За да стане това, трябва да се включи инсталиране на приложения от Unknown Sources. Влезте в настройките на телефона и го включете:
Settings -> Security -> Unknown Sources

Android install from unknown sources

След това изтеглете XMTV Player, влезте в Downloads и кликнете на приложението и го инсталирайте.
След това изтеглете тази плей-листа с български телевизии: XMTV_BGTV_palylist.m3u. Плей-листата е мое дело. Вероятно някои от адресите след време ще спрат да работят, но ще се постарая да я ъпдейтвам периодично.
XMTV Player и Play list с БГ телевизии
Телевизиите към днешна дата (22.01.2017) са: БНТ, bTV, Nova TV, OnAir, ТВ Европа, Sportal.
Би трябвало плей-листата да се е свалила в Downloads. Намирате я, кликате на нея и избирате да се отвори с XMTV Player.
XMTV BG TV list
Важно: Преди да отворите плей-листата, трябва да стартирате плеъра поне веднъж, за да поотвърдите, че ще го ползвате. Плей-листата може да се отвори и от файловия браузер на XMTV.
Това е. Наздраве!

PS [16.07.2016]: Добавени са радио БНР и радио City. Ъпдейтнат е стрийма на OnAIR.

Джобно ножче Enlan M024A

Не е реклама, нито се хваля. Просто препоръчвам това джобно ножче Enlan M024A. Някои от приятелите ми са любители ножари. Аз не съм, но все ми се налага да дялна нещо. Имах натрупани разни бонус точки от китайските сайтчета и трябваше да ги ползвам, защото ще ми изгорят до края на месеца и реших да си взема една чекийка. Това ножле ме изненада с качеството си, а цената на която го взех е смешна – около $4.
Enlan M024A - сгъваемо джобно ножче

Enlan M024A - сгъваемо джобно ножче

Enlan M024A - сгъваемо джобно ножче
Кефи ме, че се научих да го отварям и затварям с една ръка. Клипа за закачане може да се свали с торкс (не съм гледал номерата, но мисля, че и с подходящ шестограм може да се получи), ако почне да пречи при по-продължителна работа.
Чекийката е малка и е тежка. Не знам това дали е недостатък или предимство. Но мен ужасно ме кефи.
Пичове, препоръчвам го! Настина е добро!
ПС: Вероятно може да се намери в други китайски сайтове на още по-добра цена, така че огледайте се.

Ugee M708 – бюджетен графичен таблет

Ugee M708 - графичен таблет

Ugee M708 – графичен таблет


Обичате ли да рисувате? И аз обичам, но не се справям много добре, а толкова ми се иска да рисувам хубаво. Дъщеря ми също обича да рисува и мисля, че повече и се отдава. Реших, че на едни такива видни художници като нас е добра идея да си вземем графичен таблет. Не бях убеден до колко ще свикнем с подобна джаджа, за това се насочих към китайските устройства, които са на цени под 100 кинта. Всъщност основната идея да го закупя е, че ми се налага да рисувам разни логота, скеч-картинки и елементи от дизайна на проектите ми. До сега го правех с молив и после сканирах или снимах скиците. Но е добре човек да не изостава от технологиите, защото времето ще го изпревари. Един приятел казва, че след години и до обществена тоалетна няма да можем да идем без нужда от някаква джаджа :).
Спрях се на Ugee M708 поради няколко причини – цена, има официален сайт и драйвери, които се ъпдейтват, ревютата са сравнително добри.
Закупих графичния таблет от Gearbest: UGEE M708 Digital Painting Graphic Tablet P51 Drawing Pen. С доставката ми излезе на цена $44.28.
Ugee_M708-price
Ей така изглежда на живо:
Ugee M708
Ugee M708
Ugee M708
Инсталирах му драйверите от диска с който дойде и веднага се разпозна от Win7. Но на следващият ден започна да се държи странно. Когато позиционирам писалката над полето я отмества спрямо последното положени на курсора на мишката ми. Трагедия! За това изтеглих последните налични драйвери от сайта на Ugee: http://www.ugee.eu/m708-dm/. Е с тези драйвери работи вече 3-4 седмици без никакъв проблем.
До сега не съм ползвал графичен таблет, но мога да кажа, че тая джджка е чудесна! Полето е достатъчно голямо за моите нужди и се асоциира с целия дисплей на монитора.
Все още не съм задълбал толкова, че да си програмирам копчетата, важното е че Ugee M708 работи чудесно и под Ubuntu, след инсталиране на драйверите за графични таблети DIGImend. За Ubuntu инсталирах digimend-dkms_6_all.deb.
Все още нямам богата галерия с рисунки от таблета, но имам няколко лога и скици на дизайни.
Ще споделя едно лого, което правих. Скицата, драскана на бързо:
Ugee M708 - котва-sketch
А това е вектора, преди да мине през Photoshop:
Ugee M708 - котва
Използвах Inkscape, сорс файла може да се изтегли от тук: Kotva_SVG.Inkscape.rar

Собствен ръкописен шрифт Nediko.ttf

Това е тест първи по създаването на собствен ръкописен шрифт. За целта използвах Inkscape, като изтеглих шаблони от http://www.paintfont.com/. Както всяко начало и това е трудна работа. Разработвам един проект в който искам да вкарам натурален шрифт, който да имитира максимално писане с химикал. Потърсих за подобни шрифтове на кирилица, но не намерих. За това се наложи, да се пробвам да си направя сам. Е горе-долу се получи. Не е баш както си го представях, но ще го ползвам.
Наличните символи не са много:
Nediko - custom font - Symbols

Ето как изглежда шрифта ми на кирилица и на латиница:
Nediko custom font

Може да се изтегли от тук: Nediko.ttf – 32.5Kb