minhyeok4dev.github.io/inapp.json at main · minhyeok4dev/minhyeok4dev.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "data": [
    {
      "id": "inapp1",
      "htmlString": "<!DOCTYPE html><html lang=\"en\"> <meta charset=\"UTF-8\" /><meta content=\"width=device-width,initial-scale=1\" name=\"viewport\" /><title>Bottom Sheet</title ><style> * { box-sizing: border-box; } body { padding-top: var(--safe-area-inset-top); padding-right: var(--safe-area-inset-right); padding-bottom: calc(var(--safe-area-inset-bottom) + 20px); padding-left: var(--safe-area-inset-left); font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif; }, html { width: 100%; height: 100%; background-color: #fff0; margin: 0; padding: 0; -moz-tap-highlight-color: #fff0; -webkit-tap-highlight-color: #fff0; text-size-adjust: none; overscroll-behavior: none; overflow: hidden; } .background { width: 100%; height: 100%; background-color: rgb(0 0 0 / 0.5); position: fixed; top: 0; left: 0; } .bottom_sheet { width: 100%; height: 50%; position: fixed; bottom: 0; left: 0; animation: slideUp 0.3s ease-in-out; background-color: #fff; border-radius: 24px 24px 0 0; overflow: hidden; border-top: 1px solid #e0e0e0; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .controller { position: relative; width: 100%; height: 56px; display: flex; align-items: center; border-top: 1px solid #e0e0e0; } .button { width: 50%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; overflow: hidden; } .line { position: absolute; left: 50%; width: 1px; height: 16px; background-color: #e0e0e0; border-radius: 2px; } .image_wrapper { width: 100%; height: calc(100% - 56px); } .image { width: 100%; height: 100%; background-image: url(https://imagedelivery.net/lfkkXChLw6uG9RcA2ff5fg/d1fa0c01-2871-46bd-1585-c68d1084c000/flarelane); background-size: cover; background-position: center; } .gray { color: #818181; } </style> <div class=\"background\"></div> <div class=\"bottom_sheet\"> <div class=\"image_wrapper\"><div class=\"image\"></div></div> <div class=\"controller\"> <div class=\"button gray\">다시 보지 않기</div> <div class=\"line\"></div> <div class=\"button\">확인</div> </div> </div></html>"
    },
    {
      "id": "inapp3",
      "htmlString": "<!DOCTYPE html><html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <title>Fullsize</title> <style> * { box-sizing: border-box; } body, html { width: 100%; height: 100%; background-color: #fff0; margin: 0; padding: 0; -moz-tap-highlight-color: #fff0; -webkit-tap-highlight-color: #fff0; text-size-adjust: none; overscroll-behavior: none; overflow: hidden; } .container { width: 100%; height: calc(100% - 56px); background-image: url(https://imagedelivery.net/lfkkXChLw6uG9RcA2ff5fg/a7cceb19-4f72-472b-ea53-25e801016100/flarelane); background-size: cover; background-position: center; } .controller { position: relative; width: 100%; height: 56px; display: flex; align-items: center; border-top: 1px solid #e0e0e0; } .button { width: 50%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; overflow: hidden; } .gray { color: #818181; } </style> </head> <body> <div class=\"container\"></div> <div class=\"controller\"> <div class=\"button gray\">다시 보지 않기</div> <div class=\"button\">확인</div> </div> </body></html>"
    },
    {
      "id": "inapp2",
      "htmlString": "<!DOCTYPE html><html lang=\"en\"> <meta charset=\"UTF-8\" /><meta content=\"width=device-width,initial-scale=1\" name=\"viewport\" /><title>Base</title ><style> * { box-sizing: border-box; } body { padding-top: var(--safe-area-inset-top); padding-right: var(--safe-area-inset-right); padding-bottom: calc(var(--safe-area-inset-bottom) + 20px); padding-left: var(--safe-area-inset-left); font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif; }, html { width: 100%; height: 100%; background-color: #fff0; margin: 0; padding: 0; -moz-tap-highlight-color: #fff0; -webkit-tap-highlight-color: #fff0; text-size-adjust: none; overscroll-behavior: none; overflow: hidden; } .background { width: 100%; height: 100%; background-color: rgb(0 0 0 / 0.5); position: fixed; top: 0; left: 0; } .container { width: calc(100% - 32px); height: 490px; position: fixed; transform: translate(-50%, -50%); top: 50%; left: 50%; background-color: #fff; border-radius: 16px; overflow: hidden; } .controller { position: relative; width: 100%; height: 56px; display: flex; align-items: center; border-top: 1px solid #e0e0e0; } .button { width: 50%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; overflow: hidden; } .line { position: absolute; left: 50%; width: 1px; height: 16px; background-color: #e0e0e0; border-radius: 2px; } .image_wrapper { width: 100%; height: calc(100% - 56px); } .image { width: 100%; height: 100%; background-image: url(https://imagedelivery.net/lfkkXChLw6uG9RcA2ff5fg/d1fa0c01-2871-46bd-1585-c68d1084c000/flarelane); background-size: cover; background-position: center; } .gray { color: #818181; } </style> <div class=\"background\"></div> <div class=\"container\"> <div class=\"image_wrapper\"><div class=\"image\"></div></div> <div class=\"controller\"> <div class=\"button gray\">다시 보지 않기</div> <div class=\"line\"></div> <div class=\"button\">확인</div> </div> </div></html>"
    }
  ]
}