kari/about.html at main · linkalls/kari · GitHub

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
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>About - kari URL Shortening Service</title>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
 <style>
    #menu {
      display: none;
    }
    #menu:checked ~ .menu {
      display: block;
    }
 </style>
</head>
<body class="bg-gray-200 text-gray-800 antialiased font-sans min-h-screen flex flex-col">
 <nav class="bg-gray-800 text-white px-6 py-4">
    <input type="checkbox" id="menu" class="hidden">
    <label for="menu" class="cursor-pointer md:hidden block">
      <svg class="fill-current text-white" width="20" height="20" viewBox="0 0 20 20">
        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
      </svg>
    </label>
    <div class="menu hidden md:block">
      <a href="/" class="text-white no-underline hover:text-gray-200 mr-4">Home</a>
      <a href="/about.html" class="text-white no-underline hover:text-gray-200 mr-4">About</a>
      <a href="/contact" class="text-white no-underline hover:text-gray-200">Contact</a>
    </div>
 </nav>

 <main class="mx-4 sm:container sm:mx-auto sm:max-w-xl sm:p-6 flex-grow">
    <h1 class="mt-8 text-3xl font-bold text-indigo-500 mb-4">About kari</h1>
    <p class="text-lg">
      kariは、シンプルなインターフェースでユーザーがURLを短縮し、それを他のユーザーと共有するためのウェブサービスです。このプロジェクトは、PHPを使用して開発され、ユーザー認証、URLの短縮、アクセスログの記録などの機能を提供します。
    </p>
    <h2 class="text-2xl mb-4 mt-8">Features</h2>
    <ul class="list-disc list-inside">
      <li>ユーザー認証: ユーザーは自分のアカウントを作成し、ログインすることで、短縮URLを保存し、ダッシュボードからアクセスログを確認することができます。</li>
      <li>URLの短縮: ユーザーは長いURLを短縮し、それを他のユーザーと共有することができます。短縮URLは、元のURLへのリダイレクトを提供します。</li>
      <li>アクセスログ: 短縮URLへのアクセスは記録され、ユーザーはダッシュボードからアクセス数やアクセス元を確認することができます。</li>
      <li>実行しやすさ: レンタルサーバーでも実行しやすいようにphpで書かれています。</li>
    </ul>
    <h2 class="text-2xl mb-4 mt-8">How to Use</h2>
    <ol class="list-decimal list-inside">
      <li>ユーザー登録: ユーザーはサインアップページから新しいアカウントを作成します。</li>
      <li>ログイン: ユーザーはログインページから既存のアカウントでログインします。</li>
      <li>URLの短縮: ユーザーはダッシュボードからURLを短縮し、それを他のユーザーと共有します。</li>
      <li>アクセスログの確認: ユーザーはダッシュボードから短縮URLへのアクセスログを確認します。</li>
    </ol>
    <h2 class="text-2xl mb-4 mt-8">Technologies Used</h2>
    <ul class="list-disc list-inside">
      <li>フロントエンド: HTML、CSS、JavaScript, Tailwind CSS</li>
      <li>バックエンド: PHP</li>
      <li>データベース: MySQL</li>
    </ul>
    <h2 class="text-2xl mb-4 mt-8">Security</h2>
    <ul class="list-disc list-inside">
      <li>パスワードハッシュ: ユーザーのパスワードは安全にハッシュされてデータベースに保存されます。</li>
      <li>SQLインジェクション対策: プリペアドステートメントを使用してSQLインジェクション攻撃を防ぎます。</li>
    </ul>
    <h2 class="text-2xl mb-4 mt-8">Contributing</h2>
    <p class="text-lg">
      バグ報告や機能改善の提案は、プロジェクトの成長に寄与します。貢献をお待ちしています。
    </p>
 </main>

 <footer class="bg-gray-800 text-white text-center p-4 mt-8">
    <p>Copyright &copy; 2024 kariter</p>
 </footer>
</body>
</html>