|
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
6 | 6 | <meta name="description" content="Convert SQL to Laravel query builder. Laravel where nested. laravel where in subquery. laravel join subquery."> |
7 | | - <title>SQL to Laravel Builder</title> |
| 7 | + <title>SQL to Laravel Builder - Modern Converter</title> |
8 | 8 | <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/fontawesome.min.css" rel="stylesheet"> |
9 | | - <link href="https://cdn.bootcss.com/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"> |
10 | 9 | <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9087401435839175" crossorigin="anonymous"></script> |
11 | 10 | <!-- Global site tag (gtag.js) - Google Analytics --> |
12 | 11 | <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z93ZQ8Z1M6"></script> |
|
17 | 16 |
|
18 | 17 | gtag('config', 'G-Z93ZQ8Z1M6'); |
19 | 18 | </script> |
20 | | -<script defer src="./runtime.35f123a73b3485c0b9dd.js"></script><script defer src="./npm.sqlparser-rs-wasm.6e8240a644fa80f21f0d.js"></script><script defer src="./main.e7f74785efff08762c6d.js"></script></head> |
| 19 | +<script defer src="./runtime.28f9d76ecce81db79fb4.js"></script><script defer src="./npm.style-loader.2b5582efd1e8a56ef249.js"></script><script defer src="./npm.css-loader.1902e369a489e15f21a3.js"></script><script defer src="./npm.sqlparser-rs-wasm.220701e23aafb3ef226e.js"></script><script defer src="./main.7345bcf7473005f07dec.js"></script></head> |
21 | 20 | <body> |
22 | 21 |
|
23 | 22 | <section class="hero is-primary is-small"> |
24 | | - |
| 23 | + <a target="_blank" href="https://github.com/sql2builder/sql2builder.github.io" class="github-link"> |
| 24 | + View on GitHub |
| 25 | + </a> |
25 | 26 | <div class="hero-body"> |
26 | 27 | <div class="container has-text-centered"> |
27 | 28 | <h1 class="title"> |
28 | | - Convert Your Legacy SQL to Laravel Query Builder |
| 29 | + 🚀 SQL to Laravel Query Builder |
29 | 30 | </h1> |
| 31 | + <p class="subtitle"> |
| 32 | + Transform your legacy SQL queries into elegant Laravel code instantly |
| 33 | + </p> |
30 | 34 | </div> |
31 | 35 | </div> |
32 | 36 | </section> |
33 | | -<div style="margin-left: 20px;"> |
34 | | - <a target="_blank" href="https://github.com/sql2builder/sql2builder.github.io">Github</a> |
35 | | -</div> |
36 | 37 |
|
37 | | -<div> |
38 | | - <div class="columns is-mobile is-centered"> |
39 | | - <div class="column is-two-thirds"> |
40 | | - <div class="content-area"> |
41 | | - <div class="box box-offset"> |
| 38 | +<div class="content-wrapper"> |
| 39 | + <!-- Converter Grid - Side by Side Layout --> |
| 40 | + <div class="converter-grid"> |
| 41 | + <!-- Input Section --> |
| 42 | + <div class="converter-card fade-in-up"> |
| 43 | + <div class="section-header"> |
| 44 | + <div class="section-icon">📝</div> |
| 45 | + <span>Input SQL Query</span> |
| 46 | + </div> |
42 | 47 |
|
43 | | - <div class="field"> |
44 | | - <div class="control"> |
45 | | - <textarea class="textarea" name="sql" rows="10" placeholder="Enter Your Sql" id="input"></textarea> |
46 | | - </div> |
47 | | - </div> |
| 48 | + <div class="textarea-wrapper"> |
| 49 | + <textarea class="textarea" name="sql" placeholder="-- Enter your SQL query here |
| 50 | +-- Example: |
| 51 | +SELECT users.name, orders.total |
| 52 | +FROM users |
| 53 | +INNER JOIN orders ON users.id = orders.user_id |
| 54 | +WHERE users.active = 1 |
| 55 | +ORDER BY orders.created_at DESC |
| 56 | +LIMIT 10" id="input"></textarea> |
| 57 | + </div> |
48 | 58 |
|
49 | | - <div class="level-left"> |
50 | | - <div class="level-item has-text-centered"> |
51 | | - <button class="button is-primary" id="convert-button"> |
52 | | - Convert |
53 | | - </button> |
54 | | - </div> |
55 | | - <div class="level-item has-text-centered"> |
56 | | - <button class="button" id="share-button"> |
57 | | - Share |
58 | | - </button> |
59 | | - </div> |
60 | | - </div> |
61 | | - </div> |
| 59 | + <div class="button-controls"> |
| 60 | + <button class="button is-primary" id="convert-button"> |
| 61 | + <span>✨ Convert to Laravel</span> |
| 62 | + </button> |
| 63 | + <button class="button is-secondary" id="share-button"> |
| 64 | + <span>🔗 Share Query</span> |
| 65 | + </button> |
| 66 | + </div> |
| 67 | + </div> |
62 | 68 |
|
63 | | - <div class="box box-offset"> |
64 | | - <div class="field"> |
65 | | - <div class="control"> |
66 | | - <textarea class="textarea" name="sql" rows="10" placeholder="Output" id="output"></textarea> |
67 | | - </div> |
68 | | - </div> |
69 | | - </div> |
| 69 | + <!-- Output Section --> |
| 70 | + <div class="converter-card fade-in-up"> |
| 71 | + <div class="section-header"> |
| 72 | + <div class="section-icon">💎</div> |
| 73 | + <span>Laravel Query Builder Output</span> |
| 74 | + </div> |
| 75 | + |
| 76 | + <div class="textarea-wrapper"> |
| 77 | + <button class="copy-button" id="copy-button" title="Copy to clipboard"> |
| 78 | + <span id="copy-icon">📋</span> |
| 79 | + <span id="copy-text">Copy</span> |
| 80 | + </button> |
| 81 | + <textarea class="textarea code-output" name="sql" placeholder="// Your Laravel query builder code will appear here..." id="output" readonly></textarea> |
70 | 82 | </div> |
71 | 83 | </div> |
72 | 84 | </div> |
| 85 | + |
| 86 | + <!-- Additional Info --> |
| 87 | + <div class="text-center text-muted mt-4"> |
| 88 | + <p>💡 Tip: Use the Share button to create a shareable link with your SQL query</p> |
| 89 | + </div> |
| 90 | + |
73 | 91 | </div> |
| 92 | + |
| 93 | +<footer class="modern-footer"> |
| 94 | + <p>Built with ❤️ for Laravel developers | <a href="https://github.com/sql2builder/sql2builder.github.io" target="_blank">Contribute on GitHub</a></p> |
| 95 | +</footer> |
| 96 | + |
74 | 97 | <input style="display: none;" id="base64sql"></input> |
75 | 98 | </body> |
76 | 99 | </html> |
0 commit comments