Skip to content

Commit 2dabfea

Browse files
wannaphongwannaphong
committed
Improve website appearance
Fixes #22 Improve the website's appearance with modern design elements. * **templates/index.html** - Update layout to include a modern design. - Add enhanced styling for a better appearance. * **templates/list-corpus.html** - Improve structure for listing corpus and models. - Add visually appealing elements to the layout. * **templates/details.html** - Enhance layout for displaying corpus details. - Update styling for a more modern look. * **html/carousel.css** - Update CSS styles for a more modern appearance. - Add new styles for improved design elements.
1 parent 6413ad8 commit 2dabfea

File tree

4 files changed

+104
-48
lines changed

4 files changed

+104
-48
lines changed

‎html/carousel.css‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,53 @@ html {
4444

4545
.lh-100 { line-height: 1; }
4646
.lh-125 { line-height: 1.25; }
47-
.lh-150 { line-height: 1.5; }
47+
.lh-150 { line-height: 1.5; }
48+
49+
/* New styles for improved design elements */
50+
.center {
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
}
55+
56+
.card {
57+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
58+
transition: 0.3s;
59+
}
60+
61+
.card:hover {
62+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
63+
}
64+
65+
.card-title {
66+
font-size: 1.5rem;
67+
font-weight: bold;
68+
}
69+
70+
.card-text {
71+
font-size: 1rem;
72+
}
73+
74+
.card-footer {
75+
background-color: #f8f9fa;
76+
}
77+
78+
.img-fluid {
79+
max-width: 100%;
80+
height: auto;
81+
}
82+
83+
.rounded-circle {
84+
border-radius: 50%;
85+
}
86+
87+
.display-4 {
88+
font-size: 2.5rem;
89+
font-weight: 300;
90+
line-height: 1.2;
91+
}
92+
93+
.lead {
94+
font-size: 1.25rem;
95+
font-weight: 300;
96+
}

‎templates/details.html‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
{% extends "head.html" %}
22
{% block title %} {{ corpus['name'] }} {% endblock %}
33
{% block body %}
4-
<div class="bg-light">
4+
<div class="bg-light p-4 rounded">
55
<p><a class="btn btn-secondary" href="./list-corpus.html">< Back</a></p>
6-
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
7-
<div class="lh-100">
8-
<h1 class="mb-0 text-white lh-100">{{ corpus['name'] }}</h1>
9-
<small>latest version: {{ corpus['latest_version'] }}</small>
6+
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
7+
<div class="lh-100">
8+
<h1 class="mb-0 text-white lh-100">{{ corpus['name'] }}</h1>
9+
<small>latest version: {{ corpus['latest_version'] }}</small>
10+
</div>
1011
</div>
11-
</div>
12+
<p>{{ corpus['text'] }}</p>
13+
<br>
14+
<p><strong>Description:</strong> {{ corpus['description'] }}</p>
15+
<p><strong>Long Description:</strong> {{ corpus['long_description'] }}</p>
16+
<p><strong>HomePage:</strong> <a rel="nofollow" target="_blank" href="{{ corpus['url'] }}">{{ corpus['url'] }}</a></p>
17+
<p><strong>Authors:</strong> {{ corpus['authors'][0] }}</p>
18+
<hr>
19+
<h2>Download and Use</h2>
20+
<h3>Download</h3>
21+
<code>from pythainlp.corpus import download<br />
22+
download('{{ corpus['name'] }}')</code>
23+
<h3>Use</h3>
24+
<p>It's get path file of corpus.</p>
25+
<code>from pythainlp.corpus import get_corpus_path<br />
26+
get_corpus_path('{{ corpus['name'] }}')</code>
27+
<p>If <code>get_corpus_path('{{ corpus['name'] }}')</code> is <code>None</code> then you have not downloaded <code>{{ corpus['name'] }}</code>.</p>
28+
<hr>
29+
<h3>Release history</h3>
30+
{% for i in corpus['versions'] %}
31+
<h4>{{ i }}</h4>
32+
<p><strong>File Name:</strong> {{ corpus['versions'][i]['filename'] }}</p>
33+
<p><strong>md5:</strong> {{ corpus['versions'][i]['md5'] }}</p>
34+
<p><strong>PyThaiNLP version:</strong> {{ corpus['versions'][i]['pythainlp_version'] }}</p>
35+
<p><strong>Link Download:</strong> <a rel="nofollow" target="_blank" href="{{ corpus['versions'][i]['download_url'] }}">{{ corpus['versions'][i]['filename'] }}</a></p>
36+
{% endfor %}
1237
</div>
13-
<p>{{ corpus['text'] }}</p>
14-
<br>
15-
<p>Description : {{ corpus['description'] }}</p>
16-
<p>Long Description : {{ corpus['long_description'] }}</p>
17-
<p><b>HomePage</b> : <a rel="nofollow" target="_blank" href="{{ corpus['url'] }}">{{ corpus['url'] }}</a></p>
18-
<p><b>Authors</b> : {{ corpus['authors'][0] }}</p>
19-
<hr>
20-
<h2>Download and Use</h2>
21-
<h3>Download</h3>
22-
<code>from pythainlp.corpus import download<br />
23-
download('{{ corpus['name'] }}')</code>
24-
<h3>Use</h3>
25-
It's get path file of corpus.<br />
26-
<code>from pythainlp.corpus import get_corpus_path<br />
27-
get_corpus_path('{{ corpus['name'] }}')</code><br />
28-
if <code>get_corpus_path('{{ corpus['name'] }}')</code> is <code>None</code> than you not download <code>{{ corpus['name'] }}</code>.
29-
<hr>
30-
<h3>Release history</h3>
31-
{% for i in corpus['versions'] %}
32-
<h4>{{ i }}</h4>
33-
<p>File Name : {{ corpus['versions'][i]['filename'] }}</p>
34-
<p>md5 : {{ corpus['versions'][i]['md5'] }}</p>
35-
<p>PyThaiNLP version: {{ corpus['versions'][i]['pythainlp_version'] }}</p>
36-
<p>Link Download : <a rel="nofollow" target="_blank" href="{{ corpus['versions'][i]['download_url'] }}">{{ corpus['versions'][i]['filename'] }}</a></p>
37-
{% endfor %}
38-
3938
{% endblock %}

‎templates/index.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
{% block title %} PyThaiNLP Corpus & Models {% endblock %}
33
{% block body %}
44
<div class="center">
5-
<img src="https://avatars0.githubusercontent.com/u/32934255?s=200&v=4" alt="PyThaiNLP Logo">
5+
<img src="https://avatars0.githubusercontent.com/u/32934255?s=200&v=4" alt="PyThaiNLP Logo" class="img-fluid rounded-circle">
66
</div>
7-
<h1>PyThaiNLP Corpus & Models</h1>
8-
<p>Welcome to PyThaiNLP Corpus and Models.</p><br />
9-
<img alt="PyPI" src="https://img.shields.io/pypi/v/pythainlp?label=PyThaiNLP&style=flat-square"><br />
10-
PyThaiNLP Website: <a class="nav-link" href="https://pythainlp.github.io">pythainlp.github.io</a>
7+
<h1 class="display-4 text-center my-4">PyThaiNLP Corpus & Models</h1>
8+
<p class="lead text-center">Welcome to PyThaiNLP Corpus and Models.</p><br />
9+
<div class="text-center">
10+
<img alt="PyPI" src="https://img.shields.io/pypi/v/pythainlp?label=PyThaiNLP&style=flat-square" class="img-fluid"><br />
11+
<a class="btn btn-primary mt-3" href="https://pythainlp.github.io">PyThaiNLP Website</a>
12+
</div>
1113
{% endblock %}

‎templates/list-corpus.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
{% extends "head.html" %}
22
{% block title %} List Corpus & Models{% endblock %}
33
{% block body %}
4-
<h1>List Corpus & Models</h1>
5-
<p><img alt="PyPI" src="https://img.shields.io/pypi/v/pythainlp?label=PyThaiNLP&style=flat-square"><br />
4+
<h1 class="display-4 text-center my-4">List Corpus & Models</h1>
5+
<p class="lead text-center"><img alt="PyPI" src="https://img.shields.io/pypi/v/pythainlp?label=PyThaiNLP&style=flat-square"><br />
66
List PyThaiNLP Corpus and Models.</p>
77
<div class="container">
88
<!-- Example row of columns -->
99
<div class="row">
1010
{% for corpus in listcorpus %}
11-
<div class="col-md-4">
12-
<h2>{{ corpus['name'] }}</h2>
13-
{% if corpus['description']|length < 50 %}
14-
<p>{{ corpus['description'] }}</p>
15-
{% else %}
16-
<p>{{ corpus['description'][:50]+' ...' }}</p>
17-
{% endif %}
18-
<p><a class="btn btn-secondary" href="./{{ corpus['name'] }}.html" role="button">View details &raquo;</a></p>
11+
<div class="col-md-4 mb-4">
12+
<div class="card h-100">
13+
<div class="card-body">
14+
<h2 class="card-title">{{ corpus['name'] }}</h2>
15+
{% if corpus['description']|length < 50 %}
16+
<p class="card-text">{{ corpus['description'] }}</p>
17+
{% else %}
18+
<p class="card-text">{{ corpus['description'][:50]+' ...' }}</p>
19+
{% endif %}
20+
</div>
21+
<div class="card-footer">
22+
<p><a class="btn btn-secondary" href="./{{ corpus['name'] }}.html" role="button">View details &raquo;</a></p>
23+
</div>
24+
</div>
1925
</div>
2026
{% endfor %}
2127
</div></div>

0 commit comments

Comments
 (0)