Add ENV File support (#10)

README.md

@@ -32,7 +32,7 @@
 
 ## Features
 
-- Environment variable-based configuration
+- Environment variable-based configuration (Support .env file)
 - Support for A, CNAME, MX, and TXT records
 - Docker service name resolution
 - Optional TTL configuration (default: 60 seconds)
@@ -166,10 +166,11 @@ docker run -d \
   --name nanodns \
   -p 10053:10053/udp \
   -e DNS_PORT=10053 \
-  -e DNS_RELAY_SERVERS=8.8.8.8:53,1.1.1.1:53 \  # Optional relay configuration
+  -e DNS_RELAY_SERVERS=8.8.8.8:53,1.1.1.1:53 \
   -e "A_REC1=app.example.com|10.10.0.1|300" \
   -e "A_REC2=api.example.com|service:webapp" \
   -e "TXT_REC1=example.com|v=spf1 include:_spf.example.com ~all" \
+  -v ${PWD}/.env:/app/.env \
   ghcr.io/mguptahub/nanodns:latest
 ```
 
@@ -191,6 +192,8 @@ services:
       - TXT_REC1=example.com|v=spf1 include:_spf.example.com ~all
     ports:
       - "${DNS_PORT:-10053}:${DNS_PORT:-10053}/udp"
+    volumes:
+      - ./.env:/app/.env
     networks:
       - app_network
 

docs/assets/css/mobile.css

@@ -0,0 +1,226 @@
+@media (max-width: 768px) {
+    .markdown-body h1{
+        font-size: x-large !important;
+    }
+    .navbar {
+        padding: 0.5rem;
+    }
+
+    .nav-content {
+        padding: 0.5rem;
+    }
+
+    .nav-logo img {
+        height: 32px; /* Slightly smaller logo */
+    }
+
+    .nav-links {
+        gap: 0.75rem;
+    }
+
+    /* Hide text, show only icons for nav items */
+    .nav-link span {
+        display: none;
+    }
+
+    .nav-link {
+        font-size: 1.2rem;
+        padding: 0.5rem;
+    }
+
+    .hero {
+        padding: 5rem 1rem 3rem;
+    }
+
+    .hero-description {
+        font-size: 0.95rem;
+        line-height: 1.6;
+        padding: 0 1rem;
+    }
+
+    .main-logo {
+        width: 140px; /* Slightly smaller logo */
+        margin-bottom: 1.5rem;
+    }
+
+    .hero-features {
+        display: flex;
+        flex-direction: row; /* Keep horizontal on tablets */
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        margin: 1.5rem 0;
+    }
+
+    .hero-features span {
+        font-size: 0.85rem;
+        padding: 0.5rem 1rem;
+        background: rgba(74, 108, 247, 0.08);
+        border: 1px solid rgba(74, 108, 247, 0.15);
+        border-radius: 1.5rem;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .hero-features i {
+        font-size: 0.85rem;
+    }
+
+
+    .buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .btn {
+        font-size: 0.9rem;
+        padding: 0.7rem 1.2rem;
+    }
+
+    .badges {
+        padding: 0.75rem;
+        gap: 0.4rem;
+    }
+
+    .badges img {
+        height: 20px; /* Adjust badge size */
+    }
+
+    .feature-card {
+        padding: 1.5rem;
+    }
+
+    .feature-card h3 {
+        font-size: 1.1rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .feature-card p {
+        font-size: 0.9rem;
+    }
+
+    .tab-buttons {
+        padding: 0.5rem;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+
+    .modal-content {
+        padding: 1.25rem;
+        font-size: 0.8rem;
+        line-height: 1.5;
+        max-width: 100%;
+    }
+
+}
+
+@media (max-width: 480px) {
+
+    .navbar {
+        padding: 0.25rem;
+    }
+
+    .nav-content {
+        padding: 0.25rem;
+    }
+
+    .nav-links {
+        gap: 0.5rem;
+    }
+
+    .nav-logo img {
+        height: 28px;
+    }
+
+    .hero {
+        padding: 4rem 0.75rem 2rem;
+    }
+
+    .hero-description {
+        font-size: 0.9rem;
+        padding: 0 0.75rem;
+    }
+
+    .main-logo {
+        width: 120px;
+        margin-bottom: 1rem;
+    }
+
+    .hero-content {
+        padding: 0 1rem;
+    }
+
+    .hero-features {
+        padding: 0 0.5rem;
+        gap: 0.5rem;
+    }
+
+    .hero-features span {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
+
+    .hero-features i {
+        font-size: 0.8rem;
+    }
+
+    .badges {
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+        width: 100%;
+    }
+
+    .tab-buttons {
+        overflow-x: scroll;
+    }
+
+    .btn {
+        font-size: 0.85rem;
+        padding: 0.6rem 1rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .feature-card {
+        padding: 1.25rem;
+    }
+
+    .feature-card h3 {
+        font-size: 1rem;
+    }
+
+    .feature-card p {
+        font-size: 0.85rem;
+    }
+}
+
+@media (max-width: 360px) {
+    .nav-links {
+        gap: 0.25rem;
+    }
+
+    .nav-link {
+        padding: 0.4rem;
+        font-size: 1.1rem;
+    }
+    .hero-description {
+        font-size: 1rem;
+    }
+
+    .feature-card h3 {
+        font-size: 1.2rem;
+    }
+
+    .feature-card p {
+        font-size: 0.95rem;
+    }
+}