8
8
9
9
<meta name =" viewport" content =" width=device-width, initial-scale=1" />
10
10
<meta property =" og:title" content =" SQLPage: SQL websites" />
11
- <meta name =" description" content =" Build interactive websites and apps with only SQL queries. SQLPage is an open-source tool to generate nice user interfaces on top of traditional databases. Maps, charts, tables, forms, and dashboards - without traditional web programming." />
11
+ <meta name =" description"
12
+ content =" Build interactive websites and apps with only SQL queries. SQLPage is an open-source tool to generate nice user interfaces on top of traditional databases. Maps, charts, tables, forms, and dashboards - without traditional web programming." />
12
13
<meta property =" og:description" content =" Build interactive websites with only SQL queries." />
13
14
<meta property =" og:image" content =" /sqlpage_social_preview.webp" />
14
15
<meta name =" twitter:image" content =" /sqlpage_social_preview.webp" />
347
348
transition : all 0.5s cubic-bezier (0.175 , 0.885 , 0.32 , 1.275 );
348
349
}
349
350
350
- p :hover {
351
- color : #fff ;
352
- }
353
-
354
351
/* RESPONSIVE ADJUSTMENTS */
355
352
@media (max-width : 900px ) {
356
353
:root {
454
451
.menu a :hover {
455
452
color : rgba (255 , 255 , 255 , 0.9 );
456
453
opacity : 1 ;
454
+ text-decoration : none ;
457
455
}
458
456
459
457
.menu a ::after {
594
592
}
595
593
596
594
@keyframes bounce {
597
- 0% , 20% , 50% , 80% , 100% {
595
+
596
+ 0% ,
597
+ 20% ,
598
+ 50% ,
599
+ 80% ,
600
+ 100% {
598
601
transform : translateX (-50% ) translateY (0 );
599
602
}
603
+
600
604
40% {
601
605
transform : translateX (-50% ) translateY (-6px );
602
606
}
607
+
603
608
60% {
604
609
transform : translateX (-50% ) translateY (-3px );
605
610
}
941
946
text-decoration : none ;
942
947
border-bottom : 1px dotted currentColor ;
943
948
}
949
+
950
+ a {
951
+ color : #f3f3fa ;
952
+ text-decoration : none ;
953
+ opacity : 0.92 ;
954
+ font-weight : 500 ;
955
+ transition : color 0.2s , opacity 0.2s , text-decoration 0.2s ;
956
+ }
957
+
958
+ a :hover {
959
+ opacity : 1 ;
960
+ color : #fff ;
961
+ text-decoration : underline ;
962
+ text-underline-offset : 2px ;
963
+ text-decoration-thickness : 1.5px ;
964
+ }
944
965
</style >
945
966
</head >
946
967
968
989
Plots</span ><span >
969
990
APIs</span ></span >
970
991
</h1 >
971
- <p >SQL websites: simple and open-source database app builder .</p >
992
+ <p >Instant web interfaces for your database. Free and open-source .</p >
972
993
<a href =" https://editor.datapage.app" class =" cta-button" >Try Online</a >
973
994
</div >
974
995
</div >
989
1010
<div class =" feature-card" >
990
1011
<div class =" feature-icon" >📈</div >
991
1012
<h3 >Complete</h3 >
992
- <p >Create navigatable interfaces with maps, charts, tables, forms, grids, dashboards, and more.
993
- Batteries included.</p >
1013
+ <p >Create navigatable interfaces with
1014
+ <a href =" /component.sql?component=map" >maps</a >,
1015
+ <a href =" /component.sql?component=chart" >charts</a >,
1016
+ <a href =" /component.sql?component=table" >tables</a >,
1017
+ <a href =" /component.sql?component=form" >forms</a >,
1018
+ <a href =" /component.sql?component=card" >grids</a >,
1019
+ <a href =" /component.sql?component=big_number" >dashboards</a >, and more.
1020
+ Batteries included.
1021
+ </p >
994
1022
</div >
995
1023
<div class =" feature-card" >
996
1024
<div class =" feature-icon" >⚡</div >
997
1025
<h3 >Fast</h3 >
998
- <p >Build fast applications, quickly.
999
- Everything loads instantly, because the technology is simple and razor-sharp.</p >
1026
+ <p >Build fast applications, quickly. You spend one afternoon building your first app. Then it
1027
+ <a href =" /performance" >loads instantly</a > for everyone forever.
1028
+ </p >
1000
1029
</div >
1001
1030
<div class =" feature-card" >
1002
1031
<div class =" feature-icon" >🎯</div >
1003
1032
<h3 >Easy</h3 >
1004
1033
<p >You can teach yourself enough <i >SQL</i > to query and edit a database through SQLPage in a
1005
- weekend. Focus on your data, we'll handle the rest.</p >
1034
+ weekend. Focus on your data, we'll handle <a href =" /performance" >optimizations</a > and <a
1035
+ href =" /safety" >security</a >.</p >
1006
1036
</div >
1007
1037
</div >
1008
1038
</div >
1013
1043
<div class =" feature-content" >
1014
1044
<h2 class =" gradient-title" >More scalable than a spreadsheet</h2 >
1015
1045
<p >SQL queries sort, filter, and aggregate millions of rows in milliseconds. No more slow spreadsheet
1016
- formulas or memory limitations. Your app remains smooth and responsive even as your data grows.</p >
1046
+ formulas or memory limitations. Your app remains <a href =" /performance" >smooth and responsive</a >
1047
+ even
1048
+ as your data grows.</p >
1017
1049
</div >
1018
1050
<div class =" feature-image" >
1019
1051
<video src =" /assets/screenshots/big_tables.webm" alt =" SQLPage displaying large tables" width =" 600"
1121
1153
</footer >
1122
1154
</body >
1123
1155
1124
- </html >
1156
+ </html >
0 commit comments