Skip to content

Commit

Permalink
Create index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Furk4nBulut
Furk4nBulut authored Jul 23, 2024
1 parent f9fc588 commit aa97b5a
Showing 1 changed file with 395 additions and 0 deletions.
395 changes: 395 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,395 @@
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Tracker Yürüyüş Aktivitesi Uygulaması</title>
<link rel="icon" href="assets/map-tracker/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>
:root {
--basarsoft-color: #02205C;
--basarsoft-color-light: #00A5FF;
--white: #ffffff;
--gray-light: #f4f4f4;
--github-color: #333;
--linkedin-color: #0077b5;
--email-color: #c71667;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
background-color: #e9ecef;
padding-top: 130px;
padding-bottom: 95px;
}
header {
background: linear-gradient(135deg, var(--basarsoft-color), var(--basarsoft-color-light));
color: #fff;
padding: 10px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
header h1 {
margin: 0;
font-size: 1.5em;
display: flex;
align-items: center;
justify-content: center;
}
header img {
max-width: 50px;
margin-right: 15px;
border-radius: 50%;
border: 2px solid var(--white);
}
header nav {
margin-top: 10px;
}
header nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 20px;
}
header nav ul li {
display: inline;
}
header nav ul li a {
color: var(--white);
font-size: 1.2em;
}
header nav ul li a:hover {
color: var(--basarsoft-color-light);
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background: var(--white);
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
h2 {
color: var(--basarsoft-color);
border-bottom: 2px solid var(--basarsoft-color);
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 1.8em;
}
.section {
margin-bottom: 40px;
}
.section img {
display: block;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.note, .highlight {
background: #eaf4ff;
border-left: 5px solid var(--basarsoft-color);
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
pre {
background: #f4f4f4;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'Courier New', Courier, monospace;
}
a {
color: var(--basarsoft-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.icon {
margin-right: 8px;
color: var(--basarsoft-color);
}
img {
max-width: 5%;
height: auto;
}
.btn {
background-color: var(--basarsoft-color);
color: var(--white);
padding: 10px 20px;
border-radius: 5px;
text-align: center;
display: inline-block;
text-decoration: none;
font-weight: bold;
margin-top: 10px;
}
.btn:hover {
background-color: var(--basarsoft-color-light);
}
footer {
background: linear-gradient(135deg, var(--basarsoft-color), var(--basarsoft-color-light));
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 15px;
}
footer ul li {
display: inline;
}
footer ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
footer ul li a:hover {
text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 768px) {
header h1 {
font-size: 1.1em;
}
header nav ul {
flex-direction: column;
gap: 10px;
}
header nav ul li a {
font-size: 0.8em;
}
.container {
padding: 15px;
}
.section img {
max-width: 50%;
}
.note, .highlight {
padding: 15px;
}
.btn {
padding: 8px 16px;
font-size: 0.7em;
}
}
@media (max-width: 480px) {
header {
padding: 8px;
}
header h1 {
font-size: 0.8em;
}
header nav ul {
gap: 5px;
}
header nav ul li a {
font-size: 0.7em;
}
.container {
padding: 10px;
}
h2 {
font-size: 1.3em;
}
.section img {
max-width: 50%;
}
.note, .highlight {
padding: 10px;
}
.btn {
padding: 6px 12px;
font-size: 0.8em;
}
}
</style>
</head>

<header>
<h1>
<img src="assets/map-tracker/logo.png" alt="Logo"l>
Map Tracker Yürüyüş Aktivitesi Uygulaması
</h1>
<hr>
<nav>
<!-- tanıtım seection yönlendime-->
<ul>
<li><a href="#tanitim">Tanıtım</a></li>
<li><a href="#ozellikler">Özellikler</a></li>
<li><a href="#kurulum">Kurulum</a></li>
<li><a href="#kaynaklar-ve-araclar">Kaynaklar ve Araçlar</a></li>
<li><a href="#gelistirici-hakkinda">Geliştirici Hakkında</a></li>
</ul>
</nav>

</header>
<body>

<div class="container" id="tanitim">
<h2><i class="fa fa-info-circle" aria-hidden="true"></i> Tanıtım</h2>
<p>Bu proje, Flutter kullanarak geliştirilen bir yürüyüş aktivitesi uygulamasıdır. Uygulama, kullanıcıların yürüyüş/koşu aktivitelerini başlatıp bitirmelerini, bu aktivitelerin süresini ve mesafesini hesaplamalarını ve verileri SQLite/SpatiaLite veritabanına kaydetmelerini sağlar. Ayrıca geçmiş aktiviteleri görüntüleme ve detaylarını inceleme imkanı sunar. Uygulamanın diğer önemli özellikleri arasında şunlar bulunmaktadır:</p>
<ul>
<li>Kullanıcı dostu arayüz ile kolay gezinme ve kullanım.</li>
<li>Gerçek zamanlı konum ve rota takibi ile doğru mesafe ve süre hesaplaması.</li>
<li>Aktivitelerin hem lokal veritabanına hem de Firebase Firestore'a senkronize edilmesi.</li>
<li>Offline mod sayesinde internet bağlantısı olmadan da aktivite verilerini kaydedebilme.</li>
<li>Gelişmiş raporlama ve istatistik özellikleri ile kullanıcı performansının izlenmesi.</li>
</ul>
<div class="section">
<img src="assets/map-tracker/uygulama.png" alt="uygulama" style="max-width:50%">
</div>
<div class="note">
<p><strong>Not:</strong> Bu proje benim ilk Flutter projem olup, 0'dan öğrenerek 3 haftada geliştirdiğim bir çalışmadır. Proje süresince edindiğim deneyimleri ve karşılaştığım zorlukları bu uygulama üzerinde pratiğe dökerek kendimi geliştirdim. Bu nedenle, projede bazı eksiklikler veya hatalar olabilir. Geri bildirimleriniz benim için çok değerli.</p>
</div>
</div>


</div>
<div class="container" id="ozellikler">
<h2><i class="fas fa-star icon"></i>Özellikler</h2>

<div class="section">
<h3><i class="fas fa-mobile-alt icon"></i>1. Splash Ekranı</h3>
<p>Uygulama açıldığında 2-3 saniyelik bir logo animasyonu gösterilir.</p>
<img src="assets/map-tracker/Screenshot_20240719_125540.png" alt="Splash Ekranı">
</div>

<div class="section">
<h3><i class="fas fa-user icon"></i>2. Giriş/Kayıt Ekranı</h3>
<p>Google hesabı ile giriş (authentication) yapılır. Kullanıcılar mail, ad, soyad, şifre gibi bilgilerle kayıt olabilir. Kayıt bilgileri Firebase üzerinde tutulur ve login aşamasında bu bilgilerle giriş yapılabilir.</p>
<img src="assets/map-tracker/Screenshot_20240719_125557.png" alt="Giriş Ekranı">
<img src="assets/map-tracker/Screenshot_20240719_125604.png" alt="Kayıt Ekranı">
<img src="assets/map-tracker/Screenshot_20240719_125610.png" alt="Giriş/Kayıt Ekranı">
</div>

<div class="section">
<h3><i class="fas fa-tachometer-alt icon"></i>3. Dashboard</h3>
<p>Kullanıcının genel profili ve spor durumu (toplam mesafe, toplam süre, aktivite sayısı) gösterilir. Kullanıcının yeni aktivite başlatabileceği ve geçmiş aktiviteleri görüntüleyebileceği butonlar bulunur.</p>
<img src="assets/map-tracker/Screenshot_20240719_125727.png" alt="Dashboard">
</div>

<div class="section">
<h3><i class="fas fa-walking icon"></i>4. Yeni Aktivite Ekranı </h3>
<p>Kullanıcı, bu ekranda yürüyüş/koşu aktivitesini başlatıp bitirebilir. Aktif olunan süreçte kullanıcı, mevcut konumunu ve rota bilgisini harita üzerinde görebilir. Aktif aktivitenin toplam mesafesi, geçen süresi ve ortalama hızı anlık olarak güncellenir. Aktivite sonuçları Google Firestore veritabanına kaydedilir. Güncel hava durumu bilgisi OpenWeatherMap API'sinden alınır ve gösterilir.</p>
<img src="assets/map-tracker/Screenshot_20240719_125701.png" alt="Yeni Aktivite Ekranı">
</div>

<div class="section">
<h3><i class="fas fa-history icon"></i>5. Aktivite Geçmiş Hareketleri İçin Liste Ekranı </h3>
<p>Kullanıcının geçmiş aktivitelerini listeleyen bir ekran. Liste satırlarında tarih, yapılan mesafe ve detay butonları yer alır.</p>
<img src="assets/map-tracker/Screenshot_20240719_125712.png" alt="Aktivite Geçmiş Hareketleri">
</div>

<div class="section">
<h3><i class="fas fa-info-circle icon"></i>6. Aktivite Geçmiş Detay Ekranı</h3>
<p>Geçmiş aktiviteler listesinden seçilen detay ekranı açılır. Rota, toplam mesafe ve süre Google Firestore veritabanından alınarak gösterilir.</p>
<img src="assets/map-tracker/Screenshot_20240719_125718.png" alt="Aktivite Geçmiş Detay">
</div>

<div class="section">
<h3><i class="fas fa-database icon"></i>7. Firebase ve Firestore Veritabanı</h3>
<p>Firebase ve Firestore yapılandırması ve veri formatları ile ilgili örnek kayıtlar ve ekran görüntüleri proje içine eklenmelidir.</p>
<img src="assets/map-tracker/img.png" alt="Firebase Veritabanı">
<img src="assets/map-tracker/img_1.png" alt="Firebase Veritabanı">
<img src="assets/map-tracker/img_2.png" alt="Firebase Veritabanı">
</div>

<div class="highlight">
<p><strong>Önemli Not:</strong> Bu projenin son aşamasında bazı hatalar alınabilir. Hataların giderilmesi ve uygulamanın geliştirilmesi amacıyla geri bildirimlerinizi paylaşmanız önemlidir.</p>
</div>
</div>
<!-- Kurulum section-->
<div class="container" id="kurulum">
<h2><i class="fas fa-download icon"></i>Kurulum</h2>
<p>Projeyi klonlayın ve gerekli paketleri yükleyin.</p>
<pre class="code-block">
<code>git clone https://github.com/Furk4nBulut/Map-Tracker-Flutter.git</code>
</pre>
<pre class="code-block">
<code>cd Map-Tracker-Flutter</code>
</pre>
<pre class="code-block">
<code>flutter pub get</code>
</pre>
<p>Uygulamayı çalıştırın.</p>
<pre class="code-block">
<code>flutter run</code>
</pre>
</div>

<!-- kaynaklar ve araçlar section-->


<div class="container" id="kaynaklar-ve-araclar">


<h2><i class="fas fa-tools icon"></i>Kaynaklar ve Araçlar</h2>
<ul>
<li><i class="fas fa-external-link-alt icon"></i><a href="https://flutter.dev/">Flutter</a></li>
<li><i class="fas fa-external-link-alt icon"></i><a href="https://firebase.google.com/">Firebase</a></li>
<li><i class="fas fa-external-link-alt icon"></i><a href="https://pub.dev/packages/sqflite">sqflite</a></li>
<li><i class="fas fa-external-link-alt icon"></i><a href="https://openweathermap.org/api">OpenWeatherMap API</a></li>
</ul>
</div>

<!-- about developer -->
<div class="container" id="gelistirici-hakkinda">
<h2><i class="fas fa-user icon"></i>Geliştirici Hakkında</h2>
<p>Merhaba, ben <strong>Furkan Bulut</strong>.Bilgisayar Mühendisliği öğrencisiyim. Bu projeyi Flutter öğrenirken geliştirdim. Flutter ile mobil uygulama geliştirme konusunda kendimi geliştirmek istiyorum. Projem hakkında geri bildirimlerinizi paylaşarak bana destek olabilirsiniz.</p>
<div class="note">
<p> <h2><i class="fas fa-users icon"></i>Katkıda Bulunanlar</h2>
<p><a href="https://github.com/Furk4nBulut/Map-Tracker-Flutter">Furkan Bulut</a></p>

<h2><i class="fas fa-envelope icon"></i>İletişim</h2>
<ul>
<li><a href="mailto:[email protected]">Gmail</a></li>
<li><a href="https://www.linkedin.com/in/furkanblt/">LinkedIn</a></li>
<li><a href="https://furk4nbulut.github.io/">Website</a></li>
</ul>

<p>Herhangi bir sorun veya öneriniz olursa lütfen benimle iletişime geçin.</p>

</p>
</div>
</div>
</body>

<footer>
<p>&copy; 2024 Map Tracker Uygulaması. Tüm Hakları Saklıdır.</p>
<ul>
<li><a href="https://github.com/Furk4nBulut" target="_blank"><i class="fab fa-github icon"></i> GitHub</a></li>
<li><a href="https://www.linkedin.com/in/furkanbulut/" target="_blank"><i class="fab fa-linkedin icon"></i> LinkedIn</a></li>
<li><a href="mailto:[email protected]"><i class="fas fa-envelope icon"></i> Email</a></li>
</ul>
</footer>
</body>
</html>

0 comments on commit aa97b5a

Please sign in to comment.