-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
233 lines (211 loc) · 10.1 KB
/
index.html
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!-- TODO: Fix Image responsivenes on narrow screens-->
<!-- TODO: Use tailwind for centering elements (not justify-content) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="AutoDTB is an artificial intelligence powered automobile recommendation system for people who want to pick the right choice. Massive database and automobile news, AutoDTB is #1 place for car people!" />
<title>AutoDTB | Home Page</title>
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Google Analytics -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N9B10J0VN4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-N9B10J0VN4');
</script>
<!-- Favicons -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/image/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/image/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/image/favicon-16x16.png">
<!-- CSS Animate -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- Tailwind CSS -->
<!-- Not: Geliştirme için tailwind'i npm ile kurun. Aşağıdaki link production kanalı için uygundur -->
<!-- Tailwind CLI'ı kurmak için node.js lazım, sonrasında https://tailwindcss.com/docs/installation takip edin -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- Google Fonts + poppins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
</head>
<body>
<div class="row w-[1080px]">
<div class="col">
<div class="row text-justify mt-[72px] ml-[74px] h-[353px] w-[820px]">
<div id="headingContainer">
<h1 id="headingh1" class="poppins bold text-[180px]/[120px]">AutoDTB</h1>
<h3 id="headingh3" class="poppins regular text-[75px] ">is under construction</h3>
<p id="headingp" class="poppins regular text-2xl/[30px]">
AutoDTB is an <span class="semibold color-green">artificial intelligence powered</span> <span
class="semibold">automobile recommendation</span class="semibold"> system for people who
want to pick the
right choice. <span class="semibold">Massive database</span> and <span
class="semibold">automobile news</span>, AutoDTB is #1 place for car-people!
</p>
</div>
</div>
<div class="row">
<!-- Subscribe to newsletter-->
<div id="newsletterContainer" class="flex ml-[83px] mt-[40px] w-[380px] h-[312px]">
<form id="subscribeForm">
<h2 id="newsletterHeader" class="poppins semibold text-[60px] justify-start w-[380px]"><span
class="color-red">Notify me</span>
<p>on news</p>
</h2>
<div class="col mt-6">
<div class="sm:col-span-4">
<label for="email" class="poppins regular">Email Address*</label>
<div class="relative mt-2">
<input type="text" name="email" id="email" autocomplete="email"
class="bg-[#D9D9D9]/20 py-3 h-[30px] pr-9 block w-full pl-1 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 poppins regular text-black text-sm"
placeholder="johndoe@example.com">
</div>
</div>
<div class="sm:col-span-4">
<div class="col mt-3">
<p id="findout" class="poppins regular">How did you find out about us?</p>
<select
class="bg-[#D9D9D9]/20 py-3 pr-9 block shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:text-gray-400 poppins regular w-full rounded-md">
<option selected>Pick an option</option>
<option>Through a friend</option>
<option>Social Media</option>
<option>Search Engine</option>
<option>Third-Party Review</option>
<option>Other</option>
</select>
</div>
</div>
<div id="agreementContainer">
<input type="checkbox" id="agreementCheckbox">
<label for="agreementCheckbox" class="poppins text-xs mt-7">I agree to receive the
newsletter and know that I can easily </label> <label for="agreementCheckbox"
class="poppins text-xs">unsubscribe at any time.*</label>
</div>
<div class="row mt-3" id="newsletterButtonContainer">
<div class="col" id="subscribeButtonContainer">
<button id="subscribeButton" class="poppins button_primary h-[55px] w-[195px]"><span
id="subscribeButtonText"
class="poppins decoration-white text-sm">Subscribe</span></button>
</div>
<div class="col" id="manageSubscriptionButtonContainer">
<button id="manageSubscriptionButton"
class="poppins button_secondary h-[55px] w-[145px]"><span
id="manageSubscriptionButtonText"
class="poppins decoration-white text-xs text-center">Manage
Subscription</span></button>
</div>
</div>
</form>
</div>
<!-- Contact -->
<div id="contactContainer" class="col text-justify ml-14 w-[380px] h-[308px]">
<form class="w-[380px] h-[308px]">
<h2 id="contactHeader" class="poppins semibold text-[60px]">Contact us</h2>
<p id="contactParagraph" class="poppins font-light mt-3 mb-4 text-xl">Alternatively, you can
always contact us on Instagram & Twitter!</p>
<div class="row">
<div class="sm:col-span-4">
<label for="email" class="poppins regular">Email Address*</label>
<div class="relative mt-2">
<input type="text" name="email" id="enterMail" autocomplete="email"
class="bg-[#D9D9D9]/20 py-3 h-[30px] pr-9 block w-full pl-1 rounded-md shadow-sm poppins regular text-black text-sm"
placeholder="johndoe@example.com">
</div>
</div>
<div id="contactReferrerContainer" class="sm:col-span-4">
<div class="col mt-3">
<label for="reasonSelect" id="reasonSelectLabel" class="poppins">Reason*</label>
<select
class="bg-[#D9D9D9]/20 py-3 pr-9 block shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:text-gray-400 poppins regular w-full rounded-md">
<option selected>Pick an option</option>
<option value="message">Message</option>
<option value="bugReport">Bug Report</option>
<option value="advice">Advice</option>
<option value="cooperation">Business & Cooperation</option>
</select>
</div>
</div>
</div>
<div id="messageInputContainer">
<label for="messageInput" id="messageInputLabel" class="poppins mt-3">Message*</label>
<textarea placeholder="Dear AutoDTB team..." name="messageInput" id="messageInput" cols="45"
rows="4"
class="bg-[#D9D9D9]/20 poppins text-sm py-1 pr-9 block w-full pl-1 resize-none shadow-sm focus:border-blue-500 focus:ring-blue-500 rounded-md"></textarea>
</div>
<div class="row mt-3" id="contactButtonContainer">
<div class="col" id="contactAttachButtonContainer">
<button id="contactAttachButton" class="poppins button_primary h-[55px] w-[195px]"><span
id="subscribeButtonText" class="poppins decoration-white text-sm">Send
</span></button>
</div>
<div class="col" id="contactSubmitButtonContainer">
<button id="contactSubmitButton"
class="poppins button_secondary h-[55px] w-[145px]"><span
id="manageSubscriptionButtonText"
class="poppins decoration-white text-xs text-center">Add Attachment <span
class="">(optional)</span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5.3 JSDelivr Import Script-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!-- DMCA Copyrights-->
<script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"></script>
<!-- Firebase-->
<script>
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAWDZyvtc5yI2VGt93wPC6khoEDbQt3WuU",
authDomain: "autodtbv2.firebaseapp.com",
databaseURL: "https://autodtbv2-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "autodtbv2",
storageBucket: "autodtbv2.appspot.com",
messagingSenderId: "1090730753397",
appId: "1:1090730753397:web:509220cf063dcf73bde73c",
measurementId: "G-LSC9J3G3V3"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
import {getDatabase, set, get, update, remove, ref, child}
from "https://www.gstatic.com/firebasejs/10.0.0/firebase-database.js"
const db = getDatabase();
var enterMail = document.querySelector("#enterMail");
var subscribeButton = document.querySelector("#subscribeButton");
function InsertData() {
set(ref(db, "Maillist/"), {
Mail: enterMail.value
})
.then(()=>{
alert("You have successfully signed up for our newsletter!")
})
.catch((error)=>{
alert(error)
})
}
subscribeButton.addEventListener('click', InsertData);
</script>
</body>
</html>