diff --git a/browser.html b/browser.html index 7f0abde..dd35fbb 100644 --- a/browser.html +++ b/browser.html @@ -11,7 +11,7 @@
- +

ข้อมูลเบราว์เซอร์

diff --git a/icons/left.svg b/icons/left.svg deleted file mode 100644 index 7061d6d..0000000 --- a/icons/left.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/icons/right.svg b/icons/right.svg deleted file mode 100644 index c8d83ea..0000000 --- a/icons/right.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/index.html b/index.html index 17c1f5e..06e986c 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
TTT Logo -

TechTransThai 🏳️‍⚧️

+

TechTransThai 🏳️‍⚧️

@@ -206,7 +206,8 @@

หมายเลข IP

- + +
@@ -215,7 +216,7 @@

ข้อมูลเบราว์เซอร์

- +
@@ -224,7 +225,7 @@
- latenightdef + latenightdef
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; + } + +}