Skip to content

Commit 94cc6d4

Browse files
committed
Re-design page
1 parent 9d326e2 commit 94cc6d4

21 files changed

+14690
-11628
lines changed
392 KB
Binary file not shown.

dist/index.html

Lines changed: 61 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<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>
88
<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">
109
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9087401435839175" crossorigin="anonymous"></script>
1110
<!-- Global site tag (gtag.js) - Google Analytics -->
1211
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z93ZQ8Z1M6"></script>
@@ -17,60 +16,84 @@
1716

1817
gtag('config', 'G-Z93ZQ8Z1M6');
1918
</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>
2120
<body>
2221

2322
<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>
2526
<div class="hero-body">
2627
<div class="container has-text-centered">
2728
<h1 class="title">
28-
Convert Your Legacy SQL to Laravel Query Builder
29+
🚀 SQL to Laravel Query Builder
2930
</h1>
31+
<p class="subtitle">
32+
Transform your legacy SQL queries into elegant Laravel code instantly
33+
</p>
3034
</div>
3135
</div>
3236
</section>
33-
<div style="margin-left: 20px;">
34-
<a target="_blank" href="https://github.com/sql2builder/sql2builder.github.io">Github</a>
35-
</div>
3637

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>
4247

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>
4858

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>
6268

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>
7082
</div>
7183
</div>
7284
</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+
7391
</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+
7497
<input style="display: none;" id="base64sql"></input>
7598
</body>
7699
</html>

0 commit comments

Comments
 (0)