Skip to content

Commit eec8a52

Browse files
mskrasnovmskrasnov
committed
Site redesign
1 parent b53f274 commit eec8a52

5 files changed

Lines changed: 102 additions & 51 deletions

File tree

‎site/assets/Morskie Oko.jpg‎

1.49 MB
Loading

‎site/assets/a.png‎

1.19 MB
Loading

‎site/download.html‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h1>TimeKeeper</h1>
2626
</nav>
2727

2828
<!--<div class="page-wrapper">-->
29-
<div class="main-container">
29+
<div class="main-downl-container">
3030
<div class="download-container">
3131
<div class="download-content">
3232
<h2 class="download">Скачать TimeKeeper v0.3.1</h2>
@@ -54,11 +54,16 @@ <h2>Системные требования</h2>
5454
<li><b>Свободное место:</b> около 15-20 Мб</li>
5555
<li><b>Разрешение экрана:</b> не ниже 640х480</li>
5656
</ul>
57-
<h2>Дополнительные ресурсы</h2>
58-
<ul>
59-
<li><a href="#">Документация</a></li>
60-
<li><a href="#">Форум</a></li>
61-
</ul>
57+
<!-- <h2>Дополнительные ресурсы</h2> -->
58+
<!-- <ul> -->
59+
<!-- <li><a href="#">Документация</a></li> -->
60+
<!-- <li><a href="#">Форум</a></li> -->
61+
<!-- </ul> -->
62+
<div align="center">
63+
<a href="https://iced.rs">
64+
<img alt="iced" title="iced" src="https://gist.githubusercontent.com/hecrj/ad7ecd38f6e47ff3688a38c79fd108f0/raw/74384875ecbad02ae2a926425e9bcafd0695bade/color.svg" width="350px">
65+
</a>
66+
</div>
6267
</div>
6368
<div class="column">
6469
<h2>Предыдущие версии</h2>

‎site/index.html‎

Lines changed: 29 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -26,55 +26,42 @@ <h1>TimeKeeper</h1>
2626
</nav>
2727

2828
<div class="container">
29-
<h2>TimeKeeper: Ваш простой таймер для работы и отдыха</h2>
30-
31-
<p>Управляйте своим рабочим временем эффективно. Вдохновлено Pomodoro, но еще проще!</p>
32-
<div class="intro-container">
33-
<p>TimeKeeper - простейшая кроссплатформенная программа для учёта рабочего времени за ПК. Она нужна для того,
34-
чтобы периодически напоминать пользователю о необходимости выполнения перерывов за работой на ПК.</p>
35-
36-
<div class="download-button-container">
37-
<a href="./download.html" class="download-button">Скачать TimeKeeper</a>
38-
</div>
29+
<div align="center">
30+
<h2>Рабочий трекер без лишних функций.</h2>
31+
<a href="./download.html" class="download-button">Скачать (Windows, Linux)</a>
32+
<img src="./assets/a.png" class="rounded-img">
3933
</div>
4034

41-
<div style="clear:both;"></div>
42-
4335
<div align="center">
44-
<figure>
45-
<img src="./assets/main_win.png" class="screenshot" width="300">
46-
<figcaption>Больше скриншотов <a href="./screenshots.html">здесь</a>.</figcaption>
47-
</figure>
36+
<blockquote><p>Управляйте своим рабочим временем эффективно. Вдохновлено Pomodoro, но еще проще!</p></blockquote>
4837
</div>
4938

50-
<p>Многие люди не делают перерывы в работе за ПК. Как итог - снижение эффективности такой работы ввиду усталости,
51-
проблемы с опорно-двигательным аппаратом из-за сидячего образа жизни и всевозможные нарушения зрения.
52-
Следовательно, пользователям нужна какая-либо простейшая программа, которая, подстроившись под их ритм работы,
53-
смогла бы напоминать им о необходимости сделать перерыв в работе.</p>
54-
<p>Программа предназначена для использования людьми, подверженными высоким зрительным нагрузкам и/или ведущим
55-
высокий образ жизни.</p>
56-
57-
<p>Основным понятием в программе является цикл <i>работа/перерыв</i>. По умолчанию время работы составляет один
58-
час, время отдыха - 10 минут, однако пользователь может указывать и своё. TimeKeeper умеет вести статистику
59-
таких циклов, чтобы пользователь имел представление о своей производительности на протяжении рабочего дня.</p>
39+
<p>TimeKeeper — простой и эффективный инструмент для учёта рабочего времени за компьютером, вдохновлённый
40+
техникой Pomodoro, но ещё проще. Забудьте о куче настроек и неудобным UI/UX с кучей лишних функций.
41+
TimeKeeper фокусируется на главном: помочь вам организовать свой рабочий график путём чередования циклов
42+
<i>работа/отдых</i>. Установите комфортное для вас время работы и время отдыха, а TimeKeeper позаботится
43+
о том, чтобы вы чередовали их на протяжении всего дня - по принципу, напоминающему Pomodoro, но без
44+
лишней сложности.</p>
6045

6146
<h2>Преимущества</h2>
62-
63-
<ul>
64-
<li><b>Offline.</b> TimeKeeper не требует для своей работы браузера и доступа в интернет.</li>
65-
<li><b>Кроссплатформенность.</b> Наша программа корректно работает в операционных системах Windows и Linux и не
66-
зависит от крупных внешних библиотек вроде GTK, Qt, KDE Frameworks и способна работать даже на слабых ПК.</li>
67-
<li><b>Минималистичность.</b> TimeKeeper занимает не более 20 Мб на диске и способна работать даже на слабых ПК.
68-
</li>
69-
<li><b>Статистика.</b> TimeKeeper способен вести локальную статистику циклов работа/отдых, чтобы пользователь имел
70-
представление о том, сколько он работает и как часто нужно делать перерывы в работе.</li>
71-
</ul>
72-
</div>
73-
74-
<div align="center">
75-
<a href="https://iced.rs">
76-
<img alt="iced" title="iced" src="https://gist.githubusercontent.com/hecrj/ad7ecd38f6e47ff3688a38c79fd108f0/raw/74384875ecbad02ae2a926425e9bcafd0695bade/color.svg" width="350px">
77-
</a>
47+
<div class="advantages-grid">
48+
<div class="advantage-tile">
49+
<h3>Offline</h3>
50+
<p>TimeKeeper не требует для своей работы браузера и доступа в интернет.</p>
51+
</div>
52+
<div class="advantage-tile">
53+
<h3>Кроссплатформенность</h3>
54+
<p>Наша программа корректно работает в операционных системах Windows и Linux и не зависит от крупных внешних библиотек вроде GTK, Qt, KDE Frameworks и способна работать даже на слабых ПК.</p>
55+
</div>
56+
<div class="advantage-tile">
57+
<h3>Минималистичность</h3>
58+
<p>TimeKeeper занимает не более 20 Мб на диске и способна работать даже на слабых ПК.</p>
59+
</div>
60+
<div class="advantage-tile">
61+
<h3>Ведение статистики</h3>
62+
<p>TimeKeeper способен вести локальную статистику циклов работа/отдых, чтобы пользователь имел представление о том, сколько он работает и как часто нужно делать перерывы в работе.</p>
63+
</div>
64+
</div>
7865
</div>
7966

8067
<footer>

‎site/style.css‎

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,14 @@ body {
4646
}
4747

4848
h1 {
49-
font-family: 'FiraCode', sans-serif;
49+
font-family: 'FiraSans', sans-serif;
5050
font-weight: 600;
5151
color: #fb4934;
5252
/* Gruvbox Dark red */
5353
}
5454

5555
h2 {
56-
font-family: 'FiraCode', sans-serif;
57-
font-weight: 600;
56+
font-family: 'FiraSans', sans-serif;
5857
color: #d65d0e;
5958
}
6059

@@ -140,6 +139,10 @@ img.screenshot.enlarged {
140139
object-fit: contain;
141140
}
142141

142+
img.rounded-img {
143+
border-radius: 10px;
144+
}
145+
143146
nav {
144147
background-color: #3c3836;
145148
position: sticky;
@@ -300,6 +303,21 @@ figcaption {
300303
max-width: 800px;
301304
margin: 0 auto;
302305
padding: 20px;
306+
/* background-image: url('assets/background.png'); */
307+
/* background-size: cover; */
308+
/* background-repeat: no-repeat; */
309+
}
310+
311+
.main-downl-container {
312+
display: flex;
313+
flex-direction: column;
314+
/* max-width: 800px; */
315+
/* margin: 0 auto; */
316+
height: 450px;
317+
padding: 30px;
318+
background-image: url('./assets/Morskie Oko.jpg');
319+
background-size: cover;
320+
background-repeat: no-repeat;
303321
}
304322

305323
.intro-container {
@@ -328,4 +346,45 @@ figcaption {
328346
.download-button-container {
329347
float: right;
330348
/*width: 200px; /* Ширина контейнера с кнопкой */
349+
}
350+
351+
blockquote {
352+
background-color: #3c3836; /* Darker gray background */
353+
border-left: 8px solid #b8bb26; /* Yellow-green accent */
354+
color: #ebdbb2; /* Light text */
355+
padding: 1.5em 2em;
356+
margin: 2em 0;
357+
border-radius: 5px; /* Скругленные углы */
358+
box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Тень */
359+
}
360+
361+
.advantages-grid {
362+
display: grid;
363+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
364+
grid-gap: 20px;
365+
}
366+
367+
.advantage-tile {
368+
background-color: #3c3836; /* Gruvbox Dark background */
369+
padding: 20px;
370+
border-radius: 5px;
371+
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
372+
}
373+
374+
.advantage-tile h3 {
375+
margin-top: 0;
376+
color: #ebdbb2; /* Gruvbox Dark light gray */
377+
font-weight: bold; /* Добавим немного веса заголовку */
378+
}
379+
380+
.advantage-tile p {
381+
color: #a89984; /* Gruvbox Dark darker gray */
382+
line-height: 1.5;
383+
}
384+
385+
/* Дополнительный стиль для адаптации под меньшие экраны (опционально) */
386+
@media (max-width: 768px) {
387+
.advantages-grid {
388+
grid-template-columns: 1fr;
389+
}
331390
}

0 commit comments

Comments
 (0)