CRISP/TEST/templates/home.html at 085da55eb810cec9f9ad24fc12c609952b9d0f4c · MLSAKIIT/CRISP · 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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRISP | Modern Request Logger</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .gradient-bg {
            background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
        }

        .card-hover {
            transition: transform 0.2s ease-in-out;
        }

        .card-hover:hover {
            transform: translateY(-5px);
        }

        .box {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
        }

        .flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .flex-item {
            flex: 1;
            min-width: 45%;
        }

        .hero-section {
            background: url('https://via.placeholder.com/1200x600') no-repeat center center/cover;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body class="min-h-screen bg-black text-white">
    <!-- Navbar -->
    <nav class="fixed w-full z-50 glass-effect">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl font-bold text-blue-400">CRISP</span>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-center space-x-4">
                        <a href="#" class="text-gray-300 hover:text-blue-400 px-3 py-2 rounded-md font-medium">Recent</a>
                        <a href="#about" class="text-gray-300 hover:text-blue-400 px-3 py-2 rounded-md font-medium">About</a>
                        <a href="#contact" class="text-gray-300 hover:text-blue-400 px-3 py-2 rounded-md font-medium">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section gradient-bg text-center">
        <div>
            <h1 class="text-4xl font-bold mb-4">Welcome to CRISP</h1>
            <p class="text-xl mb-8">Modern Request Logger for your development needs</p>
            <a href="#recent-requests" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg">Get Started</a>
        </div>
    </section>

    <!-- Main Content -->
    <main class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <h2 id="recent-requests" class="text-4xl font-bold text-gray-100 mb-8">Recent Requests</h2>

        <!-- Request Cards -->
        <section>
            {% for entry in entries %}
                <article class="entry flex-container card-hover">
                    <div class="box flex-item">
                        <h2 class="entry__title">Request</h2>
                        <p class="entry__content"><pre style="overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; font-size: 15px;">{{entry[1]}}</pre></p>
                    </div>
                    <div class="box flex-item">
                        <h2 class="entry__title">Response</h2>
                        <p class="entry__content"><pre style="overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; font-size: 15px;">{{entry[2]}}</pre></p>
                    </div>
                </article>
            {% endfor %}
        </section>
    </main>

    <!-- About Section -->
    <section id="about" class="bg-gray-800 py-16 text-center text-white">
        <h2 class="text-3xl font-bold mb-4">About CRISP</h2>
        <p class="text-xl mb-4">CRISP is a modern and easy-to-use request logger that helps developers track and debug API calls and responses in real-time.</p>
        <p class="text-lg">It features an intuitive interface and powerful filtering to view requests and responses with ease.</p>
    </section>

    <!-- Footer -->
    <footer id="contact" class="bg-blue-800 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
                    <p>If you have any questions, feel free to reach out to us:</p>
                    <ul class="mt-4 space-y-2">
                        <li>Email: <a href="mailto:info@crisp.com" class="text-blue-400">info@crisp.com</a></li>
                        <li>Phone: +1 (123) 456-7890</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Social</h3>
                    <div class="space-y-2">
                        <a href="#" class="text-blue-400">Twitter</a>
                        <a href="#" class="text-blue-400">Facebook</a>
                        <a href="#" class="text-blue-400">GitHub</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>