tools/index.html at main · dsaikiran01/tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DevOps Tools</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: system-ui, sans-serif;
      background: #f7f7f7;
      color: #222;
    }

    header {
      padding: 2rem;
      text-align: center;
      background: #222;
      color: #fff;
    }

    h1 {
      margin: 0;
      font-size: 2.2rem;
      font-weight: 600;
    }

    p.subtitle {
      margin-top: 0.6rem;
      opacity: 0.85;
    }

    .container {
      max-width: 900px;
      margin: 2.5rem auto;
      padding: 0 1rem;
    }

    .tool-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1.5rem;
    }

    .tool-card {
      background: #fff;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      transition: transform 0.1s ease, box-shadow 0.15s ease;
      cursor: pointer;
    }

    .tool-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .tool-title {
      font-size: 1.2rem;
      margin-bottom: 0.4rem;
      font-weight: 600;
    }

    .tool-desc {
      font-size: 0.95rem;
      opacity: 0.75;
      line-height: 1.4;
    }

    footer {
      text-align: center;
      padding: 2rem;
      color: #666;
      font-size: 0.9rem;
    }
  </style>
</head>

<body>
  <header>
    <h1>DevOps Toolbox</h1>
    <p class="subtitle">A simple, growing collection of tools for quick format conversions</p>
  </header>

  <div class="container">
    <div class="tool-grid">
      <div class="tool-card" onclick="location.href='./json2yaml.html'">
        <div class="tool-title">JSON → YAML</div>
        <div class="tool-desc">Instantly turn JSON into clean, readable YAML.</div>
      </div>

      <div class="tool-card" onclick="location.href='./json2toml.html'">
        <div class="tool-title">JSON → TOML</div>
        <div class="tool-desc">Convert JSON objects into TOML configuration format.</div>
      </div>

      <div class="tool-card" onclick="location.href='./yaml2json.html'">
        <div class="tool-title">YAML → JSON</div>
        <div class="tool-desc">Convert YAML documents into structured JSON.</div>
      </div>

      <div class="tool-card" onclick="location.href='./yaml2toml.html'">
        <div class="tool-title">YAML → TOML</div>
        <div class="tool-desc">Transform YAML configuration into the TOML format.</div>
      </div>

      <div class="tool-card" onclick="location.href='./toml2yaml.html'">
        <div class="tool-title">TOML → YAML</div>
        <div class="tool-desc">Convert TOML files back into YAML with ease.</div>
      </div>

      <div class="tool-card" onclick="location.href='./toml2json.html'">
        <div class="tool-title">TOML → JSON</div>
        <div class="tool-desc">Translate TOML content into standard JSON format.</div>
      </div>

      <div class="tool-card" onclick="alert('Placeholder for future tool')">
        <div class="tool-title">Coming Soon...</div>
        <div class="tool-desc">New DevOps utilities will appear here as the toolbox grows.</div>
      </div>
    </div>
  </div>

  <footer>© 2026 DevOps Toolbox — Fast, simple, and expanding</footer>
</body>

</html>