-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a718d38
commit 2d8ed06
Showing
2 changed files
with
226 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" class="dark-theme" style="color-scheme: dark"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="color-scheme" content="light dark" /> | ||
| <title>Entity-Relationship Diagram Editor App</title> | ||
| <meta name="description" content="Entity-Relationship Diagram Editor App" /> | ||
| <meta name="application-name" content="ERD Editor" /> | ||
| <meta name="keywords" content="erd editor, app, PWA, support, offline, real-time collaboration, encryption, local-first, autosave, browser, synchronization" /> | ||
| <meta name="author" content="SeungHwan-Lee" /> | ||
| <meta name="generator" content="codemo" /> | ||
| <meta name="mobile-web-app-capable" content="yes"> | ||
| <!-- Theme color --> | ||
| <meta name="theme-color" content="#111213" /> | ||
| <!-- Favicon --> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="https://gigamaster.github.io/codemo/asset/favicon/apple-touch-icon.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="https://gigamaster.github.io/codemo/asset/favicon/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="https://gigamaster.github.io/codemo/asset/favicon/favicon-16x16.png" /> | ||
| <link rel="manifest" href="https://gigamaster.github.io/codemo/asset/favicon/site.webmanifest" /> | ||
| <link rel="mask-icon" href="https://gigamaster.github.io/codemo/asset/favicon/safari-pinned-tab.svg" color="#5bbad5" /> | ||
| <link rel="shortcut icon" href="https://gigamaster.github.io/codemo/asset/favicon/favicon.ico" /> | ||
| <meta name="msapplication-TileColor" content="#111213" /> | ||
| <meta name="msapplication-config" content="https://gigamaster.github.io/codemo/asset/favicon/browserconfig.xml" /> | ||
| <style> | ||
| body { | ||
| background: radial-gradient(circle at 50% 100%, #262b2f, #000); | ||
| color: #abc; | ||
| font: normal 16px/1.5 system-ui, sans-serif; | ||
| height: 100vh; | ||
| margin: 0; | ||
| overflow: hidden; | ||
| padding: 0; | ||
| width: 100vw; | ||
| } | ||
| </style> | ||
| <script type="module"> | ||
| import 'https://esm.run/@dineug/erd-editor'; | ||
|
|
||
| const editor = document.createElement('erd-editor'); | ||
| document.body.appendChild(editor); | ||
| </script> | ||
| <!-- or | ||
| <script type="module" src="https://esm.run/@dineug/erd-editor"></script> | ||
| --> | ||
| </head> | ||
| <body> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,177 @@ | ||
| <!doctype html> | ||
| <html lang="en" class="dark-theme"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="color-scheme" content="light dark" /> | ||
| <title>Entity-Relationship Diagram Editor App</title> | ||
| <meta name="description" content="Entity-Relationship Diagram Editor App" /> | ||
| <meta name="keywords" content="erd editor, app, PWA, support, offline, real-time collaboration, encryption, local-first, autosave, browser, synchronization" /> | ||
| <meta name="application-name" content="ERD Editor" /> | ||
| <meta name="author" content="SeungHwan-Lee" /> | ||
| <meta name="generator" content="codemo" /> | ||
| <meta name="mobile-web-app-capable" content="yes"> | ||
| <!-- Theme color --> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <!-- Favicon --> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="https://gigamaster.github.io/codemo/asset/favicon/apple-touch-icon.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="https://gigamaster.github.io/codemo/asset/favicon/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="https://gigamaster.github.io/codemo/asset/favicon/favicon-16x16.png" /> | ||
| <link rel="manifest" href="https://gigamaster.github.io/codemo/asset/favicon/site.webmanifest" /> | ||
| <link rel="mask-icon" href="https://gigamaster.github.io/codemo/asset/favicon/safari-pinned-tab.svg" color="#5bbad5" /> | ||
| <link rel="shortcut icon" href="https://gigamaster.github.io/codemo/asset/favicon/favicon.ico" /> | ||
| <meta name="msapplication-TileColor" content="#111213" /> | ||
| <meta name="msapplication-config" content="https://gigamaster.github.io/codemo/asset/favicon/browserconfig.xml" /> | ||
| <script type="speculationrules"> | ||
| { | ||
| "prefetch": [ | ||
| { | ||
| "source": "list", | ||
| "urls": [ | ||
| "erd-editor.html", | ||
| "css/style.css", | ||
| "https://esm.run/@dineug/erd-editor" | ||
| ], | ||
| "eagerness": "immediate" | ||
| } | ||
| ] | ||
| } | ||
| </script> | ||
| <meta http-equiv="refresh" content="4;url=./erd-editor.html" /> | ||
| <style> | ||
| body { | ||
| background: radial-gradient(circle at 50% 100%, #262b2f, #000); | ||
| color: #abc; | ||
| display: flex; | ||
| flex-direction: column; | ||
| font: normal 16px/1.5 system-ui, sans-serif; | ||
| height: 100vh; | ||
| margin: 0; | ||
| overflow: hidden; | ||
| padding: 0; | ||
| place-content: center; | ||
| place-items: center; | ||
| width: 100vw; | ||
| } | ||
| a, a:visited, a:hover {text-decoration:none; color:inherit} | ||
| nav { | ||
| background: #111; | ||
| border-bottom:1px solid #fff2; | ||
| box-shadow:0px 1px 15px 10px #172e4f; | ||
| font-size: 1.5rem; | ||
| padding:.25em 1em; | ||
| position:fixed; | ||
| top:0; | ||
| left:0; | ||
| width:100vw; | ||
| min-height:2rem; | ||
| z-index:1; | ||
| } | ||
| svg {margin-right:.5rem;vertical-align: -.175em;} | ||
| .title { | ||
| background-image: conic-gradient(at 92% 8%,hsl(210, 20%, 45%) 90deg,transparent 0 225deg,transparent); | ||
| background-size: 15px 15px; | ||
| position: fixed; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 33%; | ||
| left: 50%; | ||
| transform: translate(-50%, -33%); | ||
| } | ||
| .title>h1 { | ||
| position: relative; | ||
| color: rgb(37, 45, 55); | ||
| font-size: 20vh; | ||
| letter-spacing: .175em; | ||
| text-align:center; | ||
| text-shadow: rgb(20, 24, 30) 12px 12px 0px; | ||
| text-transform: uppercase;user-select: none; | ||
| pointer-events: none; | ||
| } | ||
| .top { | ||
| overflow: hidden; | ||
| max-height: 25rem; | ||
| transition: var(--tr); | ||
| position: relative; | ||
| animation: show-toast 4s ease 3s 1; | ||
| } | ||
| .card { | ||
| background: linear-gradient(90deg, #1f233347, #22232b47); | ||
| border-radius: 0.5rem; | ||
| border: 0.15rem solid #fff2; | ||
| box-shadow: inset 0 0 0.5rem 0 #1d1e26; | ||
| backdrop-filter: blur(5px); | ||
| -webkit-backdrop-filter: blur(5px); | ||
| color: #f5f5f5; | ||
| font-weight: 300; | ||
| text-align: center; | ||
| margin: 1rem 0; | ||
| padding: 1rem 2rem; | ||
| position: relative; | ||
| max-width: 15rem; | ||
| transition: all 0.5s ease 0s; | ||
| opacity: 1; | ||
| } | ||
| .card:before { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 7rem; | ||
| height: 10rem; | ||
| bottom: -0.15rem; | ||
| left: -0.15rem; | ||
| border-radius: 0.35rem; | ||
| background: radial-gradient(circle at 0% 50%, #0070e0, #fff0 5rem), | ||
| radial-gradient(circle at -50% 50%, #05478a, #fff0 5rem); | ||
| opacity: 0.5; | ||
| z-index: 0; | ||
| } | ||
| .card h3 {margin:0;font-size: 2rem;letter-spacing: 2px;} | ||
| .card p {margin:0 0 .5rem;} | ||
| .loading{ | ||
| background: #1119; | ||
| border-radius: .5rem; | ||
| margin: 0 -1rem; | ||
| padding: .5rem; | ||
| } | ||
| .loading:after { | ||
| content: ' .'; | ||
| animation: dots 1s steps(5, end) infinite; | ||
| } | ||
| @keyframes dots { | ||
| 0%, 20% { | ||
| color: rgba(0,0,0,0); | ||
| text-shadow: | ||
| .25em 0 0 rgba(0,0,0,0), | ||
| .5em 0 0 rgba(0,0,0,0);} | ||
| 40% { | ||
| color: white; | ||
| text-shadow: | ||
| .25em 0 0 rgba(0,0,0,0), | ||
| .5em 0 0 rgba(0,0,0,0);} | ||
| 60% { | ||
| text-shadow: | ||
| .25em 0 0 white, | ||
| .5em 0 0 rgba(0,0,0,0);} | ||
| 80%, 100% { | ||
| text-shadow: | ||
| .25em 0 0 white, | ||
| .5em 0 0 white;} | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <nav><a href="https://gigamaster.github.io/codemo/"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0h-.079c-1.66 0-3.239.349-4.667.978l.074-.029A12.269 12.269 0 0 0 3.52 3.523A12.219 12.219 0 0 0 .978 7.251l-.031.079A11.398 11.398 0 0 0 0 11.919v.086v-.004v.079c0 1.66.349 3.239.978 4.667l-.029-.074a12.276 12.276 0 0 0 2.572 3.807a12.224 12.224 0 0 0 3.729 2.542l.079.031c1.354.6 2.933.949 4.593.949h.083h-.004h.079c1.66 0 3.239-.349 4.667-.978l-.074.029a12.276 12.276 0 0 0 3.809-2.573a12.219 12.219 0 0 0 2.542-3.728l.031-.079c.6-1.354.949-2.932.949-4.593v-.158c0-1.66-.349-3.239-.978-4.667l.029.074a12.286 12.286 0 0 0-2.573-3.806A12.219 12.219 0 0 0 16.754.981L16.675.95C15.321.35 13.741 0 12.08 0h-.083zm.64 22.79v-2.087l5.193-2.633a.421.421 0 0 0 .154-.129l.001-.001a.335.335 0 0 0 .059-.191v-.011v.001v-1.186c.225-.082.412-.226.543-.412l.002-.004c.133-.179.214-.404.214-.648v-.118a1.146 1.146 0 0 0-.366-.746l-.001-.001a1.09 1.09 0 0 0-.75-.297h-.022h.001h-.02c-.308 0-.587.127-.786.332c-.205.2-.332.478-.332.787v.021v-.001v.059c.002.03.011.057.024.081v-.001c.013.222.096.423.227.583l-.001-.002c.133.163.304.289.501.364l.008.003v.949l-4.649 2.372v-1.942l2.039-.949a.533.533 0 0 0 .166-.13l.001-.001a.3.3 0 0 0 .071-.194v-3.233l3.793-2.134a.318.318 0 0 0 .142-.141l.001-.002a.407.407 0 0 0 .047-.189v-.901c.223-.079.409-.218.543-.397l.002-.003c.133-.177.214-.401.214-.644v-.04c0-.308-.127-.587-.332-.786a1.066 1.066 0 0 0-.775-.332H18.4a1.082 1.082 0 0 0-.71.366l-.001.001a1.113 1.113 0 0 0-.285.746v.025v-.001v.02c0 .243.08.466.216.646l-.002-.003c.137.182.322.321.538.397l.008.003v.688l-3.818 2.134a.51.51 0 0 0-.129.129l-.001.002a.338.338 0 0 0-.055.184v.017v-.001v3.2l-1.52.711v-6.972l3.2-1.566a.379.379 0 0 0 .153-.141l.001-.002a.347.347 0 0 0 .059-.189V7.04c.223-.079.409-.218.543-.397l.002-.003c.133-.177.214-.401.214-.644v-.021v.001v-.061a.078.078 0 0 0-.024-.057a1.127 1.127 0 0 0-.366-.719l-.001-.001a1.06 1.06 0 0 0-.738-.297h-.128a1.108 1.108 0 0 0-.719.378l-.001.001a1.103 1.103 0 0 0-.297.754v.123c.032.227.12.428.251.596l-.002-.003c.127.167.301.291.502.354l.007.002v.972l-2.656 1.304V5.288c.225-.082.412-.226.543-.412l.002-.004c.133-.179.214-.404.214-.648V4.2c0-.308-.127-.587-.332-.786a1.095 1.095 0 0 0-.787-.332h-.021h.001h-.02c-.308 0-.587.127-.786.332c-.205.2-.332.478-.332.787v.021v-.001v.118c.03.223.119.421.25.583l-.002-.002c.133.163.304.289.501.364l.008.003v6.569l-1.874-.996V7.865a.292.292 0 0 0-.048-.16l.001.001a.87.87 0 0 0-.095-.119l-1.306-.998a.825.825 0 0 0 .07-.196l.001-.006c.015-.067.024-.143.024-.222v-.024c0-.308-.127-.587-.332-.786a1.097 1.097 0 0 0-.786-.331H7.52h.001h-.02c-.308 0-.587.127-.786.332c-.205.2-.332.478-.332.787v.021v-.001v.024c0 .305.125.581.326.78c.2.205.478.332.787.332h.021h-.001h.015a.858.858 0 0 0 .288-.049l-.006.002c.11-.041.2-.081.287-.125l-.015.007l1.162.925v3.035a.29.29 0 0 0 .06.178l-.001-.001a.42.42 0 0 0 .152.129l.002.001l2.419 1.28V15.1l-4.055-1.874l.071-1.47v-.024a.29.29 0 0 0-.06-.178l.001.001a.42.42 0 0 0-.152-.129l-.002-.001l-1.851-.97a.522.522 0 0 0 .024-.157v-.2a1.127 1.127 0 0 0-.366-.719l-.001-.001a1.093 1.093 0 0 0-.752-.299h-.018h.001h-.007c-.305 0-.58.127-.775.332c-.208.2-.338.481-.338.792v.015v-.001v.118c.029.285.164.534.366.71l.001.001c.193.177.451.285.735.285h.131a1.45 1.45 0 0 0 .33-.083l-.01.003c.104-.04.195-.092.275-.156l-.002.002l1.707.88l-.047 1.47v.008c0 .075.017.145.048.208l-.001-.003a.305.305 0 0 0 .164.142l.002.001l4.577 2.134v6.869q-.308 0-.605-.024l-.605-.047l.071-4.364a.349.349 0 0 0-.06-.191l.001.001a.364.364 0 0 0-.175-.142l-.002-.001l-2.87-1.328v-.125c0-.305-.127-.58-.332-.775a1.095 1.095 0 0 0-.787-.332H6.49h.001h-.114a1.082 1.082 0 0 0-.71.366l-.001.001a1.113 1.113 0 0 0-.285.746v.025v-.001v.007c0 .305.127.58.332.775c.195.205.47.332.775.332h.039c.156 0 .305-.033.439-.094l-.007.003c.14-.067.261-.147.369-.242l-.002.002l2.656 1.21v4.008a10.611 10.611 0 0 1-3.534-1.343l.048.027a10.85 10.85 0 0 1-2.773-2.354l-.014-.017a11.1 11.1 0 0 1-1.824-3.112l-.026-.076a10.267 10.267 0 0 1-.676-3.699v-.111c0-1.494.314-2.915.88-4.201l-.026.067a11.06 11.06 0 0 1 2.324-3.44A11.019 11.019 0 0 1 7.73 2.065l.071-.028a10.269 10.269 0 0 1 4.139-.856h.061h-.003h.064c1.494 0 2.915.314 4.201.88l-.067-.026a11.078 11.078 0 0 1 3.44 2.32a11 11 0 0 1 2.296 3.369l.028.071c.54 1.218.854 2.639.854 4.134v.067v-.003v.064c0 1.444-.292 2.82-.82 4.072l.026-.069a11.1 11.1 0 0 1-2.175 3.373l.005-.006a10.852 10.852 0 0 1-3.172 2.32l-.065.028c-1.16.568-2.516.932-3.948 1.009l-.026.001z"></path></svg> | ||
| Codemo</a></nav> | ||
| <div class="title"><h1>Web Design</h1></div> | ||
| <div class="top"> | ||
| <a href="editor.html"> | ||
| <div class="card"> | ||
| <h3>ERD Editor</h3> | ||
| <p>Entity-Relationship Diagram Editor</p> | ||
| <p class="loading">Loading </p> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </body> | ||
| </html> |