Skip to content

Commit 3a3b207

Browse files
codeSamuraiicodeSamuraii
committed
New mobile version
1 parent 6b0de8b commit 3a3b207

File tree

4 files changed

+572
-138
lines changed

4 files changed

+572
-138
lines changed

‎static/css/style.css‎

Lines changed: 254 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -430,27 +430,278 @@ code.inline-highlight {
430430
}
431431

432432
/* Responsive Design */
433+
434+
/* Tablet and small desktop */
435+
@media (max-width: 768px) {
436+
.container {
437+
max-width: 100%;
438+
padding: var(--space-md);
439+
}
440+
441+
.header {
442+
padding: var(--space-xl) 0;
443+
}
444+
445+
.code-section {
446+
padding: var(--space-md);
447+
}
448+
449+
.info-list {
450+
padding: var(--space-md);
451+
}
452+
}
453+
454+
/* Mobile devices */
433455
@media (max-width: 600px) {
456+
:root {
457+
--space-xs: 0.25rem;
458+
--space-sm: 0.375rem;
459+
--space-md: 0.75rem;
460+
--space-lg: 1rem;
461+
--space-xl: 1.5rem;
462+
--space-2xl: 2rem;
463+
}
464+
434465
.container {
435466
padding: var(--space-sm);
436467
}
437468

469+
.header {
470+
padding: var(--space-lg) 0;
471+
margin-bottom: var(--space-lg);
472+
}
473+
438474
.header h1 {
439-
font-size: 2rem;
475+
font-size: 1.75rem;
476+
margin-bottom: var(--space-xs);
477+
}
478+
479+
.header p {
480+
font-size: 0.95rem;
440481
}
441482

442483
.beta-badge {
443484
position: static;
444485
display: inline-block;
445486
margin-left: var(--space-sm);
446487
margin-top: var(--space-xs);
488+
font-size: 0.65rem;
489+
padding: 1px 4px;
490+
}
491+
492+
.beta-warning {
493+
padding: var(--space-sm);
494+
margin-top: var(--space-md);
495+
font-size: 0.85rem;
496+
}
497+
498+
.section {
499+
margin-bottom: var(--space-xl);
500+
}
501+
502+
.section h2 {
503+
font-size: 1.1rem;
504+
margin-bottom: var(--space-sm);
505+
}
506+
507+
.section p {
508+
font-size: 0.95rem;
509+
margin-bottom: var(--space-sm);
447510
}
448511

512+
/* Mobile-optimized transfer area */
449513
.transfer-container {
450-
min-height: 160px;
514+
min-height: 180px;
515+
margin-bottom: var(--space-lg);
516+
}
517+
518+
.drop-area {
519+
border-radius: var(--radius-md);
520+
padding: var(--space-lg);
521+
min-height: 180px;
522+
touch-action: none;
523+
}
524+
525+
.drop-area p {
526+
font-size: 1rem;
527+
padding: var(--space-md);
528+
line-height: 1.4;
529+
}
530+
531+
/* Make file input area larger for mobile touch */
532+
.drop-area::after {
533+
content: '';
534+
position: absolute;
535+
top: -10px;
536+
left: -10px;
537+
right: -10px;
538+
bottom: -10px;
539+
z-index: -1;
540+
}
541+
542+
.share-link {
543+
padding: var(--space-md);
544+
}
545+
546+
.share-link label {
547+
font-size: 0.95rem;
548+
}
549+
550+
.share-link input {
551+
padding: var(--space-md);
552+
font-size: 0.85rem;
553+
max-width: 100%;
554+
}
555+
556+
/* Progress bar mobile optimization */
557+
.upload-progress {
558+
margin-top: var(--space-md);
559+
}
560+
561+
.progress-info {
562+
margin-bottom: var(--space-xs);
563+
}
564+
565+
.status-text,
566+
.progress-text {
567+
font-size: 0.85rem;
568+
}
569+
570+
.progress-bar {
571+
height: 10px;
572+
}
573+
574+
/* Download page mobile */
575+
.download-container {
576+
padding: var(--space-md);
577+
}
578+
579+
.file-info p {
580+
font-size: 0.95rem;
581+
margin-bottom: var(--space-xs);
582+
}
583+
584+
.button-download {
585+
padding: var(--space-md) var(--space-lg);
586+
font-size: 1rem;
587+
width: 100%;
588+
display: block;
589+
text-align: center;
590+
touch-action: manipulation;
591+
}
592+
593+
/* Code sections mobile - hide cURL section */
594+
.code-section {
595+
display: none;
596+
}
597+
598+
.code-section h3 {
599+
font-size: 1rem;
600+
margin-bottom: var(--space-sm);
601+
}
602+
603+
.code-section p {
604+
font-size: 0.9rem;
451605
}
452606

453607
.code-block {
454-
font-size: 0.8rem;
608+
padding: var(--space-sm);
609+
font-size: 0.75rem;
610+
overflow-x: auto;
611+
-webkit-overflow-scrolling: touch;
612+
}
613+
614+
.code-block code {
615+
font-size: 0.75rem;
616+
}
617+
618+
code.inline-highlight {
619+
font-size: 0.85rem;
620+
padding: 0.05rem 0.3rem;
621+
}
622+
623+
/* Info list mobile */
624+
.info-list {
625+
padding: var(--space-md);
626+
}
627+
628+
.info-list h3 {
629+
font-size: 1rem;
630+
margin-bottom: var(--space-sm);
631+
}
632+
633+
.info-list li {
634+
padding-left: var(--space-md);
635+
margin-bottom: var(--space-sm);
636+
font-size: 0.9rem;
637+
}
638+
639+
/* Footer mobile */
640+
.footer {
641+
padding: var(--space-lg) 0;
642+
font-size: 0.85rem;
643+
}
644+
}
645+
646+
/* Extra small mobile devices */
647+
@media (max-width: 375px) {
648+
.header h1 {
649+
font-size: 1.5rem;
650+
}
651+
652+
.beta-badge {
653+
display: block;
654+
margin-left: 0;
655+
margin-top: var(--space-sm);
656+
width: fit-content;
657+
margin-inline: auto;
658+
}
659+
660+
.code-block {
661+
font-size: 0.7rem;
662+
}
663+
}
664+
665+
/* Mobile landscape orientation */
666+
@media (max-width: 900px) and (orientation: landscape) {
667+
.header {
668+
padding: var(--space-md) 0;
669+
}
670+
671+
.header h1 {
672+
font-size: 1.5rem;
673+
}
674+
675+
.transfer-container {
676+
min-height: 140px;
677+
}
678+
679+
.drop-area {
680+
min-height: 140px;
681+
}
682+
}
683+
684+
/* Touch device optimizations */
685+
@media (pointer: coarse) {
686+
.drop-area {
687+
cursor: default;
688+
}
689+
690+
.button-download,
691+
.drop-area {
692+
-webkit-tap-highlight-color: transparent;
693+
user-select: none;
694+
}
695+
696+
a {
697+
-webkit-tap-highlight-color: rgba(31, 111, 235, 0.2);
698+
}
699+
}
700+
701+
/* High DPI screens */
702+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
703+
.progress-bar {
704+
transform: translateZ(0);
705+
will-change: width;
455706
}
456707
}

‎static/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<h1><a href="/">Transit.sh</a><span class="beta-badge">Beta</span></h1>
2020
<p>Direct file transfer without intermediate storage</p>
2121
<div class="beta-warning">
22-
<strong>Notice:</strong> This service is in beta. If you encounter any bug, please report it <a href="https://github.com/codeSamuraii/transit.sh/issues">here</a>.<br>Sending files via mobile browsers is not supported yet.
22+
<strong>Notice:</strong> This service is in beta. If you encounter any bug, please report it <a href="https://github.com/codeSamuraii/transit.sh/issues">here</a>.
2323
</div>
2424
</header>
2525

@@ -29,14 +29,14 @@ <h2>Send a file</h2>
2929
<p>Drag and drop or select a file to generate a download link.</p>
3030

3131
<div class="transfer-container">
32-
<div id="drop-area" class="drop-area">
33-
<p>Drag and drop your file here, or click to select a file</p>
34-
<input type="file" id="file-input">
32+
<div id="drop-area" class="drop-area" role="button" aria-label="Select or drop a file">
33+
<p id="drop-area-text">Drag and drop your file here, or tap to select a file</p>
34+
<input type="file" id="file-input" aria-label="File input">
3535
</div>
3636

3737
<div id="share-link" class="share-link">
3838
<label for="share-url">Download link:</label>
39-
<input type="text" id="share-url" readonly>
39+
<input type="text" id="share-url" readonly aria-label="Share URL">
4040
</div>
4141
</div>
4242

@@ -95,6 +95,6 @@ <h3>Important Information</h3>
9595
</footer>
9696
</div>
9797

98-
<script src="/js/file-transfer.js"></script>
98+
<script src="/js/file-transfer.js" defer></script>
9999
</body>
100100
</html>

0 commit comments

Comments
 (0)