diff --git a/ip.html b/ip.html
index a63e5fc..9d275b4 100644
--- a/ip.html
+++ b/ip.html
@@ -11,7 +11,7 @@
-
+
หมายเลข IP
diff --git a/style.css b/style.css
index 1704e07..9a4fe26 100644
--- a/style.css
+++ b/style.css
@@ -5,87 +5,17 @@ html *
font-family: Cantarell, sans-serif;
}
-body {
- background-color: #fafafa;
-}
-
.header {
-
- display: flex;
- justify-content: center;
- align-items: center;
-
-}
-.button {
- background-color: #EBEBEB;
- color: black;
- border: none;
- border-radius: 8px;
- justify-content: center;
- align-items: center;
- text-decoration: none;
- display: flex;
- font-size: 16px;
- font-weight: bold;
- margin: 4px 2px;
- cursor: pointer;
- width: 100px;
- height: 35px;
- transition-duration: 0.2s;
-}
-
-.button:hover {
- background-color: #E0E0E0;
-}
-
-.footer {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.bigbutton {
-
- background-color: #fafafa;
- color: black;
- border-radius:10px;
- justify-content: center;
- align-items: center;
- text-decoration: none;
- display: grid;
- font-size: 14px;
- cursor: pointer;
- padding-right: 15px;
- padding-left: 15px;
- margin-bottom: 20px;
- transition-duration: 0.2s;
-}
-
-.bigbutton:hover {
- background-color: #E0E0E0;
-
-}
-
-.grid-container {
- display: grid;
- justify-content: center;
- grid-template-areas:
- 'left middle right'
-}
-
-.left {
- grid-area: left;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.middle {
grid-area: middle;
width: 15cm;
}
-
-.right {
- grid-area: right;
-}
-
+
.inner-grid {
display: grid;
align-items: center;
@@ -93,64 +23,246 @@ body {
grid-template-areas:
'inner-left inner-middle inner-right'
}
+@media (prefers-color-scheme: light) {
-.list {
- border-radius: 12px 12px 12px 12px;
- background-color: rgba(255, 255, 255, 1);
- box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
- margin-bottom: 50px;
-}
+ body {
+ background-color: #fafafa;
+ }
-.separator {
- width: 15cm;
- height: 1px;
- background-color: rgba(237, 237, 237, 1);
-}
+ .logo {
+ color: #000;
+ }
-.listaction {
- display: grid;
- grid-template-columns: 1fr 1cm;
- text-decoration: none;
- color: black;
- align-items: center;
+ .grid-container {
+ display: grid;
+ justify-content: center;
+ color: #000000;
+ grid-template-areas:
+ 'left middle right'
+ }
-}
+ .button {
+ background-color: #EBEBEB;
+ color: black;
+ border: none;
+ border-radius: 8px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: flex;
+ font-size: 16px;
+ font-weight: bold;
+ margin: 4px 2px;
+ cursor: pointer;
+ width: 100px;
+ height: 35px;
+ transition-duration: 0.2s;
+ }
-.topbar {
- position: absolute;
- width: 100%;
- height: 1.2cm;
- top: 0px;
- left: 0px;
- background-color: rgba(255, 255, 255, 1);
- border: 1px solid rgba(224, 224, 224, 1);
-}
+ .button:hover {
+ background-color: #E0E0E0;
+ }
-.listinfo {
- display: grid;
- grid-template-columns: 1fr 1fr;
- text-decoration: none;
- color: black;
- align-items: center;
+ .bigbutton {
+ background-color: #fafafa;
+ color: black;
+ border-radius:10px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: grid;
+ font-size: 14px;
+ cursor: pointer;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-bottom: 20px;
+ transition-duration: 0.2s;
+ }
+
+ .bigbutton:hover {
+ background-color: #E0E0E0;
+ }
+
+ .list {
+ border-radius: 12px 12px 12px 12px;
+ background-color: #ffffff;
+ box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
+ margin-bottom: 50px;
+ }
+
+ .separator {
+ width: 15cm;
+ height: 1px;
+ background-color: rgba(237, 237, 237, 1);
+ }
+
+ .listaction {
+ display: grid;
+ grid-template-columns: 1fr 1cm;
+ text-decoration: none;
+ color: black;
+ align-items: center;
+ }
+
+ .topbar {
+ position: absolute;
+ width: 100%;
+ height: 1.2cm;
+ top: 0px;
+ left: 0px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(224, 224, 224, 1);
+ color: #000000;
+ }
+
+ .listinfo {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ text-decoration: none;
+ color: black;
+ align-items: center;
+ }
+
+ .backbutton {
+ position: absolute;
+ color: black;
+ border-radius:10px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: grid;
+ font-size: 14px;
+ cursor: pointer;
+ margin: 0.1cm;
+ transition-duration: 0.2s;
+ width: 1cm;
+ height: 1cm;
+ }
+
+ .backbutton:hover {
+ background-color: #DEDEDE;
+ }
}
-.backbutton {
- position: absolute;
- color: black;
- border-radius:10px;
- justify-content: center;
- align-items: center;
- text-decoration: none;
- display: grid;
- font-size: 14px;
- cursor: pointer;
- margin: 0.1cm;
- transition-duration: 0.2s;
- width: 1cm;
- height: 1cm;
-}
+@media (prefers-color-scheme: dark) {
-.backbutton:hover {
- background-color: #DEDEDE;
-}
\ No newline at end of file
+ .logo {
+ color: #fff;
+ }
+
+ body {
+ background-color: #222222;
+ }
+
+ .grid-container {
+ display: grid;
+ justify-content: center;
+ color: #ffffff;
+ grid-template-areas:
+ 'left middle right'
+ }
+
+ .button {
+ background-color: #4a4a4a;
+ color: #ffffff;
+ border: none;
+ border-radius: 8px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: flex;
+ font-size: 16px;
+ font-weight: bold;
+ margin: 4px 2px;
+ cursor: pointer;
+ width: 100px;
+ height: 35px;
+ transition-duration: 0.2s;
+ }
+
+ .button:hover {
+ background-color: #595959;
+ }
+
+ .bigbutton {
+ background-color: #222222;
+ color: #ffffff;
+ border-radius:10px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: grid;
+ font-size: 14px;
+ cursor: pointer;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-bottom: 20px;
+ transition-duration: 0.2s;
+ }
+
+ .bigbutton:hover {
+ background-color: #595959;
+ }
+
+ .list {
+ border-radius: 12px 12px 12px 12px;
+ background-color: #363636;
+ box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
+ margin-bottom: 50px;
+ }
+
+ .separator {
+ width: 15cm;
+ height: 1px;
+ background-color: #232323;
+ }
+
+ .listaction {
+ display: grid;
+ grid-template-columns: 1fr 1cm;
+ text-decoration: none;
+ color: #ffffff;
+ align-items: center;
+ }
+
+ .topbar {
+ position: absolute;
+ width: 100%;
+ height: 1.2cm;
+ top: 0px;
+ left: 0px;
+ background-color: #303030;
+ border: 1px solid #1f1f1f;
+ color: #ffffff;
+ }
+
+ .listinfo {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ text-decoration: none;
+ color: #ffffff;
+ align-items: center;
+ }
+
+ .backbutton {
+ position: absolute;
+ color: #ffffff;
+ border-radius:10px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: grid;
+ font-size: 14px;
+ cursor: pointer;
+ margin: 0.1cm;
+ transition-duration: 0.2s;
+ width: 1cm;
+ height: 1cm;
+ }
+
+ .backbutton:hover {
+ background-color: #3e3e3e;
+ }
+
+}