qtest/index.html at main · hidek3/qtest · 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuantumLogistics - 量子コンピューターで災害時の物資輸送を最適化</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header {
            background: #0056b3;
            color: #ffffff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #e8491d 3px solid;
        }
        header a {
            color: #ffffff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
        }
        header ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        header li {
            display: inline;
            padding: 0 20px 0 20px;
        }
        header #branding {
            float: left;
        }
        header #branding h1 {
            margin: 0;
        }
        header nav {
            float: right;
            margin-top: 10px;
        }
        .highlight, header .current a {
            color: #e8491d;
            font-weight: bold;
        }
        #showcase {
            min-height: 400px;
            background: url('https://images.unsplash.com/photo-1603738116867-a5f9a4d9b3b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80') no-repeat center center/cover;
            text-align: center;
            color: #ffffff;
        }
        #showcase h1 {
            margin-top: 100px;
            font-size: 55px;
            margin-bottom: 10px;
        }
        #showcase p {
            font-size: 20px;
        }
        #features, #quantum-advantage, #how-it-works {
            margin-top: 20px;
        }
        .feature-box, .advantage-box, .step-box {
            float: left;
            width: 30%;
            padding: 10px;
            text-align: center;
        }
        .feature-box img, .advantage-box img, .step-box img {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
        #contact form {
            margin-top: 20px;
        }
        #contact form input, #contact form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        #contact form button {
            display: block;
            width: 100%;
            padding: 10px;
            background: #0056b3;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }
        footer {
            padding: 20px;
            margin-top: 20px;
            color: #ffffff;
            background-color: #0056b3;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1><span class="highlight">Quantum</span>Logistics</h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="#showcase">ホーム</a></li>
                    <li><a href="#features">特徴</a></li>
                    <li><a href="#quantum-advantage">量子の利点</a></li>
                    <li><a href="#how-it-works">使い方</a></li>
                    <li><a href="#contact">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="showcase">
        <div class="container">
            <h1>災害時の物資輸送を量子コンピューターで最適化</h1>
            <p>QuantumLogisticsは、量子コンピューターの力を活用して、災害時の物資輸送を迅速かつ効率的に行います。</p>
        </div>
    </section>

    <section id="features">
        <div class="container">
            <h2>サービスの特徴</h2>
            <div class="feature-box">
                <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="量子最適化">
                <h3>量子最適化</h3>
                <p>量子アルゴリズムを使用して、複雑な輸送ルートを瞬時に最適化します。</p>
            </div>
            <div class="feature-box">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="リアルタイム対応">
                <h3>リアルタイム対応</h3>
                <p>刻々と変化する状況に合わせて、輸送計画をリアルタイムで更新します。</p>
            </div>
            <div class="feature-box">
                <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="AI連携">
                <h3>AI連携</h3>
                <p>人工知能と量子コンピューターを組み合わせ、より高度な意思決定をサポートします。</p>
            </div>
        </div>
    </section>

    <section id="quantum-advantage">
        <div class="container">
            <h2>量子コンピューターの利点</h2>
            <div class="advantage-box">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="圧倒的な処理速度">
                <h3>圧倒的な処理速度</h3>
                <p>従来のコンピューターでは数日かかる計算を数分で実行します。</p>
            </div>
            <div class="advantage-box">
                <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="複雑な問題の解決">
                <h3>複雑な問題の解決</h3>
                <p>多変数の最適化問題を効率的に解決し、最適な輸送計画を立案します。</p>
            </div>
            <div class="advantage-box">
                <img src="https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="省エネルギー">
                <h3>省エネルギー</h3>
                <p>高効率な計算により、エネルギー消費を大幅に削減します。</p>
            </div>
        </div>
    </section>

    <section id="how-it-works">
        <div class="container">
            <h2>使用方法</h2>
            <div class="step-box">
                <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="データ入力">
                <h3>ステップ1: データ入力</h3>
                <p>物資の種類、量、目的地などの情報を入力します。</p>
            </div>
            <div class="step-box">
                <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="量子処理">
                <h3>ステップ2: 量子処理</h3>
                <p>量子コンピューターが最適な輸送計画を計算します。</p>
            </div>
            <div class="step-box">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="結果表示">
                <h3>ステップ3: 結果表示</h3>
                <p>最適化された輸送計画が表示され、即座に実行できます。</p>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <h2>お問い合わせ</h2>
            <form>
                <input type="text" name="name" placeholder="お名前" required>
                <input type="email" name="email" placeholder="メールアドレス" required>
                <textarea name="message" placeholder="メッセージ" required></textarea>
                <button type="submit">送信</button>
            </form>
        </div>
    </section>

    <footer>
        <p>&copy; 2025 QuantumLogistics. All rights reserved.</p>
    </footer>
</body>
</html>